Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Absolute vs Relative Positioning Firefox vs. IE

Posted on 2006-06-22
4
Medium Priority
?
1,082 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 2000 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

670 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