Google Chrome formatting issue

HTML & CSS
1

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 :confused:

Any ideas?

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

Thanks again

2

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:



#navigation {
    float: left;
   [B] width: 950px;[/B]
    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;
}
[B]#navigation li {
    display:inline;
    float:left;
    text-align:center;
}[/B]
#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
}
[B]#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}[/B]
3

Hey,

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

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/

4

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

5

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

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.

7

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.


[B]#navigation .gallery {
    width:90px;
    margin:0;
}[/B]

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

Threads merged