CSS and Cross Web-Browser

[Aranince]

Argh....I hate making sites work in two browsers. I am trying to make buttons using CSS. It works perfectly in Firefox, but doesn't in IE. The links work fine in IE, but don't have the hover effect. Also, at the end of the Nav bar, the image will not align with the css buttons. The image is 125px wide and in FireFox the buttons have to be 123px wide to be aligned correctly. But in IE, 123px is too short.

Should I just make the buttons an image and forget it?

div.navigation	   {
			float: left;
			width: 123px;
			margin: 0px;
			}	
			
span.navbutton	{
			display: block;
			background-color: #003399;
			width: 100%;
			border-top: 1px solid #FFF;
			border: 1px solid #003399;
			margin: 0px;
			padding: 0px;
			color: #FFF;
			cursor: pointer;
		        }

			
span.navbutton:hover {
				background-color: #FFF;
				width: 100%;
				color: #003399;
				border: 1px solid #003399;
				cursor: pointer;
				text-decoration: none;
				}

<div class="navigation">
	<a href="index.html"><span class="navbutton">Main</span></a>
	<a href="aboutus.html"><span class="navbutton">About Us</span></a>
	<a href="services.html"><span class="navbutton">Services</span></a>
	<a href="partners.html"><span class="navbutton">Partners</span></a>
	<a href="contact.html"><span class="navbutton">Contact Us</span></a>
	<img src="graphics/navgradiant.png" alt="" />
</div>

 

[elppa]

It may be something to do with the way borders are handled.

FF may say 123px + 1px border (left) + 1px border (right) = 125px

Whereas IE may say 123px includes 1px border (left) and 1px border (right) = 123px

Try removing this line from the .navbutton declaration:

border: 1px solid #003399;

(It is the same as your bg colour, so not really necessary)

And change the width of navigation to 125px.


By the way, your effort is not as neat as it could be. For example, there is no need for span tags around the links. What's wrong with:
<a href="contact.html" class="navbutton">Contact Us</a>

Then just reference:
a.navbutton

Moreover this is a waste of time:
<img src="graphics/navgradiant.png" alt="" />

<img> should be used for actual images/drawings, not presentational elements.

Give the .navigation padding at the bottom equal to the height of the "navgradient.jpg" image, then use the "background:" attribute in the CSS file to position said image at the bottom of the div:

padding-bottom: ??px;
background: url(navgradient.jpg) no-repeat left bottom;

That should achieve what I think you are trying to achieve with the superfluous markup.

 

[maximile]

In IE, only <a> elements can take the :hover selector. (Dunno if this is true in the latest version, but it certainly was until recently). So following elppa's advice should fix it.

 

[Aranince]

Thanks for your help!