Jump to content

CSS problem: html element height only 20 px.

formmailer

By formmailer,
in Dev Talk

 Share

Recommended Posts

formmailer Sr. Member

formmailer

Posted
Posted

Hi!

Once again I need CSS help (sorry!  :-[). I am converting an existing (non cms) site to Processwire and everything works fine except for one CSS issue I can't get fixed. The CSS is almost the same, but for some reason the HTML element in the PW site only has a heigt of 20px (see attached image). Because of this the fullBackground DIV gets a height of 20px as well. Everything is working fine in the original site (zwedenweb.com).

I've been sitting or searching for hours now, but without success. Does any of you have an idea what I could be missing?

I tried adding height: 100% to both html and body. This had some effect but not enough... the heigth became 6xx pixels, which still isn't the actual height.

I hope someone can help me, because this is driving me nuts.

//Jasper

Below is the simplified  version of my template and the CSS. The reset.css is the default that comes with PW.

HTML

<!DOCTYPE html>
<html lang="nl" xmlns:fb="http://www.facebook.com/2008/fbml">
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php echo $page->title; ?></title>
<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/main.css" />
</head>


<body>
<div id="fullBackground">   
<div id="headerBackground">
</div> 
<div id="leftBackground">
</div>
<div id="contentBackground">
	<div class="contentHeader">
	</div>
	<div class="contentText">
		<div class="footerClass">
			<hr class="seperator">
			<div class="footerLeft">
				Copyright © 1996 - <?php echo date("Y"); ?>, 
<a href="<?php echo "{$config->urls->root}"; ?>">ZwedenWeb</a><br />
				Ontwerp: <a href="http://www.firmaq.nl/nl/pages/home.php" target="_blank">Firmaq Internet Solutions</a>
			</div>
			<div class="footerRight">
				<a href="<?php echo "{$config->urls->root}"; ?>adverteren.php" title="Adverteer op ZwedenWeb">Adverteer op ZwedenWeb</a><br />
				<a href="http://twitter.com/zwedenweb" title="Volg ZwedenWeb op Twitter" target="_blank">Twitter</a> | 
				<a href="<?php echo "{$config->urls->root}"; ?>/privacy.php" title="Privacy & cookies">Privacy & cookies</a> | 
				<a href="<?php echo "{$config->urls->root}"; ?>/sitemap.php" title="Sitemap">Sitemap</a>
			</div>
		</div>    
	</div>
</div>
<div id="rightBackground">
</div>
<div class="break"> </div>
</div>	
</body>
</html>

CSS

@import url(reset.css); 

body {
margin:0; 
padding:0; 
color: #000066;
background-color: #32738C;
text-align:center;
}

a:link {color: #000066; text-decoration: underline; }
a:active {color: #000066; text-decoration: underline; }
a:visited {color: #000066; text-decoration: underline; }
a:hover {color: #000066; text-decoration: none; } 

#fullBackground {
position: relative;
margin: 0 auto;
width: 985px;
text-align:left;
background-image:  url(images/main_background.gif);
background-repeat: repeat-y;	
}

#headerBackground {
position: absolute; 
left: 0px; 
top: 0px; 
width: 985px; 
height: 120px;
background-image:  url(images/header.gif);
background-repeat: no-repeat;
}

#leftBackground {
position: absolute; 
left: 0px; 
top: 120px; 
width: 190px; 
padding: 20px 25px 20px 5px;
background-image:  url(images/bar_left.gif);
background-repeat: no-repeat;
min-height: 700px;
}

#contentBackground {
    position: absolute; 
left: 190px; top: 120px; 
width: 600px; 
padding: 20px 0 0 20px;
background-image:  url(images/content_background.jpg);
background-repeat: no-repeat;
min-height: 900px;
}

#mainBackground {
background-color: #32738C;
}

#rightBackground {
    position: absolute; 
left: 790px; 
top: 120px; 
width: 195px; 
padding: 20px 5px 20px 20px;
background-image:  url(images/bar_right.gif);
background-repeat: no-repeat;
min-height: 500px;
}

#advertentie {
width: 160px; 
margin: auto;
display: block;
padding-right: 35px;
text-align: center;
}

.contentHeader {
width: 560px; 
}

.contentText {
width: 560px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000066;
}

.footerClass {
margin: 15px 0 15px 0;
width:560px;
font-size:10px
}

.footerLeft {
float:left;
width:350px;
text-align:center
}

.footerRight {
float:left;
width:210px;
text-align:right
}

post-2001-13261428163_thumb.jpg

Link to comment
Share on other sites
apeisa Hero Member

apeisa

Posted
Posted

Ah, your whole site is absolutely positioned, since you have set #contentBackground position: absolute;

And if you use absolute positioning, then the element is taken away from document flow. So it's parent height won't grow with it. You need to find a better way to handle your columns. Try starting with removing absolute positioning from #contentBackground.

Link to comment
Share on other sites
formmailer Sr. Member

formmailer

Posted
  • Author
Posted

Thanks Antti. So it's the absolute positioning that's doing this. I didn't do the current design, which dates back to 2006, myself and never realized that this could be a problem. What I don't understand is that it doesn't seem to cause problems on the original site (http://www.zwedenweb.com).

Anyway the PW version is on http://www2.zwedenweb.com.

I'll start working to get rid of the absolute positioning right away.

/Jasper

Link to comment
Share on other sites
apeisa Hero Member

apeisa

Posted
Posted

The problem is that you're positioning elements with "position:absolute". Don't do it! Just use "float". Because if you're using "position:absolute" it won't belong to the main box and won't scale it. Kind of the same for "position:relative".

Position: relative is just fine, and you most probably do want to use it, if you need to use absolute positioning later on. Absolute positioning is very handy, works well on older browsers too, but it is not good for whole layout. Very common scenario is to have something like:

HTML:
<div id="header">
<h1>Logo</h1>
<p id="slogan">This is on top right</p>
</div>

CSS:
#header {
  position: relative;
  width: 80%;
  height: 140px;
}
#slogan {
  position: absolute;
  top: 20px;
  right: 20px;
}

Jasper: I don't find any differences between old and new - I don't see any background images on neither, only that dark turquoise background.

Link to comment
Share on other sites
formmailer Sr. Member

formmailer

Posted
  • Author
Posted

Jasper: I don't find any differences between old and new - I don't see any background images on neither, only that dark turquoise background.

That's strange, there should be background images on both of them. It should look like the image I posted (and then all the way down, which works on www but not yet on www2).

If you don't see any background images at all, I would appreciate an screenshot because that means something is more wrong than I tought....

I changed all the absolute positioning to floats. But as you can see (http://www2.zwedenweb.com) it still isn't the way it should be:the body and fullBackground have some values, but not the 100% values I want. The strangest thing is that it isn't even 100% for one of the columns.

/Jasper

P.S. I am feeling quite dumb about asking these CSS questions, but some parts of CSS (the same goes for most jquery stuff as well, but that's an other history) are still a mistery for me. But I am learning and promise that I'll get better at it. :)

Link to comment
Share on other sites
Nico Knoll Hero Member

Nico Knoll

Posted
Posted

Change it like this and it should work fine:

#fullBackground {
margin: 0 auto;
width: 985px;
text-align: left;
background-image: url(images/main_background.gif);
background-repeat: repeat-y;
float: left;
position: relative;
left: 50%;
margin-left: -492px;
}
Link to comment
Share on other sites
apeisa Hero Member

apeisa

Posted
Posted

That's strange, there should be background images on both of them. It should look like the image I posted (and then all the way down, which works on www but not yet on www2).

If you don't see any background images at all, I would appreciate an screenshot because that means something is more wrong than I tought....

My bad, I thought that body should have some background, but it was about those two sidebars.

Glad you got it working, and great help Nico!

Link to comment
Share on other sites
Soma Hero Member

Soma

Posted
Posted

Change it like this and it should work fine:

#fullBackground {
margin: 0 auto;
width: 985px;
text-align: left;
background-image: url(images/main_background.gif);
background-repeat: repeat-y;
float: left;
position: relative;
left: 50%;
margin-left: -492px;
}

That's a strange fix for something done wrong from the beginning. Really, really dirty! :P

The "margin: 0 auto;" together with the "text-align:center" in the body actually does already center the element on page.

..
float: left;
position: relative;
left: 50%;
margin-left: -492px;

That does the same again using another technique , because it's "position:relative" it enables the "left: 50%", which does moves the left corner of that element in center of window. The margin-left: -492px" moves it to the left by a fixed amount, half the element width. Not something I would recommend but possible. If that fixes the problem it may because of the "float:left", which proves it's a pretty dirty thing and may not working across browsers/oder browsers and in the long run something you should try to avoid.

I recommend finding a simple solution to your background image problem, there's quite a lot going on and I'm sure there's a more simple solution, both in markup and css required. Since I can't see how it's meant to be I can't really tell, I would have to take a look more closer and analyze.

post-1337-132614281662_thumb.png

Link to comment
Share on other sites
formmailer Sr. Member

formmailer

Posted
  • Author
Posted

I recommend finding a simple solution to your background image problem, there's quite a lot going on and I'm sure there's a more simple solution, both in markup and css required. Since I can't see how it's meant to be I can't really tell, I would have to take a look more closer and analyze.

Hi Soma!

Thanks for your reply! I guess you are right. Instead of using the existing css and php/html source, it might be better to build the templates from scratch. The result code would be much cleaner code, without a 5 or 6 years old history, with many changes and probably some obsolete things.

I'll start working on this.

Thanks for your help everybody!

/Jasper

Link to comment
Share on other sites
apeisa Hero Member

apeisa

Posted
Posted

I don't think using negative margins is any more "dirtier" than anything else. It is a little bit harder to understand at first, but it does have a good browser support (even IE6 handles those). As we know there isn't any tools in css for layouts (not sure how the spec is coming at the moment though). We use just hacks. It used to be table hacks, now it is mostly floating div hacks.

Link to comment
Share on other sites
formmailer Sr. Member

formmailer

Posted
  • Author
Posted

Just wanted to let you guys know that I created both, the HTML and the CSS, from scratch and found that there was quite a lot that was wrong.

Many things were defined multiple times (eg. the same fonts were defined in parent, child and grandchild classes). So it was a great opportunity to clean things up and learn doing better CSS.

And best of all, I didn't have positioning/background problems. I didn't even need to use "strange hacks" I don't fully understand.  :P

/Jasper

Link to comment
Share on other sites
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...