Solved

position:relative, where running into floating element, not working in Opera browser

Posted on 2007-03-20
5
600 Views
Last Modified: 2013-12-07
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 ?
0
Comment
Question by:xberry
  • 3
  • 2
5 Comments
 
LVL 5

Expert Comment

by:zeroxp
ID: 18775607
it seems your #content h5 (h2 in potential as well) has a width greate then the  width of your container.
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>
0
 
LVL 5

Accepted Solution

by:
zeroxp earned 400 total points
ID: 18775964
sorry please ignor the above post. it's another issue. my bad....

i changed you relative section to:
<div>
   <p class="bild_links" style="width:300px;">
      <img src="images/nv_2006_3__vegetarisch_unterwegs__Detektiv.png" width="300" alt="Rastst&#228;tten-Detektiv" style="padding:20px 0px 10px 0px;"/>
      oben: Werden Sie ein Rastst&#228;tten-Dedektiv ... oder vielmehr "Vegitiv" und machen auch Sie mit: siehe nebenstehende Checkliste zum Mitmachen (Illustration: Sandra Seiffart)
   </p>
   <div style="float:left; width:310px;">
      <h1 style="position:relative; left:-100px; padding-top:5px;">Erfolg f&#252;r die </h1>
      <h1 style="position:relative; left:-80px;">VEBU-Kampagne</h1>
      <h1 style="position:relative; left:-20px;">vegetarisch</h1>
      <h1 style="/*position:relative;*/ padding-bottom:15px;">unterwegs</h1>  
   </div>
</div>

seems working
0
 
LVL 14

Author Comment

by:xberry
ID: 18779096
@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.
0
 
LVL 5

Expert Comment

by:zeroxp
ID: 18786934
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.
0
 
LVL 14

Author Comment

by:xberry
ID: 18787719
I'll seriously consider to apply your idea in the next series of
online publications. Thanks again ; )
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now