Solved

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

Posted on 2007-03-20
5
601 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
IE issues 1 18
Gradient CSS 4 30
Most reliable mobile browser emulator? 3 63
Divi Them Help with Full Width header 20 24
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

920 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

16 Experts available now in Live!

Get 1:1 Help Now