amp34 Posted December 29, 2006 Share Posted December 29, 2006 I pretty new to css so please bear with me if I seem a halfwit! I have written a 3 column layout in css (using a framework from someone else) and it works fine in most of the browsers I have tested in (FF, opera and even IE6) The problem is the left column doesn't show in IE7. There is space for it but it just doesnt show. Could someone please give me some hints as to how to fix the issue please?www.games-system.co.uk/testCSS ody { min-width: 750px; max-width: 1000px; background-color:#CCCCCC;}#container { padding-left: 167px; padding-right: 150px;}#container .column { position: relative; float: left;}#center { width: 100%; border-style: solid; border-width: 2px; border-color: #333333;}#left { width: 160px; right: 167px; margin-left: -100%; border-style: solid; border-width: 2px; border-right-width: 0px; border-color: #333333;}#right { width: 144px; margin-right: -150px; border-style: solid; border-width: 2px; border-left-width: 0px; border-color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif; color:#333333; text-align:center;}#footer { clear: both;}/*** IE6 Fix ***/* html #left { left: 150px;} HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="site.css" /><style type="text/css"><!--.style4 { font-size: x-large;}.style6 { font-size: xx-large; color: #0000FF;}.style7 { color: #FFFF33; font-size: x-large;}--></style></head><body><div id="header"> <div align="center"> <p class="style6">.......Header.......</p> <p align="left" class="style7">Second header........................................................................................ </p> <p>hello how are you today, im very well thankyou. WHat are you upto tonight? I dont know really , not much i suppose, why? Well i was wondering if you would like to go for a drink at the new pub that just opened down the road. Really, that sounds interestion, i may come actually. </p> </div></div><div id="container"> <div id="center" class="column"> <div align="center"> <p>Centre</p> <p> </p> <p> </p> <p>Main section</p> <p> </p> <p>blah de blah etc... </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> <div id="left" class="column"> <div align="center"> <p align="right" class="style4"><img src="Images/left side template.jpg" alt="left" name="leftad" width="160" height="400" id="leftad" style="background-color: #333333" /></p> </div> </div> <div id="right" class="column"> <p class="style4">Archives</p> <p>January 2007</p> <p>December 2006</p> <p>November 2006</p> <p>October 2006</p> <p>September 2006</p> <p><img src="Images/Right side template.jpg" alt="main" width="120" height="240" /> </p> </div></div><div id="footer"> <div align="center"> <p> </p> <p>Footer</p> </div></div></body></html> Thanks Link to comment Share on other sites More sharing options...
dbarto Posted December 30, 2006 Share Posted December 30, 2006 I pretty new to css so please bear with me if I seem a halfwit! I have written a 3 column layout in css (using a framework from someone else) and it works fine in most of the browsers I have tested in (FF, opera and even IE6) The problem is the left column doesn't show in IE7. There is space for it but it just doesnt show. Could someone please give me some hints as to how to fix the issue please?Thanks I'd use tables to get a nicer layout. I guess that IE7 has problems with the positioning, but you can avoid this by using tables.<TABLE><TR> <TD><DIV class=left>left</DIV></TD> <TD><DIV class=center>center</DIV></TD> <TD><DIV class=right>right</DIV></TD></TR></TABLE>HAPPY 2007 Link to comment Share on other sites More sharing options...
amp34 Posted December 30, 2006 Author Share Posted December 30, 2006 I'd use tables to get a nicer layout. I guess that IE7 has problems with the positioning, but you can avoid this by using tables.<TABLE><TR> <TD><DIV class=left>left</DIV></TD> <TD><DIV class=center>center</DIV></TD> <TD><DIV class=right>right</DIV></TD></TR></TABLE>HAPPY 2007I would use a table but I need the central column to be independent of the rest, the central column needs to change size without affecting the other two. Its a little annoying as that layout works perfectly in all the other browsers. Link to comment Share on other sites More sharing options...
jlhaslip Posted December 30, 2006 Share Posted December 30, 2006 I don't have a copy of IE7 on this machine, but try this code and let me know if it works. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title><style type="text/css"><!--body { width: 1000px; background-color:#CCCCCC; margin:0; padding:0;}#container {}#container .column { position: relative; float: left;}#left { float:left; border-style: solid; border-width: 2px; border-right-width: 0px; border-color: #333333;}#right { float:right; border-style: solid; border-width: 2px; border-left-width: 0px; border-color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif; color:#333333; text-align:center;}#center { width:600px; border-style: solid; border-width: 2px; border-color: #333333;}#footer { clear: both;}.style4 { font-size: x-large;}.style6 { font-size: xx-large; color: #0000FF;}.style7 { color: #FFFF33; font-size: x-large;}--></style></head><body><div id="header"> <div align="center"> <p class="style6">.......Header.......</p> <p class="style7" align="left">Second header........................................................................................ </p> <p>hellohow are you today, im very well thankyou. WHat are you upto tonight? Idont know really , not much i suppose, why? Well i was wondering if youwould like to go for a drink at the new pub that just opened down theroad. Really, that sounds interestion, i may come actually. </p> </div></div><div id="container"> <div id="left" class="column"> <div align="center"> <p class="style4" align="right"> <img src="Untitled%20Document_files/left%2520side%2520template.jpg" alt="left" name="leftad" id="leftad" style="background-color: rgb(51, 51, 51);" height="400" width="160"></p> </div> </div> <div id="center" class="column"> <div align="center"> <p>Centre</p> <p> </p> <p> </p> <p>Main section</p> <p> </p> <p>blah de blah etc... </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> <div id="right" class="column"> <p class="style4">Archives</p> <p>January 2007</p> <p>December 2006</p> <p>November 2006</p> <p>October 2006</p> <p>September 2006</p> <p><img src="Untitled%20Document_files/Right%2520side%2520template.jpg" alt="main" height="240" width="120"> </p> </div></div><div id="footer"> <div align="center"> <p> </p> <p>Footer</p> </div></div></body></html> I have combined the html and css into one file for ease of editting and posting here. Link to comment Share on other sites More sharing options...
amp34 Posted January 1, 2007 Author Share Posted January 1, 2007 Thanks dude that seems to work pefectly. Just a couple of questions, should I leave the css in the same file as the html or stick it in its own style sheet, and is it possible to get the central column to change sizes depending on the size of the browser window (the min and max size in the original code) or is that not possible with this layout? Link to comment Share on other sites More sharing options...
real_illusions Posted January 1, 2007 Share Posted January 1, 2007 I'd use tables to get a nicer layout. I guess that IE7 has problems with the positioning, but you can avoid this by using tables.<TABLE><TR> <TD><DIV class=left>left</DIV></TD> <TD><DIV class=center>center</DIV></TD> <TD><DIV class=right>right</DIV></TD></TR></TABLE>HAPPY 2007tables? nicer layout?dont make me laugh :)div's, xhtml and css is the way forward in web design, tables aren't for the design of the page. CSS = more freedom!:)returning to amp34's questions - use percentages instead of pixels for the widths. just have a play around with it, see what happpens. And you should always link the pages to the stylesheet.....makes editing the style alot easier, rather than editing each style bit on every page.. Link to comment Share on other sites More sharing options...
jlhaslip Posted January 2, 2007 Share Posted January 2, 2007 xactly what real_illusions says Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now