IE/FF Weird Padding/Spacing Discrepancy (?) 3

[fallenacorn]

http://www.nortonsiegel.com/new/navbar.css

http://www.nortonsiegel.com/new/index.htm

it appears that IE adds an extra pixel or two above and below
my navbar buttons... i cannot for the life of me figure out what
is going on.... it's perfect in firefox (as usual)....

any theories?

 

[BillyRayPreachersSon]

If you remove all of the LI tags, and just have the A tags, it looks pretty good (with one exception which I put down to whitespace issues).

I did try keeping the LI tags and playing with their line-height CSS, with some success - but it was nowhere near as consistent as removing the LI tags althogether.

Hope this helps,
Dan

 

[HelloMike]

Try putting the code for your unordered lists all on one line. I know it makes the source code look horrible, but unfortunately IE renders the carriage returns between your <ul> and <li> tags.

Cheers, Mike.

 

[ChrisHunt]

Wow, I hope your customers have good eyesight - that's some seriously tiny lettering.

Two things to try: (1) Get the code to validate by putting the sub-<ul>s inside their parent <li>s thus:

<li><a href="#">All About Us</a>
   <ul class="subnav1">
      <li><a href="#">Our Mission</a></li>
      <li><a href="[URL unfurl="true"]http://www.xanga.com/home.aspx?user=aroundbabylon"[/URL] target="display">The Village Blog</a></li>
   </ul>
</li>

<ul>s aren't allowed to contain any elements except <li>s, though it's usually Mozilla that's more fussy about such things than IE.

(2) Add a [tt]margin: 0;[/tt] rule to your styles for <a>. You might try setting the [tt]line-height[/tt] too.

It's certainly possible to get this kind of set-up to work with <ul>s and <li>s, you can see a working example on my home page.


-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd