Hi all,
I've met a problem with Opera and its ability to render absolutely
positioned divs inside relatively positioned parent blocks, themselves
contained inside a relatively positioned block.
I'm surely missing something, but what? Any help would be kindly
appreciated :)
Here's a code sample:
..grandparent{p osition:relativ e;}
..parent{positi on:relative;}
..parent .sub{
position:absolu te;
top:19px;
left:0px;
display:none;
z-index:1;
}
<div class="grandpar ent">
<div class="parent">
<div class="sub">tex t</div>
</div>
</div>
The display:none property is modified to display:block on a click
event happening somewhere else. Hence the hidden div appears as a
submenu, whose position depends on the parent block.
Any clue on why Opera cannot position this child block correctly? Or
is there anything wrong with my way of doing it? In fact, the .sub
divs seem to be positioned relative to the .grandparent div, not their
respective .parent divs.
Thanks for the anwser 4 8733
louissan wrote: .grandparent{po sition:relative ;} .parent{positio n:relative;} .parent .sub{ position:absolu te; top:19px; left:0px; display:none; z-index:1; }
<div class="grandpar ent"> <div class="parent"> <div class="sub">tex t</div> </div> </div>
Any clue on why Opera cannot position this child block correctly? Or is there anything wrong with my way of doing it? In fact, the .sub divs seem to be positioned relative to the .grandparent div, not their respective .parent divs.
As to _why_ I don't really know, but I used to have the same
problem. I decided to take away the position:relati ve of the
..parent, and have the .sub positioned absolute, relative to
the .grandparent, in all browsers.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
In article louissan wrote: Hi all,
I've met a problem with Opera and its ability to render absolutely positioned divs inside relatively positioned parent blocks, themselves contained inside a relatively positioned block. I'm surely missing something, but what? Any help would be kindly appreciated :)
Here's a code sample:
URL would be better, as your code does nothing useful to demonstrate your
problem.
The display:none property is modified to display:block on a click event happening somewhere else. Hence the hidden div appears as a submenu, whose position depends on the parent block.
OK. So I changed it, and still unable to see any difference.
Any clue on why Opera cannot position this child block correctly?
What version of Opera? I don't know if any version of opera since 4 is
buggy in this.
Or is there anything wrong with my way of doing it? In fact, the .sub divs seem to be positioned relative to the .grandparent div, not their respective .parent divs.
With your code, there is no difference, as grandparent and parent are
identical. If I ad something before parent, it is apparent that
positioning works correctly.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä lo******@carama il.com (louissan) wrote: I've met a problem with Opera and its ability to render absolutely positioned divs inside relatively positioned parent blocks, themselves contained inside a relatively positioned block.
.grandparent{p osition:relativ e;} .parent{positi on:relative;} .parent .sub{ position:absolu te; top:19px; left:0px; display:none; z-index:1; }
<div class="grandpar ent"> <div class="parent"> <div class="sub">tex t</div> </div> </div>
The display:none property is modified to display:block on a click event happening somewhere else. Hence the hidden div appears as a submenu, whose position depends on the parent block.
Then there wasn't much point in including it in the example was there?
Any clue on why Opera cannot position this child block correctly? Or is there anything wrong with my way of doing it? In fact, the .sub divs seem to be positioned relative to the .grandparent div, not their respective .parent divs.
The above example renders the same in Opera 7.23 and IE6, in both
Quirks and Standards modes.
Do you by any chance have a float on .parent? That will make a
difference. Opera doesn't allow an element to be both positioned and
floated and will apply the float but ignore the position.
This is probably an error - the CSS specs say that float does not
apply to absolutely positioned elements, but doesn't, as far as I can
see, say anything about the interaction of float and relative
position.
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor
Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>
Thanks :)
It just so happens that i had a float on .parent ... but indirectly.
I had a .grandparent *{float:left} declared somwhere up in the stylesheet.
Thank you again, Steve.
Steve Pugh <st***@pugh.net > wrote in message news:<9b******* *************** **********@4ax. com>... Do you by any chance have a float on .parent? That will make a difference. Opera doesn't allow an element to be both positioned and floated and will apply the float but ignore the position. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: Harlan Messinger |
last post by:
What am I not understanding about the definition of { position: absolute; }?
"The box's position (and possibly size) is specified with the 'left',
'right', 'top', and 'bottom' properties. These properties specify offsets
with respect to the box's containing block."
Please take a look at http://gavelcade.com/abspos.html and help me
understand why my nested, absolutely positioned divs are being positioned
with respect to the page rather...
|
by: Marek Mänd |
last post by:
xHTML 1.0 strict and valid css.
But though only IE shows up like I like it.
Not Opera7.50PR1, not Mozilla1.6.
Mozilla and Opera doesnt take interest in absolute positioning
herein this testcase (2800 B) at all:
http://www.hot.ee/idaliiga/bronn1test.htm
(MSIE screenshot http://www.hot.ee/idaliiga/bronn1test.gif)
|
by: Els |
last post by:
Hi all,
Whilst testing other things on www.browsercam.com, I found
that some pages with absolute positioned pictures were all
messed up in Mac's Opera 6.0 and even worse on Safari 1.0,
and worse again on Linux' Konqueror 3.0.5.
I've collected some of the views on
http://www.browsercam.com/public.aspx?proj_id=43251
Where for each of the 3 pages I selected, you can see the
|
by: JKenyon |
last post by:
I am attempting to display two images on a web page. The second
"image" is actually two images, one overlaid on the other. The first
one is aligned on the left using float:left. I have enclosed the next
two images in a <DIV> tag with float: right in order to force the
containing content to be aligned on the right. I also set
position:relative so that any absolute positioning within the <DIV>
will be relative to the itself.
The...
|
by: Wim Roffal |
last post by:
I am trying to create a menu system.
The mainmenu is a table
<table><tr><td>menu1</td><td>menu2</td></tr></table>
No I try insert the submenu so that it becomes relative to the main menu
item. For menu1 the relevant code then becomes:
<td style="position:relative;">menu1<div style="position:absolute; top:20;
left:0;">
| |
by: Fred Nelson |
last post by:
Hi:
I'm working on one of my first web applications in asp.net 2.0 and I'm
having a problem with absolute versus relative positioning of controls
that I place on pages that use master pages with Content Place Holders.
The controls placed in a content area with absolute or relative
positioning can easily "drift" beyond my Content Place Holder.
I'm trying to put a "footer" on every page of the site and this is
|
by: nonsensitor |
last post by:
I'm just learning xhtml & css, primarily from westciv's online tutorials and css guide. I've run into a couple of problems with a page I'm developing that I can't figure out.
The first problem is that I would like to display some text on top of an image within the header. I've tried using absolute positioning to specify where the phone number should appear in relation to the parent div (#header). However the text appears to be positioned in...
|
by: nino9stars |
last post by:
Hello,
I have just started messing with absolute positioning on webpages, and
it definitely let's you do some creative things. Well, after much
searching and help, I got the images I was using to overlap correctly.
You can see it on this page:
www.creativekaysjewelry.com
The images overlap exactly how I wanted and in the right position
|
by: Mark |
last post by:
hi, i'm trying to position something in the top right corner of a
container, but i can't seem to figure out how to get it working.
here's the html
<div class='thumb'><a href='image.jpg'><img src='photos/thumbs/
bigsmile.jpg'></a><a class='del' href='?p=gallery&del=2'>x</a></div>
where 'thumb' is my container, and 'del' should be aligned to the top
right. here's the css
|
by: Fistro |
last post by:
I'm trying to find a design that would allow me to build web pages
without having to worry about compatibility issues (not too much, in
any case,,,)
I've came across this CSS layout technique:
http://alistapart.com/articles/fauxabsolutepositioning
It calculates the left offset from a fixed position, as opposed to
calculating it from the right edge of the preceding element by using a
combination of position: relative, left: 100% and a...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
| |
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| |
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |