SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast Mikeymoo's Avatar
    Join Date
    Jul 2003
    Location
    St. Albans, Uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Paul - I've broken your code

    Hi Paul (and everyone else who reads this),

    Using your 3col example (the fixed center one) I went to create a webpage.

    In changing the sizes I've broken something, and I'm now suffering "code blindness".

    Ignore the img links (not important), the problem lies in when the page is larger that the screen. A gap appears between the Outer div and the Footer div.

    html
    HTML 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>Media Design</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="media.css" rel="stylesheet" type="text/css" />
    
    </head>
    
    <body>
    
    <div id="outer">
    	<div id="innerwrap">
    		<div id="centrecontent">
    			<h3>Lorem ipsum dolor</h3>
    			<div class="headimg"><img src="images/stalbans.jpg" alt="St Albans" /></div>
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur viverra ultrices ante. Aliquam nec lectus. Praesent vitae risus. Aenean vulputate sapien et leo. Nullam euismod tortor id wisi. Sed facilisis, augue in ultrices fringilla, purus nisl euismod nibh, a placerat lacus quam sed elit.</p>
    		
    		</div>
    
    		<div id="left">
    			<div class="gboxhead">Info</div>
    			<div class="gbox">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur viverra ultrices ante.</div>
    
    			<p>Aliquam nec lectus. Praesent vitae risus. Aenean vulputate sapien et leo. Nullam euismod tortor id wisi. Sed facilisis, augue in ultrices fringilla, purus nisl euismod nibh, a placerat lacus quam sed elit.</p>
    		
    			<div class="gboxhead">More Info</div>
    			<div class="gbox">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur viverra ultrices ante.</div>
    
    		</div>
    	
    	</div> <!-- End of innerwrap -->
    
    	<div id="menu">
    		<ul>
    			<li><a href="index.htm">Home</a></li>
    			<li><a href="#">Cat One</a></li>
    			<li><a href="#">Cat Two</a></li>
    			<li><a href="#">Contact Us</a></li>
    			<li><a href="#">About Us</a></li>
    		</ul>
    	</div>
    	<div id="menuend">
    	&nbsp;
    	</div>
    
    	<div id="ieclear">
    	</div>  <!-- ie needs this -->
    
    	<div id="bar">
    	&nbsp;
    	</div>
    
    	<div id="header">
    		<a href="index.htm"><img src="../images/cologo.jpg" alt="Company Logo" /></a><img src="../images/coname1.jpg" alt="Your Company Name" />
    	</div>
    
    </div> <!-- End of outer -->
    
    <div id="footer">
    	&nbsp;&copy; Your Company 2004&nbsp;&nbsp;|&nbsp;&nbsp;Terms and Conditions
    </div>
    
    
    </body>
    </html>
    css
    Code:
    /* **************************************************  */
    /* ** Code Originally from Paul O'B - 3 Col Example ** */
    /* ** http://www.pmob.co.uk/temp/3colcentred_2a.htm ** */
    /* **************************************************  */
    
    html, body {
    	height:100%
    	}
    	
    body 	{
    	padding:0;
    	margin:0;
    	text-align:center;
    	min-width:760px;
    	background-color: lightblue;
    /*	background-image:  url('images/centerbg.jpg');
    	background-repeat: repeat-y;
    	background-position: center center;*/
    	color: #000000;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 0.8em;
    	}
    	
    #outer	{
    	height:100%;
    	min-height:100%;
    	width:758px;
    	border-left: 1px solid #000;
    	border-right: 1px solid #000;
    	margin-left: 175px;
    	margin-right: 165px;
    	color: #000000;
    	text-align:left;
    	margin:auto;
    	margin-bottom:-32px;/* make room for footer */
    	position:relative;
    	background: #fff url('./images/centerbg.jpg') repeat-y;
    	}
     
    html>body #outer{
    	height:auto;
    	} /*for mozilla as IE treats height as min-height anyway*/
    
    #innerwrap {
    	/* enables content first */
    	float:left;
    	width: 590px;
    	}
    
    #header	{
    	position:absolute;
    	top:0;
    	left:0;
    	width:758px;
    	height:140px;
    	background:#fff url('./images/pic4.jpg')  top right no-repeat;
    	border:0px solid green;
    	overflow:hidden;
    	z-index:100;
    	}
    
    #header img {
    	border: 0px solid green;
    	margin-top: 5px;
    	}
    
    #header img a {
    	text-decoration: none;
    }
    
    #bar {
    	position:absolute;
    	top: 140px;
    	left: 0;
    	width: 100%;
    	height: 32px;
    	background: #fff url('../images/bwcell1.gif') repeat-x;
    	z-index: 100;
    }
    
    #left 	{
    	position:relative;/*ie needs this to show float */
    	width: 170px;
    	float:left;
    	margin-top: 172px;
    /*	padding-top:72px;/*needed to make room for header*/
    	padding-bottom:32px;/* needed to make room for footer */
    	margin-left: 3px;
    	margin-right: 2px;
    	background-color: transparent;
    	}
    
    #left p	{
    	padding-left:3px;
    	padding-right:2px
    	}
    
    #menu p {
    	padding-left:4px;
    	padding-right:2px
    	}
    
    #menu {
    	position:relative;/*ie needs this to show float */
    	padding-top: 0px;
    	padding-bottom: 0px;
    	width: 160px;
    	float:right;
    	margin-top: 172px;
    	background-color: #3A95C2;
    	}
    
    #menuend {
    	position:relative;
    	width: 160px;
    	height:30px;
    	float:right;
    	margin:0px;
    	padding:0px;
    	/* padding-bottom:32px;/* needed to make room for footer */
    	}
    
    #centrecontent {
    	width: 400px;
    	float:right;
    	margin-top: 172px;
    /*	padding-top:72px;*/
    	padding-bottom:30px;/* needed to make room for footer */
    	margin-right: 1px;
    	margin-left: 2px;
    	background-color: transparent;
    	}
    
    #centrecontent p {
    	padding-left:3px
    	}
    
    * html #ieclear {
    	width:100%;
    	height:30px
    	} /* for ie to clear footer */
    
    #footer {
    	width:758px;
    	clear:both;
    	height:30px;
    	background: #fff url('images/cellpic2.gif') repeat-x;
    	text-align:left;
    	margin:auto;
    	position: relative;
    	color: #fff;
    	padding-top: 6px;
    	font-size: 0.8em;
    
    }
    
    * html #footer {/*only ie gets this style*/
    	\height:32px;/* for ie5 */
    	he\ight:30px;/* for ie6 */
    }
    
    /*  ***************************************************************  */
    
    #menu ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	background-color: #D6D6D6;
    }
    
    #menu li {
    	border-top: 1px solid #A5B5C6;
    }
    
    #menu li a {
    	text-decoration: none;
    	display: block;
    	width: 88%;
    	padding: 6px 6%;
    	background-color: #A7A8BD;
    	color: #fff;
    	}
    
    #menu li a:hover {
    	background-color: #DBDBDB;
    	color: #000;
    	}
    /*  ***************************************************************  */
    
    .gboxhead {
    	margin-top: 10px;
    	width: 96%;
    	border: 1px solid #DBDBDB;
    	background-color: #DBDBDB;
    	text-align: center;
    	font-family: Arial, Helvetica, sans-serif;
    	}
    .gbox {
    	width: 90%;
    	border: 1px solid #DBDBDB;
    	font-family: Arial, Helvetica, sans-serif;
    	padding: 3%;
    	margin-bottom: 0px;
    	}
    
    /* ****************************************************************** */
    #headimg {
    	border: 0px solid black;
    }
    Appologise in advance for breaking it - if the answer is simple, maybe hints in the right direction would work first,rather than a fix

    Thanks,
    Mikel
    Good decisions come from experience.
    Experience comes from making bad decisions.

  2. #2
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it just me or is that problem only arising in firefox?

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

    In ie you get a 6px gap at the bottom and in firefox the content isn't cleared and overwrites the container.

    The gap at the bottom is because you have given your footer a 32px height and a 6px padding making it 38px high but you have only allowed a negative margin of 32px for it to sit in.

    These must marry up. The bottom negative margin on the container and the height of the footer must match exactly otherwise it won't work prroperly.

    Firefox needs its float cleared so use the ieclear div below for firefox as well. The html remains the same.

    Code:
    #ieclear {
     width:100%;
     height:30px;
     clear:both;
     } /* for ie to clear footer */
    #footer {
     width:758px;
     clear:both;
     height:32px;
     background: #fff url('images/cellpic2.gif') repeat-x;
     text-align:left;
     margin:auto;
     position: relative;
     color: #fff;
     font-size: 0.8em;
     background:red;
    }
    That should sort the footer out. Did you know your footer has a white background with white text? I spent ages wondering why it wouldn't show and it was there all the time but just invisible lol

    Paul

  4. #4
    SitePoint Enthusiast Mikeymoo's Avatar
    Join Date
    Jul 2003
    Location
    St. Albans, Uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    In ie you get a 6px gap at the bottom and in firefox the content isn't cleared and overwrites the container.

    The gap at the bottom is because you have given your footer a 32px height and a 6px padding making it 38px high but you have only allowed a negative margin of 32px for it to sit in.

    These must marry up. The bottom negative margin on the container and the height of the footer must match exactly otherwise it won't work prroperly.

    Firefox needs its float cleared so use the ieclear div below for firefox as well. The html remains the same.

    Code:
    #ieclear {
     width:100%;
     height:30px;
     clear:both;
     } /* for ie to clear footer */
    #footer {
     width:758px;
     clear:both;
     height:32px;
     background: #fff url('images/cellpic2.gif') repeat-x;
     text-align:left;
     margin:auto;
     position: relative;
     color: #fff;
     font-size: 0.8em;
     background:red;
    }
    That should sort the footer out. Did you know your footer has a white background with white text? I spent ages wondering why it wouldn't show and it was there all the time but just invisible lol

    Paul

    Opps - sorry about the background.

    It hasn't really helped - jfitz is right, it's afirefox problem. If you copy another <p> of text. The page expands beyond the viewable area, and then there is a hugh gap between the inner div and the footer, all you can see in the body background colour.

    It works fine in IE, but it's bugging me now
    Mikel
    Good decisions come from experience.
    Experience comes from making bad decisions.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Have you got a real link to the page as I had it working fine in all browsers with the changes I mentioned.

    Unless of course I'm looking at the wrong thing

    Paul

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    This works for me.
    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>Media Design</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    html, body {
     height:100%;
     padding:0;
     margin:0;
     }
     
    body  {
     padding:0;
     margin:0;
     text-align:center;
     min-width:760px;
     background-color: lightblue;
    /* background-image:  url('images/centerbg.jpg');
     background-repeat: repeat-y;
     background-position: center center;*/
     color: #000000;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 0.8em;
     }
     
    #outer {
     height:100%;
     min-height:100%;
     width:758px;
     border-left: 1px solid #000;
     border-right: 1px solid #000;
     margin-left: 175px;
     margin-right: 165px;
     color: #000000;
     text-align:left;
     margin:auto;
     margin-bottom:-32px;/* make room for footer */
     position:relative;
     background: #fff url('./images/centerbg.jpg') repeat-y;
     }
     
    html>body #outer{
     height:auto;
     } /*for mozilla as IE treats height as min-height anyway*/
    #innerwrap {
     /* enables content first */
     float:left;
     width: 590px;
     }
    #header {
     position:absolute;
     top:0;
     left:0;
     width:758px;
     height:140px;
     background:#fff url('./images/pic4.jpg')  top right no-repeat;
     border:0px solid green;
     overflow:hidden;
     z-index:100;
     }
    #header img {
     border: 0px solid green;
     margin-top: 5px;
     }
    #header img a {
     text-decoration: none;
    }
    #bar {
     position:absolute;
     top: 140px;
     left: 0;
     width: 100%;
     height: 32px;
     background: #fff url('../images/bwcell1.gif') repeat-x;
     z-index: 100;
    }
    #left  {
     position:relative;/*ie needs this to show float */
     width: 170px;
     float:left;
     margin-top: 172px;
     margin-left: 3px;
     margin-right: 2px;
     background-color: transparent;
     }
    #left p {
     padding-left:3px;
     padding-right:2px
     }
    #menu p {
     padding-left:4px;
     padding-right:2px
     }
    #menu {
     position:relative;/*ie needs this to show float */
     padding-top: 0px;
     padding-bottom: 0px;
     width: 160px;
     float:right;
     margin-top: 172px;
     background-color: #3A95C2;
     }
    #menuend {
     position:relative;
     width: 160px;
     height:30px;
     float:right;
     margin:0px;
     padding:0px;
     /* padding-bottom:32px;/* needed to make room for footer */
     }
    #centrecontent {
     width: 400px;
     float:right;
     margin-top: 172px;
    /* padding-top:72px;*/
     margin-right: 1px;
     margin-left: 2px;
     background-color: transparent;
     }
    #centrecontent p {
     padding-left:3px
     }
     
    /*  ***************************************************************  */
    #menu ul {
     list-style: none;
     margin: 0;
     padding: 0;
     background-color: #D6D6D6;
    }
    #menu li {
     border-top: 1px solid #A5B5C6;
    }
    #menu li a {
     text-decoration: none;
     display: block;
     width: 88%;
     padding: 6px 6%;
     background-color: #A7A8BD;
     color: #fff;
     }
    #menu li a:hover {
     background-color: #DBDBDB;
     color: #000;
     }
    /*  ***************************************************************  */
    .gboxhead {
     margin-top: 10px;
     width: 96%;
     border: 1px solid #DBDBDB;
     background-color: #DBDBDB;
     text-align: center;
     font-family: Arial, Helvetica, sans-serif;
     }
    .gbox {
     width: 90%;
     border: 1px solid #DBDBDB;
     font-family: Arial, Helvetica, sans-serif;
     padding: 3%;
     margin-bottom: 0px;
     }
    /* ****************************************************************** */
    #headimg {
     border: 0px solid black;
    }
    
    #clear {
      height:32px;
    	clear:both;
     } 
    #footer {
     width:758px;
     clear:both;
     height:32px;
     background: #fff url('images/cellpic2.gif') repeat-x;
     text-align:left;
     margin:auto;
     position: relative;
     color: #fff;
     font-size: 0.8em;
     background:red;
     border-left: 1px solid #000;
     border-right: 1px solid #000;
    }
    </style>
    </head>
    <body>
    <div id="outer"> 
      <div id="innerwrap"> 
    	<div id="centrecontent"> 
    	  <h3>Lorem ipsum dolor</h3>
    	  <div class="headimg"><img src="images/stalbans.jpg" alt="St Albans" /></div>
    	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur viverra 
    		ultrices ante. Aliquam nec lectus. Praesent vitae risus. Aenean vulputate 
    		sapien et leo. Nullam euismod tortor id wisi. Sed facilisis, augue in 
    		ultrices fringilla, purus nisl euismod nibh, a placerat lacus quam sed 
    		elit.</p>
    	   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur viverra 
    		ultrices ante. Aliquam nec lectus. Praesent vitae risus. Aenean vulputate 
    		sapien et leo. Nullam euismod tortor id wisi. Sed facilisis, augue in 
    		ultrices fringilla, purus nisl euismod nibh, a placerat lacus quam sed 
    		elit.</p>
    	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur viverra 
    		ultrices ante. Aliquam nec lectus. Praesent vitae risus. Aenean vulputate 
    		sapien et leo. Nullam euismod tortor id wisi. Sed facilisis, augue in 
    		ultrices fringilla, purus nisl euismod nibh, a placerat lacus quam sed 
    		elit.</p>
    	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur viverra 
    		ultrices ante. Aliquam nec lectus. Praesent vitae risus. Aenean vulputate 
    		sapien et leo. Nullam euismod tortor id wisi. Sed facilisis, augue in 
    		ultrices fringilla, purus nisl euismod nibh, a placerat lacus quam sed 
    		elit.</p>
    	  <p style="margin-bottom:0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur viverra 
    		ultrices ante. Aliquam nec lectus. Praesent vitae risus. Aenean vulputate 
    		sapien et leo. Nullam euismod tortor id wisi. Sed facilisis, augue in 
    		ultrices fringilla, purus nisl euismod nibh, a placerat lacus quam sed 
    		elit.</p>
     </div>
    	<div id="left"> 
    	  <div class="gboxhead">Info</div>
    	  <div class="gbox">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    		Curabitur viverra ultrices ante.</div>
    	  <p>Aliquam nec lectus. Praesent vitae risus. Aenean vulputate sapien et 
    		leo. Nullam euismod tortor id wisi. Sed facilisis, augue in ultrices fringilla, 
    		purus nisl euismod nibh, a placerat lacus quam sed elit.</p>
    	  <div class="gboxhead">More Info</div>
    	  <div class="gbox">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    		Curabitur viverra ultrices ante.</div>
    	</div>
      
      </div>
      <!-- End of innerwrap -->
      <div id="menu"> 
    	<ul>
    	  <li><a href="index.htm">Home</a></li>
    	  <li><a href="#">Cat One</a></li>
    	  <li><a href="#">Cat Two</a></li>
    	  <li><a href="#">Contact Us</a></li>
    	  <li><a href="#">About Us</a></li>
    	</ul>
      </div>
      <div id="menuend"> &nbsp; </div>
      <div id="clear"></div>
      </div>
    </div>
    <!-- End of outer -->
    <div id="footer"> &nbsp;&copy; Your Company 2004&nbsp;&nbsp;|&nbsp;&nbsp;Terms 
      and Conditions </div>
    </body>
    </html>
    Paul

  7. #7
    SitePoint Enthusiast Mikeymoo's Avatar
    Join Date
    Jul 2003
    Location
    St. Albans, Uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I had any hair left, I'd be pulluing it out!!!

    I've uploaded the files:
    http://www.itcsites.co.uk/template02/index.htm
    http://www.itcsites.co.uk/template02/media.css

    and this is what I get in Firefox 0.9
    Mikel
    Good decisions come from experience.
    Experience comes from making bad decisions.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If I had any hair left, I'd be pulluing it out!!!
    If you had any hair left I'd pull it out for you lol

    You know its really annoying when you give someome the answer and they don't listen
    Quote Originally Posted by my firstpost
    Firefox needs its float cleared so use the ieclear div below for firefox as well. The html remains the same.
    Code:
    #ieclear {
    width:100%;
    height:30px;
    clear:both;
    } /* for ie to clear footer */
    This is all thats needed!

    However you may wish to see the code in my last post where I've tidied the margins and padding up and a few other bits and pieces.

    Paul

  9. #9
    SitePoint Enthusiast Mikeymoo's Avatar
    Join Date
    Jul 2003
    Location
    St. Albans, Uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry Paul, *me:- bows downs repenting*

    Thought I had copied you code in that style sheet, when all I did was save it down with a different name and didn't link it. !!!!!!!!!!!!!!!!!!!!!!!!!!!

    I've torn my eyes away from it all now, and I'll have a good lookin the morning with fresh eyes and an awake (kinda) brain.

    Thanks,

    PS - Didn't see that I had to delete the
    Code:
    * html
    !!
    Mikel
    Good decisions come from experience.
    Experience comes from making bad decisions.


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
  •