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

Lol @ Zoffix (haslayout.net owner) suddenly adding dynamic js effects to his site. His old site was so plain. He's a pretty useful resource though.

 

font-size:0 fixes a problem in IE where you cannot have any element shorter than the font-size/line-height. That's one of the wierd little 'quirks' that make coding support for IE a bit more complex than it should be.

If you explicitly declare a line-height in your document and the layout breaks, you'll need to go back and add line-height:0 to your smaller elements alongside the font-size declaration.

 

Thanks for the help, I really appreciate it, I will keep that in mind deathshadow, as i'm sure the layout will break eventually for me =P.

 

This is going to sound dumb, but I don't have a very good understanding of proper div structure and I'm not sure how to make a div move to the 'right' to fill the extra space, (which would be content space in my case).

Say for example, you create a <div> for the header, then a <div> for the top menu, and a <div> for a long side menu with a fixed width. If I create another div after that shouldn't it be smart enough to fit in the space to the right of the long side menu instead of displaying below the last div I created (the long side menu) making a very long rectangle. See my page (if it still looks like that, as I'll be editing)

http://classexams.com/illusivetest/

Not sure why or how to make it properly go to the right. I'm afraid of using float right for I.E error reasons, but if I have to I guess I will.

 

It will only appear to one side if you set one of them to float - my advice in this case is to set #side_menu to float:left; - you have a width declared, you'll be fine. THEN set #main_content to margin-left:165px; - equal to the width of your column. Margins on non-floating elements ignore the width of floats - this margin 'pushes' the entire content over to act like a column. Leave off this margin and when your content area is longer than the menu, it will wrap it's content 'under' it.

There are 'other' approaches like fixing the width of your content area and floating both (which you could float them opposite directions, or even the same direction and that would take in a two column layout), or putting the content first and using the '0 width via negative margin' quirk to place the menu - but those are rather advanced CSS techniques and you look to just be starting out.

If you want to learn more about non-table column techniques, this is a excellent resource - especially since all of these layouts use identical HTML code, ONLY changing the CSS. http://blog.html.it/layoutgala/

There's a good deal of 'excess' code IMHO in those examples, but it is a good lesson in how powerful CSS can be.

That is one of the advantages to CSS though - there are usually five or six ways of doing things... though that comes with the penalty that not all of them work all the time cross browser so if one doesn't work, before diving for the hacks try another one.

 

I attempted your fix, the idea of saying float:left; on #side_menu, it works on Firefox how I intended but in I.E it causes a strange shift in the #side_menu to the right about 3 px. I'm not sure what it could be, let me know. Also I didn't appear to need to set a margin-left value of 165px it just knew to set it up correctly on the right of the $side_menu? If I do the margin-left :165px it actually pushes it way to far because I think it knew to automatically drop it already. I get what you were talking about though.

Anyways let me know if you have any idea what might be causing the spacing error, I put overflow:hidden; just about everywhere so far and no good. Usually that fixes those I.E spacing errors, since I'm using floats now I got to watch out for it's interpretation of floats I think. Just wish I knew how it did it.

- Joe

 

double margin if horizontal margin on floated element fixed by display:inline in msie6.0

 

I swear that double margin bug was killing me before I saw someone here mentioning it in passing. I now have these stupid-looking display:inlines all over my css code... but it works!

Joe, there are two kinds of elements in a web page: boxes that stack on top of each other and inline stuff that stacks from left to right. Divs are boxes and that's why your divs were always beneath each other. Floating divs makes them stack next to each other **so long as there's room for them!!**

So, normally, if you float something, setting display: whatever should never do anything because float overrides them. Sometimes you see something floated and then display: block. Display:block isn't doing anything usually.

However, IE is dumb enough not to know this. For some bizaare reason, setting display:inline tells IE not to double the margins. Crazy, yeah.

There's a book that might help explain all the stuff in one go (minus some of IE bugs which one can learn about here) called HTML Utopia. The rest of the title is something about building sites without tables-- it's written for people who've been using tables for site layout but want to know more about CSS.

 

I seem to have fixed the issue, but I had to use the clearfix to make it work on I.E and change the order of my divs around, to make one super container for the bottom. I hope this was the proper way to do it.

Thanks again for the info, it's much appreciated and will probably help more then just me on the forums. .