DIV Buttons

[OzWolf]

Greetings,

I have run into something that has got me perplexed, and given my relatively short development time with CSS, it comes as no surprise really.

Anyway, I am trying to develope a CSS button template for my website. The problem I have run into is the dreaded cross-browser compliance issue, with the button working in Internet Explorer but not the other, stricter browsers such as Netscape, Opera or Mozilla.

This would generally indicate to me that I've been lax in my W3C compliance but lack of experience is not making it obvious to me. Could somebody give me some pointers in the right direction please.

The CSS styles for the button in question are:

.largeButton a
{font-family: tahoma;
font-size: 10pt;
color: #FFFFFF;
font-weight: bold;
background: url('../Images/large_button_out.jpg');
width: 200px;
height: 20px;
text-decoration: none;
text-align: center;
line-height: 17px;}

.largeButton a:hover
{font-family: tahoma;
font-size: 10pt;
color: #FFFF00;
font-weight: bold;
background: url('../Images/large_button_over.jpg');
width: 200px;
height: 20px;
text-decoration: none;
text-align: center;
line-height: 17px;}

The call for the following images is as follows:

<div class=&quot;largeButton&quot;>
<a href=&quot;../Public/post_activity.html&quot;>Post Activity</a><br>
<a href=&quot;../Public/web_jobs.html&quot;>Outstanding Tasks</a>
</div>

The following images are the result of this:

Internet Explorer:

http://wte-anga.com/Images/ie.jpg

Netscape/Mozilla/Opera:

http://wte-anga.com/Images/netscape.jpg

The only problem is that the latter browsers ignore the DIV height and width properties (but the HOVER functionality works).

Any help greatly appreciated.

Cheers,

OzWolf

 

[EdwardMartinIII]

I don't have the JPG image, so I can't experiment on this end, but if I did, the first thing I'd try is doing this:

<div class=&quot;largeButton&quot;><a href=&quot;../Public/post_activity.html&quot;>Post Activity</a></div>
<div class=&quot;largeButton&quot;><a href=&quot;../Public/web_jobs.html&quot;>Outstanding Tasks</a>
</div>

I'd also try taking out the line-height:, width:, and height: tags and then see what happened. I would try adding one at a time, in different orders.

If you post a link to the JPG image, I'll noodle on that and see what I can do.

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[OzWolf]

It still unfortunately causes a problem.

Removing the height, width and line-height tags completely remove the layout of the buttons even in IE.

The HEIGHT and WIDTH tags are present to ensure the DIV will always be the correct size so as the button image will be visible. The LINE-HEIGHT is there to ensure the text that will be placed in the DIV area is centered correctly on the image. If you remove these, IE ends up looking the same as the other browsers.

Anyway, the images can be found at:

http://wte-anga.com/Images/large_button_out.jpg

and

http://wte-anga.com/Images/large_button_over.jpg

 

[OzWolf]

Problem solved. I forgot the DISPLAY: BLOCK; tag for the definition.