[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

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

Posted on 2007-03-20
5
Medium Priority
?
616 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 1600 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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone 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

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…
Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Suggested Courses

650 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