SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2002
    Location
    Madison, WI
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE adds gap below images: what bug hath IE wrought?

    Hi,

    Ben here, dealing with another IE annoyance.

    Please see:
    http://mizelegal.tempwebpage.com/

    user: test
    pass: test

    As always, Firefox works fine, and IE adds space above two elements. I left the background yellow so the bug is more apparent. I've googled this, but no clear solution.

    Ideas?

    Thx.
    :::::::::::::::::::::::::::::::::::::::::::::::::::
    Versa Studio
    ExpressionEngine experts
    bas (at) versa studio dot com

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Set the image display to block.

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Apply display:block on the images. When default displayed inline IE places the images on the text-line base-line instead of bottom of text-line.
    Code CSS:
    img {
    display: block;
    }

    Edit) Weren't fast enough typing!
    Happy ADD/ADHD with Asperger's

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd also add border: 0; to all images as well to kill a known Gecko bug as well.

    (Erik, you had the right idea though.)

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2002
    Location
    Madison, WI
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks--I tried that, but is seems the problem is with the divs themselves.

    Other ideas?

    It used to be that display:inline fixed this, but maybe that's for another bug.
    :::::::::::::::::::::::::::::::::::::::::::::::::::
    Versa Studio
    ExpressionEngine experts
    bas (at) versa studio dot com

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    display: inline; works for correcting the double-margin bug on floated elements.

    Try adding overflow: hidden; to the DIV then.

  7. #7
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 4midori View Post
    Thanks--I tried that, but is seems the problem is with the divs themselves. ...
    Both the images concerned needs the rule display:block.

    Otherwise one of them will push the div bottom with the difference base-line to text-bottom, and so push down the nav-bar below.


    Edit) Correction: Only the right image will push the nav-bar.
    Happy ADD/ADHD with Asperger's

  8. #8
    SitePoint Zealot
    Join Date
    Feb 2006
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For starters, you should probably zero out any margins and paddings on all elements. It'll save you frustrations down the road:

    * { margin: 0; padding: 0; }

    For this particular problem, try floating the image along with its wrapper div. Remove the inline styling elements from HTML as well (width/height/border).

    Something like this might do the trick:

    Code:
    #flag {
    	float: left;
    	height: 81px;
    	margin-top: 50px;
    	width: 434px;
    }
    
    #flag img {
    	float: left;
    	height: 81px;
    	width: 434px;
    }

  9. #9
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by wyrd33 View Post
    ... Something like this might do the trick:
    Code:
    #flag {
    	float: left;
    	height: 81px;
    	margin-top: 50px;
    	width: 434px;
    }
    #flag img {
    	float: left;
    	height: 81px;
    	width: 434px;
    }
    The img floating will work, it will automaticly display the img as a block.
    Happy ADD/ADHD with Asperger's

  10. #10
    SitePoint Zealot
    Join Date
    Oct 2002
    Location
    Madison, WI
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all!!! Suggestions worked. !@&*(#) Internet Explorer!
    :::::::::::::::::::::::::::::::::::::::::::::::::::
    Versa Studio
    ExpressionEngine experts
    bas (at) versa studio dot com


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
  •