[problem solved]Navigation Problems: IE7

  • Fabinator
  • Proficient
  • Proficient
  • Fabinator
  • Posts: 467

Post 3+ Months Ago

Hi,

I have some problems with the new navigation on my website.

It's a unordered list with four list items, styled as four blocks floating in the center of the page.

This is how it looks in Opera/Firefox:
Image

And this is how it looks in Internet Explorer 7:
Image

The page can be found here

Does anyone know how I can fix this?

HTML code:
Code: [ Select ]
<div id="navblocks">
<ul>
<li><a href="http://www.onyx-design.net/weblog2/" class="active">Blog</a></li>
<li><a href="http://www.onyx-design.net/weblog2/about/">About</a></li>
<li><a href="http://www.onyx-design.net/weblog2/archives/">Archives</a></li>
<li><a href="http://www.onyx-design.net/weblog2/portfolio/">Portfolio</a></li>
</ul>
</div>
  1. <div id="navblocks">
  2. <ul>
  3. <li><a href="http://www.onyx-design.net/weblog2/" class="active">Blog</a></li>
  4. <li><a href="http://www.onyx-design.net/weblog2/about/">About</a></li>
  5. <li><a href="http://www.onyx-design.net/weblog2/archives/">Archives</a></li>
  6. <li><a href="http://www.onyx-design.net/weblog2/portfolio/">Portfolio</a></li>
  7. </ul>
  8. </div>


CSS code:
Code: [ Select ]
#navblocks {
    margin:0 auto;
    width:520px;
    text-align:center;
    }
        #navblocks ul {
            margin: 5px 20px;
            list-style-type:none;
        }
                #navblocks ul li {
                                
                }
        #navblocks a {
            font-size:1.2em;
            margin:5px;
            display:block;
            float:left;
            background-color:#FFF;
            padding:5px;
            width:100px;
            border-bottom:7px solid #4064b9;
            
        }
                #navblocks a:hover, #navblocks a.active {
                    border-color:#419ab9;
                }
  1. #navblocks {
  2.     margin:0 auto;
  3.     width:520px;
  4.     text-align:center;
  5.     }
  6.         #navblocks ul {
  7.             margin: 5px 20px;
  8.             list-style-type:none;
  9.         }
  10.                 #navblocks ul li {
  11.                                 
  12.                 }
  13.         #navblocks a {
  14.             font-size:1.2em;
  15.             margin:5px;
  16.             display:block;
  17.             float:left;
  18.             background-color:#FFF;
  19.             padding:5px;
  20.             width:100px;
  21.             border-bottom:7px solid #4064b9;
  22.             
  23.         }
  24.                 #navblocks a:hover, #navblocks a.active {
  25.                     border-color:#419ab9;
  26.                 }


Thanks in advance! :D
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

two things. I would put the float:left inside #navblocks ul li instead of the link. (you want to float the li and not its content). If that doesn't work. I would also add a div below the close <ul> that has a clear:both;
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8415
  • Loc: USA

Post 3+ Months Ago

graphixboy wrote:
two things. I would put the float:left inside #navblocks ul li instead of the link. (you want to float the li and not its content). If that doesn't work. I would also add a div below the close <ul> that has a clear:both;

Agreed with the bolded line (Nothing against the other line... :) )

So it should look like...
CSS Code: [ Select ]
#navblocks ul li {
 float: left;
}
  1. #navblocks ul li {
  2.  float: left;
  3. }
  • Fabinator
  • Proficient
  • Proficient
  • Fabinator
  • Posts: 467

Post 3+ Months Ago

@graphixboy, I'll try that...

@bogey, i know how to float something :lol:
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8415
  • Loc: USA

Post 3+ Months Ago

Fabinator wrote:
@graphixboy, I'll try that...

@bogey, i know how to float something :lol:

I know... I put that down for anyone who might not know how to do that.
  • Fabinator
  • Proficient
  • Proficient
  • Fabinator
  • Posts: 467

Post 3+ Months Ago

@Bogey, oh, I'm sorry

@graphixboy, it works now thanks :D
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

no problem. glad that helped

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 35 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.