100% Width Div Issue...

[iamjordanne]

Okay-- I suspect this is some simple something... but for the life of me I cannot figure out why my #topwide div will not extend 100% of the browser width on some browsers. It works in IE6 and modern browsers, but IE7, IE8, older firefoxes... not extending. If I take position:relative off of it, it throws the floating div above it.

You can see the site at: www.concordjc.org/mops

Here is the CSS:

[CODE]
@charset "utf-8";
/* CSS Document */

html, body {
margin: 0;
padding: 0;
}

body {
background-image:url(images/whitebg.png);
background-color: #fff;
margin: 0 auto;
padding: 0;
font-family:"Lucida Sans", "Lucida Grande", sans-serif;
color: #555;

}

#topwide {
margin: 0;
padding: 0;
width: 100%;
background-image:url(images/yellowbg.png);
background-repeat:repeat-x;
height: 398px;
z-index: 50;
position: relative;


}

#header {
background-image:url(images/prettyyellow.png);
background-repeat:no-repeat;
width: 1100px;
height: 400px;
margin: 0 auto;
z-index: 999;
position: relative;
margin: 0 auto;

}

#maincontent {
margin: 0 auto;
width: 1000px;
padding: 0;
text-align: left;
}

#leftside {
width: 650px;
float: left;
padding-right: 20px;
}

#rightside {
width: 300px;
float: left;
padding-left: 10px;
}

#gridpost {
width: 200px;
height: 200px;
border: solid #eee2a1 6px;
padding: 5px;
margin: 8px;
float: left;
}

#footer {
background-image:url(images/yellowfooter.png);
background-repeat: repeat-x;
width: 100%;
height: 50px;
padding-top: 17px;
margin-top: 20px;
margin-bottom: 0px;
padding-bottom: 0px;
text-align: center;
}


img.JCMOPS {border: 0;
float: right;
margin-right: 80px;
position: relative;
z-index: 800;
}

#whatis {width: 700px;
position: absolute;
left: 260px;
top: 120px;
z-index: 700;
}

p.whatis {
font-family:"Lucida Sans", "Lucida Grande", sans-serif;
color: #555;
font-size: 14px;
line-height: 16px;
padding-left: 20px;
padding-bottom: 0px;
margin-bottom: 5px;
padding-top: 5px;


}

a.learnmore {font-family:"Lucida Sans", "Lucida Grande", sans-serif;
color: #3e737b;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
float: right;
margin-top: -5px;
padding: 0;
}

a:hover.learnmore {font-family:"Lucida Sans", "Lucida Grande", sans-serif;
color: #3e737b;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
float: right;
margin-top: -5px;
padding: 0;
}

ul {margin-top: 0px;
padding-top: 0px;
}

li {margin-top: 0px;
padding-top: 0px;
}
/* Nav */

ul.menu#menu-header-menu{
float: left;
margin-top: 18px;
margin-left: 40px;
padding: 0;
}
li.menu-item{
display: inline;
float: left;
padding-left: 12px;
padding-right: 12px;
padding-top: 0px;
margin-top: 10px;

}

.menu-item a {
font-family:"Lucida Sans", "Lucida Grande", sans-serif;
color: #b42e44;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
font-variant: normal;
font-weight: bold;
}

.menu-item a:visited {
font-family:"Lucida Sans", "Lucida Grande", sans-serif;
color: #b42e44;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
font-variant: normal;
font-weight: bold;
}

.menu-item a:active {
font-family:"Lucida Sans", "Lucida Grande", sans-serif;
color: #b42e44;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
font-variant: normal;
font-weight: bold;
}
.menu-item a:hover {
font-family:"Lucida Sans", "Lucida Grande", sans-serif;
color: #e5c969;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
font-variant: normal;


}

.menu-item.current-menu-item a {
font-family:"Lucida Sans", "Lucida Grande", sans-serif;
color: #e5c969;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
font-variant: normal;
font-weight: bold;
}

h1 {
font-family:"Lucida Sans", "Lucida Grande", sans-serif;
color: #b42e44;
font-size: 22px;
font-weight: normal;
margin-bottom: 0px;

}

h1.frontpage {
padding-left: 10px;
}

h2 {
font-family:"Lucida Sans", "Lucida Grande", sans-serif;
color: #b42e44;
font-size: 18px;
font-weight: normal;
padding-bottom: 5px;
margin: 0px;

}

h3 {
font-family:"Lucida Sans", "Lucida Grande", sans-serif;
color: #555;
font-size: 18px;
font-weight: normal;
padding-bottom: 0px;

}

h4 {
font-family:"Lucida Sans", "Lucida Grande", sans-serif;
color: #555;
font-size: 14px;
font-weight: normal;
padding-bottom: 5px;
padding-top: 10px;

}

p {font-family:"Lucida Sans", "Lucida Grande", sans-serif;
color: #555;
font-size: 12px;
line-height: 16px;
margin-top: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 10px;
}

p.sidebar {font-family:"Lucida Sans", "Lucida Grande", sans-serif;
color: #555;
font-size: 12px;
line-height: 16px;
margin-top: 10px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 20px;
}

a {font-family:"Lucida Sans", "Lucida Grande", sans-serif;
color: #3e737b;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
}

a:hover {
font-family:"Lucida Sans", "Lucida Grande", sans-serif;
color: #e5c969;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
}

a:active { font-family:"Lucida Sans", "Lucida Grande", sans-serif;
color: #e5c969;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
}

a:visited {font-family:"Lucida Sans", "Lucida Grande", sans-serif;
color: #3e737b;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
}

#searchsubmit, #submit, .button{
background: #fff;
margin-top: 3px;
padding: 4px;
font-family: "Lucida Sans", "Lucida Grande", sans-serif;
color: #555;
font-size: 13px;
border: #e5c969 solid 1px;
text-align: center;


}

small {
font-size: 10px;
}

#searchform label {
position:absolute;
top:-1500px;
left:-1500px;
}
[CODE]

[teedoff]

No need to post code if you provide alink to your site.

I'm not seeing your issue at all in IE8, which is one version you said was giving you trouble?

[iamjordanne]

Browserlab is showing the problem in Firefox 4.0, 5.0 and IE 7,8, and 9....

On the top where the header is, I don't want white on the sides-- just the yellow background.

[alykins]

Browserlab is showing the problem in Firefox 4.0, 5.0 and IE 7,8, and 9....

On the top where the header is, I don't want white on the sides-- just the yellow background.

i just checked chrome, FF, IE7,8,&9 and no problem... clear your cache and check again. If it IS there still... can you screen shot is and circle it in red or something to clarify?

[iamjordanne]

I did that and still same thing... but I'm pretty excited you are telling me differently.

[alykins]

I even zoomed out to 10% for chrome IE7, IE8, IE9... SS is from IE9

[iamjordanne]

Well, awesome then. I guess I will let it go unless someone specifically tells me it is screwed up on their browser. Thank for you being so prompt!

[alykins]

no prob did you clear your cache? maybe your seeing a cached page

[iamjordanne]

Yep I did... it's strange... and I don't even think that browserlab works off of my cache...maybe they need to clear things?