CSS rollover link buttons- can't space them

[DaRNCaT]

I've started redesigning a page using CSS, but I've come up with a but of a problem. I'm trying to make nice CSS rollover buttons. I tried a script from a website which used an unordered list, but it caused problems with Opera, plus it wouldn't let me space the buttons equal distance apart.
I decided to just use a class on the buttons, but no matter what I do, it won't let me put any space between them, not with spacer gifs, non breaking spaces, nothing.
Any insite into this would be much appreciated, I'm about ready to say stuff it and put the buttons in tables!

website

<div class="box">

<img src="images/Motel.gif" width="155" height="91" class="imagespace">
<img src="images/Motel_Title.gif" width="296" height="72" class="imagespace">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="images/qualmark_3star.gif" class="imagespace">
<img src="images/MANZ.gif" class="imagespace">
<br>
<div class="menu-box">
<a class="nav" href="#">Home</a>
<a class="nav" href="#">Book Online</a>
<a class="nav" href="#">Location</a>
<a class="nav" href="#">Local Attractions</a>
</div>
<br>
<br>

<br></div>

css file

body, P, H1, H2, H3, H4, H5, H6, TD, DIV, OL, UL, DL  {
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #FFCC00;
    text-align: center; /* catering for IE5.5 and older */
}

.box {
    text-align: left; /* so that text is not centered anymore */
    background-color: #FFFFFF;
    border: 1px solid #000000;
    width: 760px;
    height: 100%;
    position: static;
    margin: 0 auto; /* meaning top and bottom margins are 0, left and right are auto, which centers the box in standard browsers */

}
.imagespace {
    padding: 10px 20px 2px 10px;
    position: static;
}
.menu-box {
	text-align: center;
	background-color: #FFFFFF;
	border: 1px solid #000000;
	width: 720px;
	height: 24px;
	position: static;
	margin: 0 auto;
	display: block;
	vertical-align: middle;
	padding: 2px 10px;
}

.imagespace2 {
	position: static;
	padding: 10px 10px 3px 20px;
	
}
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

.nav {
	padding: 2px;
	height: 17px;
	width: 112px;
	border: 1px solid #000000;

}
a.nav:link {
background: #FFCC00;
height: 2em;
line-height: 2em;
float: left;
width: 112px;
display: block;
border: 1px solid #000000;
color: #000000;
text-decoration: none;
text-align: center;
font-size: 11px;
font-weight: bold;
margin: 0;
padding: 0;
}
a.nav:visited {
background: #FFFFCC;
height: 2em;
line-height: 2em;
float: left;
width: 112px;
display: block;
border: 1px solid #000000;
color: #000000;
text-decoration: none;
text-align: center;
font-size: 11px;
font-weight: bold;
margin: 0;
padding: 0;
}
a.nav:hover {
background: #6699FF;
height: 2em;
line-height: 2em;
float: left;
width: 112px;
display: block;
border: 1px solid #000000;
color: #000000;
text-decoration: none;
text-align: center;
font-size: 11px;
font-weight: bold;
margin: 0;
padding: 0;
}
a.nav:active {
background: #FFFFFF;
height: 2em;
line-height: 2em;
float: left;
width: 112px;
display: block;
border: 1px solid #000000;
color: #000000;
text-decoration: none;
text-align: center;
font-size: 11px;
font-weight: bold;
margin: 0;
padding: 0;
}

.main a:link {
	color: #000000;
	text-decoration: none;
	
	
}/*normal links in the text*/
.main a:visited {
	color: #000000;
	text-decoration: none;
	
	
}
.main a:hover {
	color: #000000;
	text-decoration: underline;
	
}
.main a:active {
	color: #000000;
	text-decoration: underline;
	
}

----------------------------------------
Sometimes, when my code just won't behave, I take it outside and make it listen to britney spears music, and when it comes back it's really well behaved. I wonder if it's suffering from post tramatic stress syndrome now..

 

[dkdude]

Hi,

In all your a. classes - change the

margin:0;

to (f.ex.)

margin-right : 15px;


Jakob

 

[ChrisHunt]

Save yourself typing (and some bandwidth) like this:

a.nav {
background: #FFCC00;
height: 2em;
line-height: 2em;
float: left;
width: 112px;
display: block;
border: 1px solid #000000;
color: #000000;
text-decoration: none;
text-align: center;
font-size: 11px;
font-weight: bold;
margin: 0 10px 0 0;
padding: 0;
}

a.nav:visited {
background: #FFFFCC;
}

a.nav:hover {
background: #6699FF;
}

a.nav:active {
background: #FFFFFF;
}

There's no need to repeat all the properties for each flavour of link, just redefine the ones which differ from the norm.



-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[DaRNCaT]

Cheers, that works much better.

I have another problem now though, basically, the page looks great in all browsers except IE, (typical) so I want to do a seperate css sheet for IE, rather than try and figure out how to comply with everything- if there is a better way please let me know!

Basically, I'm looking for hint on hows best to do this, do I detect browser, and add the external css sheet as applicable, or can I do it within the one style sheet?

----------------------------------------
Sometimes, when my code just won't behave, I take it outside and make it listen to britney spears music, and when it comes back it's really well behaved. I wonder if it's suffering from post tramatic stress syndrome now..

 

[chessbot]

You can either do a javascript style cheet detector or search google for "CSS IE hacks" or something like that.

See Forum216 (Javascript forum) for browser detection.

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five

 

[Vragabond]

Also know that I have done many CSS driven pages and had to apply minimal hacks for IE, especially for IE6. So, if you code to standards, IE should be able to render it pretty well.

 

[DaRNCaT]

it's not too terrible, it's just about 2 or 3 px out on everything in IE, it looks messy. I just want it to look uniform in all browsers, if at all possible

----------------------------------------
Sometimes, when my code just won't behave, I take it outside and make it listen to britney spears music, and when it comes back it's really well behaved. I wonder if it's suffering from post tramatic stress syndrome now..

 

[chessbot]

*sheet

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five

 

[DaRNCaT]

I'm using a php browser detection, but the weird thing is, I counted the space, and when previewing with Dreamweaver, I had the spacings perfect, now it's live, they are lopsided again....
With Firefox, et al, is there a difference between local and live that anyone else has noticed?


----------------------------------------
Sometimes, when my code just won't behave, I take it outside and make it listen to britney spears music, and when it comes back it's really well behaved. I wonder if it's suffering from post tramatic stress syndrome now..