#1
  1. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    12

    positioning question for CSS and opera


    Hi
    I really hope that somebody can help me because I am out of ideas and cannot find a solution...

    I have set up the page to have a box floated in the middle of the browser window (like ALA)

    There is an image that is floated on the left of this box and is most of the height of the box.

    Next to the image are two floated boxes (set with margin: 0 23px 0 23px for the first box and 0 for the second) that are about 2/3s of the height of the image and all three floated divs align along their top edges - i.e. the image and the two boxes. No problems with any of this.

    Beneath these two floated boxes is a div for a box (position: relative; margin: 0; left: 23 px; )

    In IE and mozilla this box appears where it should, i.e. 23 pixels to the right of the original floated image beneath the two floated boxes all nicely aligned.

    In opera is where there are problems. The relatively positioned box still appears beneath the 2 floated boxes but sits on top of the bottom portion of the floated image 23 pixels from the left edge of the main box, i.e. it is ignoring the part that the floated image plays in flow of the page (i think)

    if i set left for the relatively positioned box to a value compensating for the floated image then it will render ok in opera and IE - but is now that many pixels to the right in mozilla.

    i've tried quite a few things to correct this but i'm shooting in the dark really and nothing has worked so i'm hoping one of you knows how to fix this (and that you can understand my waffling explanation......)

    thanks anyway

    jim
    Last edited by billybonds; November 8th, 2003 at 09:57 AM.
    On a nationwide tour - back next year as champions.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    58
    Rep Power
    12
    can i see your code please - inc the layout if possible, its hard to visualise without it
  4. #3
  5. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    12
    it might be quicker if i point you at the page (tell me if the code is better)

    page

    css

    thanks

    jim
    On a nationwide tour - back next year as champions.
  6. #4
  7. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    37
    I have not yet viewed the page in Opera, but I will try to get to that later. Lemme take a look in that browser and get back to you. Nice site, though...

    Chris
    Pop, pop, fizz, fizz, oh what a relief it is!
  8. #5
  9. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    12
    thanks Chris (and thanks for the kind words - always nice to hear!!)

    jim
  10. #6
  11. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    37
    Hmmmmm... Ok, I took a look in Opera. Interesting problem. This is why I hate Opera! Have you tried changing the the class contentB to "position: absolute;"? Try that. It might get the box to show up in the right place (next to the boy banner image), but it might screw up the overall positioning, in which case, you'll have to play with all the settings (right, top, etc...). Not sure if this'll work or not. Lemme know.

    Chris
    Pop, pop, fizz, fizz, oh what a relief it is!
  12. #7
  13. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    12
    hi Chris

    yeah i did that - i think i must be missing a trick with absolute positioning because while i can position the element in the correct place, when i change resolution the image moves... i don't really understand what to do about it. Ah well - onwards and upwards......

    thanks for looking,

    jim
  14. #8
  15. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    37
    Which image moves? All of them?
    Pop, pop, fizz, fizz, oh what a relief it is!
  16. #9
  17. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    12
    Sorry - image was the wrong word - I meant contentB

    When i tried it - i set an absolute position for ContentB so that it would be positioned the same for all the browsers. it did that but when i then tried it in a different resolution contentB shifted with the LHS of the browser window rather than the page content, which i suppose is what absolute positioning is supposed to do. I suppose this is because my content is centred in the window....

    jim
  18. #10
  19. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    12
    p.s. or maybe i just don't geddit!!
  20. #11
  21. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    12
    just wanted to get this back the front page as i'm still looking......
  22. #12
  23. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    37
    I copied and pasted everything onto my server to test. Nothing worked. Sorry, out of ideas...
    Pop, pop, fizz, fizz, oh what a relief it is!
  24. #13
  25. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    12
    hi Chris

    thanks a lot for trying....

    yeah it's a real pain. i guess if i can't figure it out soon then i'll have to try and change the way i do it completely.

    never mind. it's all good practise!!

    jim
  26. #14
  27. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    12

    problem solved


    thanks to a kind man on CSS-discuss called Big John

    "Rather odd.

    Assuming it is the properties on the box causing the variance
    I removed the positioning from the scrolling box and wrapped
    it in a simple div, and found that margining or padding the
    left side of that div does what you need. IE positions slightly differently, but it may not be enough to matter.

    BTW, it is the "overflow: scroll;" that causes Moz to stop obeying the float specs! I didn't know about that bug. Apparently, in Moz when a div has scrolling the entire div acts like it was inline, because it stays out from
    under the left float. Wow, a real live Mozbug! :-D
    HTH
    Big John"

    (in case you were interested in the solution....)

    jim
    On a nationwide tour - back next year as champions.

IMN logo majestic logo threadwatch logo seochat tools logo