position:relative, where running into floating element, not working in Opera browser
View this page with IE or Firefox please:
http://vebu-preview.nixwaters.de/nv/nv_2006_3__vegetarisch_unterwegs.htm
In both browsers you'll notice the headline in red colour
by position:relative instructions nicely being aligned to the outline
of the detective image, which, together with it's image is floated
on left hand side of the page.
Then please view the same page with Opera 8.0 browser
and you'll find that the red headline is not aligned to the
outline of the image floating on the left - short, position:relative
seems not to work in Opera where it would run into a floating element.
Is there a remedy to this ?
http://vebu-preview.nixwaters.de/nv/nv_2006_3__vegetarisch_unterwegs.htm
In both browsers you'll notice the headline in red colour
by position:relative instructions nicely being aligned to the outline
of the detective image, which, together with it's image is floated
on left hand side of the page.
Then please view the same page with Opera 8.0 browser
and you'll find that the red headline is not aligned to the
outline of the image floating on the left - short, position:relative
seems not to work in Opera where it would run into a floating element.
Is there a remedy to this ?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
@zeroxp:
Thank you a bundle !!
It really works now in Opera and in the other browsers which I use for the test.
Great job !!
Apart from that, I found out that it is not necessary to put the construct
that you gave above, into an additional <div> section (saving code if possible ; )
One sec, I'm going to reward you additional 100 points for really great and exact help here.
Thank you a bundle !!
It really works now in Opera and in the other browsers which I use for the test.
Great job !!
Apart from that, I found out that it is not necessary to put the construct
that you gave above, into an additional <div> section (saving code if possible ; )
One sec, I'm going to reward you additional 100 points for really great and exact help here.
it's good tosee that works.
i would recommand to use some wrapper structures to group sections with semantic meaning wherever possible. at least for some basic sections such as header, content and footer. this will make lift easier when you want to use some javascript or server technology to control sections in the document.
i would recommand to use some wrapper structures to group sections with semantic meaning wherever possible. at least for some basic sections such as header, content and footer. this will make lift easier when you want to use some javascript or server technology to control sections in the document.
ASKER
I'll seriously consider to apply your idea in the next series of
online publications. Thanks again ; )
online publications. Thanks again ; )
the reson that Firefox didn't go into problem is a div will not expend its width when you set a absolute width to it.
you better change you h5... to relative width(percentage) if you really need one.
have a look of this to see the different behaviors..:
<html>
<head>
<title>Layout Test</title>
</head>
<body>
<div style="width:100px; background-color:#ccc; color:#000;">
<h1 style="width:400px; background-color:#ee0; color:#000;">123</h1>
<p>1</p><p>1</p><p>1</p>
</div>
</body>
</html>