Jump to content

Customizing a button, displays differently in IE and FF


FrOzeN

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?
Link to comment
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.



Link to comment
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]
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.