...

View Full Version : margin right space different in IE6



bz78
01-07-2008, 03:01 PM
http://keystonepotato.siretesting.com/keystone/index.html

I'm having some trouble getting the three text blocks (featuretext) on this page to line up correctly under the corresponding photos...In IE6 there is extra (right margin?) space on the right side of each text block which makes the last text block too long and forces it under the first. Why is IE6 making it have extra space? I do not have padding on the featuretext.

Is there an easier way to set this up?

thanks,

B

jlhaslip
01-07-2008, 03:26 PM
check for a Float bug in IE6

Excavator
01-07-2008, 05:56 PM
Good morning bz78,
Try this:

* { margin:0; padding:0;}
#container {
background: #fff url(images/page-bg.jpg) repeat-x;
margin: 0 auto;
text-align: left;
width: 950;
}
#frame {
margin: 0 auto;
text-align: left;
width: 910px;
overflow: auto;
}
#header {
margin-left: 1px;
background: url(images/logo.jpg) right bottom no-repeat;
width: 908px;
height: 104px
}
#collage {
background: url(images/collage3.jpg) no-repeat;
display:block;
height: 185px;
width:910px;
padding: 0;
}
#collage p { padding-left: 30px; padding-top: 85px; font-size: 1.2em; color: white; height: 75px; width: 350px; float: left;}
#features {
width: 910px;
height: 200px;
display: block;
}


#featuretextcontainer {
text-align: left;
height: 77px;
width: 910px;
display: block;
background: #e0cba8 url(images/featuretext-bg.jpg) repeat-x;;
}
#featuretext {
margin: 12px 0;
padding: 0 25px 0 40px;
float: left;
width: 233px;
background: #ccc;
}
#featuretext2 {
margin: 12px auto;
padding: 0 25px;
width: 248px;
background: #6e6e6e;
}
#featuretextlast {
margin: 12px 0;
padding: 0 25px;
float: right;
width: 248px;
background: #fff;
}


</div>
<div id="featuretextcontainer">
<div id="featuretext"><p class="small">Great for a variety of products including mashed potatoes for restaurants, home uses, and frozen dinners. <a href="productsflakes.html">Read more.</a></p></div>
<div id="featuretextlast"><p class="small">Coming soon, our Fresh Cut Potatoes!<br>Check back soon for updates! <a href="productsfreshcut.html">Read more.</a></p></div>
<div id="featuretext2"><p class="small">Typically used as a thickener in biscuits, pancakes, breads, muffins, and cookies.<br> <a href="productsflour.html">Read more.</a></p></div>
</div>

Note I added an id because you used #featuretext twice and you can't do that. I also changed the order of your markup so the floats come before the centered #featuretext2.
This works in FF, you will probably still be affected by IE bugs. Go to http://www.positioniseverything.net/explorer.html for a good place to find cures.

-Also, the validator finds a few things that should be fixed. It would have found the id you were using twice too. Check the suggestion about validating often in my sig below.

bz78
01-07-2008, 08:15 PM
thanks. I looked that up and I believe it is the culprit.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum