hi

 

I have a page with a 3 colum layout all works ok apart from IE7

 

each colum has an image - that is fine and text underneath.

 

in IE 7 the text is going all over the place.

 

I need some CSS for the text I guess but don't know what.

 

as a short term fix I have used a table - 3 cols and about 9 rows - is that so very wrong??

 

here is the code for the divs:

 

please help me!

 

#poster1 {
float: left;
height: 340px;
width: 250px;
background-color: #FFFFFF;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#poster2 {
float: left;
height: 340px;
width: 250px;
background-color: #FFFFFF;
padding-left: 50px;
margin: 0px;
padding-top: 0px;
padding-right: 50px;
padding-bottom: 0px;
}
#poster3 {
float: right;
width: 250px;
height: 340px;
background-color: #FFFFFF;
padding-left: 0px;
margin: 0px;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
}
#poster4 {
float: left;
width: 250px;
clear: both;
height: 340px;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#poster5 {
float: left;
width: 250px;
height: 340px;
background-color: #FFFFFF;
clear: right;
margin: 0px;
padding-top: 0px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 50px;
}
#poster6 {
float: right;
width: 250px;
height: 340px;
clear: right;
margin: 0px;
background-color: #FFFFFF;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 0px;
}

Edited July 11, 201214 yr by Renaissance-Design
Please use the code button or tags to format your code.

as a short term fix I have used a table - 3 cols and about 9 rows - is that so very wrong??

 

Yes, very. It's hard to troubleshoot something like this in isolation, can you provide a live link or put your code in a JSFiddle?

I wouldn't really worry about IE7 anymore, there is such a minimal amount of people with it, it doesn't really seem worth the effort. However if you insist...

 

In order to keep the site unaffected by any changes you do to accomadate for IE7, paste this in the head of your page:

 

<!--[if lt IE 8]>

<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />

<![endif]-->

 

Then create a stylesheet called ie7-and-down.css and just amend styles for the areas you want to change.

 

Further information can be found here- http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Hi emac, the main problem I see is the incorrect use of the "clear" instruction. The code does need some tidying up and I would suggest as a starting point:

#poster1 { 
       float: left;
       width: 250px; 
       height: 340px; 
       padding: 0;
       margin: 0px; 
       background-color: #FFFFFF; 
} 
#poster2 { 
       float: left;
       width: 250px; 
       height: 340px; 
       padding: 0 50px; 0 50px;
       margin: 0px;
       background-color: #FFFFFF; 
} 
#poster3 { 
       float: right; 
       width: 250px; 
       height: 340px;
       padding: 0 5px 0 0;
       margin: 0px; 
       background-color: #FFFFFF; 
} 
#poster4 { 
       float: left; 
       width: 250px; 
       height: 340px;
       padding: 0px;
       margin: 0px; 
       background-color: #FFFFFF; 

} 
#poster5 { 
       float: left; 
       width: 250px; 
       height: 340px;
       padding: 0 50px 0 50px;
       margin: 0px; 
       background-color: #FFFFFF; 
} 
#poster6 { 
       float: right; 
       width: 250px; 
       height: 340px;
       padding: 0 5px 0 0; 
       margin: 0px; 
       background-color: #FFFFFF; 
}
.clear{width 100%;clear:both;}

 

The "clear" class should be used after each row of columns. Unless I am reading what you are trying to do wrongly it should be:

 

<div id="poster1"></div>
<div id="poster2"></div>
<div id="poster3"></div>
<div class="clear"></div>
<div id="poster4"></div>
<div id="poster5"></div>
<div id="poster6"></div>
<div class="clear"></div>

 

You could also make the div ids poster1, poster2 and poster3 div classes therefore making them re-usable. There is a much better way of acheiving the three column multi row layout that you are using but without seeing how the rest of the page template is coded it would likely prove counter productive in suggesting it just now. Hope this points you in the right direction. Jim

Edited July 22, 201214 yr by jamaks