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
  1. #1
    New Coder
    Join Date
    Jan 2007
    Location
    Canterbury, Kent (immigrant, of course :)
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    IE7: CSS positioning leaves blank line at bottom

    More Internet Explorer woes

    If you have a look at http://www.indigetesdii.org/idnew3/index2.php , you will see that Firefox puts my two terrorists (nothing iffy, by the way - it's a "normal" thing in this niche 'music' genre) nicely at the bottom and to the left and right respectively.

    IE7, however, leaves a blank line at the bottom. Is there any way I can circumvert that without ruining the lay-out in Firefox?

    Also, is there a way to get rid of the standard scrollbar in IE? It's annoying that one of those fine chaps is pushed a bit to the left because of it, even though the scrollbar is not needed (entire page will never scroll, only the middle CSS box will).

    Thanks in advance.

  • #2
    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
    It may be annoying but it is your fault because you aren't following coding standards. You are lacking a doctype on your page. If you put a doctype on your page Firefox behaves the same as IE7. A solution would be to make the images display:block
    Code:
    #b1 img, #bg2 img {
    display:block;
    }
    Read this for more info: http://developer.mozilla.org/en/docs...ysterious_Gaps

    However having the images in the document in the first place is incorrect. They appear to presentational so they shouldn't be in the markup, rather they should be background images. After doing this your gaps will also go away. You also need the html, body set to 100% height.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    height:100%;
    }
    #main {
    width: 50%;
    height: 50%;
    position: absolute;
    top: 25%;
    left: 25%;
    border:1px dotted #000;
    overflow: auto;
    }
    #menu {
    width: 50%;
    height: 8%;
    position: absolute;
    top: 80%;
    left: 25%;
    margin: 0;
    padding: 0;
    border: 1px dotted;
    border-color: #000000;
    text-align: left;
    overflow: auto;
    }
    #bg1 {
    position: absolute;
    left: 0;
    bottom: 0;
    width:236px;
    height:360px;
    background:url(img/bg1.jpg);
    }
    #bg2 {
    position: absolute;
    right: 0;
    bottom: 0;
    width:236px;
    height:360px;
    background:url(img/bg2.jpg);
    }
    </style>
    </head>
    <body>
    <div id="bg1"></div>
    <div id="bg2"></div>
    <div id="main"> I LOVE LAMP. <br>
    	<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    	proper scrolling makes me feel warm and fuzzy<br>
    </div>
    <div id="menu"> things people click on when they feel like a-clickin'</div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    Khensu (10-04-2007)

  • #3
    New Coder
    Join Date
    Jan 2007
    Location
    Canterbury, Kent (immigrant, of course :)
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    In my own defence, I've never been one to follow the rules (which, by the way, really does lead to nothing ).

    I added the doctype and the body CSS, and lo and behold, it worked perfectly. I also followed your advice to make them into background images.

    Thanks! (And be honoured, you will be forever known as the man who got me to use doctypes )

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    <style type="text/css">

    The start of your style sheet section is not quite right.
    It should be as above. May cause trouble with some browsers.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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