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 10 of 10
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Large white gaps between divs in IE 6

    Hi - Im new to css and I need to develop a website for IE 6. I am getting a large gap between two divs for an unknown reason - I would like to have them flush against eachother as they seem to appear in IE 8 but not in IE 6. The two divs with the gap are: #welcomeandsearch and #welcometext

    below is the basic html and css I am using:

    Code:
    #welcomeandsearch {width:940px; float:left; margin: 0px;}
    #welcome {width:700px; float:left; color:#FFA000; font-size:1.75em; font-weight:normal; margin: 0px;}
    #welcometext {width:970px; float:left; padding: 0; margin: 0px;}
    #search {width:190px; float:left; color:#363636; font-size:0.75em; font-weight:normal;}
    #searchbox {width:200px; float:left; color:#363636; font-size:1.0em; font-weight:normal;}
    form input.button {width:25px; height:15px; background:#FFC666; color:#363636; font-weight:bold; border:none; font-size:11px; margin:0 auto; padding:0px;}
    form input.textfield {color:#363636; font-size:0.75em; font-weight:normal;}
    
    <div id="welcomeandsearch">
      <div id="welcome">Welcome</div>
      
      <div id="searchbox">
        <form id="form1" name="form1" method="post" action="">
          <label>Search:</label>
            <input name="textfield" type="text" class="textfield" id="textfield" value="enter keywords here" />
            <input name="button" type="submit" class="button" value="Go" />
        </form>
       </div></div>
       <div id="welcometext">to the Customer Self Help Resource. This online resource has been developed to assist all staff with their most common IT related problems and requests.</div>
    Any help much appreciated!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello mikeozz2007,
    I don't have IE6 to look at this but it's pretty basic and you should be able to code it for all browsers without too much trouble.

    One of the biggest things that's going to help is having a DocType Declaration at the top of your document. I don't know if you've used one or not because you don't quote your entire code here. Have a look at the link about DocTypes in my sig below.

    The first thing I noticed about your CSS is you are floating #welcometext and #welcomeandsearch but they seem to be full width elements. The only reason for floating anything is to put something else beside it.

    Give this a try and see if it helps you
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 100.1% "Comic Sans MS";
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    #welcomeandsearch {
    	width: 940px; 
    	overflow: auto; 
    	margin: 0 auto;
    	background: #ccc;
    }
    #welcome {
    	width:680px; 
    	float: left;
    	padding: 0 0 0 20px;
    	color:#FFA000; 
    	font-size:1.75em; 
    	font-weight:normal;
    }
    #searchbox {
    	width: 200px; 
    	float: left; 
    	color: #363636; 
    	font-size: 1.0em; 
    	font-weight: normal;
    	background: #0f0;
    }
    	#search {width:190px; float:left; color:#363636; font-size:0.75em; font-weight:normal;}
    	form input.button {width:25px; height:15px; background:#FFC666; color:#363636; font-weight:bold; border:none; font-size:11px; margin:0 auto; padding:0px;}
    	form input.textfield {color:#363636; font-size:0.75em; font-weight:normal;}
    #welcometext {
    	width: 970px; 
    	margin: 0 auto;
    	background: #00f;
    }
    </style>
    </head>
    <body>
        <div id="welcomeandsearch">
            <h1 id="welcome">Welcome</h1>  
                <div id="searchbox">
                    <form id="form1" name="form1" method="post" action="">
                        <label>Search:</label>
                        <input name="textfield" type="text" class="textfield" id="textfield" value="enter keywords here" />
                        <input name="button" type="submit" class="button" value="Go" />
                    </form>
                <!--end searchbox--></div>
        <!--end welcomeandsearch--></div>
        <div id="welcometext">
            <p>
                to the Customer Self Help Resource. This online resource has been developed 
                to assist all staff with their most common IT related problems and requests.
            </p>
        <!--end welcomtext--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Excavator,

    Thanks for your quick response!

    I have declared a doc type in my full code and I didnt realise that I need not float a full length element as I had done. Your solution worked on its own but when incorporated into my full code I had any content appearing after it dissapear in IE 6 and there was still a considerable gap in IE 8? I think I might be missing something such as a simple tag elsewhere in my code or another style is affecting it but cannot figure it out!

    Could you take a look at my full code?

    Html: http://www.michael-williams.com.au/index2.html
    css: http://www.michael-williams.com.au/main.css

    Thank you!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Good morning mikeozz2007,
    The best place to start might be correcting some errors in your code. Have a look at what the validator finds - http://validator.w3.org/check?verbos...%2Findex2.html

    See the links about validation in my sig below.



    ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Excavator - I managed to get rid of half of my errors - I will make sure I use this as I continue developing!

    The only errors I have left are ones stating the re-use of divs or as the validator says 'already defined'. I dont understand why I cant reuse the same div that I have defined? If I need multiple divs on the one screen which have the same characteristics then wont I just be doubling up on code to redefine a new div which has the exact same charateristics as one that I have already created?

    A little lost here now.

  • #6
    Senior Coder djm0219's Avatar
    Join Date
    Aug 2003
    Location
    Wake Forest, North Carolina
    Posts
    1,294
    Thanks
    4
    Thanked 203 Times in 200 Posts
    Styling IDs may only be used one. Change them to a class instead and you may use them as often as needed (.leftPan instead of #leftPan in the style file).
    Dave .... HostMonster for all of your hosting needs

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by mikeozz2007 View Post
    The only errors I have left are ones stating the re-use of divs or as the validator says 'already defined'. I dont understand why I cant reuse the same div that I have defined? If I need multiple divs on the one screen which have the same characteristics then wont I just be doubling up on code to redefine a new div which has the exact same charateristics as one that I have already created?

    A little lost here now.
    id's and class's. id gets used once, a class can be used over and over.

    <div id"name"> gets styled with #name in your CSS
    <div class"name"> gets styled with .name in your CSS

    Have a look at this explanation - http://www.tizag.com/cssT/cssid.php
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Excavator and Dave - I now know the difference between id's and classes and my code all validates!

    So I guess now back to my original problem

    I implemented your original solution Excavator regarding the gap I had appearing between #welcomeandsearch and #welcometext but with that implemented I have no gap in IE 6 which is great but there is a gap in IE 8 and #welcomeandsearch is appearing almost doubled in height in both browsers. I tried to set a height on this div but then a scroll bar appears on it.

    Any ideas?
    Last edited by mikeozz2007; 11-25-2009 at 09:09 PM.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by mikeozz2007 View Post
    Thanks Excavator and Dave - I now know the difference between id's and classes and my code all validates!
    Congratulations on the valid code!


    So I guess now back to my original problem

    I implemented your original solution Excavator regarding the gap I had appearing between #welcomeandsearch and #welcometext but with that implemented I have no gap in IE 6 which is great but there is a gap in IE 8 and #welcomeandsearch is appearing almost doubled in height in both browsers. I tried to set a height on this div but then a scroll bar appears on it.

    Any ideas?
    Try removing the default margin/padding. Browsers have different defaults so we can zero those out and set our own with this bit highlighted in red -
    Code:
    @charset "utf-8";
    body {
    	font-family:Arial;
    	font-size:0.75em;
    	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    	padding: 0;
    	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    	color: #000000;
    }
    * {
    margin: 0;
    padding: 0;
    }
    #container {
    	width: 990px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    	background: url(images/bg_sidebars2.gif) repeat-y;
    	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    	padding: 0;
    	text-align: left; /* this overrides the text-align: center on the body element. */
    }
    #header {
    	position:re
    Have a look at an explanation of that.


    Another problem is #welcometext is width:970px; but the 40px padding in #mainContent doesn't leave enough room for it.
    The same thing is happening to #mainleftPan and #groupsPan, not enough room inside #mainContent.
    Have a look at how the box model works.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Excavator,

    Thanks - this seems to have done the trick and I realise how my divs werent fitting into #maincontent correctly after reading the box model.

    Thanks again!


  •  

    Posting Permissions

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