Solved

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

Posted on 2007-03-20
5
606 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

696 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