IE 8 & IE 9 html / CSS rendering issue
The problem I am having is only in IE 8 & 9. For some reason the background image for a div tag duplicates and part of the content flows to the duplicated image on the next row. This problem does not开发者_StackOverflow中文版 happen in Chrome, Safari, FireFox or older versions of IE.
The screenshot below shows the correct way it is suppose to look, which is taken from FireFox 3.6:
Now if you look at the screenshot below taken from an IE8 page, you can see the issue I am having. The problem begins on the row where you see the image named Anchor. Notice the background image duplicates down a row and part of the content goes to it.
If you go to the URL below you can see the live site: http://server1.todaysinternet.net/~kingdoms/index.php?option=com_jreviews&url=tag/listingcategories/appliances-_m166&Itemid=226#
Always validate first before attempting to debug:
Errors found while checking this document as XHTML 1.0 Transitional!
Result: 234 Errors, 2 warning(s)
Just from a quick glance, you're using the id
attribute incorrectly, they are supposed to be unique and you have the same one applied to multiple elements. You also have several tags that are not closed properly.
The browsers that are looking OK to you are just being forgiving, while IE is not. I would suggest making sure your page validates before you go any further with your design. Once you do get your html valid, you will have a much easier time debugging and will probably see the problem disappear.
精彩评论