Firefox CSS bug?

android

12-16-2007, 08:50 PM

I'm running IE6 and the latest version of FF.

I'm playing with CSS1 and noticed that once again a big difference but oddly, this time IE got me the desired effect.

Try it and you will notice that the margin-top in FF disregards that <p> is inside a <div> but it's correctly dispayed in IE.

Here is the code:
<html><head><style type="text/css">
</style><title>Hey</title></head><body>
<font face=impact>Hey!</font><br>
<div style="background: #FFFFCC; color: #000000;">
<p>Ready, set, go!</p>
</div>
</body></html>

I'm sure there is a bypass, but is this a FF bug?

BWiz

12-16-2007, 10:39 PM

Use padding instead of margin.

<html>
<head>
<style type="text/css">
body
{
margin: 100px;
}
div
{
height: 250px;
letter-spacing:2pt;
font-weight: bold;
}
p
{
padding: 30px;
}
.impact-font
{
font-family: Impact;
}
.section
{
background-color: #ffc;
color: #000;
}
</style>
<title>Hey</title>
</head>
<body>
<span class="impact-font">Hey!</span>
<div class="section">
<p>
Ready, set, go!
</p>
</div>
</body>
</html>

android

12-16-2007, 10:47 PM

You replied just as I was about to edit this thread. Found the padding thing in a later chapter of my lessons. Thanks though.

I'm having fun with CSS. ;)

oesxyl

12-17-2007, 04:12 AM

you could avoid browser default style using a rule in your css file.

for example:

* { margin: 0; padding: 0; }

best regards

ahallicks

12-17-2007, 09:27 AM

you could avoid browser default style using a rule in your css file.

for example:

* { margin: 0; padding: 0; }

best regards

However, with this remember that you will need to reapply margins and padding to those that use them and you generally need, such as the <p> tag, and lists