Jump to content


Photo

Customizing a button, displays differently in IE and FF


  • Please log in to reply
3 replies to this topic

#1 FrOzeN

FrOzeN
  • Members
  • PipPipPip
  • Advanced Member
  • 70 posts

Posted 29 September 2006 - 09:20 AM

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

Posted Image

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

Example page: http://www.clananthr...et/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?

#2 notDeadYet

notDeadYet
  • Members
  • Pip
  • Newbie
  • 3 posts

Posted 05 October 2006 - 12:41 AM

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.





#3 FrOzeN

FrOzeN
  • Members
  • PipPipPip
  • Advanced Member
  • 70 posts

Posted 05 October 2006 - 06:03 AM

Thanks, I'll look into tweaking it with that. :)

#4 Daniel0

Daniel0
  • Staff Alumni
  • Advanced Member
  • 11,956 posts

Posted 06 October 2006 - 05:45 AM

You could have something like this, but it would be kind of annoying to maintain multiple stylesheets:
<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
}
?>





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users