www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] css/html5 cross-broswer issue (hitting head against the wall)

  1. #1
    Join Date
    Nov 2012
    Location
    Wilmington,VT.
    Posts
    3

    resolved [RESOLVED] css/html5 cross-broswer issue (hitting head against the wall)

    I coded my top navbar, which looks beautiful in Chrome, but doesn't look right at all in ff or ie, where the last item removes itself from the bar. If I adjust ANYTHING in the code, it doesn't look right it chrome. Any help or ideas you could give is appreciated.
    <nav class="main">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="calendar.html">Calendar</a></li>
    <li><a href="party.html">Party</a></li>
    <li><a href="store.html">Store</a></li>
    <li><a href="about.html">About Us</a></li>
    </ul>
    </nav>


    body{
    margin:0;
    padding:0;
    background-color:#1391ba;
    color:#000;
    }

    header, nav, section, footer, aside, article{
    display:block;

    }

    .wrapper{
    width:960px;
    margin:0 auto;
    }

    header{
    height:180px;
    background-color:#2bb74e;
    }

    nav.main{/*....................Top nav bar start.........*/
    height:70px;
    width:680px;
    margin:-35px 0 0 0;
    background-color:#f8af17;
    border-radius:15px 15px 15px 15px / 15px 15px 15px 15px;
    border:1px solid #000;
    float:right;

    }

    nav.main ul{
    list-style-type:none;
    padding:0;
    margin:0;
    }

    nav.main ul li{
    display:block;
    float:left;
    }

    nav.main a:link{
    display:block;
    padding:0 40px 0 40px;
    line-height:70px;
    color:#000;
    font-size:18px;
    text-decoration:none;
    font-family:Arial, Helvetica, sans-serif;
    }

    nav.main a:hover{
    margin: 0 16px 0 16px;
    padding:0 24px 0 24px;
    background-color:#1391ba;
    }

    nav.main a:active{
    background-color:#1391ba;
    }

    nav.main a:visited{
    color:#dddada;

    }/*....................Top nav bar end.........*/

  2. #2
    Join Date
    Jul 2010
    Posts
    66
    1. You have specified the height property in the nav element. Have you considered that to be the problem?
    2. Consider also playing with the marginproperty to adjust your content for all browsers. This particularly is important for positioning of floated elements.
    3. Any reason you used the class attribute for the nav element as opposed to using the id attribute to identify elements in the markup?
    4. Try to avoid using fixed distances/length units to style/present markup, such as px or em...where possible, use percentages. This is because font styles/sizes in the default might vary in browsers, and ruin your look. You may actually want to include a font property in the body element to influence the issue: try that first to see how it affects the other browsers not giving you what you want. Browsers can be quirky. But the fact you are testing in all major HTTP clients (browsers) is good.
    Last edited by seniseven; 11-13-2012 at 09:43 PM.

  3. #3
    Join Date
    Nov 2012
    Location
    Wilmington,VT.
    Posts
    3
    4 was it thank you, combined with thinking outside the box a little. (I added blank li's to position as well, go figure.)

    I'm a student and this is not my choice website layout. I have to follow certain criteria every week in the design, such as hover this week, and sprites next. I'll convert to percentages. Thanks for your help!

    Reyne

  4. #4
    Join Date
    Nov 2012
    Location
    Wilmington,VT.
    Posts
    3
    Seniseven,

    4 was it. I'll switch the rest to percentages. Thanks for your time.

    Reyne

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles