[Liadan]

Okay, I just made my very first cascading style sheet, and it looks exactly like I want it to look... in Firefox. I have a header div, left div (for navigating the site), middle (content) div, and footer div. When I viewed it in Explorer, the text that is supposed to be in the left-hand div has jumped over to the main content div. I don't know if I'm making any sense whatsoever, but I hope so.

I know there are lots of bugs in IE, but is this one of them, or does it sound more like I've made a mistake?
Please help. Thanks!!

[Advertisements]

try making a parent div that is above all of the other divs then setting margin:0

[ditto]

try making a parent div that is above all of the other divs then setting margin:0

[Liadan]

Hi,

When I did what you suggested, it corrected something else!
It didn't correct the stuff jumping over to the other div, but as I was playing around, trying out different things, something worked by accident. I added "float: right" to the content div (the div beside it), and that made the words that were jumping over to stay in their place. I have no idea why. There's so much to learn, it's overwhelming.

Thanks for your help (because your suggestion corrected something that was bugging me anyway).

[Michael]

You might like to bookmark a few sites like this one
http://www.positioni...t/explorer.html

It helps to know the bugs and how to fix them.

[Liadan]

Actually, I didn't correct anything when I added "float: right" to the content div. I only caused the footer to jump up, and I didn't realize it until I colored the footer's background.

I've tried several different things. I can either have it looking perfect in Firefox or perfect in IE, but not both at the same time. The problem I have now is that in IE, a picture I have in the content area disappears. It has something to do with the fact that my pictures in the content div are floated left of the text. When I undo the float left of the picture, it doesn't disappear. But, I want it to float left of the text. In Firefox, it's fine. If only everyone would use Firefox. Sigh. I looked at the position is everything site and can't find anything related to that (or maybe I'm missing it).

Thanks for listening.

[Michael]

can you please give a link to the page?

When you float something, and don't clear the float (clear:both) on some element after it, the ellement that it is in will have a height of 0

[Liadan]

At the moment, it isn't uploaded, but I will. Will let you know when it's done.

[Liadan]

Okay, I'm unveiling my "baby", for what it's worth, LOL.
I'm an elementary teacher and that's what the site is about, btw. I'm aware that the colors are hideous, but I did that temporarily so I could tell what's what.
I don't have a "clear: both" anywhere, so that's probably the problem. Where would I put that?
Any other suggestions, criticisms, etc are welcome.



Thanks again!

Edited by Liadan, 01 June 2007 - 08:10 PM.

[Michael]

The yellow is bad, but I think every thing else justs looks "kiddy"

It looks the same to me in Firefox 2, IE 6 and Opera 9

You might like this extension for making dummy text http://sogame.awards...DummyLipsum.xpi

[Liadan]

I was viewing it in IE7.
LOL, it's supposed to look "kiddy". My site visitors are 4-year-olds and teachers of 4-year-olds.
Thanks anyway.