I am having a problem... I know there has got to be some sort of simple solution that I just cannot seem to figure out.
I am redoing a website I have already made. the address is: <!-- m --><a class="postlink" href="http://www.collegefootballnation.com">http://www.collegefootballnation.com</a><!-- m -->
If you load the site in say Firefox, or any non-IE browser, there is an issue where images and text sometimes overlap outside of my divs. How do I solve this?Originally posted by Shmohel If you load the site in say Firefox, or any non-IE browser, there is an issue where images and text sometimes overlap outside of my divs. How do I solve this? [/B]
In short: Don't preview in IE to get things right, because it's wrong. The long explanation:
There are six basic layers to an HTML document. The crappy little diagram below shows the layers, starting with the user, which is obviously the person sitting in front of the keyboard:
1. User
2. Window (Operating system)
3. Frame
4. Document
5. Document Flow (CSS layers: Absolute and fixed positioning
6. Inline/Floated elements
7. Block elements
Since floated elements do not take up space in the block level area, floated images will overlap the boundries of DIV tags (which are block level by default). Internet Explorer gets it wrong, according to the standards. IE encases floated elements in it's parent element, as if the floated element actually took up space in the block level layer.
A great site that explains the many IE CSS rendering bugs is <!-- w --><a class="postlink" href="http://www.positioniseverything.net">www.positioniseverything.net</a><!-- w --> - I highly recommend it! It's saved my sanity on several occasions.thanks. i just used a hidden <hr /> and that seemed to correct my issues. the website is helpful though. thanks.
I am redoing a website I have already made. the address is: <!-- m --><a class="postlink" href="http://www.collegefootballnation.com">http://www.collegefootballnation.com</a><!-- m -->
If you load the site in say Firefox, or any non-IE browser, there is an issue where images and text sometimes overlap outside of my divs. How do I solve this?Originally posted by Shmohel If you load the site in say Firefox, or any non-IE browser, there is an issue where images and text sometimes overlap outside of my divs. How do I solve this? [/B]
In short: Don't preview in IE to get things right, because it's wrong. The long explanation:
There are six basic layers to an HTML document. The crappy little diagram below shows the layers, starting with the user, which is obviously the person sitting in front of the keyboard:
1. User
2. Window (Operating system)
3. Frame
4. Document
5. Document Flow (CSS layers: Absolute and fixed positioning
6. Inline/Floated elements
7. Block elements
Since floated elements do not take up space in the block level area, floated images will overlap the boundries of DIV tags (which are block level by default). Internet Explorer gets it wrong, according to the standards. IE encases floated elements in it's parent element, as if the floated element actually took up space in the block level layer.
A great site that explains the many IE CSS rendering bugs is <!-- w --><a class="postlink" href="http://www.positioniseverything.net">www.positioniseverything.net</a><!-- w --> - I highly recommend it! It's saved my sanity on several occasions.thanks. i just used a hidden <hr /> and that seemed to correct my issues. the website is helpful though. thanks.