JeevesBond — Sat, 21 Jan 2006 09:07:12 +0000

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.

DaveyBoy — Sat, 21 Jan 2006 01:44:04 +0000

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 — Fri, 20 Jan 2006 23:07:28 +0000

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.

DaveyBoy — Fri, 20 Jan 2006 10:39:22 +0000

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 — Fri, 20 Jan 2006 09:25:25 +0000

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.