CSS Issue

**WaHoOoO!** · 12-25-2004, 05:34 PM

The page is here

Now, as you can see, when you hit the bottom of the page, the style ends. Here's the index file

HTML Code:

<html>
 <head>
  <title>Lenwe.com - bringing the news to the people</title>
 
  <style type="text/css" media="screen">@import "shared/css/screen.style.css";</style>
  <style type="text/css" media="print">@import "shared/css/printer.style.css";</style>
  
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Language" content="en-us" />

  <meta name="keywords" content="Lenwe.com" />
  <meta name="description" content="Lenwe.com - bringing the news to the people" />
  <meta name="robots" content="all" />
  <meta name="revisit-after" content="10 days" />
  <meta name="distribution" content="global" />
  <meta name="language" content="English" />
  <meta name="copyright" content="2005 Lenwe (c)" />
 </head>

<body>



<div id="wrapper">
 
 <div id="header1"><img src="shared/images/header.image.png" alt="Lenwe.com" /></div>
 <div id="header2" align="center">
 	<ul id="menu">
 		<li><a href="index.php?lpage=index">Home</a></li>
		<li><a href="index.php?lpage=about">About</a></li>
		<li><a href="http://forums.lenwe.com">Forums</a></li>
		<li><a href="index.php?lpage=submit">Submit News</a></li>
		<li><a href="index.php?lpage=affiliates">Affiliates</a></li>
		<li><a href="index.php?lpage=contact">Contact</a></li>
	</ul>
 </div>
 <div id="header3"><img src="shared/images/special.image.png" alt="Lenwe.com, bringing the news to the people" width="100%" /></div>
 
 <div id="content">
 	<div id="left"><?php include("includes/test.php"); ?></div>
 	<div id="right"></div>
 </div>
 
 <div id="footer1" align="center">
 	<ul id="menu">
		<li><a href="index.php?lpage=privacy">Privacy Information</a></li>
		<li><a href="index.php?lpage=copyright">Copyright Information</a></li>
		<li><a href="index.php?lpage=rss">RSS Feeds</a></li>
	</ul>
 </div>

</div>

</body>
</html>

The CSS is as follows:

Code:

body{
	background: #f0efed;
	margin-top: 0;
	margin-bottom: 0;
}

#wrapper{
	background: #fff;
	border: none;
		border-left: 2px solid #ddd;
		border-right: 2px solid #ddd;
	width: 720px;
	height: 100%;
	margin: 0 auto;
}

#header1{
	border: none;
	width: 720px;
}

#header1 img{
	margin: 0px;
		margin-top: 0;
		margin-bottom: 3px;
}

#header2{
	background: url(../images/menu.image.png);
	width: 720px;
	margin: 0px;
		margin-top: 0;
		margin-bottom: 0px;
}

#header3{
	border: none;
	width: 720px;
}

#header3 img{
	margin: 0px;
		margin-top: 0;
		margin-bottom: 0;
}

/* Menu Styling */

ul#menu{
	padding: 0;
	margin: 0;
		margin-top: -3px;
}

ul#menu li{
	display: inline;
	list-style-type: none;
	
	font-family: verdana;
	font-size: 10px;
	color: #111;
	padding: 34px;
	position: relative;
		bottom: 2px;
}

ul#menu li a{
	font-family: verdana;
	font-size: 10px;
	color: #111;
	text-decoration: none;
}

/* Content Specific */

#content{
	margin-bottom: 0;
		
	border: 0;
		border-bottom: 1px dashed #ddd;
}

I *think* the issue is where in #wrapper it says height:100%. Does anyone know a workaround that cause it to be the height of your total page, not just your browser?

**vivekar** · 12-25-2004, 08:02 PM

I had the same problem.
I tried changing the background of the body. It worked.

body{
background : url(bg.gif); repeat-y;
background-position: center;
}

**WaHoOoO!** · 12-25-2004, 08:43 PM

But my background isn't an image, it's a color. Also, it's not the body's background, it's a wrapper.

**brian** · 12-25-2004, 09:55 PM

Your problem is this <ul id="menu">

You have the css class (id) set to menu, which is how it is displayed, if you want it to look like the rest of the page, you need to change it to content.

**WaHoOoO!** · 12-26-2004, 11:01 AM

Didn't work. Broke my menus completely. My only solution (as of right now) is to just make each page a fixed length (let's say 500%) and hope none of my pages ever need to be longer than that.

**vivekar** · 12-26-2004, 09:54 PM

That's a problem in all the major browsers. I have faced it.
That's why I offered you a practical tip.

If you make a bg with a width of your body and center it, you can extend your content to what ever length.

my bg.gif is around 800 px width. I made it centered so that content is rendered on the bg.

**faze1** · 12-27-2004, 12:45 AM

Hey WaHoOoO,

I'm nost sure I understand your problem, is it the white content area? In FireFox it quites at the end of the browser window but extends to the bottom of the page for IE and Opera. Where should it end, the dotted image along the bottom? The top of the footer? I think I can get this worked out for you, but I'm not sure I know exactly what you are looking for.

I don't know if you have checked your site in IE or Opera. The menu background is squashed to size with the text. I'm not surprised IE doesn't get it, but I expect more from Opera. Both Opera and IE are also confused about the block element widths, IE shaves a few px off the right of the blue bordered content box and Opera adds a few to the right of the header. Also Opera has a useless default padding of 8px at the top of the page, that can be dealt with by adding zero padding to the body in your css.

Let me know exactly where you would like the content background to end and I'll help you nail it in place regardless of the amount of content. The only thing I ask is you tell me what happens if I ping you, I'm scared to try

Cheers,

**zincoxide** · 12-28-2004, 11:16 AM

I'm pretty sure that in CSS you cannot specify a percentage for height. Only width.

I have a book on CSS and it says that you have to specify a height. I have noticed that if you are using a div and you leave the height out completely that it extends as far as it needs to for the whole div to be visible.

**WaHoOoO!** · 12-28-2004, 09:26 PM

Yes, you can offer a percentage for a height.

Also, faze1, I want it to go to the dotted line, and stop. I want the dotted line to *preferably* always be at the bottom of the page (so, 100% doesn't work, in this case), regardless of how long the page is.

**faze1** · 12:34 AM

Ok I see the problem a little more clearly now, I spent a little time and the best I've got so far, (I haven't given up yet), is to get the white background to the bottom of the footer and make it fluid with any amount of content you might have. The only problem is that if there is very little content on the page the body's background will be visible below the footer. This seemed to produce the best results however, because no matter the content the page still looked intentional.

The absolute position sticks the footer to the bottom but this only works with a small amount of content as the footer looses its relative abilities and could end up in the middle of the content on a larger page.

The last thing I tried was to change the position to fixed, the only downside was IE doesn't work with fixed and so I had to add an IE expression that gets a little jumpy when scrolled. I also thought it looked a little strange the footer was fixed but the header was not, I tried fixing that too but it made the content window to small in 800x600.

Sorry for the long schpeal as I am sure you have tried all of these as well and know the results. Anyway this is what I have so far;

Code:

body{
	background: #f0efed;
	margin-top: 0;
	margin-bottom: 2px; /*added for testing, we don't need this*/
	padding: 0; /*hack for opera top padding issue*/
	text-align: center; /*hack for ie centering issue*/
		
}

#wrapper{
	background: #fff;
	border: none;
		border-left: 2px solid #ddd;
		border-right: 2px solid #ddd;
	width: 720px;
	/*height: 100%; I think this was the original problem */
    margin: 0 auto;
	text-align: left; /*hack to correct for ie centering issue*/
}

#header1{
	border: none;
	width: 720px;
}

#header1 img{
	margin: 0px;
		margin-top: 0;
		margin-bottom: 0;/*Changes from 3 to 0 for weird stripe along top IE*/
}

#header2{
	background: url(../images/menu.image.png);
	width: 720px;
	margin: 0;
		margin-top: 0;
		margin-bottom: 0;
}

#header3{
	border: none;
	width: 720px;

}

#header3 img{
	margin: 0px;
		margin-top: 0;
		margin-bottom: 0;
}

/* Menu Styling */

ul#menu{

	padding: 0;
	margin: 0;
		margin-top: -3px;
	line-height: 20px; /*hack for ie and opera menu collapse*/
}

ul#menu li{
	display: inline;
	list-style-type: none;
	
	font-family: verdana;
	font-size: 10px;
	color: #111;
	padding: 34px;
	position: relative;
		bottom: 1px;
}

ul#menu li a{
	font-family: verdana;
	font-size: 10px;
	color: #111;
	text-decoration: none;
}


/*I only started this for padding*/
#footer1 { 
 padding: 100px 0 0;
 width: 720px;
 border-bottom: 1px dashed #ddd;
}




/* Content Specific */

#content{
	background-color: #fff;
	margin-bottom: 0;
	border: 0;
}

I fixed the IE Opera issues I found. It's only slightly different than what you already have and was based off what is currently up at your site, not the code you posted above. The only change I made to the HTML was to put the footer in the content div, which is not currently closed on the live site.

**WaHoOoO!** · 12-29-2004, 12:44 PM

I put your CSS fixes in place, and I notice the issue is gone in Firefox (my main development browser) and IE. I'm very thankful for you help.

I made an example page with longer text (Link). If you find any ways to improve it, I'll be quite thankful.

**faze1** · 12-29-2004, 01:49 PM

Well to be honest with you I realy like the site so far, it's a very clean lay out. I was tempted to sneak in a few text-align: justiy; s to the #content, #left and #right, with a little padding on the edges. Since these were just styling opinions I tried to restrain myself.

The site in Opera looks almost identical to FireFox, but for IE I was just going for close enough. I really like the gray stripe at the bottom of the menu, it really adds some dimension, I'll see if I can get it to display in IE with out compromising the other browsers.

This project got me thinking about the original problem though and as yet I do not have a good solution. I'm going to keep playing with it in my free time to see if there is a way to place the footer to the bottom of the window for pages with little content and yet still work fluidly (is that a word) with larger content pages. If I make any progress I'll let you know.

I'm glad my help was useful,

**WaHoOoO!** · 12-30-2004, 11:55 AM

I went back and looked at the styling again, and I took what you said and did it. I justified the sections, and added a 6px padding. I like the overall look it gave.

**vivekar** · 12-30-2004, 06:15 PM

It still has some problems in IE.
I use Maxthon ( an IE variant).

There is some white space on the right side.

**faze1** · 06:03 AM

I see it too in IE6, this must have something to do with the padding that was added.

I have a deadline on a project and do not have a lot of time, in fact just comming to the forum today would probably be considered slacking by some

. Therefore the quick answer would be to use a universal selector for a hack. I peaked at the source and saw the align and padding were added to the index.php, try removing that and change the #content in the css page to;

#content, #left, #right{
margin: 0;
padding: 0 6px;
text-align:justify;
}

then add this below it.

#content, #left, #right{
* padding: 0;
}

For any one not familar with this, the * before the padding only talks to IE. Now all the browsers that know how to handle the padding will show it, and the ONE THAT DOES NOT

will show the new align but not the padding.

I should have some time tomorrow to work out a real fix that shows padding for all if I quit slacking and make some progress on the paying job tonight. Truthfully, I like your project more.

One side note, I totally overlooked it before, id="menu" should only be used once per page so if you want to use that style twice it should be a class instead. This doesn't have anything to do with the padding issue though. I'll post again if I can come up with something.

Cheers,

**WaHoOoO!** · 10:34 AM

Well, I removed the padding from the index.php file, and added it to #content in the CSS. I also fixed the class/id issue, as well as fixed two other validation problems. Should be working fine now.

The extra whitespace in IE is directly caused by the padding of #content. I have not yet found a workaround that....works.

**faze1** · 01-01-2005, 08:07 PM

Hello,

I would say for now just use this after your #content

#content, #left, #right{
* padding: 0;
}

That way you can get on with the other aspects of your page and still see the padding you want in your browser. IE will not have the extra white space but it wont have the padding either. If you have a problem, the full hack looks like this;

/* The red escape will hide form all except IE \*/
#content, #left, #right{
* padding: 0;
}
/* the following comment close tag will be used instead */

There is a way to get padding in IE, I just don't know it yet.

Cheers,

**WaHoOoO!** · 01-03-2005, 03:40 PM

I personally have found no better solution than this. Thanks so much for your help. The only downside is that in IE it has no padding, but other than that, everything is perfect.

**faze1** · 01-06-2005, 02:21 AM

Ok, I'm about four days late, I just can't seem to meet a deadline.

I went to work at it and after about 30 minutes I got frustrated and decided to start from scratch with the css. I had to make a few changes to the xhtml as well but It's pretty much the same. There was nothing wrong with your code as much as what the blender know as IE did to it. If it didn't come with operating system do you think any one would download it?

Let me get my flame shield....

I'm going to PM you a link for a zip to download as I had to change your images a little to make this work. I did notice the new images on the site so I used those instead of the ones I had. If you have any questions about what I did let me know.

Cheers,