...

View Full Version : IE7 margin/padding (?) issue on strong/UL



grimaldi
08-03-2011, 05:28 PM
Hi Guys,

I'm making this section for a website, its a list which has 3 blocks, each one a different 'option'. In these options is a heading, a list of features and the price. All options are the same width (set on list item), thought they appear slightly smaller until they are active (class of active on li). The li width won't change, but this is why the 1st one is floated left, the 3rd one right and the 2nd (middle one), not floated and a margin of auto. You can see this in the example code I'll paste.

I've had a lot of issues with this but its nearly there I hope, I also hope this isn't something stupid I've missed after starring at this too much / banging my head off the table.

Basically, it displays as it should in FF, Safari, Chrome (Mac testing) and I'm sure it was Ok in IE8 when I looked. But in IE7, the strong displays way further down, displaying outside the box. I've trying setting everything to margin:0; padding:0; but there still seems to be this mysterious large gap! I've even set background colours to each element and none of them seem to be larger in differing browsers

...so I'd be so grateful if someone could have a peek at it for me.

Heres the code:




<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style>

#options,
#options li,
#options ul {
list-style:none;
margin:0;
padding:0;
}
#options {
margin:16px 0 32px;
}
#options li {
color:#eee;
float:left;
width:295px;
}
.option-1 {
float:left;
}
.option-2 {
float:none;
margin:0 auto;
}
.option-3 {
float:right;
}
.option {
background: #999;
display:block;
height:106px;
margin-top:8px;
padding:20px 26px;
width:227px;
}
.option:hover {
background:#888;
cursor:pointer;
color:#fff;
}
.active .option {
background: #666;
height:125px;
margin-top:0;
width:243px;
}

.option h2 {
color:#fff;
float:left;
font:58px"Georgia";
font-weight:bold;
font-style:italic;
margin:-20px 0 0;
padding:0;
}
#options .active h2 {
color:#fff;
font-size:62px;
margin-top:-18px;
}
#options li ul {
float:right;
margin:0 0 16px 0;
padding:0;
width:175px;
}
#options li ul li {
background: url(../img/ticks.png) no-repeat 0 2px;
font-size:11px;
line-height:16px;
padding-left:20px;
}
#options .active ul {
margin:0 0 22px 0;
width:190px;
}
#options .active ul li{
background: url(../img/tick.png) no-repeat 0 -36px;
color:#fff;
font-size:12px;
line-height:18px;
padding-left:18px;
}
.option strong {
background: #f00 url(../img/bg-options-divider.png) no-repeat center top;
clear:right;
color:#ddd;
display:block;
float:none;
font: 18px "Georgia";
font-style:italic;
font-weight:bold;
line-height:18px;
margin:0;
padding:12px 0 0;
text-align:center;
}
.option:hover strong {
background: url(../img/options-hover-divider.png) no-repeat center top;
}
.active .option strong {
background: url(../img/options-selected-divider.png) no-repeat center top;
color:#fff;
font-size:22px;
margin-top:72px;
}

</style>

</head>

<body>


<ul id="options">
<li>
<a class="option option-1">
<h2>1</h2>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<strong>30</strong>
</a>
</li>
<li class="active">
<a class="option option-2">
<h2>2</h2>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<strong>40</strong>
</a>
</li>
<li>
<a class="option option-3">
<h2>3</h2>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<strong>50</strong>
</a>
</li>
</ul>

</body>
</html>



Thanks in advance and I hope someone can help out :)

Sammy12
08-03-2011, 06:54 PM
apparently ie7 is registering the negative margin incorrectly. the 1,2,3 are still taking up space where they were originally

my suggestion is to try build a page that doesn't use anything unnecessary. negative margins are supposed to work in most browsers, but just don't try anything funny. try rewriting the code so that the h2 (1,2,3) do not take up so much height that you have to use negative margins. there's absolutely no need to use negative margins here. try changing the height and line-height of the h2, taking out the negative margins

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-61.png



---------


EDIT: okay so you cleared the right float on the <strong> try clear: both; since you floated them both. also try an ie7 hack, add h2 { min-height: 0; }

grimaldi
08-03-2011, 11:02 PM
Hey there, thanks for you reply!

I actually had the heading set with line-height rather than a negative margin but that chopped the numbers off, like they we're half the height. The only reason this is really an issue is because of the Georgia typeface, which renders at an odd line height on certain characters.

I had tried clear:both on the strong tag but that didn't do anything either.

I'll be back on with this in the morning, so I'll try the min-height hack. If not I could even absolutly position the headings I guess, though not ideal they'll never change from a single number



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum