CSS Image overflow issue with IE on Windows

  • psychofett

    (@psychofett)


    19 years ago

    Hi guys

    *Have posted a similar question but this may be easier for people to understand*

    Just finishing off my website, realised it works pretty sweet in most newer browsers besides Internet Explorer for Windows.

    The problem is in my gallery and mods section, where the thumbnail images seem to overflow past my right hand menu.

    There are basicly two columns, the left hand side with the image thumbnails, and the right hand side a menu, which only goes about halfway down. After the right menu ends, the thumbnails flow over to the right, under neath the right hand menu. I want to keep these images in the left hand column.

    This also extends my main content box and makes it look ugly. Any ideas how to fix this with CSS? It works fine in IE for my Mac but not under Windows. Also works great with safari, omniweb, firefox, opera etc.

    Any other advice or tips would be appreciated also.

    Thanks for your time.

    Here is the sample code:

    <div class=”gallery”>
    <div class=”galleryhead”>~ PHOTO GALLERY ~</div>
    <div class=”polaroid”><img src=”thumbimage.jpg”><br>Text text text text.</div>
    </div><div class=”clear”> </div>

    .galleryhead
    {margin: 20px 0px 0px 0px;}

    .gallery
    {text-align: center;
    margin: 10 2 0 2;}

    .polaroid
    {float: left;
    width: 106px;
    margin: 6px 10px 12px 10px;
    border: 0px;
    text-align: left;
    height: 180px;
    line-height: 4px;
    word-spacing: 0px;
    letter-spacing: 0px;
    overflow: hidden;
    float: left;}

Viewing 9 replies - 1 through 9 (of 9 total)
  • planetthoughtful

    (@planetthoughtful)

    Hi,

    Can you give us a link to a page where we can see the problem ourselves? Sometimes a picture is worth more than a thousand words. ??

    Without seeing the actual problem first hand, my guess would be that you’re experiencing the problem between the way IE defines the width of a div vs the way other browsers do.

    You might like to do a google search on the phrase “IE box model hack” for more information about this particular problem, and various solutions.

    Much warmth,

    planetthoughtful

    Darcie

    (@darcie)

    <div class=”clear”>

    I don’t see the CSS for this? what is this for?

    moshu

    (@moshu)

    Gallery is not WP. Ask for help at the Gallery’s site.

    Darcie

    (@darcie)

    : ) ok

    Darcie

    (@darcie)

    Moshu is correct, I did not realize it was a plug-in Gallery.

    moshu

    (@moshu)

    And, please, please… don’t post long code here. Next time use https://pastebin.com or similar sites. Thank you.

    Buz Carter

    (@carterco)

    What you need to do is have the floated image be fully contained within a floated object; the behavior is described fairly well here:

    https://www.complexspiral.com/publications/containing-floats/

    Thread Starter psychofett

    (@psychofett)

    Hi everyone thanks for your help.
    The gallery isn’t a plugin, just my code, may not be the best way to do it, but it gets the look I want. Clearly I am not the best at this CSS stuff.

    for reference this is the page:
    https://www.psychofett.com/?page_id=2

    and this is the CSS (most gallery stuff down the bottom):
    https://www.psychofett.com/wp-content/themes/psychofett/style.css

    Anyway I’ll check out that link and see if it helps.

    Thanks once again,

    Psychofett

    moshu

    (@moshu)

    Well, if it’s your own code – one more reason not to ask for help in WordPress forum. This is not a free tutorial (course, seminar) in CSS. Sorry.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘CSS Image overflow issue with IE on Windows’ is closed to new replies.