SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    May 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    opera 9.x and position relative problem.

    Hi everyone,

    I have been working on this site:
    http://samgermein.com/images/portfol.../kkg/about.htm

    All was going well until of all browsers Opera gave me a problem which I can't seem to find any info about.

    On the page headings (e.g. About Us) I am using the Glider/Levin image replace method.

    Since the h1 element has position relative on it I set the top to -6px so that it would line with lines on the note paper image I used underneath.

    However Opera does not like it, it seems from what I can see to bring the text below up 6px rather than move my heading up 6px.

    Does anyone know anything about this?

    If this has been covered somewhere please feel free to just supply the link and ill try to suss it out myself.

    Many thanks

    Sam Germein

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Seems like Opera differ in position refering to relative moved parent, whether it is original or positioned coordinates.

    What if you move the "top:-6px" from h1 to the h1 span, and then remove the "overflow:hidden" from h1?

    Would that cause the h1 span to cover nav-buttons, or might it be a fix for this issue? Can't test it.
    Happy ADD/ADHD with Asperger's

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,520
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Just move the margin to the element above instead and remove it from the h1.

    Code:
    #contentwrapper #nav{margin-bottom:-6px}
    .about h1
    {
    position: relative;
    width: 197px;
    height: 65px;
    margin: 0 0 0 150px;
    overflow: hidden;
    
    }
    Or alternatively to get opera to work you would need to float the h1 and make it clear the float above.

    Code:
    .about h1
    {
    position: relative;
    top:-6px;
    width: 197px;
    height: 65px;
    margin: 0 0 0 150px;
    overflow: hidden;
    clear:both;
    float:left;
    display:inline;/*Ie6 bug*/
    }
    However you would then need to make sure the following image was also cleared and that would trigger a bug in IE6 and it won't let the right floated image clear a left floated element; so the first solution is the easiest.

    You can't remove the overflow:hidden because that's what keeps the text from being hidden under the image when text is resized .

    (My image replacement)

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seemed as Opera moved the following boxes in flow down 6px when h1 was relative position set top -6px.

    So I downloaded necessary files from the site to try to understand what was going on. And:

    When position:relative was used with a vertical-positioning negative value, the "upwards overflow" pushed the box down, but the box original place is not moved, is it? The virtual moved box shouldn't be regarded as overflow, should it?

    Why is it that; if the overflow:hidden rule is removed, the following boxes are not affected by the position at all.
    But with h1 overflow:hidden, position relative any vertical negative value moves the following boxes down with that amount.

    It seems backwards too, I'm puzzled.
    Happy ADD/ADHD with Asperger's

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,520
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    It seems backwards too, I'm puzzled.
    It seems like an opera bug which I'm guessing has to do with the way that elements with overflow are made to take note of so called invisible content.

    When overflow is applied then the element forms a rectangular block and margins will take effect from the floats around it and will not wrap around a float. Because the element is a static element then there is also a rule that automatically increases the margin of the element so that the content will wrap around the float. You can see this if you have a paragraph under a float and the top margin on the paragraph has no effect unless its greater than the height of the float above.

    I'm guessing that when the negative top positioning is applied and overflow is also in effect then opera is increasing the automatic margin by that same amount as some form of compensation which has the effect of pushing the rest of the page further down. Opera always did have problems with relative positioning and floats and I guess there are still a few glitches in there.

    This is just speculation

  6. #6
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reasoning about it.

    If its only a bug I'll just try to keep it in mind.
    Happy ADD/ADHD with Asperger's

  7. #7
    SitePoint Member
    Join Date
    May 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey guys,

    thanks for the replys, the solution was kinda obvious I should have worked that one out myself but cheers for providing it Paul, and big thanks for the explination into why its happening.

    Your image replacment method is quite interesting too.

    Thanks again.

    Sam


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
  •