Solved

Absolute vs Relative Positioning Firefox vs. IE

Posted on 2006-06-22
4
1,081 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
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 add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
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…
Suggested Courses

617 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