Need help with css navigation width_问答_开发者

开发者 https://www.devze.com 2023-03-31 03:41 出处：网络

I\'m new to css, I have a top nav but I couldn\'t set its width. It seems different when I test with Dreamweaver, ie9, ie6, Firefox and Opera. Here\'s my code:

相关专题：css

I'm new to css, I have a top nav but I couldn't set its width. It seems different when I test with Dreamweaver, ie9, ie6, Firefox and Opera. Here's my code:

@charset "utf-8";
/* CSS Document */

html {
    background: url(images/light-tile.gif) repeat;
}
body {
    overflow: auto;
    width: 54.35em;
    margin: 0 auto;
    background-color: #fff;
    padding-left: 0.25em;
    padding-right: 0.4em;
    border: 0.07em solid #97b4e0;
    overflow: visible;
}
#main {
    background-color: #fff;
}
ul#top-nav {
    list-style: none;
    margin: .9em .9em .9em 0;
    padding: 0;
    width: 110%;
}
ul#top-nav li {
    display: inline;
}
ul#top-nav li a {
    text-decoration: none;
    font-size: 0.75em;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0.90em 0;
    width: 18.5%; /* for 5 items */
    background: #99CCFF;
    color: #3F4037;
    font-weight: bold;
    float: left;
    display: inline-block;
    text-align: center;
    border-right: 0.05em solid #fff;
    border-lef开发者_开发问答t: 0.05em solid #fff;
    border-bottom: 0.2em solid #97b4e0;
}
ul#top-nav li a:hover {
    color: #000;
    font-weight: bolder;
    background: #D7EBFF;
    border-bottom: 0.2em solid #e9e9e9;
}
...

<body>
<div id="main">
        <div id="top-info">Kumcuğaz Köyü İlköğretim Okulu</div>
        <img id="top-image" src="../images/top_image.png" alt="üst resim" width="869" height="159" />
        <ul id="top-nav">
                <li><a href="http://www.kumcagizioo.meb.k12.tr">ANASAYFA</a></li>
                <li><a href="galeri.html">GALERİ</a></li>
                <li><a href="personel.html">PERSONEL</a></li>
                <li><a href="iletisim.html">İLETİŞİM</a></li>
                <li><a href="zd.html">ZİYARETÇİ DEFTERİ</a></li>
        </ul>
        <div class="clear"></div>
        <div id="faux">
                ...

If it isn't possible it to view same on all browsers, I'll have to use a table. Thanks for helping.

Sincerely

What's the reason for making it 110% wide? That's wider than the window. Also, you have 5 menu items each set to 18.5% wide... that adds up to only 90.5% total.

What happens when you make it 100% wide and each of the 5 items is 20% wide?

http://jsfiddle.net/u78Ks/2/

It looks like this might be the issue

width: 18.5%; /* for 5 items */

in here

ul#top-nav li a {
    text-decoration: none;
    font-size: 0.75em;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0.90em 0;
    width: 18.5%; /* for 5 items */
    background: #99CCFF;
    color: #3F4037;
    font-weight: bold;
    float: left;
    display: inline-block;
    text-align: center;
    border-right: 0.05em solid #fff;
    border-left: 0.05em solid #fff;
    border-bottom: 0.2em solid #97b4e0;
}

Browsers could be interpreting this differently based on the font sizes, window sizes, etc.

Try setting this to a static width in pixels.