3

I have created the simple horizontal menu and give equal right and left padding inside every LI but in ie versions it is leaving extra space after last li or coming down to next line.

I have spend 3 hours to make it cross browser compatible but end up with failure. When i put extra padding on last LI to adjust the space it comes fine in firefox but shows unwanted space in ie. I want to make it cross browsers compatible without using of hacks.

enter image description here

below is the code:

<section class="topContent">
    <nav>
        <ul>
            <li><a href="javascript:;">home</a>
            </li>
            <li><a href="javascript:;">earthmoving</a>
            </li>
            <li><a href="javascript:;">attachments</a>
            </li>
            <li><a href="javascript:;">power systems</a>
            </li>
            <li><a href="javascript:;">truck tailer</a>
            </li>
            <li><a href="javascript:;">ag equipment</a>
            </li>
        </ul>
    </nav>
    <!--/nav-->
</section>

.topContent{ width:940px; margin:0 auto;}
.topContent nav{ background:#ffce12; height:42px;}
.topContent nav ul{ padding:0; margin:0;}
.topContent nav li{ float:left; list-style:none;}
.topContent nav li a{ font:14px/42px Arial, Helvetica, sans-serif; color:#000; padding:0 40px; text-transform:capitalize; display:block;}
.topContent nav li a:hover, .topContent nav li a.active{ background:#464646 url(../images/hover-arrow.jpg) no-repeat center 0; display:block; color:#fff;}
Community
  • 1
  • 1
Praveen
  • 1,772
  • 3
  • 24
  • 42
  • You have several code problem. Run it through the W3C validator first, correct them, then come back. – j08691 Nov 04 '12 at 21:04
  • 1
    Using a browser debugger tool i.e: FireBug in Firefox and similar in other browsers (Usually F12 default key) you can click on an element and investigate it's styles and which part of the CSS does what. That usually helps you quite quickly in determining why you have a space where you don't want one or what to change to add spaces where you want them. The debugger tools let you even change the styles directly to check immediate results. – Nope Nov 04 '12 at 21:09
  • What believe is this is a problem of letter spacing as different browsers render different letter spacing even though i had played with letter spacing but it dint worked – Praveen Nov 04 '12 at 21:15
  • use a css reset to standardize things like fonts cross browser – charlietfl Nov 04 '12 at 21:47

2 Answers2

0

Your "design company" CSS does not align/space out the items at all, you've just adjusted padding values to make it work on one browser.

One way to solve it would be to justify the nav items, or if you're not interested in dynamic content (i.e. nav item titles would not change for a long time), you could just set the elemenent widths explicitly and center their text.

Community
  • 1
  • 1
Oleg
  • 24,465
  • 8
  • 61
  • 91
0

The issue is based on the width of the menu. I believe that because the text renders slightly different in each browser and even operating system you won't get this perfect. If the menu isn't dynamic you could try adjusting the widths/paddings separately. Alternatively you could divide the width of the width of the menu by the number of links. May look a bit odd if some items are too long. If you do this make sure you align the text in the centre.

nav a {
    padding: 0; /*just need to remove the padding*/
    width: 156.6px; /*940 / 7 (the amount of links)*/
    text-align:center; 
}
lukek
  • 458
  • 3
  • 12