Solved

Absolute vs Relative Positioning Firefox vs. IE

Posted on 2006-06-22
4
1,079 Views
Last Modified: 2008-02-01
I am trying to absolutely position a div within a css-enabled td set to position: relative.  

Here is my markup

                               <td id="header">
                                    <div id="navigation">
                                        <ul>
                                            <li>
                                                <asp:HyperLink id="Hyperlink0" runat="server" navigateurl="~/Main/Fishing.aspx">Fishing</asp:HyperLink></li>
                                            <li>
                                                <asp:HyperLink id="Hyperlink1" runat="server" navigateurl="~/Main/Fishing.aspx">Lodging</asp:HyperLink></li>
                                            <li>
                                                <asp:HyperLink id="Hyperlink2" runat="server" navigateurl="~/Main/Packages.aspx">Packages</asp:HyperLink></li>
                                            <li>
                                                <asp:HyperLink id="Hyperlink3" runat="server" navigateurl="~/Main/Photos.aspx">Photos</asp:HyperLink></li>
                                            <li>
                                                <asp:HyperLink id="Hyperlink4" runat="server" navigateurl="~/Main/Staff.aspx">Staff</asp:HyperLink></li>
                                            <li>
                                                <asp:HyperLink id="Hyperlink5" runat="server" navigateurl="~/Main/Contact.aspx">Contact Us</asp:HyperLink></li>
                                        </ul>
                                    </div>
                                </td>

Here is the css im using:
#header
{
    background-image: url(Images/mcdougal_r1_c1.jpg);
    height: 105px;
    position: relative;
}
#header_np
{
    background-image: url(Images/mcdougal_np.jpg);
    height: 130px;
    position: relative;
}
#imagebar
{
    background-image: url(Images/mcdougal_r2_c1.jpg);
    height: 110px;
}
#navigation
{
    position: absolute;
    bottom: 0;
    color: white;
    height: 30px;
    line-height: 30px;
    right: 10px;  
}
    #navigation ul
    {
        margin: 0;
        padding: 0;  
    }
    #navigation ul li
    {
        display: inline;  
        padding-left: 10px;
    }
        #navigation a
        {
            color: White;  
        }

here is the doctype of the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Here is the website that is having the problems:  http://mcdougalllodge.com
0
Comment
Question by:rodmjay
  • 2
  • 2
4 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 16964706
Hi rodmjay,

A word of warning is that if you want to absolutely position this text on top of the image, you will need to make sure that min-width is set VERY high, about the size of the whole page, because the text will shift as the browser is resized. Otherwise, you will need to make the layout fluid horizontally, but it will have to expand to 100% of the whole screen or else the margins on both sides are difficult to judge.

Now, FF seems to be positioning this correctly because absolute positioning is based on the whole page, not just the containing element. You can switch it around by, instead of positioning bottom:0px, position top:75px because the height of the image must be a constant 105px as specified. The only issue now is the right positioning since that can change as the browser is resized.

In the end, it is all a big mess.

Instead, you can try this:

Move the #navigation from the <div> straight to the <ul> and get rid of the <div>. (Dunno if this is needed, but it's what I did ;-)
Now, have these styles on #navigation:

#navigation
{
    position: static;
    color: white;
    text-align: right;
    margin: 0px;
    padding: 0px;
}

Now, get rid of #navigation ul, and instead of #navigation ul li now, it is just:

#navigation li
{
    display: inline;
    padding: 0px 10px 0px 0px;
}

Regards,
Ted
0
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 500 total points
ID: 16964878
Absolute position is relative to the closest positioned parent element...
Except that firefox ignores positionned <td> elements.  That's a known non-standard behaviour in the gecko rendering engine.  The gecko developers did not get a chance to handle this particular case.
To solve this issue, use a <div> inside your <td> and set that div's position to "realtive".

<td id="header">
  <div style="position:relative;">
    <div id="navigation">
      ...
    </div>
  </div>
</td>
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 16964908
Ah, so that's what it is. Thanks, GS; for CSS I usually just play around with it rather than understand what is going on.
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16964963
you are welcome Zyloch...  i got this info from the great master COBOLdinosaur.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to resize a div in html 3 48
Character counter breaks after adding EmojiOne Area 4 45
Bootstrap list items overlap 3 35
Fix Form size HTML 16 30
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question