Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Gaps in IE!!

  1. #1
    Regular Coder
    Join Date
    Jan 2006
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Gaps in IE!!

    I have started on a site that works great in firefox (as always) yet in IE there is a gap at the bottom of the page where the image is supposed to go right the bottom as it does in firefox (as always!) There is also a gap between the divs, which is just on the right of the leopard print, which is not supposed to be there. I know there is a hack but not sure if it's the right one and can't remember it! Also, gonna sort out the layout of the coding later on hehe

    CSS
    Code:
    body {
    	margin: 0;
    	padding: 0;
    	background: #000000;
    
    }
    
    img {border: none;}
    a {text-decoration: none;}
    #wrap {
    	margin: 0 auto;
    	width: 980px;
    	height: 590px;
    	padding: 0 20px 0 0;
    	
    	
    }
    
    
    
    #skin {
    
    	margin: 0 0 0 20px;
    	height: 590px;
    	width: 420px;
    	padding: 0 10px 0 0;
    	float: left;
    	background: url(images/skin.gif);
    		
    	
    }
    	
    
    #paper {
    	margin: 0 0 0 0px;
    	width: 495px;
    	height: 600px;
    	padding: 0 10px 0 0;
    	background: url(images/back.gif);
    	float: left;
    	
    	
    	
    }
    
    
    .katie {
    
            margin: 35px 0 0 30px;
    	padding: 0 10px 0 0;
    	float: left;
    }
    
    .rainstorm {
    
            margin: 0 auto;
    	padding: 390px 0px 0 0;	
    }

    HTML

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
    <head>
    
    <title>Katie Fox Photography - Main.</title>
    
    
    
    <link rel="stylesheet" type="text/css" href="style2.css">
    
      <meta name="author"
            content="Becka Dawson" />
      <meta http-equiv="content-type"
            content="text/html; charset=uk-ansi" />
    
    </head>
    
    <body>
    <div id="wrap">
    <div id="skin">
    <img src="images/katiefox.gif" alt="Katie Fox Photography"class="katie">
    <a href="http://www.rainstormphotography.co.uk"><img src="images/rainstorm.gif" alt="Rainstorm Photography"class="rainstorm"></a>
    
    </div>
    <div id="paper">
    ggg
    </div>
    
    </div>
    </body>
    </html>


    SCREENSHOT (FIREFOX)


    SCREENSHOT (IE)
    Last edited by blacktears; 04-30-2006 at 12:40 PM. Reason: wrong title

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Without having the actual images it's hard to help you (can't try it out myself) but the gap between the divs is due to the 3px gap bug in IE. I think you can work around that by floating the right div to the right (and specifying a width).
    If it's not working or if there is any need to put a different style for IE you should use conditional comments.
    The best is to upload the page to a test server for us and we can really help you.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Its not really a bug. It occurs in Firefox sometimes to. Its the whitespace you have in your html. You can change this
    Code:
    <div id="skin">
    <img src="images/katiefox.gif" alt="Katie Fox Photography"class="katie">
    <a href="http://www.rainstormphotography.co.uk"><img src="images/rainstorm.gif" alt="Rainstorm Photography"class="rainstorm"></a>
    
    </div>
    to this
    Code:
    <div id="skin"><img src="images/katiefox.gif" alt="Katie Fox Photography"class="katie"><a href="http://www.rainstormphotography.co.uk"><img src="images/rainstorm.gif" alt="Rainstorm Photography"class="rainstorm"></a></div>
    Which will fix it or make the images display:block; but this will put the images on their own line fyi.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Heh, it's kind of difficult to test this kind of problem without actually having access to the images:
    http://www.rainstormphotography.co.u.../rainstorm.gif (valid)
    http://www.rainstormphotography.co.uk/images/skin.gif (not valid)
    http://www.rainstormphotography.co.uk/images/back.gif (not valid)
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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