Jump to content

Archived

This topic is now archived and is closed to further replies.

FrOzeN

Customizing a button, displays differently in IE and FF

Recommended Posts

I'm trying to get this button to look the same in both IE and FF.

[img]http://img208.imageshack.us/img208/965/buttonszx8.jpg[/img]

[b]My CSS[/b]:
[code].button {
    background-color: #eee;
    border: #000 1px solid;
    color: #000;
    font: 11px Verdana, Tahoma, Arial, Sans-Serif;
}[/code]

Example page: http://www.clananthrax.net/example.html

1. I want the padding to be the same (or relatively similar).
2. I don't want IE to add the 2px black border, I just want it to stay as a 1px border.

Any suggests with my css to get them more the same?

Share this post


Link to post
Share on other sites
Firefox and IE6 handle widths, padding and cell-spacing differently.

IE includes the cellpadding/spacing in the width attributes.
width: 400px;
padding: 20px; // makes a box 400px wide.

Firefox treats width, padding/spacing seperately, so they would need to add up to the total width:
width: 360px;
padding: 20px; // also makes a box 440px wide

To write that in your css file,

td {
width: 360px;
padding: 20px;
}

* html td {
width: 400px;
padding: 20px;
}

Adding the * html  makes that code only visible to IE brower, so it overwrites the first style that Firefox will read.

So, you may need to set width/padding for your link cells just to make sure they are the same.



Share this post


Link to post
Share on other sites
You could have something like this, but it would be kind of annoying to maintain multiple stylesheets: [code]<link rel='stylesheet' href='global.css' title='Global stylesheet' />
<?php
if(check_for_ie_here)
{
?>
<link rel='stylesheet' href='global.css' title='IE stuff' />
<?php
}
else {
?>
<link rel='stylesheet' href='global.css' title='FF stuff' />
<?php
}
?>[/code]

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.