Firefox absolute not absolute

Forum Moderators: not2easy

Message Too Old, No Replies

Firefox absolute not absolute

Ohioian

11:49 pm on Apr 10, 2005 (gmt 0)

I'm green so go easy! I have a problem with Firefox <div> set to absolute not going to the fixed position in it's parent <div>. It is showing about 40px lower. IE and Opera is showning it in the right position. You can say it's eating my shorts.

#headertag {
position: absolute;
left: 10px;
top: 90px;
text-align: left;
width: 213px;
height: 43px;
overflow: visible;
}

The website is

<Sorry, no personal URLs.
See Terms of Service [webmasterworld.com]>

[edited by: tedster at 8:29 am (utc) on April 11, 2005]

Ohioian

1:15 pm on Apr 11, 2005 (gmt 0)

Okay, guess I started off in this forum on the wrong foot (posted my url). I'll try not to burden the reader with to much code. The '...' is me showing a continuation in the code, it's not in the code.

Thanks!

Here is the html content:
<body>
<div id="container">
<div id="image_container">
<div id="headertag">
<h1>Welcome</h1>
</div>
<div id="headertag2">
</div>
<div id="innerimage_left">
<div id="innerimage_right">
</div>
</div>
</div>...

Here is the CSS content I'm dealing with:

body {
margin: 0px;
text-align: center;
background-image: url(images/tile.gif);
background-repeat: repeat;
...

#container {
margin: 0px auto;
width: 770px;
voice-family: "\"}\"";
voice-family: inherit;
position: relative;
}
html>body #container {
width: 770px;
}
#image_container {
width: 770px;
}
#innerimage_left {
background-image: url(images/headerleft.gif);
background-repeat: no-repeat;
}
#innerimage_right {
background-image: url(images/headerright.gif);
height: 200px;
background-repeat: no-repeat;
margin-left: 416px;
}
...
#headertag {
position: absolute;
left: 10px;
top: 90px;
text-align: left;
width: 213px;
height: 43px;
overflow: visible;
}

iamlost

7:52 pm on Apr 11, 2005 (gmt 0)

Welcome to WebmasterWorld, Ohioian!

I see the problem as being with the <h1> within the <div>. The <div> looks to be placed similarly in FF, O, IE. You might want to use differing coloured backgrounds when debugging as it quickly shows up oddities.

You need to override the default margin: .67em 0; that Firefox uses with <h1>.

Add to your CSS:
#headertag h1 {margin: 0;}

The browsers come complete with differing default CSS especially regarding margin and padding.

That is why you will often see:
* {padding: 0; margin: 0;}
at the top of a CSS file. It allows the developer to forget about the differences. Of course you then have to specify your own in each instance. But at least they are then consistent.

Huckleberry

8:02 pm on Apr 11, 2005 (gmt 0)

iamlost... am I glad that you pointed that out... I was going crazy myself because of a similar issue and figured it was because of the h1 tag.. stupid me did not figure on putting a margin:0 tag in there...

thanks m8

Ohioian

12:35 pm on Apr 12, 2005 (gmt 0)

iamlost (far cry from it)!

Thanks! I was messing with that parent tag to no end. I tried z indexing (thought I was running into some relational boundry that was stopping the absolute), padding and margin to no avail. All this time I barking up the wrong tree.

Thank you for the warm welcome as well!