PDA

View Full Version : usual IE whitespace issues


scrufffydoo
01-09-2009, 09:33 AM
it seems I'm experiencing one of the common(or so it seems) whitespace issues between FF and IE in that my main content div seems to shrink a couple of pixels in IE which closes up the spacing between the 2 RH columns in my store area (www.scroozdev.net (http://www.scroozdev.net)), its almost like IE is reading border values or suchlike( I did set them to 0 to no avail). The only way I can get it to look right is to set a conditional rule of a set width 660px however this drops the div below the sidebars.

Its almost like the div is too big to fit even though all the widths are correct, any ideas anyone as its super annoying, takes longer sorting out these bugs than doing a design, my heart goes out to you pro's doing this daily.:roll:

some of the CSS, took out the non relevant stuff. flow is wrapper/container/maincontent/contentrow/cat

@charset "utf-8";
body {
background: #000000;
margin: 0px; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0px;
z-index: 1;
}
.clearfix {
overflow: hidden;
height: 1%;
}

#container {
width: 980px; /* this overrides the text-align: center on the body element. */
z-index: 6;
background-color: #FFFFFF;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

}
#contentrow1 {
height: 170px;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}

#contentrow2 {
background-color: #FFFFFF;
height: 170px;
margin: 0px;
padding: 0px;
}
#cat1 {
height: 150px;
width: 210px;
float: left;
}
#cat2 {
height: 150px;
width: 210px;
float: left;
margin-left: 15px;
}
#cat3 {
height: 150px;
width: 210px;
float: right;
}
#cat4 {
height: 150px;
width: 210px;
float: left;
}
#cat5 {
float: left;
height: 150px;
width: 210px;
margin-left: 15px;
}
#cat6 {
float: right;
height: 150px;
width: 210px;
background-repeat: no-repeat;
}

#header {
background-color: #FFFFFF;
width: 980px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
padding: 0px;
z-index: 3;
height: 150px;
}
#mainContent {
z-index: 8;
background-color: #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 160px;
background-image: url(images/maincontentbg.gif);
background-repeat: no-repeat;
padding-top: 70px;
margin-right: 160px;
}

#sidebar1 {
float: left; /* since this element is floated, a width must be given */
background-color: #FFCC66;
z-index: 7;
color: #000000;
padding: 0px;
margin-top: 0px;
width: 140px;
}
#sidebar2 {
float: right;
padding: 0px;
background-color: #FFCC66;
width: 140px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}


#wrapper {
margin: 0px;
background-color: #FFFFFF;
z-index: 2;
padding: 0px;
}

scrufffydoo
01-09-2009, 01:04 PM
just to add this only happens in IE6 although its still a popular browser so I'd like to fix it if poss.

coloeagle
01-09-2009, 09:04 PM
Have you solved this? I've checked in FF2, FF3, IE6 and IE7 Looks good on my end.

scrufffydoo
01-09-2009, 09:10 PM
hi coloeagle

as far as Im aware its still busted in IE6, I put it in browsershots as I upgraded to IE7 which overwrote my IE6 although Im downloading ms virtual PC as we speak to run 6 and 7 together so should be able to check properly in about 1/2 hour

coloeagle
01-09-2009, 09:15 PM
Cool, give us an update.

scrufffydoo
01-09-2009, 09:49 PM
yeah the error is still there, its only small but irritating, end 2 categories are too far over left, only by a few pixels but enough to warrant a fix I think.

btw virtual pc works very well for running multiple OS's and browsers, well worth the download :-D