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

can i see your code please - inc the layout if possible, its hard to visualise without it

it might be quicker if i point you at the page (tell me if the code is better)

page

css

thanks

jim

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

thanks Chris (and thanks for the kind words - always nice to hear!!)

jim

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

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

Which image moves? All of them?

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

p.s. or maybe i just don't geddit!!

just wanted to get this back the front page as i'm still looking......

I copied and pasted everything onto my server to test. Nothing worked. Sorry, out of ideas...

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

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