CSS menu width problem
http://innov8.sortedsites.com/newmockup/
The css menu i've modded and added (since i couldnt work out how to make the text colour change on mouseover by myself lol) is basically exactly how i want it on firefox etc. but IE makes it too wide and not aligned properly - does anybody know why?
#coolmenu{
border: 0px solid black;
width: 143px;
background-color: #FFFFFF;
text-align:right
}
#coolmenu a{
font: bold 10px Verdana;
padding: 4px;
padding-left: 4px;
display: block;
width: 100%;
height: 12px;
color: #826344;
text-decoration: none;
border-bottom: 1px solid #95795A;
}
html>body #coolmenu a{ /*Non IE rule*/
width: auto;
}
#coolmenu a:hover{
background:url(images/arrowbrown.gif);
background-color: #663F27;
color: white;
text-shadow: black 1px 1px 0px;
}
.odd {background-color: #F4F0EC; color: #000000;}
.even {background-color: #FFFFFF; color: #FFFFFF;}
.oddbar {background-color: #F4F0EC; color: #000000; border-top: 1px solid #95795A;}Thanks
JeevesBond posted this at 09:25 — 20th January 2006.
He has: 3,956 posts
Joined: Jun 2002
Sorry to ask you for more details, but I've looked at this in ie5, ie5.5, ie6, Opera 9 preview and Firefox 1.5...
It looks exactly the same on all of them - which is great! But leads me to ask, where's the problem?
What version of ie are you viewing this with? And can you provide a screenshot of exactly what's wrong?
You could also try clearing your cache and then viewing it. Maybe ie is using an old style sheet - worth a try.
a Padded Cell our articles site!
DaveyBoy posted this at 10:39 — 20th January 2006.
They have: 453 posts
Joined: Feb 2003
Yeah the width should be the same as the buttons below it, but on IE6 the width is too wide plus its out of position a bit on the left.
JeevesBond posted this at 23:07 — 20th January 2006.
He has: 3,956 posts
Joined: Jun 2002
This is the ie broken box model in full effect *sigh*
Anyway, I've fixed the css and that's what you're interested in right? Here it is:
#coolmenu a{font: bold 10px Verdana;
/*padding: 4px;*/
/*padding-left: 4px;*/
padding: 4px;
display: block;
/*width: 100%;*/
height: 12px;
color: #826344;
text-decoration: none;
border-bottom: 1px solid #95795A;
}
I've left the bits I changed commented out. You see ie seems to be expanding the a tag to 100% then adding the padding! As the ie box model is broken, have had to remove the width entirely. This seems to have done the trick!
I also noticed there is a lot of repetition of the "font" property, it appears in almost every div! You can make one "body" declaration, and put one font declaration in there and that will change the entire document. Then if you want a seperate header font, you can override it later. For example:
Instead of:
.links3 {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
.links2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #663F27;
font-weight: bold;
text-decoration: none;
}
.menulinks {
font-family: Verdana, Arial, Tahoma;
font-size: 10px;
font-weight: bold;
color: #826344;
text-decoration: none;
}
Use
body {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.links3 {
font-size: 11px;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
.links2 {
color: #663F27;
font-weight: bold;
text-decoration: none;
}
.menulinks {
font-size: 10px;
font-weight: bold;
color: #826344;
text-decoration: none;
}
There are other things you can do, like setting text-decoration and bold to all links, however I think I've lectured you enough for today.
Hope this helps.
a Padded Cell our articles site!
DaveyBoy posted this at 01:44 — 21st January 2006.
They have: 453 posts
Joined: Feb 2003
Mate thanks very much for that, i owe you a pint like.
Aye i'm one of those, make stuff loook pretty designers, i know zip about anything other than HTML. You have inspired me to try anyway. nice one chap
JeevesBond posted this at 09:07 — 21st January 2006.
He has: 3,956 posts
Joined: Jun 2002
No worries - glad to help.
Take a look at http://www.csszengarden.com to see what can be done with CSS.
Nice looking site though.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.