Results 1 to 3 of 3
  1. #1
    Join Date
    Feb 2005
    Location
    Australia
    Posts
    5,849

    Browser incompatibilities: xHTML / CSS gurus please help!

    I normally manage to work through these things, but this one's really getting to me. Any help would be much appreciated.

    I want to display part of a wide image inside a fluid-width page. The image overflows the container width with overflow: hidden. But here's where it gets tricky - I want to show the right side of the image and hide as much of the left side as necessary to just fill the container div. Also I'll have a little javascript fragment to move the image further to the right in known increments from its original position (gradually showing more of the image).

    So my first plan was to use a div the full width of the image with float:right to align its right edge. To generate the offset I can move the image within this div. And it works perfectly, doing exactly what I want... in Firefox and Konqueror. However Opera and IE7 see that the div is wider than the space it's supposed to fit into and decide to ignore the right float, instead aligning the left edge of the div.

    My next attempt was using a 100% width div with a background image aligned right. Initially this seems to work in all browsers but then I can't apply the offset. If I use the background-position property it's based on the left side of the image - to work out where it should be to place the right side correctly I'd need to calculate the width of the container based on the current window width, margins etc. I'll do this if I have to but it'll most likely vary by a few pixels from one browser to another so it's a last resort.

    The only other idea I had was to move the entire div (position: absolute; left: x) but that leaves a gap at the left.

    Here's the sample code:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
    
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <title>Test page</title>
    
    <style type="text/css" media="screen">
    #page {
        margin: 20px auto;
        padding: 0 100px;
        min-width: 600px;
        max-width: 1000px;
    }
    #maindiv {
        padding: 0;
        margin: 0;
        border: 1px solid blue;
        overflow: hidden;
    }
    .overflowing {
        float: right;
        width: 1000px;
        border: 1px solid red;
    }
    .overflowing2wrap {
        position: relative;
        top: 0px;
        left: 0px;
        height: 50px;
    }
    .overflowing2 {
        position: absolute;
        left: 0px;
        top: 0px;
        height: 50px;
        width: 100%;
        border: 1px solid green;
        background: transparent url(bigwideimage.gif) no-repeat top right;
    }
    </style>
    
    </head>
    
    <body>
    <div id="page">
      <div id="maindiv">
        <p>1000 wide div with float:right. Works in Firefox / Konqueror, Opera and IE7 ignore the float.</p>
        <div class="overflowing">
            <img src="bigwideimage.gif" width="1000" height="50" alt="big wide image"/>
        </div>
        <p>And again with offset.</p>
        <div class="overflowing" >
            <img style="padding-left: 20px;" src="bigwideimage.gif" width="1000" height="50" alt="big wide image"/>
        </div>
        <p>100% wide div with right-aligned background image - works in all browsers...</p>
        <div class="overflowing2wrap">
            <div class="overflowing2">
    
            </div>
        </div>
        <p>until you add the offset. Setting background-position is based on the left edge, not the right.</p>
        <div class="overflowing2wrap">
            <div class="overflowing2" style="background-position: 20px 0px;">
    
            </div>
        </div>
        <p>while moving the entire div leaves a gap on the left.</p>
        <div class="overflowing2wrap">
            <div class="overflowing2" style="left: 20px;">
    
            </div>
        </div>
    
      </div>
    </div>
    </body>
    </html>
    and the test page can be seen at http://clonepanel.com/layout.html

    Any clean and simple solutions would be really welcome!!

    TIA
    Chris

    "Some problems are so complex that you have to be highly intelligent and well informed just to be undecided about them." - Laurence J. Peter

  2. #2
    Join Date
    Dec 2007
    Location
    Michigan
    Posts
    286
    What about if you tried using your first option again, except instead of positioning the image with a "float: right" and margins, you set the containing div to "position: relative;" and then used absolute positioning on the image to set its right and top settings for what you need?
    Nexcess - Magento and Wordpress Hosting Specialists!

  3. #3
    Join Date
    Feb 2005
    Location
    Australia
    Posts
    5,849
    Aric, that's perfect! Many thanks. I never realised that the "right" property existed under absolute positioning.

    I did have one further problem with IE7 failing to hide the overflow but that was fixed by making the main container position:relative as well.

    Thanks again for your help.
    Chris

    "Some problems are so complex that you have to be highly intelligent and well informed just to be undecided about them." - Laurence J. Peter

Posting Permissions

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