www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: IE6 issue

  1. #1
    Join Date
    Feb 2007
    Location
    Midlands, UK
    Posts
    11

    IE6 issue

    Hi, iv opened it up so there is access for now
    http://hardbyte.com/djsdanceschool/

    Iv got this problem where there is a weird padding/spacing at the bottom of the page (IE6 only) FF and IE7 is ok.

    Any ideas? I though it was a padding/margin issue - you know how FF handles then differently to IE - but I just cant get rid of it in IE6.

    Any help would be appreciated before I make the site FF&IE7 users only!

    People should only use FF anyway... lol

  2. #2
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    I can't get my local copy to work for some reason perfectly...but does this happen to cure the problem?

    Code:
    <!--[if lte IE 6]>
    <style>
    #content_footer{
    	height:1%;	
    }
    </style>
    <![endif]-->
    Place it right before the closing </head> tag.

  3. #3
    Join Date
    Feb 2007
    Location
    Midlands, UK
    Posts
    11
    What does that do? It crashes IE6

    And when it doesnt crash - still no change.
    Last edited by Hardbyte; 08-01-2007 at 11:25 AM.

  4. #4
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    It gives "layout" to elements in IE6. Do you have bandwidth protection setup on your server? I have the correct paths and still can't get the images to view properly.

  5. #5
    Join Date
    Feb 2007
    Location
    Midlands, UK
    Posts
    11

    ?

    No bandwidth protection as far as I know.

    What you trying to do, mirror the site?

  6. #6
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    Yeah.

  7. #7
    Join Date
    Feb 2007
    Location
    Midlands, UK
    Posts
    11

  8. #8
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    Hmmm...I got the local copy working...but I'm not sure on this one.

  9. #9
    Join Date
    Feb 2007
    Location
    Midlands, UK
    Posts
    11
    if I open the black border one (sorry cant remember the class name "main_border" and "main_wrapper_centered") to 999px like I have done now - it works but then i get an extra right hand column in pink?

  10. #10
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    Does all your math add up?

  11. #11
    Join Date
    Jul 2007
    Location
    Cleveland metropolitan
    Posts
    10

    IE6 DIV HEIGHT issue

    Is it possible to make my DIV Height(.banner2 in this case) less than 20 px in IE6 without using Javascript. IE 6 is displaying my DIV with a minimum Height of 20px even when I have declared a lesser value in my CSS (refer to .banner2 below). Logic has failed me, damn IE 6.

    HTML:
    Code:
    <div id="wrapper"> 
    
    <div id="banner"><a href="#" class="logo"><img src="../images/fctimeslogo.gif" alt="FCTimes" width="161" height="46" border="0" ></a>
    
    <div class="banner2"></div>
    CSS:
    Code:
    #wrapper {
    	width: 880px;
    	background-color:#FFFFFF;
    	text-align: left;
    	border:1px 1px 1px 1px solid #CCCCCC;
    	border-top:0px;
    	
    }
    #banner {
    	width: 100%;
    	height: 71px;
    	background-color:#FFFFFF;
    }
    .logo {
    	margin-left: 12px;
    	margin-top: 10px;
    	float: left;
    }
    .banner2 {
    	width:100%;
    	height:7px;
    	background-color:#A4300D;
    }

  12. #12
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    You really should start your own thread and not hijack someone else's.

    Anyway..
    <div id="wrapper">

    <div id="banner">
    <a href="#" class="logo"><img src="../images/fctimeslogo.gif" alt="FCTimes" width="161" height="46" border="0" ></a>

    <div class="banner2"></div>
    The DIV "#banner" contains the un-closed div "#banner2", but what you are describing sounds typical of IE6 a.k.a. 'the problem child'. It incorrectly expands to contain the contents (if any).

    -Why would you want a 7-px tall 'div' anyway? "20px" is the thickness of a scrollbar and you can't even put text in something that small without some serious reductions of padding and margins. This actually sounds like a presentational element, not a content element (it is there for looks only)?.

    Presentational you might better use the dic #banner with a 7-px border-bottom:

    #banner {
    width: 100%;
    height: 71px;
    background-color:#FFFFFF;
    border-bottom:7px solid #A4300D;
    }

    and be doing exactly the same thing, -but with less markup. If you require more 'space' above and below this border-bottom, to #banner add:

    padding-bottom:10px; margin-bottom:10px;
    Last edited by WebJoel; 08-01-2007 at 06:47 PM.

  13. #13
    Join Date
    Feb 2007
    Location
    Midlands, UK
    Posts
    11
    Yeah negrelja bugger off to your own post.

    Hey ryanbutler; maths not being a strong point of mine anyway but Ill have a look - you think its a width or height issue?

    Thanks for your help

  14. #14
    Join Date
    Feb 2007
    Location
    Midlands, UK
    Posts
    11

    ?

    Iv set all the width's to 100% appart from the wrapper and set this too 796px, so all should now fit to the 796px - but will get the same black at the bottom of the page.

    I really dont get it, everything is floated and it should just fit underneath.

    If I take out the footer it does the same again with the next div in the list...

  15. #15
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Actually, it doesn't fit into 796px, nor does it fit into 976px which is probably what you meant to type - when you add up the left and right columns plus the centre colums and the outer borders you get 982px.....

    All those floats and 100% widths are also a problem - most of those floats aren't required - let things flow naturally.

    I did a few changes to some of the css in core.css file and it seems to work fine. Changes only are:
    Code:
    .main_wrapper_centered {margin:0 auto;  width: 982px; padding:0;}
    .main_border {}
    .main_header {height:145px;}
    .topnavWrapper {height:81px; text-align:left;}
    .navTabBarWrapper {height:30px; font-size:1.1em; font-weight:bold;}
    .secondNavWrapper {height:21px;	padding-top:2px; font-size:0.9em; clear: both; }
    .content_repeater {overflow: hidden; }
    * html .content_repeater { height: 1%; }
    .content_footer {height:75px; border:0px #00CC33 solid; margin:0; padding:0;}
    .main_footer { height:52px;	border:0px #FFFF00 solid; clear: both; }
    The blue highlighted part is an addition to ensure IE6 encloses the floats.
    Last edited by Centauri; 08-02-2007 at 08:51 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