View Full Version : CSS Help please


raja
10-08-2006, 04:35 AM
Hey Friends am working on a site with css and am constantly having this problem both with IE and FF. plzz some one help me plzz. Am enclosing both Live demo page and the zipped files of the site also. Plz some one help me plzz.

Heres My CSS :
body {
background-image: url(../images/background.gif);
background-repeat: repeat;
margin: 0px;
padding: 0px;
}
#topnav{
background-image: url(../images/topnav.jpg);
background-repeat: repeat-x;
width: 760px;
height: 25px;
}
#headder{
background-image: url(../images/Header.jpg);
background-repeat: no-repeat;
height: 267px;
width: 760px;
}
#middlenav{
background-image: url(../images/middlenav.jpg);
background-repeat: repeat-x;
height: 54px;
width: 760px;
}
#maincontentholder{
background-color: #99FF00;
width: 760px;
background-image: url(../images/maincontent.jpg);
background-repeat: repeat-y;
}
#wrapper {
width: 760px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #000000;
}
#leftcontent {
text-align: justify;
padding: 0px;
height: auto;
float: left;
width: 175px;
}
#rightcontent{
width: 585px;
float: right;
height: 100px;
}
.sideheading {
width: 173px;
font: normal bold 12px/12px Verdana, Arial, Helvetica, sans-serif;
color: #DBB25A;
background-color: #4C4129;
text-align: center;
border: 1px solid #BAA77F;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
}
.navbar {
height: 273px;
width: 175px;
background-color: #4C4129;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
.calendar1 {
width: 173px;
margin-top: 10px auto 10px auto;
border: 1px solid #66546C;
}
.main {
width: 173px;
border: 0;
}
.month {
background-color: #4C4129;
font: normal bold 12px verdana;
color: #DBB25A;
padding: 5px 0px 5px 0px;
border: 1px solid #BAA77F;
}

.daysofweek {
background-color: #000000;
font: bold 10px verdana;
color: #C5BDC8;
}

.days {
font-size: 9px;
font-family: verdana;
color: #FFFFFF;
background-color: #999966;
padding: 2px;
}

.days #today{
font-weight: bold;
color: #ff0000;
}
#sidecontent {
z-index: 2;
width: 173px;
height: 200px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
border: 1px solid #DBB25A;
}
.shoutcontainer {
z-index: 2;
width: 173px;
height: 100px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
border: 1px solid #DBB25A;
}
.centernav {
width: 740px;
font-weight: normal;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 5px;
background-color: #53452B;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.maintext{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #DBB25A;
}


Here is the Live Demo of the page :
Live Demo (http://www.raja.supersoftz.com/rajaprob/rajaprobe.htm)

Here the zip file:

Zipped Up Files (http://www.raja.supersoftz.com/rajaprob.zip)


ps: Since this post exceeds 17622 characters am posting my Html in the following post. please see my HTML please and help me fix this problem plzz.

Arwen
10-08-2006, 06:20 PM
Are you talking about your horizontal menu? If yes, try adding float: left; to it.

Nightgraue
10-08-2006, 07:08 PM
Are the url('urlname') missing on purpose? But never mind.

I think I had the same problem once. I solved it this way:

I used the mentioned float:left; for the navigation menue on the left site. For the content-div on the right, I used margin-left: (Here I used the width of the navigation plus some extra pixels)px; to position it right of the navigation-menue. So if the navigation had a width of 200 px, I would use margin-left: 210px; for example.

Also controll the width of your content-div. Sometimes it is to large and that pushes the div to the bottom.

My solution works for all browsers. If it helps you to understand take a look at the HTML and CSS of my site: link removed