Css Nav Buttons

[wampthing]

I am trying to do a theme for a site that has the menu as street signs (like the overhead freeway signs).

I want to have the text on top of the buttons be html and not writen in the JPG. I have made a blank button, and set it as the background for my links. I can get it to look like what I want in firefox, but IE is giving me a hard time.

 

I have the page here.

 

I cant get the links to show up in the middle (vertically) of the button in IE. It'll show up exactly how I want in Firefox though.

 

Does anyone have any thoughts? All the CSS is in the page so you can see what I have done.

[TCH-JimE]

Hello,

 

IE is very buggy when putting CSS inside tables, espeically text. A quick google shows a whole multitude of problems.

 

How about scrapping the tables and just using CSS OR scraping CSS for that part and use just tables?

 

JimE

[wampthing]

...I'm scared.

[wampthing]

Ill look into your suggestion. Thanks!

[surefire]

Borrow one of these:

 

ht*p://css.maxdesign.com.au/listamatic/index.htm

[GroovyFish]

I love poking around this CSS site:

 

h*tp://www.cssplay.co.uk/menus/index.html

 

You might find something in his list of menus that will help! On some of the menus he shows the CSS (and HTML/XHTML), on others he doesn't but you can view source. All the ones I just looked at say that there is no copyright attached.

[TCH-JimE]

Hey wampthing,

 

How did you go with this? Any luck?

 

JimE

[wampthing]

I did it two different ways that worked. (I never got the original way working though).

 

The first is using tables, and not having the image change, only the link. example

The second was using javascript to do rollover images. (The text was in the JPG, not html) example

With the Original however. I am defeated.

 

Thanks for following up with me. I also appreciate the links to the css menu pages. It is a great way to learn how menus can be done with proper coding.

[abinidi]

If you end up with the JS roll-over option, I'd suggest having your images be .gif images instead of .jpg images. Because of .jpg's compression, it doesn't do a great job on large fields of a single color (such as your green background). I'd bet you can get really small .gif versions of those images, and they'll look a lot higher in quality.

 

Just a thought.

 

Good luck.

 

( hows the newest addition to the Jensen family?)

Edited April 11, 2006 by abinidi

[wampthing]

If you end up with the JS roll-over option, I'd suggest having your images be .gif images instead of .jpg images. Because of .jpg's compression, it doesn't do a great job on large fields of a single color (such as your green background). I'd bet you can get really small .gif versions of those images, and they'll look a lot higher in quality.

 

Just a thought.

 

Good luck.

 

I did not know that. Thanks for the heads up.

 

( hows the newest addition to the Jensen family?)

 

Sleeps during the day and is awake at night. What can you do?

Things are great though. Thanks for asking.

[wampthing]

I did it!

 

It was as simple as putting padding on top of the link for something like 15px. I had thought I had tried it and it didnt work, but it shows up working now.

 

I also added some side signs.

[Kevan]

Looks good and now it looks the same to me in both IE and FF.

 

What I find interesting is that you use image files to show the different buttons (normal and hover). I was able to get similar changes (except for the boarders) with straight text and CSS. Your results look much better.