background does not show in netscape 7 or firefox but it does in IE and Opera!!

liunx · Jan 11, 2008

WWEIIRD!

I am fairly new to XHTML/CSS and I never came accross this problem. I am working on this small site and I am trying set left and right border of 5 pixels with a white background. It works in IE6 and Opera but it does not in Netscape 7 or Firefox.Is there a bug or is my css not properly set up? any suggestions are appreciated. Here is the site so you guys can see what im talking about.

<a class="postlink" href="http://www.hiphoptrendz.com/servmedical/index.php">http://www.hiphoptrendz.com/servmedical/index.php</a>

Also, Here is my CSS:

/* CSS Document */
body {
margin:0;
padding:0;
color:#000;
voice-family: "\"}\""; voice-family:inherit;
margin-top:10px;
background:#E7E6E2;
}

#container {
width: 700px;
padding: 0;
margin-left:auto;
margin-right:auto;
border:1px solid #ccc;
}

#encabezdo {
height:111px;
background-color:#990099;
}

#header {
font:10px bold "Trebuchet MS",Verdana,Arial,Sans-serif;
float:left;
width:700px;
background:#DAE0D2 url("/servmedical/images/bg.gif") repeat-x bottom;
line-height:normal;
}

#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#header li {
float:left;
background:url("/servmedical/images/norm_left.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a {
float:left;
display:block;
background:url("/servmedical/images/norm_right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#5C5C5C;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover {
color:#333;
}
#header #current {
background-image:url("/servmedical/images/norm_left_on.gif");
}
#header #current a {
background-image:url("/servmedical/images/norm_right_on.gif");
color:#3F91C5;
padding-bottom:5px;
}

#navbar {
text-align:left;
height:80px;
width:700px;
z-index:auto;
display:block;
background-color:#FFFFFF;
background-image:url("/servmedical/images/header.gif");
/*background-color:#4190C2;*/
}

#divbar {
height:30px;
background-image:url("/servmedical/images/divshadow.gif");
padding:0;
margin:0;
}

#middle {
position:relative;
width: 690px;
background-color:#fff;
padding: 0;
border-right: 5px solid #F0F0F0;
border-left: 5px solid #F0F0F0;

}

#left {
width:140px;
float:left;
}

#left h3 {
font:16px bold "Trebuchet MS",Verdana,Arial,Sans-serif;
color:#CFA336;
text-align:left;
}

#right {
width:540px;
padding:5px;
float:left;
}
#right p {
font:11px/1.8em "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
color:#666;
text-align:left;
}

#right h3 {
font: 18px "Gill Sans MT", Verdana, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
text-align:left;
color:#225D82;
}

#right img {
float:left;
margin: 0 20px 0 0;
border:8px solid #E7E6E2;
}

#footer {
background:#C4C4C4;
color: #333333;
border-top: 1px dotted #3B3B3B;
margin:0;
padding:0;
clear:both;
}

Thanks you guys!

it was a cache problem..fixed it..now my text comes out my left and right div on netscape and firefox...weird! arrrghhh!!!Try putting this :
<div id="clear"></div> just before you close the 'middle' div and then adding this :#clear {clear:both; height:1px; overflow:hidden; margin-top:-1px;} to the css.nice!! wow ..i never herd of that!! IT SURE WORKS! do you know why it is needed? Thanks!!!IE and Opera incorrectly expand a block element to contain any floated children. For an explanation of how floats are supposed to work, refer to my first post at the following topic: <a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=51576">http://www.webdeveloper.com/forum/showt ... adid=51576</a>

And what the W3C says: <a class="postlink" href="http://www.w3.org/TR/CSS21/visuren.html#floats">http://www.w3.org/TR/CSS21/visuren.html#floats</a>

background does not show in netscape 7 or firefox but it does in IE and Opera!!

liunx

Guest