5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

responsive website, css only, browser problem

by Arcsn
4 replies
hi guys,
I started to build a website and I have a little problem.
the NAV bar works well in mobile vwersion and in safari too, but it is not working properly in firefox (i did not check in IE yet).
My code is working for 5 "buttons", but having troubles with more... I had to include 8 "buttons"on the website I am currently working with and it works pretty well in safari, but not in a firefox... the last "button" (which happens to be a "contacts" one) disappears and goes to the next line in the menu (...I am talking of a PC version for firefox, mobile safari one is working fine). I tried to include the relative width fallback calculation to this code but it's not working... any other clues?

my html and css code is copied from here:
A Simple, Responsive, Mobile First Navigation - Tuts+ Web Design Article (thanks mate, this saved my life!)

obviously I have personalized it (changed the colour and the font) and added more "buttons", in this tutorial you have 5 and I have 8.

the problem is that the last "button" is always going to the next line in firefox... HELP
#browser #css #problem #responsive #website
  • Profile picture of the author ALEXppcbuzz
    Since we can't see your website, I would suggest you to use the original code from the article and change it step by step, not all at once. That way you can diagnose the problem.
    {{ DiscussionBoard.errors[10153946].message }}
    • Profile picture of the author Arcsn
      thanks for your answer. I have tried already to go trough all the css coding but still have no clue how to solve that.

      please find attached the screenshot of the "problem"....

      do you need also to see the html and css codes? ( i guess you do...)
      {{ DiscussionBoard.errors[10154056].message }}
  • Profile picture of the author Arcsn
    it's me again,
    my html code is following:


    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>TLL</title>
    <meta name="description" content="the World of ...">
    <!--Mobile specific meta tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--css and font-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="styles.css">
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- Favicons-->
    <link rel="shortcut icon" href="img/favicon.ico">
    </head>
    <body id="home">
    <div class="wrapper">
    <header>
    <h1 class="logo"><a href="">.</a></h1>
    <a class="to_nav" href="#primary_nav">Menu</a> </header>
    <div id="company"><article> <img src="img/large.jpg" width="100%" alt="We are sorry, the image couldn't be displayed at the moment."> </article> </div>
    <article>
    <h2>Blue. No, yel&hellip;</h2>
    <p>Shut up! Will you shut up?! But you are dressed as one&hellip; Camelot! You don't vote for kings.</p>
    </article>
    <article>
    <h2>We want a shrubbery!!</h2>
    <p>Look, my liege! Shut up! But you are dressed as one&hellip;</p>
    <ul>
    <li>The nose?</li>
    <li>Shh! Knights, I bid you welcome to your new home. Let us ride to Camelot!</li>
    <li>Look, my liege!</li>
    </ul>
    </article>
    <article>
    <h2>Help, help, I'm being repressed!</h2>
    <p>Why? Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. Be quiet! A newt?</p>
    </article>
    <nav id="primary_nav">
    <ul>
    <li><a href="#company">Company</a></li>
    <li><a href="#philosophy">Philosophy</a></li>
    <li><a href="#mission">Mission</a></li>
    <li><a href="#products">Products</a></li>
    <li><a href="#brands">Brands</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="#contacts">Contacts</a></li>
    <li class="top"><a href="#home">Top</a></li>
    </ul>
    </nav>
    <!--end primary_nav-->
    <footer>
    <p>Copyright &copy;2015 TLL</a></p>
    </footer>
    </div>
    <!--end wrapper-->
    </body>
    </html>



    and CSS code is following:

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: sans-serif;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }

    /* remember to highlight inserts somehow! */
    ins {
    text-decoration: none;
    }
    del {
    text-decoration: line-through;
    }

    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

    /* ------------------------------------------------------------------------------------*/
    /*begin our styles*/

    body {
    font: 16px/1.4em 'Open Sans', sans-serif;
    color: #000000;
    }

    p,
    ul {
    margin: 0 0 1.5em;
    }

    ul {
    list-style: disc;
    padding: 0 0 0 20px;
    }

    a {
    color: #FFFFFF;
    }

    h1 {

    }

    h2 {
    font-family: 'Open Sans', sans-serif;
    font-size: 32px;
    line-height: 1.4em;
    margin: 0 0 .4em;
    font-weight: bold;
    }

    /*layout*/

    .wrapper {
    }

    article {
    border-bottom: 1px solid #d8d8d8;
    padding: 10px 20px 0 20px;
    margin: 10px 0;
    }

    /*header*/

    header {
    background: #000000;
    padding: 15px 20px; /*first value enlarge the navbar*/
    }

    /*shorter clearfix http://nicolasgallagher.com/micro-clearfix-hack/*/
    header:before,
    header:after {
    content:"";
    display:table; /

    }

    header:after {
    clear:both;
    }

    /* For IE 6/7 (trigger hasLayout) */
    header {
    zoom:1;
    }

    h1.logo a { /* buttons of the extended menu styling */
    color: #000000; /*color of eventual text, but not necessary text*/
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 22px;
    float: left;
    letter-spacing: 0.2em;
    }

    a.to_nav { /* menu button transformation from extended to single */
    float: right;
    color: #fff;
    background: #000000; /*colour of the "menu" button*/
    text-decoration: none;
    padding: 0 10px;
    font-size: 12px;
    font-weight: bold;
    line-height: 22px;
    height: 22px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;

    }

    a.to_nav:hover,
    a.to_nav:focus {
    color: #FFFFFF; /*colour of the "menu" button font on roll over*/
    background: #000000;
    }

    /*navigation*/

    #primary_nav ul {
    list-style: none;
    background: #000000; /*background of the menu buttons, mobile version*/
    padding: 5px 0;
    }

    #primary_nav li a {
    display: block;
    padding: 0 20px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    letter-spacing: 0.1em;
    line-height: 2em;
    height: 2em;
    border-bottom: 1px solid #383838;
    }

    #primary_nav li:last-child a {
    border-bottom: none;
    }

    #primary_nav li a:hover,
    #primary_nav li a:focus {
    color: #FFFFFF; /*colour of the menu font on roll over, mobile version*/
    background: #000000;
    }

    /*footer*/

    footer {
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
    text-align: left;
    font-size: 10px;
    }
    /* ------------------------------------------------------------------------------------*/
    /*media queries*/

    @media only screen and (min-width: 768px) {

    a.to_nav {
    display: none;
    }
    .wrapper {
    position: relative;
    width: 768px;
    margin: auto;
    }

    #primary_nav {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    }

    #primary_nav li {
    display: inline;
    }

    #primary_nav li a {
    float: left;
    border: none;
    padding: 0 10px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    }

    #primary_nav li.top {
    display: none;
    }

    }


    now, I have tried to insert this fallback (into my CSS):

    to_nav li {
    width: 12%; /* fallback for non-calc() browsers, 8 parts (little less) */
    width: calc(100% / 8); /* fallback for calc browsers, 8 parts */
    box-sizing: border-box;
    }

    but it's not working.

    is there any other way to overcome this "problem"?
    {{ DiscussionBoard.errors[10154386].message }}
  • Profile picture of the author Arcsn
    It's me again. problem solved.
    {{ DiscussionBoard.errors[10157510].message }}

Trending Topics