CSS I.E 6.0 versus Firefox Problems (need help!)

Hello, first of all I'm pretty new to the forum, but I have a question that perhaps someone can help me with.

I have a page here, h-ttp://classexams.com/illusivetest/, that I made that displays correctly in firefox putting the white rectangular box below the image and in I.E 6.0, it draws the white rectangular box inside of the header image. I can't figure out for the life of me why I.E is rendering it differently here. Shouldn't I.E draw the white box after the header div like it does in firefox? Maybe someone can help me understand what is going on so I can become a better coder with this stuff.

I've made the code very easy I hope and concise as possible but if you guys have any idea to make it simpler I am all ears. My goal is to learn to program in the most efficient way possible and keep this to one CSS file hopefully instead of 2.

For reference:

CSS File: h-ttp://classexams.com/illusivetest/main.css
HTML File: h-ttp://classexams.com/illusivetest/index.php

For some it woudn't let me make those links because I don't have privileges , so you'll have to put it in your addressbar.

 

No one has any ideas? =(

 

I haven't looked at it but you should start learning about IE 6 parsing bugs. It has several. The box model is buggy, the margin collapse is flaky, there's the 3 pixel problem, and others such as the rollover bug, the position:fixed bug, the float bug, the centering bug, etc.

There are several approaches to dealing with these bugs. One involves the use of the star hack which is a selector for a non-existant container that IE thinks exists (exploiting one bug to fix another bug). Another is to invoke the hasLayout property by using nonsense dimensions, and another is to write a separate stylesheet that only IE 6 uses (conditional comments). There's also the Holly hack and the backslash hack that have limited utility.

Google up IE 6 hacks to get started learning the fixes.

 

<div id="header"</div>

Missing an ending >

 

Yeah that was it! wow I really need to be careful about that stuff. Do you know any good HTML mark-up checking sites, so I can verify my HTML for errors in the future?

 

In the end, there can be only one.

http://validator.w3.org

Though I suggest testing in Opera (well, I suggest testing in at least five browsers), just because on any page you are visiting in Opera you can hit CTRL-ALT-V which will send the page to the above validator.

Likewise in Opera you can add custom buttons to do things like open the current page in other browsers or send the page for CSS validation as well.

 

Thanks for the heads up (link to the validation service), this time I have a completely different error. Now when you look at the page in FireFox it displays correctly again, but in I.E it's adding space after my div for side_nav_spacer. Not so sure why I.E is adding the extra space ? I've read something before about this but don't remember where to go to fix it or what to do.

 

you probably already know this but if you have firefox with the developer toolbar you can CTRL-ATL-A to validate the page your on.. i only suggest this because firefox just seems to run faster than opera for me, despite what i've read..

 

Whereas I say **** firefux and the open sores it rode in on, since it is nothing but a stability nightmare for me - regardless of OS or hardware I can crash EVERY version in 20 minutes of use or less - even on people's machines where they claim never to have had a problem.

If I wasn't a web developer that steaming pile of manure would be nowhere near my machine.

 

Deathshadow, you should try a real computer someday. Anyone can crash WhenDoze running any software at any time. In fact, it's hard not to. I'd have a sour stomach just like you if I ran it for a living.

 

I think he is crashing fire fox and not his machine.

My husband regularly crashes FF on his Ubuntu machine... but mostly because for some reason it can't handle a lot of Flash sites. Which is what Konqueror is used for : )

 

you guys are something else, I've been reading some of your posts =P.

Anyways, any idea why Internet-Explorer is showing the 'side_nav_spacer' incorrectly versus Firefox. (For the record I am only using Firefox because it's what my client wants it to work on. I also don't like it for crashing reasons, and I especially don't like I.E).

The code for quick reference is...

div#side_menu{
width:165px;
margin: 0 0 0 4px;
}
div#side_top_nav_spacer{
/*width already specified by side menu width*/

height:7px;
background-image:url('images/css/side_top_nav_spacer.png');
background-repeat:no-repeat;
}

div#side_nav_spacer{
padding:0px;
background-image:url('images/css/side_nav_spacer.png');
background-repeat:repeat-y;
height:500px;
/*width already specified by side menu width*/
}

The HTML that displays it is...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title>Illusive Entertainment L.L.C</title>
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div id="wrapper"><!-- Keep Everything Locked Into 900px -->
<div id="header"></div><!--The I.E Header Image -->

<!--Navigation-->
<div id="top_nav">
<div id="topnav_links">
<a href="#" id="nav_left1_down"></a>
<div id="top_nav_spacer"></div>
<a href="#" id="nav_left1"></a>
<div id="top_nav_spacer"></div>
<a href="#" id="nav_left1"></a>
<div id="top_nav_spacer"></div>
<a href="#" id="nav_left1"></a>
</div>
</div>
<!--End Navigation-->

<!--Side Menu-->
<div id="side_menu">
<div id="side_top_nav_spacer"></div>
<div id="side_nav_spacer"></div>
</div>
<!--End Side Menu-->

</div><!--End of Wrapper Div-->
</body>
</html>

although... I don't think the html is the problem this time. I am aware of using ID more then once in some areas but that is only temporary to test spacing.

Any ideas anyone? It's like I.E is adding 5px-6px between the top left button it's top spacer and I'm not sure why.

again the site is here, h-ttp://classexams.com/illusivetest/

 

Did you see 'regardless of OS or hardware'? You do read posts before replying, right?

WinXP, Vista, Ubuntu, OSX - doesn't matter, Firefux is a unstable pile of crap for me... be it a P3, A64, Core 2 Duo or even a PPC - doesn't matter which, I can crash Firefux - sorry 'hang'. Which was the ONLY response I got from them was an outright attack for using the word 'crash' instead of 'hang' - a distinction I've not heard in three decades of computing.

But then I don't trust any program who's coders try to pass off a memory leak as a 'feature' or tells you to solve the problem by not using plugins - the only reason I'd choose to use it in the first place.

So again, **** firefux and the open sores it rode in on.

 

If you mean the extra space BELOW the menu items, that is likely a float error.

That said for a menu like that, it REALLY should be a list... and I'm not sure what's with the spacing div's, but I would DEFINATELY Axe those as they aren't doing anything but waste bandwidth.

Ah wait, I see it now. It's that 'spacer' (you really should be using padding and margins instead of spacers) - IE has a height issue that is probably screwing things up.

Hang on, I'll take a stab at a rewrite that should help clean things up.

-- edit --

While working on the page, I discovered that despite the doctype IE is still in quirks mode... then I looked at the doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">

Incomplete and invalid.

I suggest swapping out the invalid doctype you are using for:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Which clears up a number of compatability issues by getting IE back into standards mode.

 

That seems to fix the error on I.E 7.0, but I.E 6.0 still has the spacing error...Thanks for the heads up though, it definently at least fixed some of the issues, especially concerning the black background color. Still baffles me the extra space going on.

Let me know if you are able to find a way to rewrite the code, and help me learn from this =), I really appreciate it! really!

 

Add a font-size:0; to the #side_top_nav_spacer. This should fix the gap.

 

Wow it worked, how did you know to do that?

 

quick question, how do you vertically align text, currently I'm trying to get news to be centered in the div vertically not horizontally. I tried the vertical-align:middle; but it didn't seem to work, any ideas?

[note: I got it to work now in firefox, but once again I.E doesn't want to comply ]

here is the code I used to center...

div.container {
width: 100%;
height: 100%;
position: relative;
display: table;
}

p {
display: table-cell;
vertical-align: middle;
}

and the divs it goes through before that are...

div#side_menu{
width:165px;
margin: 0 0 0 4px;
}
div#side_top_nav_spacer{
/*width already specified by side menu width*/
font-size:0;/*Fixes I.E Spacing Bug*/
height:7px;
background-image:url('images/css/side_top_nav_spacer.png');
background-repeat:no-repeat;
}

div#side_nav_spacer{
margin:0px;
background-image:url('images/css/side_nav_spacer.png');
background-repeat:repeat-y;
height:500px;
/*width already specified by side menu width*/
}

div#side_nav_links{
margin: 0 0px 0 0;
}

div#side_nav_links a {
display: block;
padding: 0;
height: 30px;
width: 165px;
}

div#side_nav_links a#side_nav_button:hover {
background-position: 0 -30px !important;
}
div#side_nav_links a#side_nav_button {
background-image:url('images/css/side_nav_buttons.png');
background-repeat: no-repeat;
width:165px;
height:30px;
color:#FFFFFF;
font: 16px Verdana;
text-decoration: none;
text-indent: 28px;
}

The HTML that displays it is...

<!--Side Menu-->
<div id="side_menu">
<div id="side_top_nav_spacer"></div>
<div id="side_nav_links">
<a href="#" id="side_nav_button"><div class="container"><p>News</p></div></a>
</div>
<div id="side_nav_spacer"></div>
</div>
<!--End Side Menu-->

 

Apparently the solution was adding line-height: 30px !important; to div#side_nav_links a

 

wow this site kicks ass, http://haslayout.net/css/extraheight#demo, learned a lot about the bugs causing problems and why the fixes work.