...

View Full Version : Right column shows underneath left on first load



maryb86
07-06-2010, 08:34 PM
Hello,
I am programming this test site: http://www.heresmary.com/Penelope/portfolio.html. If you click on some of the paintings however you get a wierd effect. Try clicking on "Are They Square?" in firefox or chrome and I get the right column showing underneath the pic (the floated left column). If I then close the popup and click on the picture again to open it, it's fixed. It doesn't do this in IE8. My firefox and chrome are the latest versions.

1 - I'd like some people to test it out to see if also happens on their resolution. I tried it on another monitor and it didn't happen, so I'm not sure how big of a deal it is.
2 - Does anyone know what may be causing this?

Oh and here's the css for it:

#pvleft{
float: left;
font-size: 10pt;
line-height: 0.1em;
background-color: red;
}

#pvright{
float: right;
width: 250px;
margin-left: 5px;
margin-top: 8px;
background-color: green;

}

abduraooft
07-07-2010, 10:31 AM
Oh and here's the css for it:
Code:I don't see any element having id #pvleft or #pvright in the given url

PS: You don't have to apply floats on both column to make a 2 column layout. Take a look at the CSS and html of http://bonrouge.com/2c-hf-fluid.php

maryb86
07-07-2010, 04:33 PM
It's a different file, should have put that. Here's the code:


<div id="paintingviewer">
<div id="pvleft">
<p id="pvname">
Painting
</p>
<img alt="Poolside" src="images/portfolio/full/notfound.jpg" id="pvimage">
<p>
<span class="bold">Size:</span>
<span id="pvsize">0" x 0"</span>
</p>
<p>
<span class="bold">Media:</span>
<span id="pvmedia">-</span>
</p>
</div>
<div id="pvright">
<p class="pvdate">
Added:<span id="pvdate">01/01/2000</span>
</p>
<div id="exhibited" style="display: none;">
<p class="bold">Exhibited:</p>
<ul>
<li id="pvexhibited">
-
</li>
<li id="pvexhibited1" style="display: none;">
-
</li>
</ul>
</div>
<p>
<span class="bold">Purchase the Original for:</span>
<br/>
&#163;<span id="pvprice">00</span>
(+postage)
</p>
<div id="pvprint" style="display: none;">
<p>
<span class="bold">Or purchase a print below:</span>
</p>
<div id="flash"></div>
</div>
</div>
</div>

abduraooft
07-07-2010, 04:47 PM
<img id="pvimage" src="images/portfolio/full/fl_geometricdesire.jpg" alt="Poolside"> It might be due to the absence of proper height and width attributes and there by browser fails to calculate the area required for the popup to hold the contents, at the beginning. Try after adding those attributes.

maryb86
07-07-2010, 07:14 PM
The width and height are different for every image however... I managed to fix it by just moving the whole popup over to the left. For some reason, facebox moves it quite far right, and therefore in some browsers it doesn't have enough space to show larger images.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum