SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot KarmaDungyu's Avatar
    Join Date
    May 2003
    Location
    Colchester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background image overflow

    Hi all, I have a problem in my page when viewing in IE5.5 (win).

    I have a black background image on a column, and a div at the end of that column which has a white background colour which 'covers' over the columns own black background. This enables the div to look like it is below that column, rather than actually a part of it.

    However, in IE5.5 win, the black background image of the column leaks below the last div, ruining the effect. I have tried turning the relevent images to display:block, and then clearing them, which worked for a similar problem I had elsewhere in the design, but to no effect. Could anyone help me out here?

    It all works fine in IE5.01, 6, and Firefox on Windows, btw .....

    I've attached a screenshot of the offending behaviour ....

    many thanks in advance,

    Karmadungyu
    Attached Images Attached Images

  2. #2
    SitePoint Zealot KarmaDungyu's Avatar
    Join Date
    May 2003
    Location
    Colchester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Goodness me .... I forgot to add the URL's!!!

    My page is at:
    http://www.defactosoftware.com/stagi...ws_frupac.html

    My style sheet is at:
    http://www.defactosoftware.com/stagi...css/market.css

    I think the relevent bits of code are:


    <div id="side"

    .....

    <div class="links">
    <h2>Links</h2>
    <p><img src="images/general/website.gif" width="26" height="17" style="float: left;" display:block; clear:both;/><a href="http://www.produceworld.com/frupac.html" target="_blank"><span class="emphasise">Frupac
    Website</span></a></p>
    <p><img src="images/market/fresh_produce/fresh_produce_sm_logo.gif" width="27" height="19" style="float: left;" display:block; clear:both; /><a href="fresh_produce.html"><span class="emphasise">Fresh Produce Home</span></a></p>
    <br>
    </div>
    <div id="clearfooter"></div>
    </div>

    and in the style sheet:

    #side div.links p img{
    display:block; clear:both; margin: -3px 0px 0px 0px; padding: 0px 0px 0px 0px;
    }

    many thanks :-)

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Try this instead:
    Code:
    .clearer{
     height:1px;
     overflow:hidden;
     margin-top:-2px;
     clear:both;
    }
    Code:
    	<div class="links"> 
    	  <h2>Links</h2>
    	  <p><img src="http://www.defactosoftware.com/stagi...al/website.gif" width="26" height="17" style="float: left;" display:block; clear:both;/><a href="http://www.produceworld.com/frupac.html" target="_blank"><span class="emphasise">Frupac 
    		Website</span></a></p>
    	  <p><img src="http://www.defactosoftware.com/stagi...ce_sm_logo.gif" width="27" height="19" style="float: left;" display:block; clear:both; /><a href="fresh_produce.html"><span class="emphasise">Fresh 
    		Produce Home</span></a></p>
    	  <div class="clearer"></div>
    	</div>
        <div class="clearer"></div>
      </div>
      <!-- Other Content -->
      <div id="Rule" class="fresh"> </div>
    I don't know wht ie5.5. is playing up but the above seems to cure it. You could give the style only to ie5.5. but it only makes a 1 pixel difference to other browers so it doesn't seem worth hiding it.

    Usually when you clear an element you have to offer some height (especially for mozilla).

    Hope that helps.

  4. #4
    SitePoint Zealot KarmaDungyu's Avatar
    Join Date
    May 2003
    Location
    Colchester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul! What can I say ..... it works! ... and my bacon is saved ;-)

    thanks so much for your response and solution.

    And many thanks for the tip/clue at the bottom which is useful too.

    Karmadungyu


Bookmarks

Posting Permissions

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