Welcome to WebmasterWorld Guest from 34.204.191.31

Forum Moderators: not2easy

Message Too Old, No Replies

Firefox absolute not absolute

Firefox absolute not absolute

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

New User

10+ Year Member

joined:Apr 10, 2005
posts:24
votes: 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]

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

New User

10+ Year Member

joined:Apr 10, 2005
posts:24
votes: 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;
}

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

Senior Member from CA 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 25, 2003
posts:1341
votes: 439


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.

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

New User

10+ Year Member

joined:Feb 24, 2005
posts:21
votes: 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

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

New User

10+ Year Member

joined:Apr 10, 2005
posts:24
votes: 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!