CODEWITHSUNDEEP
cssgoogle-chromenavigationwidthzooming
K3P
K3P

Reputation: 45

Nav bar does not take up full width of page when zoomed in

My problem can be seen here if you zoom into 110% or more on your browser. (It happens with Chrome, I'm not sure about other browsers).

Basically, on the right side you can see a grey sliver of a few pixels after the 'contact' button when you zoom in. I'm assuming this is because I have my buttons set so that there is a certain amount of blue area around each word, and that gets messed up when you zoom. I was wondering if there was any way to keep this button-size formatting but also get it to by default fill the space completely when zoomed in. I hope this makes sense.

HTML:

<body>
<div id="wrapper">
<div id="container">
<nav>
    <div id="navigation">
        <ul>
            <li><a href="index.html">home</a></li><li><a href="about.html">about</a></li><li><a href="milk.html">milk</a></li><li><a href="farm.html">the farm</a></li><li><a href="contact.html">contact</a></li>
        </ul>
    </div>
</nav>

CSS:

body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, address, blockquote {
    margin: 0px;
    padding: 0px;
    font-size: 16px/9px;
    font-style: normal;
}
html {
    background-color:#F8F7E4;
}
#container {
    width:955px;
    height:auto;
    background-color:#d2d2de;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}
#navigation {
    white-space: nowrap;
}
#navigation li {
    font: 35px Arial Black;
    display: inline;
    white-space: nowrap;
}
#navigation a {
    padding:9px 35px;
    background-color:#0080c2;
    color:#F8F7E4;
    text-decoration:none;
}
#navigation a:hover {
    background-color:#F8F7E4;
    color:#000;
}

Additionally, the reason this zoom problem matters so much is that this site will be viewed quite often from my parents' computer, and they have it sent to 125% zoom on Chrome.

Upvotes: 2

Views: 319

Answers (1)

Aaron
Aaron

Reputation: 10450

Add the background colour to your div#navigation

#navigation {
background-color: #0080c2;
}

Upvotes: 1

Related Questions