Jump to content

IE7 Layout issue


amp34
 Share

Recommended Posts

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

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

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
I 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

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

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

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
tables? 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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...