Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    36
    Thanks
    2
    Thanked 0 Times in 0 Posts

    IE7 margin/padding (?) issue on strong/UL

    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:

    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

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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





    ---------


    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; }
    Last edited by Sammy12; 08-03-2011 at 07:00 PM.

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    36
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •