Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Right column shows underneath left on first load

    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:
    Code:
    #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;
    			
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    May 2006
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts
    It's a different file, should have put that. Here's the code:

    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>

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    <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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    May 2006
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •