Closed
Bug 182245
Opened 22 years ago
Closed 22 years ago
Abs pos div does not move when placeholder moves due to image load
Categories
(Core :: Layout: Positioned, defect)
Tracking
()
RESOLVED
DUPLICATE
of bug 175364
People
(Reporter: noah.campbell, Unassigned)
Details
Attachments
(1 file)
|
2.78 KB,
text/html
|
Details |
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.2) Gecko/20021126
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.2) Gecko/20021126
Given a farily complex layout, the simple inclusion of a gif (w/ transparency,
if its important) causes the layout to not display correctly. A page refresh
will fix the problem until the browser quits and is restarted. If the img tags
contains an invalid img location there is no layout problem. Its only when the
browser goes to the page the first time does the error occure. It does not
occure when you open the page using the file:// protocol. Only http:// causes
the problem.
Reproducible: Always
Steps to Reproduce:
!!IMPORTANT!! make sure you create the graphic described in additional info!!!
1. Close Mozilla 1.2
2. Open Mozilla 1.2
3. Type in exact URL to the page (see additonal info for the html of the page)
4. Notice the blue border is in the same space as the nav bar (nav1 >> nav2 ...)
5. Refresh
6. Observe the blue border now sits below the nav bar
Actual Results:
See step 4. The blue box should only sit below the nav bar.
Expected Results:
See step 6. the blue box sits where it should. Or open it in IE 6.0
Below is the html that is causing the bug.
Important!!! you need to include an image that is 40x40 gif with transparency
(at least thats what I have). I used a img with the letter A with a transparent
background.
There is also a reference to an img called "a.gif" that should be in the same
directory as this page (I call it test.html).
I've also included the working version (commented below). The only difference
is when <img> references an actual img or not.
===============================================================================
<html>
<head>
<style>
body {
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
color:#333;
background-color:white;
margin:0;
padding:0;
}
#Main {
padding-left: 130px;
position: absolute;
border:3px solid blue;
width:100%;
}
body>#Main
{
width:550;
}
#navRight {
border:1px solid purple;
position:absolute;
right:10px;
top:10px;
float:right;
}
#Main>#navRight
{
right:10px;
}
#navAlpha {
/* float:left; */
border:1px solid green;
position:absolute;
top:10px;
width:120px;
left:0px;
padding:5px;
height:75%;
text-align:right;
}
#Main>#navAlpha
{
width:100px;
}
#Content
{
border:3px solid yellow;
border-left:1px solid black;
padding:10px 15px 0px 10px;
}
</style>
</head>
<body>
<table WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>
<tr>
<td ROWSPAN=2 width="60">
<a href="/" class="nostyle">
<!-- WORKS -->
<!-- img style="" src="/" -->
<!-- END WORKS -->
<!--- BROKEN --->
<img style="" src="/a.gif" >
<!-- End BROKEN -->
</a></td>
<td COLSPAN=5 style="border-left:1px solid black;
border-bottom:1px solid black;
background-image:url('/templates/images/nav3_01.png');">
<span style="font-family:Tahoma;font-style:italic;font-size:18px;font-weight:800;">
My Company
</span>
</td>
</tr>
<tr>
<td COLSPAN=4 ALIGN="left" style="
font-weight:bold;
width:100%;
height:100%;
padding-top:3px;
"
>
<a style="color:#993333;" href="/index.jsp">Projects</a>
|
<a style="color:#993333;" href="/somewhere.jsp">Clock</a>
|
<a style="color:#993333;" href="/search.jsp">Adv Search</a>
</td>
</tr>
</table>
<div style="background-color:#07a;
color:#fff;
font-weight:bold;
margin-top:5px;
padding-bottom:1px;
border-top:1px solid black;
border-bottom:2px solid black;
">
Nav1 >> Nav2 >> Nav3
</div>
<div id="Main">
<div style="width:120px;" id="navRight">
isbus lipsus asus
isbus lipsus asus
isbus lipsus asus
isbus lipsus asus
isbus lipsus asus
isbus lipsus asus
isbus lipsus asus
isbus lipsus asus
</div>
<div style="height:100%;" id="navAlpha">
isbus lipsus asus
isbus lipsus asus
isbus lipsus asus
isbus lipsus asus
isbus lipsus asus
isbus lipsus asus
isbus lipsus asus
isbus lipsus asus
</div>
<div id="Content">
isbus lipsus asus
isbus lipsus asus
isbus lipsus asus <br>
isbus lipsus asus
isbus lipsus asus
isbus lipsus asus <br>
isbus lipsus asus
isbus lipsus asus
isbus lipsus asus <br>
isbus lipsus asus
isbus lipsus asus
isbus lipsus asus <br>
isbus lipsus asus
isbus lipsus asus
isbus lipsus asus <br>
isbus lipsus asus
isbus lipsus asus
isbus lipsus asus <br>
isbus lipsus asus
isbus lipsus asus
isbus lipsus asus <br>
isbus lipsus asus
isbus lipsus asus
isbus lipsus asus
</div>
</div>
</body>
</html>
===============================================================================
(with a real image link)
|
||
Comment 2•22 years ago
|
||
This is the usual "undefined offsets suck" problem. Order of events here:
1) Image has no size specified
2) Everything but image loads
3) Page reflows; abs pos box is placed where the placeholder is
4) Image comes in, page reflows, placeholder moves, abs pos box does not
On normal (not bypass-cache) reload, the image comes out of cache so the size is
known immediately. Hence no bug then.
Assignee: block-and-inline → position
Component: Layout: Block & Inline → Layout: R & A Pos
Whiteboard: DUPEME
|
||
Comment 3•22 years ago
|
||
I know it's a newer bug... but duping anyways
*** This bug has been marked as a duplicate of 195368 ***
Status: UNCONFIRMED → RESOLVED
Closed: 22 years ago
Resolution: --- → DUPLICATE
Whiteboard: DUPEME
|
|
||
Comment 4•22 years ago
|
||
How can this be a dup of a bug on floating images if this image is not floated?
Status: RESOLVED → UNCONFIRMED
Resolution: DUPLICATE → ---
|
|
||
Updated•22 years ago
|
Summary: an image causes the layout to initially not render correctly, but adjust itself after a refresh → Undimensioned image does not caue reflow/repositioning of float element when loaded [rendering incorrect initially, fine if reloaded]
|
|
||
Comment 5•22 years ago
|
||
Um. The new summary doesn't seem to have anything to do with this bug....
|
|
||
Comment 6•22 years ago
|
||
This is actually a dup of the bug on us not reflowing abs pos frames when the
placeholder moves....
Summary: Undimensioned image does not caue reflow/repositioning of float element when loaded [rendering incorrect initially, fine if reloaded] → Abs pos div does not move when placeholder moves due to image load
Whiteboard: DUPEME
*** This bug has been marked as a duplicate of 175364 ***
Status: UNCONFIRMED → RESOLVED
Closed: 22 years ago → 22 years ago
Resolution: --- → DUPLICATE
You need to log in
before you can comment on or make changes to this bug.
Description
•