Page 1 of 1

CSS content overrunning and other basics

Posted: Sun Nov 05, 2006 7:24 pm
by Stryks
Ok, I admit it ... I'm a CSS noob.

As per my previous post on boxes etc, I created a mini layout to get a feel for how CSS was going to let me position things, but I ran into a few problems when it came to doing content further down the page.

Take a look here to see what I mean.

I'm pretty much just trying to make a footer bar inside the #content area and it just gets pulled up in the same way as the text.

Should I be using a different way to lay this out, or am I missing something else?

Cheers

Posted: Sun Nov 05, 2006 7:38 pm
by neophyte
This gave me a footer across the bottom.

Hope it works for you.

Code: Select all

#footer{
clear: both;
}

Code: Select all

<div id="navigation">
		<div class="dialog">
			<div class="hd"><div class="c"></div></div>
			<div class="body">
				<h1>Content</h1>
				The bulk of the text is to go here, kind like this but not entirely, in that the content wont be pure drivel (I hope).
			
			</div>
			<div class="ft"><div class="c"></div></div>
		</div>  
	</div>
	<div id="footer">Damn damn damn damn</div>
</div>

Posted: Tue Nov 07, 2006 5:37 pm
by Stryks
Cool ... thanks for that.

I knew it would be something ... but I'm still having trouble finding things.

My problem now relates to <p> tags.

As you can see HERE if the content ends with a <p> tag, a gap is created at the bottom of the content but above the footer of the bar. I've tried messing around with the overflow property, but it only fixes it in forefox - where it also clips the top off my heading.

I'm thinking I might be able to adjust the style on <p> but I am not sure what the normal settings are. I keep winding up with double spacings or the occasional run-on.

Any help would be great. Oh ... and why cant I set a top margin on the footer to put a space above it? It just ignores whatever setting I use.

Thanks

EDIT: In case you cant see it on the link, its the leftmost box at the bottom. There's a small break in the border.

Posted: Tue Nov 07, 2006 6:43 pm
by nickvd
p {margin:0;}

Posted: Tue Nov 07, 2006 7:12 pm
by Stryks
p {margin:0;}
Thanks for the suggestion. When I noticed the problem, that was one of the first things I tried. However, that fixes the problem but also removes the formatting applied by the standard <p> style.

I guess what I am thinking of is more replacing the margin with padding. Thats what I've been attempting anyhow, but I can seem to match the original tag. It seems to almost be conditional on having another paragraph above it.

Maybe by doing this though I can get closer to having IE render a <p> the same as firefox does.

Posted: Wed Nov 08, 2006 5:39 am
by Stryks
Well .... After a fair bit of looking and testing and crying, I've found I can replicate a <p> tag with the following:

Code: Select all

p {
	display: block;
	margin: 1em 0;
	text-align: left;
}
It evens up the way the browsers render the tag, so Firefox and IE are pretty much the same. It also replicates the behavior which adds the gap to my page.

For the time being, the best alternative I can come up with is:

Code: Select all

p {
	margin: 0;
	padding-bottom: 15px;
}
I'm not convinced it is the best solution, but it is thus far giving the best results.

I'd love to try out any other suggestions anyone has, so if you have a tip, please let me know.

Cheers

Posted: Wed Nov 08, 2006 9:16 am
by matthijs
What you are dealing with is indeed the margins of the <p>. Those push the boxes below down. In cases like these (boxes with rounded corner background images etc), use padding instead of margin. Or give the box that has the background-image the appropriate padding.

Code: Select all

.somebox {
 background: url(bg.gif) bottom left no-repeat;
 padding-bottom:10px;
}
.somebox p {margin-bottom:0;}
Another, and in my opinion better solution is the one I showed here. With single, larger background-images that fill up all the space behind the box. That way, no matter what the content or how large, you don't have the problem of gaps. Even when people increase the font-size of their browser.

That's the so-called "bullet-proof" way of doing things.