Solved

Absolute vs Relative Positioning Firefox vs. IE

Posted on 2006-06-22
4
1,076 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

895 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now