Hi all,
I have recently begun developing with valid XHTML Strict 1.0 and CSS - and the intricacies of CSS development are still escaping me.
I am having a problem with a page rendering in IE6.
Renders fine in Firefox and Safari.
Take a look...
http://www.hamishwyatt.com/dev/test03.html
In Firefox, Safari, etc the image of the afro guy renders to the left of the text.
In IE6 is renders on top of the text.
I've realised this is because IE is for some reason treating the imageBox div as though it is inside the content div, which it is not.
So the div layout in the XHTML is:
... <mainBlock> <mailingList> ... </mailingList> <imageBox> ... </imageBox> <content> ... </content> </mainBlock> ...
So all three inside mainBlock should treat the mainBlock box as their parent right?
IE however seems to be treating it like this:
... <mainBlock> <mailingList> ... </mailingList> <content> <imageBox> ... </imageBox> ... </content> </mainBlock> ...
Any help would be much appreciated.
Thanks,
Steve.
help with IE6 problem?
Try adding position:relative to #mainblock. You may also want to think about using margins instead of the large paddings you are using.
If that does not help the only suggestion I can make is to go back to basics. At the moment you are not using the natural flow of the html, just positioning everything absolutely. for example the header and menu should just be part of natural flow, not positioned absolutely.
Regards
Day
help with IE6 problem?
cheers,
i'll check that out.
In my original css file I did have it the way you mentioned - header and menu were not absolute etc, however i was running into some other thing i couldnt figure out so I started again and tried it the way i have it now.
Perhaps I will switch back and figure out the other problem.
I should have clarified my first post - "i have recently begun..." should really have read "this is my first real attempt at..."
So yeah - thanks for your help.
Steve.