Site not rendering correctly in IE
This page开发者_运维技巧 is not showing correctly in internet explorer while it's fine in other browsers. Any ideas would be appreciated. I am not sure if I should paste the css here as it can be viewed with firefox tools. However if anyone requests it I will post it.
This is the page:
http://www.enjoyislam.net/adult.html
You’re using CSS features that IE8 only supports in XHTML 1.0 “strict” or “transitional” modes. Put this line at the top of adult.html (above <html>) and all will be fine:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This will also work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
More information about these modes and their affect on IE (and other browsers) is here:
- http://www.quirksmode.org/css/quirksmode.html
(For questions restricted to page design and not related to server configuration, you might get more focused responses at Doctype.)
The problem in IE is that it's handling the fact that your content is wider than the prescribed width of the container. You give the container 1000px of space, but between the 550px for the left column, 449px for the right column, and the 15px of padding on either side of the left column you're more than the 1000px of width. To see that this is the issue, change
#eb_right_column {
height:800px;
width:449px;
background-image:url(images/beginner_pic.jpg);
background-repeat:no-repeat;
float:left;
}
to
#eb_right_column {
height:800px;
width:409px;
background-image:url(images/beginner_pic.jpg);
background-repeat:no-repeat;
float:left;
}
Obviously it doesn't fit properly at this point, but that's to demonstrate the problem. Work with the width as needed to get the visual design to your specifications.
精彩评论