gmall86 Posted January 16, 2011 Report Share Posted January 16, 2011 Hello.I followed the steps to make a Fixed pixel layout as the tutorial describes. Everything works perfect in IE but in mozzila and Chrome the page goes to the right side of the browser and not in the middle as supposed.What i ve got to do to fix this??I am using an html4.0 Doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Does this have anything to do with it? Quote Link to comment Share on other sites More sharing options...
Andrea Posted January 16, 2011 Report Share Posted January 16, 2011 Your doctype is incomplete - the link's missing, and strict is usually the better way to go. Try: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> But without seeing what you are talking about, it's hard to help. Ideally, post a link to your site, or at the very least, your HTML AND CSS. Quote Link to comment Share on other sites More sharing options...
gmall86 Posted January 16, 2011 Author Report Share Posted January 16, 2011 The index: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Fixed Pixel Layout</title> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"> <link href="CSS/style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="header"> Header Content Goes Here </div> <!--end #header--> <div id="sidebar1"> Sidebar1 Content Goes Here </div> <!--end #sidebar1--> <div id="sidebar2"> Sidebar2 Content Goes Here </div> <!--end #sidebar2--> <div id="content"> Content Goes Here </div> <!--end #containt--> <div id="footer"> Footer Containt Goes Here </div> <!--end #footer--> </div> <!--end #container--> </body> </html> The css: * { margin: 0px; padding: 0px; } body { background-color: #8B814C; text-align: center; } #container { position: relative; width: 960px; margin-bottom: 0px; margin-left: auto; margin-righ: auto; margin-top: 0px; text-align: left; background-color: #FFF; } #header { width: 960px; height: 100px; background-color: #CDBE70; } #sidebar1 { width: 180px; float: left; background-color: #EEDC82; } #content { width: 600px; background-color: #FFF; float: left; } #sidebar2 { width: 180px; float: right; background-color: #EEDC82; } #footer { width: 960px; background-color: #CDBE70; } Quote Link to comment Share on other sites More sharing options...
falkencreative Posted January 16, 2011 Report Share Posted January 16, 2011 In adddition to the incomplete doctype that Andrea mentioned, this line in the CSS under #container is missing a "t": margin-righ: auto; Quote Link to comment Share on other sites More sharing options...
gmall86 Posted January 16, 2011 Author Report Share Posted January 16, 2011 Ooooppss...I ve checked all the code about 10 times...Its kinda difficult if you use a notepad... Thanx a lot for your help and your quick answers. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted January 16, 2011 Report Share Posted January 16, 2011 Its kinda difficult if you use a notepad... Then switch to a text editor that's actually intended for coding (with syntax highlighting, code completion, etc) -- look at Notepad++ (free), e-text editor, etc. Quote Link to comment Share on other sites More sharing options...
gmall86 Posted January 16, 2011 Author Report Share Posted January 16, 2011 I ve learned from my mistake and i ll do that. Thanx a lot again. Quote Link to comment Share on other sites More sharing options...
danhodge Posted January 16, 2011 Report Share Posted January 16, 2011 Notepad isn't bad, you just have to get used to checking for mistakes... also, i have Microsoft WebMatrix which is pretty good too - and free... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.