www.webdeveloper.com
Results 1 to 7 of 7

Thread: How have I broken IE this time?

  1. #1
    Join Date
    Jan 2005
    Location
    Alicante (Spain)
    Posts
    7,739

    How have I broken IE this time?

    Here's a demo! There is a blank space between the bottom of the image and the border in IE.
    PHP Code:
        <style type="text/css">
                
    div{
                    
    margin:0 auto;
                    
    border:0;
                    
    padding:0;
                }
                
                
    #rotatingImage{
                    
    margin:0;
                    
    border:0;
                    
    padding:0;
                    
    width:160px;
                    
    height:120px;
                }
                
                
    #outer{
                    
    border-top:2px solid #997;
                    
    border-right:2px solid #997;
                    
    border-bottom:2px solid #664;
                    
    border-left:2px solid #664;
                    
    width:164px;
                    
    height:124px;
                }
                
                
    #inner{
                    
    border-top:2px solid #664;
                    
    border-right:2px solid #664;
                    
    border-bottom:2px solid #997;
                    
    border-left:2px solid #997;
                    
    width:160px;
                    
    height:120px;
                }
                
                
                
                
            
            </
    style
    PHP Code:
            <div id="outer">
                <
    div id="inner">
                    <
    img id="rotatingImage" src="" alt="">
                </
    div>
            </
    div

  2. #2
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    Code:
    #rotatingImage{
    width:160px;
    height:120px;
    display:block;
    }

  3. #3
    Join Date
    Jan 2005
    Location
    Alicante (Spain)
    Posts
    7,739

  4. #4
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273

  5. #5
    Join Date
    Jan 2005
    Location
    Alicante (Spain)
    Posts
    7,739
    Quote Originally Posted by BonRouge
    Ok so that explains why it happens but if IE handled the height property properly it wouldn't have happened. Nice FAQ by the way.

  6. #6
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    Quote Originally Posted by bokeh
    If IE handled the height property properly it wouldn't have happened.
    That's true enough - not totally your fault then.

  7. #7
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    in older browsers (and any version of IE) it uses line-height for images as they are inline, IE's default line-height is like 120% (1.2em) or so (Mozilla's default line-height is around 120-140% or so, but mozilla renders img as inline-block, if i remember correctly), a quick fix would be to do this
    Code:
    img {
        line-height: 100%;
    }
    Last edited by ShrineDesigns; 12-18-2005 at 02:32 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles