SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Google Chrome formatting issue

    Hey,

    Can anyone help me find out why this website nav bar does not look right in Google Chrome? The client has started using it and now wants it fixing

    Any ideas?

    This is the site: http://www.thelinenhire.co.uk/

    Thanks again
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    That's a very fragile way to make that menu as you have made it pixel perfect depending on the width of the text and then using margins each side of the text. If a browser renders text differently (as they will do) then the menu breaks.

    Instead float those menu items with the correct width for each and then just centre the text with text-align:center. In this way the text can be miles bigger without breaking the menu and will even probably withstand a couple of text resizes.

    Remove the margins and apply widths as follows:
    Code:
    #navigation {
        float: left;
        width: 950px;
        color: #333;
        padding: 10px;
        margin: 0px 0px 5px 0px;
        background:url('http://www.thelinenhire.co.uk/images/nav.png');
        height:17px
    }
    #navigation ul {
        margin-top:2px;
    }
    #navigation li {
        display:inline;
        float:left;
        text-align:center;
    }
    #bottom {
        background:url('http://www.thelinenhire.co.uk/http://www.thelinenhire.co.uk/images/wordbar.png');
        width:470px;
        height:50px;
        z-index:99999;
        position:relative;
        top:-80px;
    }
    #navigation a {
        text-decoration:none;
        color:#fff;
    }
    #navigation a:hover {
        color:#000
    }
    #navigation ul {width:950px}
    .home {width:118px}
    .about {width:91px}
    .services {width:95px}
    .ranges {width:92px}
    .latest {width:116px}
    .case {width:120px}
    .gallery {width:90px}
    .special {width:120px}
    .contact {width:108px}

  3. #3
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Thanks Paul, i did this site some time ago and realized it's not the best of ways to implement :-)

    Your suggestion fixed the homepage, however the inner pages have a different stylesheet and i tried using the same styles and it didnt work, any ideas?

    For e.g on this page: http://www.thelinenhire.co.uk/our-companies/
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  4. #4
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Issue with links in Navigation Bar

    Hey,

    Can anyone help me find out why the nav bar links on this page drop down and does not look right?

    This is the page: http://www.thelinenhire.co.uk/our-companies/

    Thanks again
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks very messy.

    I can't help you with this particular solution, but I can point you to another purely CSS drop down menu solution: http://www.htmldog.com/articles/suckerfish/dropdowns/

    You can easily style it to look like your current menu. I think you will endure less frustration installing this new one, than to fix your current one to be compatible across all major browsers.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, on the .gallery <li> you have that set in the CSS to 90px.

    However a bit later on you set another .gallery CSS (most likely for another portion of hte site) ti have 960px width/overlfow/margins.

    You should probably change that class on that <li> from .gallery to something else . Then update the 90px width in your CSS file to match the new class.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    On that page you already have another element called .gallery so there is a conflict with the menu.

    You can either change the name of the other element to something else or over-ride the styles on the menu.

    Code:
    #navigation .gallery {
        width:90px;
        margin:0;
    }
    It would be safer to rename the other gallery instead so that you don't inadvertently add more styles and break the menu again

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Threads merged


Bookmarks

Posting Permissions

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