Button Style rollover mangled in non IE 1

[grahamarrowsmith]

I've been working on a css navbar with usual rollover buttons. Looks great in IE but when I vew in a mozilla browser it clumps all the div buttons together over each other.

Am I missing a trick or will I need to re-write my css for compatability? Any tips would be appreciated.

This is the site:

http://www.edinburgh-property.co.uk/demo/

and my HTML code is like this:

<div id=&quot;mainnav&quot;><a href=&quot;sections/about.htm&quot;>About <br> Duncan Property</a><a href=&quot;sections/services.htm&quot;><br> Property Services</a><a href=&quot;sections/landlords.htm&quot;>Information for <br> Landlords</a><a href=&quot;sections/tennants.htm&quot; class=&quot;last&quot;>Information for<br> Tennants</a></div></td>

and CSS:

/* this is the container for all my buttons */
#mainnav {
padding: 0 0 0 0;
margin-top:2px;
margin-bottom:2px;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
font-size:9pt;
line-height:1em;
background-color: #FFFFFF;
color: #333;
}
/* this is a button*/
#mainnav a {
/*display: block;*/
padding: 4px 4px 4px 4px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
background-color: #010641;
color: #fff;
text-decoration: none;
width: 155px;
margin-right:4px;
}


Thanks,

Graham

 

[MrGreed]

Your problem is that IE doesn't really care about the <br> in your code but Mozilla does.

Get rid of the breaks you should be fine.

Change:
<div id=&quot;mainnav&quot;><a href=&quot;sections/about.htm&quot;>About <br> Duncan Property</a><a href=&quot;sections/services.htm&quot;><br> Property Services</a><a href=&quot;sections/landlords.htm&quot;>Information for <br> Landlords</a><a href=&quot;sections/tennants.htm&quot; class=&quot;last&quot;>Information for<br> Tennants</a></div></td>

To:
<div id=&quot;mainnav&quot;><a href=&quot;sections/about.htm&quot;>About Duncan Property</a><a href=&quot;sections/services.htm&quot;>Property Services</a><a href=&quot;sections/landlords.htm&quot;>Information for Landlords</a><a href=&quot;sections/tennants.htm&quot; class=&quot;last&quot;>Information for Tennants</a></div></td>


MrGreed

http://www.pastame.com

&quot;did you just say Minkey?, yes that's what I said.&quot;

 

[grahamarrowsmith]

Thanks for the tip - is there any way of keeping a break in between some of the words (eg. About <br> Duncan Property) or making some sort of virtual line break that doesn't disrupt the div tag?

It's just a small design issue really but I'm keen to keep the buttons larger.

Thanks for your help!

Graham.

 

[Vragabond]

#mainnav a {
display: block;
float: left;
padding: 4px 4px 4px 4px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
background-color: #010641;
color: #fff;
text-decoration: none;
width: 155px;
margin-right:4px;
}

Try this. Looks nice in my Mozilla 1.4 and IE6.

Hope it helps.

 

[MrGreed]

Only thing I can suggest to keep the buttons larger is adding Height:50px to your mainnav a style. I can't think of anything to get the text to break.

MrGreed

http://www.pastame.com

&quot;did you just say Minkey?, yes that's what I said.&quot;