Geek asks and answers

Menu display horizontal Incorrect on widescreen monitor

I have a little problem with the horizontal menu that I implemented for the website. The menu contains only three items, but when viewed on a large widescreen monitor, the last item crashes onto a new line. I cannot verify this myself, since the widescreen monitor is used by my client, and so far I cannot reproduce the error, she sent me this screenshot.

enter image description here

The client uses Internet Explorer 8 on Windows 7, and I tested this browser and OS on a regular size monitor that seems to work. It seems to be a widescreen screen.

This is what the page looks like on my screen and on each subsequent screen that I tested on.

enter image description here

Here is the code I have for the menu.

HTML

<div class="menu">
    <ul class="nav">
        <li class="nav-item" id="first-item"><a href="/why-us.php">WHY US</a></li>
        <li class="nav-item"><a href="/links.php">LINKS</a></li>
        <li class="nav-item"><a href="/contact.php">CONTACT</a></li>
    </ul>
</div>

CSS

.nav-item {
    font-size:2em;
    margin-left:175px;
}

.nav-item a {
    color:#2B2F73;
}

.nav {
    list-style-type:none;
    padding:0;
    margin:auto;
    width:744px;
}

.nav li {
    list-style-type:none;
    float:left;
    display:inline;
}

#first-item {
    margin-left:0px !important;
}

.menu {
    width:960px;
    height:40px;
    margin:auto;
}

- - , ?

+2
4

, " " "" (, , " " ):

enter image description here

, , "Larger" IE8.

, .

, , .

" " - width: 960px (.menu). 960px .

+1

.nav-item,.nav .menu

, , . .

+2

  .nav-item {     : 2em;     : 5em;   }

( ) , , , ems, , , .

<subjective> , // .

reset css (, YUI base- reset -fonts.css) </subjective>

0

width.

"nav"?

I'm sorry this is not a question. This problem is very easy to solve, you can understand yourself if you try to change the situation ...

My best advice on this is that you get a decent tool to “validate” CSS and see the result live. I am pleased with the Firefox / Chrome FireBug extension (but it does not save the result, you need to copy and paste it).

-1
source

More articles:


All Articles