Results 1 to 3 of 3

Thread: IE's handling of <li>'s float:right; display:block; odd vertical spacing

  1. #1
    Join Date
    Dec 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default IE's handling of <li>'s float:right; display:block; odd vertical spacing

    Hi everyone. I've stumped everyone in the office with this one.

    I've got a list. I want it to show up something like this, but with each li aligned right.

    1 2 3 4 5 6 7 8 9
    10 11 12 13 14 15 16 17 18

    Here's the thing with borders drawn around it:
    http://bluemash.com/help/index.htm
    It displays perfectly in modern browsers, but IE renders extra vertical space between the first row and the second.
    Like this:

    1 2 3 4 5 6 7 8 9
    [extra space]
    10 11 12 13 14 15 16 17 18

    and here's the html

    Code:
    <div id="blueprint">
    	<div id=blueprintnavcase>
    		<div id="holedetails">hole details<br />
    			<div id=holedetailstoggle>
    				SHOW / HIDE
    			</div>
    		</div>
    		<ul>
    		<li><a>9</a></li>
    		<li><a>8</a></li>
    		<li><a>7</a></li>
    		<li><a>6</a></li>
    		<li><a>5</a></li>
    		<li><a>4</a></li>
    		<li><a>3</a></li>
    		<li><a>2</a></li>
    		<li><a>1</a></li>
    		<li><a>18</a></li>
    		<li><a>17</a></li>
    		<li><a>16</a></li>
    		<li><a>15</a></li>
    		<li><a>14</a></li>
    		<li><a><span>13</span></a></li>
    		<li><a>12</a></li>
    		<li><a>11</a></li>
    		<li><a>10</a></li>
    		</ul>
    	</div>
    </div>
    and the relevant css

    Code:
    #blueprint {
    	width:1000px;
    	height:950px;
    	margin-left:auto;
    	margin-right:auto;
    	text-align:left;
    	background:url(../images/design/blueprint_13.png) no-repeat top left;
    }
    
    #blueprintnavcase {
    	margin:100px 10px 0 0;
    	float:right;
    	width:240px;
    	text-align:center;
    }
    #holedetailstoggle {
    
    	font-size:7pt;
    	
    }
    
    #blueprintnavcase ul {
    	padding-top: 38px;
    }
    
    #blueprintnavcase ul a:hover {
    	color:#a9cbe8;					/* color: blueprint numbers _over_ */
    }
    
    #blueprintnavcase ul li {
    list-style:none;
    border: 1px dotted red;
    	color:#7ea4c4;					/* color: blueprint numbers _up_ */
    	float: right;
    	width: 24px;
    	height:25px;					/*  <----<<<   *********** THE IE CULPRIT (except not really) This one's got me stumped. #############*/
    padding:0px;
    margin:0px;
    	text-align:right;
    	display: block;
    }
    #blueprintnavcase ul li span{
    	color:#e8eff4;					/* color: blueprint numbers _down_ */
    }

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The padding at the top of the UL is carried across when it wraps. I wrote these (highlighted) as IE proprietary, but they probably will work in all browsers if used in the stylesheet in place of the current ones that govern these property values:

    Code:
    <link href="styles/screen.css" rel="stylesheet" type="text/css">
    <!--[if IE]>
    <style type="text/css">
    #blueprintnavcase ul {
    padding: 0;
    }
    #holedetailstoggle {
    padding-top:38px;
    }
    </style>
    <![endif]-->
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    David Sudweeks (12-18-2008)

  4. #3
    Join Date
    Dec 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Perfect!
    Much appreciated.
    Merry Christmas.

Bookmarks

Posting Permissions

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