CSS + graphical buttons

[GJSNeptune]

I used this guide to place some graphical buttons on my site.

http://www.fridayrain.com/FR

They function perfectly in Firefox (of course):

IE6 obliterates them:

Is there a trick or a hack to make IE6 behave? And is it pretty safe to assume that if it looks fine in IE6, that it looks fine in IE7?

Does the CSS trick of image maps not work in IE6? That's what the middle part is with the grey.

 

[Sgraffite]

Css Play has quite a few examples of menus and he mentions which browsers render them correctly. Hope that helps.

 

[Grentz]

I wouldn't say of course with Firefox...my site's old template's CSS Buttons worked fine in IE6 and 7, Safari, and Opera, but rendered incorrectly in Firefox

 

[Kris]

I would recommend using an unordered list for your navigation. Cleaner and easier to maintain than several divs and anchor tags (though, you could dorp the divs and just use the anchor tags too). You can look at my site for an example of this.

 

[GJSNeptune]

Well the guide I used shows how to do the buttons vertically, but I wanted horizontally, so I tweaked the code for awhile and couldn't get it to display properly. I decided to put each button in its own div because I was having a hard time getting them to fill the right widths and heights.

So lists can also go horizontally?

 

[ritterb]

li { display: inline; }, or you can li {float: left;} (or float: right )

 

[Excavator]

#menupoet {
    width: 114px;
    height: 22px;
float: left;
    background-color: #554411; }

#menufict {
    width: 114px;
    height: 22px;
float: left;
    background-color: #1f1f1f; }

#menunonf {
    width: 114px;
    height: 22px;
float: left;
    background-color: #666666; }

#menuscre {
    width: 114px;
    height: 22px;
float: left;
    background-color: #cbeceb; }

#menuprof {
    width: 114px;
    height: 22px;
float: left;
    background-color: #abcbca; }

Here's a good tutorial on building menus without using a ul.

 

[GJSNeptune]

Oh, just float them all left? Eesh. I'll try it once I'm home. Thanks.

Those background colors were just for reference. Those divs'll be transparent eventually.