CSS for IE

Stupid IE

[Telos]

I finally went about adapting my CSS for IE, but it's working a little wierd. The thing is... it only works wierd on certain pages, and I've got no clue why. Especially considering the site works fine in Opera and Firefox. (Well, the menu isn't working right in Opera but I don't think that's a CSS thing.)

Basically I have three columns, and for some reason certain pages the left and right columns get pushed way off to the side.... to the point where the left navigation menu isn't visible at all. (Actually sometimes it works the first time you see the page, then whenever you visit it again it's messed up.) The CSS works on every other page on the site just fine.

The main CSS file is:

* {margin:0; 
padding:0; 
border:none; 
z-index:0;} 
html, body {height:100%;} 
body 
{
font-family:arial, sans-serif; 
color:#000; 
font-size:82%; 
/*background:#F5F5F5;*/
background:#FFFFFF;
} 
#header
{
position:absolute; 
top:0; 
left:0; 
width:100%; 
height:100px; 
line-height:100px; 
color:Blue; 
font-weight:bold; 
font-size:xx-large;
text-align:center;
} 
#clearheader {height:100px;} 
#container
{
min-height:100%; 
margin-left:160px;/*10px more than columns to have some padding on the edges.*/
margin-right:170px; 
margin-top:100px;
margin-bottom:-100px; 
background:#FFF;
} 
#left, #right 
{
position:relative;
} 
#left 
{
float:left; 
z-index:100; 
width:145px;
margin-left:-149px; 
left:-1px;
background-color:#FFFFFF;
} 
#right 
{
float:right; 
width:120px;
margin-right:-120px; 
right:-1px;
} 
#main
{
width:100%; 
float:left; 
position:relative; 
z-index:1;
background-color:#FFFFF0;
min-height:500px;
min-width:800px;
margin:0 -1px;
border:solid 1px #000000;
} 
#clearfooter {clear:both; 
height:115px;} 
#footer {width:100%; 
clear:both; 
height:100px; 
line-height:100px; 
background-color:#000; 
color: #FFF; 
font-weight:bold; 
text-align:center; 
position:relative;}
.button
{
width:50px;
}
.textBox
{
border:solid 1px #000000;
}
.menu 
{ 
background-color:#FFFFFF;
font-size:larger;
}
.CheatSheetHeading
{
width:100%;
text-align:center;
font-family: serif;
font-size:x-large;
background-color:#F5F5F5;
background-position:center;
}
.CheatSheetTable
{
width:auto;
}
.Comment
{
color:Green;
}
#leftAd1
{
margin-top:60px;
}

and the one that gets linked in for IE is:

#outer {height:100%;} 
#left 
{
margin-left:-70px;} 
#right {margin-right:-3px;}

Any thoughts on what's wrong?

[doodlebee]

I *do* know you've got a few marginal (pun intended!) issues there :)

Your #container margins should equal the width of the #left and #right divs. Your #left and #right divs should have the margins set a less than one pixel fo their width. Like so:

#container
{
min-height:100%;
margin-left:145px;/*10px more than columns to have some padding on the edges.*/
margin-right:120px;
margin-top:100px;
margin-bottom:-100px;
background:#FFF;
}

#left, #right
{
position:relative;
}

#left
{
float:left;
z-index:100;
width:145px;
margin-left:-144px;
left:-1px;
background-color:#FFFFFF;
}

#right
{
float:right;
width:120px;
margin-right:-119px;
right:-1px;
}

Also, your #main content div has a "min-width" and "min-height" set. That *really* shouldn't be there. IE won't recognize it anyway (you need a javascript to force it to recognize min-width - and the height shouldn't really be an issue since you're making a "sticky footer" type layout), and you've already got it set to be fluid in width - so it's not necesary at all.

For your E stylesheet *both* #left and right need to be set at -3px - to offset the lovely IE 3 pixel weirdness it likes to add in. That -70 is way off - but that's probably due to the little glitches I mentioned above.

Hopefully that gets you started :)

[Telos]

Well, the -70 _worked_ whereas the -3 didn't... but yeah, it may be due to some other wierdness I inserted while trying to get it working.

I do need the min width, which actually is working in IE, because much of the content in those pages is preformatted text which is that wide. (It's code for syntax guides, so the formatting is important... if I know a better way though I'd absolutely love to hear it... especially if it means less messing around with CSS! ;) )

I added min-height just because there isn't much content on some of the pages yet, so that stretches it down so it looks a little nicer.

I don't actually have a footer for the site either. I just grabbed that (from someone's thread here a while ago) because it worked better than all the other ones I tried. I'll try some of the changes you suggested when I get home tonight... but I probably started off there and got it here by tweaking it a bunch so it worked... I'm beginning to think CSS doesn't work properly with ASP.NET...

[Telos]

Stupid CSS...

Ok, so now the left colum is bunched up against the edge of the browser in both Opera and Firefox. In IE it's got a little extra space there, but the right column is running off the side of the page. I needed to keep the -70 for IE though, because otherwise the left column shows up in the middle and forces the center column down underneath it, and the right column shows up underneath the center.

Worse yet, it STILL is getting pushed off the edges of the pages which use pre... could pre be causing the problem?

Here's the current CSS:

* {margin:0; 
padding:0; 
border:none; 
z-index:0;} 
html, body {height:100%;} 
body 
{
font-family:arial, sans-serif; 
color:#000; 
font-size:82%; 
/*background:#F5F5F5;*/
background:#FFFFFF;
} 
#header
{
position:absolute; 
top:0; 
left:0; 
width:100%; 
height:100px; 
line-height:100px; 
color:Blue; 
font-weight:bold; 
font-size:xx-large;
text-align:center;
} 
#clearheader {height:100px;} 
#container
{
min-height:100%; 
margin-left:152px;/*10px more than columns to have some padding on the edges.*/
margin-right:120px; 
margin-top:100px;
margin-bottom:-100px; 
background:#FFF;
} 
#left, #right 
{
position:relative;
} 
#left 
{
float:left; 
z-index:100; 
width:152px;
margin-left:-152px; 
left:-1px;
background-color:#FFFFFF;
} 
#right 
{
float:right; 
width:120px;
margin-right:-120px; 
right:-1px;
} 
#main
{
width:100%; 
float:left; 
position:relative; 
z-index:1;
background-color:#FFFFF0;
/*min-height:500px;
min-width:800px;*/
margin:0 -1px;
border:solid 1px #000000;
} 
#clearfooter {clear:both; 
height:115px;} 
#footer {width:100%; 
clear:both; 
height:100px; 
line-height:100px; 
background-color:#000; 
color: #FFF; 
font-weight:bold; 
text-align:center; 
position:relative;}
.button
{
width:50px;
}
.textBox
{
border:solid 1px #000000;
}
.menu 
{ 
background-color:#FFFFFF;
font-size:larger;
}
.CheatSheetHeading
{
width:100%;
text-align:center;
font-family: serif;
font-size:x-large;
background-color:#F5F5F5;
background-position:center;
}
.CheatSheetTable
{
width:auto;
}
.Comment
{
color:Green;
}
#leftAd1
{
margin-top:60px;
}

ie.css

#outer {height:100%;} 
#left 
{
margin-left:-70px;} 
#right {margin-right:-65px;}

(I had to make the margin the same as the column width because of the border on the center, otherwise the center gets pushed below the left.)