Hey guys im having a CSS issue with a new menu bar I put on my site which im still developing

I view the site on my computer and it looks fine. But while im at work on an older model computer and prob and older version of IE it drops each tab verticaly and spreads them horizontaly the width of my page.

you can view the page at
http://www.scribblehost.com/phptest/



Here is the part of my style.css file which is related.....


/* -----------------------------------------Header------------------------------------ */
#logo {
width: 750px;
height: 65px;
margin: 0 auto;
}
#logo h1, #logo p {
margin: 0;
color: #FFFFFF;
}
#logo h1 {
float: left;
padding-top: 30px;
}
#logo p {
float: right;
padding-top: 39px;
font-size: 1.2em;
}
#logo a {
text-decoration: none;
color: #FFFFFF;
}


/* --------------------------------------------Menu -------------------------------------------*/
#menu {
width: 778px;
height: 45px;
margin: 0 auto;
background: #E7E7E7 url(images/lightbar.gif) no-repeat;
}
#menu ul {
margin: 0px;
padding: 5px 0 0 14px;
list-style: none;
}
#menu li {
display: inline;
float: left;
list-style: none;
background: #eee url(images/a_center2.gif) repeat-x;
}
#menu a {
display: block;
float: left;
height: 26px;
padding: 6px 26px 0px 26px;
text-decoration: none;
font-weight: bold;
color: #333333;
white-space: nowrap;
}
#menu a:hover {
color: #e8e8e8; background: #4f4f4f url(images/a_center.gif) repeat-x;
}
#menu .current_page_item a {
background: url(/images/b_center.gif) repeat-x;
}


#menu .navwidth > ul a {width: auto;}
#menu a {float: none; color: #e8e8e8;}
#menu li.current {position:relative; top:0px; margin-top: 0px}
#menu li.current a {
color: #000000;
background: #E7E7E7;
padding: 6px 16px;
}
#menu li.current a:hover {color: #000000; background: #E7E7E7;}




Any ideas?

And do you like the design so far?

Hello,
Nice website,looks good in ie7 and firefox.
take a look at this website,it will help you I think.

css-generator dot com/css-hacks.php

i just checked the verison on my work computer (the one which it is looking messed up in) and it a IE 6.0 so im not sure what the problem is does anyone have any insight into my coding?

#menu a {
display: block; <<< Change this to inline
float: left;
height: 26px;
padding: 6px 26px 0px 26px;
text-decoration: none;
font-weight: bold;
color: #333333;
white-space: nowrap;


You have a few other small issues with padding and the widths to sort out too but I'll leave that to you..;)
btw if your going to use stylesheets remove the inline styling and go all the way..;)

The widths and padding is actually my next question, the links are changing in size and I cannot seem to figure it out. They get about 5px shorter on each side when I switch to them being the current page and have them highlighted grey


What do you mean if I am going to use stylesheets, remove the inline styling and go all the way?

I dont really understand that?

In IE6, the menu is displayed vertically.
Add ul li:
#menu ul li a {
etc..

What Killapix meant was, don't use inline styling in the html document. You are already using a separate css-file so why not use all styling there? For instance, you have the following inline style in your markup:
<LI class=current style="MARGIN-TOP: 1px; MARGIN-RIGHT: 1px">

Looks excellent, love the color combination.

Hi Timoots,

Try this and let me know if it works for you, I reworked some of your CSS.

#menu {
width: 778px;
height: 45px;
margin: 0 auto;
background: #E7E7E7 url(images/lightbar.gif) no-repeat;
}

#menu ul {
margin: 0px;
padding: 5px 0 0 14px;
list-style: none;
}

#menu li {
float: left;
list-style-type: none;
background: #eee url(images/a_center2.gif) repeat-x;
}

#menu a {
display: block;
float: left;
width: 106px;
height: 32px;
line-height: 32px;
text-align: center;
text-decoration: none;
font-weight: bold;
color: #333333;
white-space: nowrap;
padding: 0;
margin: 0;
}
#menu a:hover {
color: #e8e8e8; background: #4f4f4f url(images/a_center.gif) repeat-x;
}
#menu .current_page_item a {
background: url(/images/b_center.gif) repeat-x;
}
#menu .navwidth > ul a {
width: auto;
}
#menu a {
float: none;
color: #e8e8e8;
}
#menu li.current {
position:relative;
top:0px;
margin-top: 0px
}
#menu li.current a {
color: #000000;
background: #E7E7E7;
padding: 0;
}
#menu li.current a:hover {
color: #000000;
background: #E7E7E7;
}

I hope this helps, I tested it in IE 5.5 and 6.0, looked fine for me.

Kudos to the poster above.

Just an added note, if you want to use some more advanced CSS stuff, like child selectors and all, yet remain compatible with IE5.5/6.0, you should look at IE7-js.

Google "dean edwards ie7 js". The 2nd or 3rd result will be a Google Code page he runs.

It uses JavaScript to add support for some of the CSS features available in IE7, fixes some HTML interpretation mistakes, and adds PNG transparency support for IE5.5/6.0 if DirectX is installed(??)

Ive found a big problem on my end. I am using php for the purpose of CM but the way I have it setup is when a user clicks a specific link on the menu It hights the tab as a grey on the new page. I cannot fix a header if i need the tab to change color on each page.

Any possible coding soutions to this or should i just make it so the tab does not change color on the new page, and use a fixed header file?

thanks for all the help with this guys.... I very much appreciate it

Looks decent, but it works in both IE7 and Firefox...