SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Padding Fix Not Working

    I think my problem is with IEs extra padding, but the typical fix isn't responding. The situation is the same as many that have posted here, but I tried both of Paul B's solutions to the problem, with no difference in display.

    My css code is:

    /*POSITIONING======================================*/

    #wrapper{min-height:100%;margin-bottom:-124px;height:auto;}
    * html #wrapper{height:100%;
    }


    /* main text divs */
    #container {
    background: #ffc url(image/mid.gif) repeat-y center;
    position: absolute;
    left: 50%;
    width: 760px;
    margin-left: -380px;
    }
    #intro {
    margin: 0px;
    background: url(image/top_h.jpg) no-repeat center top;
    height: 86px;
    overflow: hidden;
    }

    #intro img{display:block;margin:auto}

    #footer {
    background: url(image/end.gif) no-repeat center bottom;
    width:100%;
    clear:both;
    height:124px;
    color: #000000;
    }
    #clearfooter{clear:both;height:124px;}

    While I can, thank you Paul for your excellent responses to so many questions, which allowed me to get my footer working properly! The extra padding is occuring between the intro div and the next div within the container.

    Any more thoughts on how to get rid of this extra padding?

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

    I'll need to see the html that goes with the above code

    It may just be the default padding/margin of elements that is causing it. Add this to your styleshet to see if that is the cause.
    Code:
    * {margin:0;padding:0}
    The universal selector (*) will set all elements to have no padding or margins and should show if this is the problem. If this is the problem you can either leave the statement in the css and then set all margins explicitly as you go. Or address each element that is causing the problem.

    However I would need to see the whole page to see if this is really the cause

    Paul

  3. #3
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,
    I neglected to enter the universal removal of padding and margins into the example because it's something that I automatically do, so I didn't remember to put it into the example code.

    Is there a way that you can tell me what you would be looking for in the html that I could perhaps search for? The reason is that the html is actually written as an asp page and is integrated within a lot of VBScript. It's fairly messy; it's not in a logical sequence that you would be able to put css if you were merely going for presentation, unfortunately.

    The construct of the page is as follows:
    <div id="wrapper">
    <div id="container">
    <div id="intro"></div>
    Then a <form> gets opened and the page begins a series of actions that all post back to the same <form>. It's fairly complicated programming. Within the <form>, I open an <div class="input"> and also a <div class="buttons">. I close the </div> buttons and then close the </div> input.

    For some reason, although I read your instructions very carefully, the footer didn't work if I closed the container and the wrapper divs. I then open the <div id="clearfooter"></div>, followed by the <div id="footer"></div>. By now, of course, we're pretty far away from the problem.

    In Firefox and Netscape, the <div class="input"> is slammed right next to the <div id="intro">. In IE, running in standards mode, there is a significant separation between the divs. Actually, the appearance is what I ultimately want to have, which is ironic. When I add the padding that I need to FF and Netscape, IE drops down to an unacceptable position. If I knew how to make IE ignore a padding request, I could get the job done that way.

    If this is impossible to follow, then what would you need to see? The raw html code, like what would be available in View Source on the browser, or the actual asp page?

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

    That didn't make lot of sense to me lol

    If I could see the css and the view source from the browsers then I can have a proper look. Then you can work backwards from what I fix

    Note that there are default margins and padding of the form element in ie that is different to other browsers and will give you gaps.

    Paul

  5. #5
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As it turns out, the html isn't all that horrible to post.
    Code:
    <head>
    <title>Recipe Maintenance</title>
    <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
    <link rel="stylesheet" type="text/css" href="test.css"> 
    </head>
    
    
    	<body>
    
    
    
    <div id="wrapper">
    <div id="container">	
       <div id="intro"></div>
       
    <form ACTION="Recipe_Maintenance.asp" METHOD="POST" name ="FrontPage_Form1" onsubmit="return validateForm(this)">
    
    
    	 <div class="input">
    	 <h1 class="input">Recipe Maintenance</h1>
    	
     
    	 <div class="buttons">
    			<INPUT type="Submit" name="btnSubmit" Value = "Add" onClick="getVal('01')">
    			<INPUT type="Submit" name="btnSubmit" Value = "Modify" onClick="getVal('01')">
    			<INPUT type="Submit" name="btnSubmit" Value = "Display Recipes" onClick="getVal('01')">
    			<INPUT type="Submit" name="btnSubmit" Value = "End" onClick="getVal('08')">
    			<INPUT type="Submit" name="btnHelp"  Value = "Help" onClick="getVal('09')">    	
    	
    	<INPUT type="Hidden" name="fScreen"  Value = "Recipe Menu">
    	<INPUT type="Hidden" name="fFunction"  Value = "">
    	<INPUT type="Hidden" name="btnSave"  Value = "Recipes">
    	<INPUT type="Hidden" name="Recipe_No"  Value = "">
    	</div><!-- end of buttons div -->
    	</div><!-- end of input div -->
    	
    	<p> this is before the clearfooter div </p>
    	<div id="clearfooter"></div>
    	<div id="footer"></div>
    	</div>
    	
    			
    </form>
    </body>
    I'm commenting the *heck* out of the code to see what I'm doing! Thanks so much for your help.

  6. #6
    SitePoint Addict
    Join Date
    Feb 2005
    Location
    Maine
    Posts
    244
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't help you on the CSS, but I just want to say that it's a really bad programming habit to use lowercase and uppercase in variables/other user named objects. Such as "btnSubmit".

    I remember I named my database connection script "dbConnect.php" one time, and I wasted a ton of time trying to figure out what was happening. lol

    A good habit is just to use all lowercase, or underscores.


  7. #7
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you saying that it took you a ton of time to find a typo and that is why you're commenting to me about the use of lower/upper case variables?

    Must be left over from 20 years of programming experience that I've always used the lower/upper case convention and, therefore, have no real issues with remembering what I've typed. I've never heard of this style of naming variables as being inappropriate. Perhaps you could give me a better explanation of your comment? Seriously, I came up from the ranks of COBOL, so maybe you could enlighten me to a problem in some of the web technology programming languages? I am very familiar with the case sensitivities and strict typing requirements of javascript, etc., although VBScript doesn't have strict typing I still adhere to strict typing conventions with it as well.

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

    I've looked at the code you posted and you need to remove the top margin and padding from the form and from the h1 and then the 2 divs will have no gap/

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style typ="text/css">
    #wrapper{min-height:100%;margin-bottom:-124px;height:auto;}
    * html #wrapper{height:100%;
    }
    
    /* main text divs */
    #container {
    background: #ffc url(image/mid.gif) repeat-y center;
    position: absolute;
    left: 50%;
    width: 760px;
    margin-left: -380px; 
    }
    #intro {
    margin: 0px;
    background:red url(image/top_h.jpg) no-repeat center top;
    height: 86px;
    overflow: hidden;
    }
    #intro img{display:block;margin:auto}
    #footer {
    background: url(image/end.gif) no-repeat center bottom;
    width:100%;
    clear:both;
    height:124px;
    color: #000000;
    }
    #clearfooter{clear:both;height:124px;}
    form{background:blue;margin:0;padding:0}
    h1{margin-top:0;}
    </style>
    </head>
    <body>
    <div id="wrapper"> 
      <div id="container"> 
    	<div id="intro">intro</div>
    	<form ACTION="Recipe_Maintenance.asp" METHOD="POST" name ="FrontPage_Form1" onSubmit="return validateForm(this)">
    	  <div class="input"> 
    		<h1 class="input">Recipe Maintenance</h1>
    		<div class="buttons"> 
    		  <INPUT type="Submit" name="btnSubmit" Value = "Add" onClick="getVal('01')">
    		  <INPUT type="Submit" name="btnSubmit" Value = "Modify" onClick="getVal('01')">
    		  <INPUT type="Submit" name="btnSubmit" Value = "Display Recipes" onClick="getVal('01')">
    		  <INPUT type="Submit" name="btnSubmit" Value = "End" onClick="getVal('08')">
    		  <INPUT type="Submit" name="btnHelp"  Value = "Help" onClick="getVal('09')">
    		  <INPUT type="Hidden" name="fScreen"  Value = "Recipe Menu">
    		  <INPUT type="Hidden" name="fFunction"  Value = "">
    		  <INPUT type="Hidden" name="btnSave"  Value = "Recipes">
    		  <INPUT type="Hidden" name="Recipe_No"  Value = "">
    		</div>
    		<!-- end of buttons div -->
    	  </div>
    	</form>
    	<!-- end of input div -->
    	<p> this is before the clearfooter div </p>
    	<div id="clearfooter"></div>
    	<div id="footer"></div>
      </div>
    </div>
    </body>
    </html>
    You also had a missing closing div and some bad nestings

    Paul

  9. #9
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, I understand the comment regarding the closing divs, and I need to go back and address that. But would you explain what you mean about the bad nestings? That might explain why my footer didn't respond exactly the way that I thought it should in reading your FAQ section.

    Why I *thought* I was doing was creating an outer div, then creating the div that gave me the fluidity with the repeat-y image, then creating the div to place the top banner, followed by creating the div to hold the input form and the separate div to hold the buttons, closing down the buttons because I wanted them nested in the input form, closing down the input form, opening and closing the clearfooter div, opening and closing the footer div, then closing the div that provided me with the fluidity, then closing the outer div.

    Is there a problem with this nesting thought process?... or did I not execute it correctly?

    This is my first positioning css attempt. I'm trying to leave my table-layout days behind me. So I'm on a bit of a learning curve, to say the least.

    I thought that I was removing all padding and margins with the asterisk command at the top of my stylesheet. Obviously, there must be some default margin and padding left. In thinking about it, that must be the case otherwise the text would collide, I suppose. Can you tell me what elements have their margins and padding removed when you apply the
    * {margin:0;padding:0} rule?

    Thank you.

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

    It was a missing closing div at the end and I think it was just your form that was incorrectly nested.

    The universal selector should clear all elements padding and margins so you must have made a typo somewhere.

    If you try the code I posted above you should see that it all fits together correctly

    Paul

  11. #11
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,
    I did try your code and, after reading it very carefully, I saw what you were trying to tell me as I picked up the </form> in the wrong place.

    But, more importantly, I just wanted to tell you that the way that you responded to me was so helpful because it provided me with a big step in understanding the way that you actually have to use the css div's and manage the code.

    Heaps of thanks. BTW, the code works perfectly (of course).


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
  •