SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Positioning Problems

    In what is a fairly simple layout, I have the following elements:

    • A container DIV that is positioned relative;
    • A navigation DIV menu that is floated left;
    • A content DIV that is floated left;
    • A footer that clears both.

    In addition to this however, I have an logo graphic in the top right hand corner, which I have positioned absolutely. Due to the nature of the graphic (it breaks out of the container) I have set both the top and right properties to minus figures.

    In almost every browser, this displays as intended - the logo is situated at the top of the container DIV, protuding slightly. In IE however, the logo disappears. The strange thing is, if I comment out the navigation... or the footer... or both... then the logo is present - in the correct place.

    So, it would appear that IE can cope with an absolutely positioned image within a relative container, even with negative top and right properties. It just so happens that when a floated container or a footer is introduced, things all go a bit wrong.

    I have considered all sorts - widths, heights, floats, positioning - even hasLayout (the IE-DOM reports a hasLayout of -1 for the logo graphic) but to no avail.

    I appreciate this is not a lot to go on, but if somebody could at least point me in the right direction, that would be great.

  2. #2
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Positioning Problems - Resolved!

    Thank you for your speedy reply.

    In answer to your question, my absolutely positioned logo is indeed with an relatively positioned container DIV.

    As you suggested, I moved the absolutely positioned logo futher down the code making it the very last item in the relatively positioned DIV. Lo and behold, this worked! Thank you very much!

    The only drawback is that as the logo is obviously my branding for the website, when I disable the stylesheet the logo is at the bottom of the content. I realise this is a very picky point, but do you have any suggestions how I could get around this?

    Why does changing the location of the absolutely positioned element effect whether or not it is displayed in IE?

  3. #3
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning Problems - Demo

    Positioning the logo absolutely was just a convenient way of laying out the page, given the simplicity of the design and the 'breaking out of the frame' nature of the logo.

    The page in question (with the logo at the bottom of the document) can be found at:

    Test Page

    As you can see this is working across browsers. When the logo was the first element within the container DIV however, that was what caused the disappearance in IE.

    I am happy to put up with this slight change of order, although if you have any suggestions how I could fix the problem AND retain a logical order to the page (with the branding at the top) then please let me know!

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your container is missing a closing tag - maybe that will help.

  5. #5
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Positioning Problems - Solution

    Wow, thanks guys!

    Regarding the lack of closing tag, Tyssen, I'm not normally so sloppy, but that did not seem to make any difference. Thanks for letting me know, though.

    all4nerds, I did actually try the float:right / position:relative on the logo image, but I wasn't happy with the navigation panel dropping below this. It didn't cross my mind to bump this up with a negative margin too, and this appears to work nicely.

    Once again, many thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •