www.webdeveloper.com
Results 1 to 7 of 7

Thread: Floats right ok in FF, 'drops down' in IE

  1. #1
    Join Date
    Nov 2002
    Location
    Scotland
    Posts
    550

    Floats right ok in FF, 'drops down' in IE

    Hi,

    I have the following page:

    http://www.farawaytrains.co.uk/breadcrumb.html

    It works great in FF, 'Quick Close' is floated to the right, but in IE7, it drops down, falling out of the #breadcrumb selector.

    I'm sure I'm just being careless with my floats, but can someone please help me fix this issue?


    Many thanks.

  2. #2
    Join Date
    Oct 2008
    Location
    Melbourne, Australia
    Posts
    34
    This may sound silly but try placing the close item first then the home under it like follows.

    HTML Code:
    <li><a href="test.php" class="qclose"><span></span>Quick Close</a></li>
    <li><a href="test.php" class="rthome"><span></span>Home Page</a></li>
    It may not work, but I remember having a similar problem in the past which that was the solution for...

  3. #3
    Join Date
    Nov 2002
    Location
    Scotland
    Posts
    550
    Thanks for the reply.
    Unfortunately it has the opposite effect, shunts my home button down on the left but my Quick Close works fine.

    Any help would be brilliant.

  4. #4
    Join Date
    Sep 2008
    Posts
    408
    A couple of things.

    First you need your <LI>'s inside of a <UL>, then you need to style the <UL> accordingly. Also had added display:inline on the <LI>'s. This should work:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    
    * {
    margin:0;padding:0
    }
    
    #breadcrumb {
    width:770px;
    height:25px;
    background:#000
    }
    
    #breadcrumb ul {
    	list-style-type:none;
    }
    
    #breadcrumb li {
    	display:inline;
    }
    
    .rthome {
    	float:left;
    	width:98px;
    	color:#fff;
    	width: 98px; 
    	height: 18px;
    	position: relative;
    	display:block;
    	margin-left:10px;
    	text-decoration:none
    }
    
    .rthome span {
    	background: url(http://www.farawaytrains.co.uk/images/home-icon.jpg);position: absolute;width: 100&#37;;height: 100%;
    	margin-top:3px;
    }
    
    .qclose {
    	float:right;
    	width:98px;
    	color:#fff;
    	width: 98px; 
    	height: 18px;
    	position: relative;
    	display:block;
    	margin-right:16px;
    	text-decoration:none
    }
    
    .qclose span {
    	background: url(http://www.farawaytrains.co.uk/images/quick-close.jpg);position: absolute;width: 100%;height: 100%;
    	margin-top:4px;
    }
    
    </style>
    
    </head>
    
    <body>
    
    	<div id="breadcrumb">
    	<ul>
    		<li><a href="test.php" class="rthome"><span></span>Home Page</a></li>
    		<li><a href="test.php" class="qclose"><span></span>Quick Close</a></li>
    	</ul>
    	</div>
    
    </body>
    </html>

  5. #5
    Join Date
    Nov 2002
    Location
    Scotland
    Posts
    550
    Thanks for the reply + the code!!!

    So the only changes you made were placing it inside a <ul>(which I was going to get around to eventually heh) and then stylign the <ul> ?

  6. #6
    Join Date
    Nov 2002
    Location
    Scotland
    Posts
    550
    Thanks for the reply + the code!!!

    So the only changes you made were placing it inside a <ul>(which I was going to get around to eventually heh) and then styling the <ul> and <li> ?

    I hate missing these tiny details Cheers again

  7. #7
    Join Date
    Sep 2008
    Posts
    408
    Pretty much yeah.

    http://validator.w3.org helps a great deal in this type of situation as a lot of times its usually just a missing tag or something like that. All I did was add the <UL>, then take the "list-style-type:none;" out of the <LI> and put that into the <UL>. Then the <LI> added "display:inline;"

    Trust me, the little details are usually the annoying aspect. So many times I'll have a faulty PHP or JavaScript just because I missed a period or a curly bracket.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles