SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div tags are not reaching the bottom of the container in IE6 and IE7

    Hi all, I am new to the forums, and I am stuck on why my div tags are not reaching the bottom of the container in IE6 and IE7.

    This is how it looks in IE6 and IE7:

    ie6.jpg

    This is how it look in IE8, IE9, IE10, Chrome, FireFox, Safari, and Opera

    ie8.jpg

    Here is my CSS code:

    Code:
    #container {
    	margin: 0 auto;
     	width: 960px;
     	border: 1px solid #000000;
    	background-color: #FFFFFF; 
    }
    
    #main-content {
    	background: #A4CDDD;
    	font-family: Arial, Helvetica, Verdana, sans-serif;
    	font-size: 16px;
    	margin-bottom: 10px;
    	margin-left: 10px; 
    	margin-right: 10px;
    	margin-top: 0px;
    	min-height: 1000px;
    	padding-left: 30px;
    	padding-right: 30px;
    	padding-top: 16px;
    	width: 880px;
    	height: 1000px;
    	border-radius: 30px;
    }
    I know that not a lot of people use IE6 and IE7, but I am so close to making look the same across the board.

    Thanks in advance! :-D

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Welcome to Sitepoint

    I'm not seeing that behaviour in the code you presented. All browsers are showing a 10px margin at the bottom.

    Your drawing is showing IE6/7 with round corners but border-radius is only supported in IE9 so you must have additional code for the corners which is probably the issue. However without full code and CSS (or a link) it will be hard to make a diagnosis.

    Generally though its a very bad idea to set a height on your container unless it holds something like a fixed height image only. If the container holds text-content then let content dictate the height and not the css. If you are using the height to make equal columns then you will need other methods such as "faux columns".

    Also note that is of no use to have these two styles in the same rule when they have the same units.
    Code:
    min-height: 1000px;
    height:1000px;
    All you get is height:1000px and no more or less.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul for replying to my post!

    I am using curvy corners for the rounded edges for IE6, IE7, and IE8.

    Here is a direct link to my CSS file and to my site.

    Thanks again!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have an empty element at the bottom of that section (#footer) which takes up space in IE7 and under as they always render an element to at least the current font-size/line-height (when is haslayout mode). If you are not using that element for anything then remove it. If you are using it for clearing then there are better methods than using an empty element (such as overflow:hidden on the parent container - see css faq on floats for more info).

    Alternatively you could set the height to zero and hide the overflow and the footer will collapse to nothing. However its best to remove it if its not needed.

    You should also look at removing the height from your containers as that 1000px looks a little silly.

    Code:
    #footer{overflow:hidden;height:0}

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank Paul!!!


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
  •