sfboarders
Swimming With Sharks
Premium
join:2000-12-13
AtTheBeach
clubs:
|  CSS Padding with Firefox
IE Padding | 
Firefox Padding |
.maintop
{
background: url(maintop.png);
width: 514px;
height: 23px;
background-repeat: no-repeat;
}
.mainbg
{
background: url(mainbg.png);
background-repeat: repeat-y;
width: 514px;
padding: 40px;
border-color: #acbcbf;
border-width: 1px;
border-style: dashed;
}
.mainbot
{
background: url(mainbot.png);
width: 514px;
height: 26px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="maintop"></div>
<div class="mainbg">
CONTENT HERE
</div>
<div class="mainbot"></div>
</body>
</html>
--
Skate, Snow, and Surf - SFboarders - Bringing San Francisco Bay Area boarders together.
SF Aloha - Bringing Da Islands to Da San Francisco Bay Area |
|
sfboarders
Swimming With Sharks
Premium
join:2000-12-13
AtTheBeach
clubs:
| Figured out a workaround. Any other things I can do?
.mainbg p {
padding: 20px; /*--------changed to 20px instead of 40px----------*/
} |
|
klobb
join:2000-10-06
2 edits | reply to sfboarders
here.. added a container and just set the width of only the container (eg remove widths from the other classes). Works in both now.
<Style>
.container
{
width:514px;
}
.maintop
{
background: url(maintop.png);
height: 23px;
background-repeat: no-repeat;
}
.mainbg
{
background: url(mainbg.png);
background-repeat: repeat-y;
padding: 40px;
border-color: #acbcbf;
border-width: 1px;
border-style: dashed;
}
.mainbot
{
background: url(mainbot.png);
height: 26px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<!-- added a container div -->
<div class="container">
<div class="maintop"></div>
<div class="mainbg">
CONTENT HERE
</div>
<div class="mainbot"></div>
<!-- close container -->
</div>
</body>
</html> |
|
sfboarders
Swimming With Sharks
Premium
join:2000-12-13
AtTheBeach
clubs: |  Thanks that worked! I had a container on my site already so it was easy to add the width and remove the width from the other divs. |
|
Roundboy
Premium
join:2000-10-04
Drexel Hill, PA
| reply to sfboarders
this is the IE vs FF width bug ...
according to firefox, the width of an object is what you specify (150px), and padding(5px all around) & margins (5px) are subtracted from it (150 -5 -5 -5 -5 = 130px actual content)
Ie says .. whoa... 150 PLUS padding and margins, giving you 180px content ... or something like that.
Here is a workaround : »glish.com/css/hacks.asp
--
[spoiler]Steve the pirate DIES![/spoiler] |
|
