Solved

Absolute vs Relative Positioning Firefox vs. IE

Posted on 2006-06-22
4
1,075 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
you are welcome Zyloch...  i got this info from the great master COBOLdinosaur.
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

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…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
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…

743 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

16 Experts available now in Live!

Get 1:1 Help Now