clbembry Posted September 3, 2007 Share Posted September 3, 2007 I'm having a problem making my site center in ie7. It centers in mozzilla, opera, and safari. Whats wrong with it? Heres the css: body {background-image: url(images/background1.png);font-family: verdana;font-size: 10px;}#container {width: 790px;height: auto;padding: 0px;margin: 0px;margin-left: auto;margin-right: auto;background-image: url(images/background2.png);border: 1px solid black;border-bottom: 0px;}#header {float: left;width: 790px;height: 150px;padding: 0px;margin: 0px;background-image: url(images/header.png);background-repeat: no-repeat;}#topbar {float: left;width: 790px;height: 16px;padding: 0px;margin: 0px;background-image: url(images/bar1.png);background-repeat: no-repeat;}#bottombar {float: left;width: 790px;height: 24px;padding: 0px;margin: 0px;background-image: url(images/bar2.png);background-repeat: no-repeat;}#navheader {float: left;width: 245px;height: 24px;padding: 0px;margin: 0px;margin-top: 15px;margin-left: 15px;background-image: url(images/navheader.png);background-repeat: no-repeat;}#content {float: right;width: 500px;height: auto;padding: 0px;padding-top: 24px;margin: 0px;margin-top: 15px;margin-right: 15px;background-image: url(images/content.png);background-repeat: no-repeat;background-color: rgb(73,73,73);color: rgb(200,200,200);border: 1px solid rgb(53,53,53);border-top: 0px;}#footer {width: 790px;height: 16px;padding: 0px;margin: 0px;margin-left: auto;margin-right: auto;background-image: url(images/footer.png);background-repeat: no-repeat;border: 1px solid black;border-top: 0px;} Here is the html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <link rel="stylesheet" type="text/css" href="style.css"> <title>Template 2 - Home</title></head><body><div id="container"><div id="topbar"></div><div id="header"></div><div id="bottombar"></div><div id="navheader"></div><div id="content">bla this is a template wicked swweet awesome to the max letter scetter mer fret</div></div><div id="footer"></div></body></html> for a live preview of the site, click here: http://bembry.j3msoft.com/template2/index.html Link to comment Share on other sites More sharing options...
justsomeguy Posted September 4, 2007 Share Posted September 4, 2007 Instead of this:margin: 0px;margin-left: auto;margin-right: auto;do this:margin: 0 auto;And also try using a strict doctype, I'm not sure if the transitional doctype causes quirks mode or not. Link to comment Share on other sites More sharing options...
croatiankid Posted September 4, 2007 Share Posted September 4, 2007 You need to use a full, strict doctype (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">) Link to comment Share on other sites More sharing options...
justsomeguy Posted September 4, 2007 Share Posted September 4, 2007 Here's a reference you can use:http://en.wikipedia.org/wiki/Quirks_modeThis doctype:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">Is a transitional doctype without a URL. According to that page, a transitional doctype without a URL initiates quirks mode in all browsers. If you want to avoid quirks mode (which is a requirement in order to get IE to recognize auto margins), you can use a strict doctype (with or without a URL), or a transitional doctype with a URL, such as this:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">If you decide to use XHTML, make sure that you do not include the XML declaration before it or IE6 and Opera 7 will fall back to quirks. Link to comment Share on other sites More sharing options...
clbembry Posted September 5, 2007 Author Share Posted September 5, 2007 Ok thanks for the help. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.