Need help - Unknown problem

**Skitso** · Oct 25, 2003 19:48

Hello,
This would be my second topic posted here, and would be my second all CSS layout attempted.

I've created an all CSS layout that uses no images...but it does use some unsure fonts. Most do have Arial Narrow / Arial Black but there will be some that don't. I know who my visitors are and I think they will have no problem with the font

Anyhow, I created the "header area"...everything shows great in IE, but once again I get shafted with mozilla.

I need help, I have no idea what is messing up my layout and believe my I have tried alot of ways to fix it.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>SKITSO | NET - CSS Test #2</title>
<style>
.constraint {
	width: 680px;
}

div {
	font-family: "Verdana";
	font-size: 11px;
	color: #333;
}

.header {
	border-right: 5px #000 Solid;
	width: 300px;
	float: left;
	margin: 0px 5px 0px 0px;
}

.header2 {
	float: right;
	width: 368px;
	background: #fafafa;
	border-top: 1px #f9f9f9 solid;
	border-right: 1px #bbbbbb solid;
	border-bottom: 1px #bbbbbb solid;
	border-left: 1px #f9f9f9 solid;
}

.title { 
	font-family: "Arial Black";
	font-size: 38px;
	text-transform: uppercase;
	margin: 0px 0px -12px 0px;
	display: block;
}

.moto { 
	font-family: "Arial Narrow";
	font-size: 22px;
	font-style: italic;
	margin: 0px 0px 0px 0px;
	color: #555;
	display: block;
}

.keywords {
	font-family: "Verdana";
	font-size: 10px;
	margin: 0px 0px 0px 0px;
	color: #888;
	line-height: 11px;
	text-align: justify;
	padding: 2px;
	display: block;
}

.slogan {
	font-family: "Arial Narrow";
	font-size: 22px;
	margin: 0px 0px 2px 0px;
	color: #F43FAF;
	font-style: italic;
	float: right;
}

.break {
	clear: both;
	height: 0px;
}

.welcome {
	margin: 0px 0px 5px 0px;
	border-top: 5px #000 solid;
}

.headerc {
	width: 100%;
	margin: 0px 0px 5px 0px;
}
</style>
</head>
<body>
<div class="constraint">
<div class="headerc">
	<div class="header"> 
		<span class="title">
			Skitso
		</span>
		<span class="moto">
			HQ Celebrity &amp; Supermodel Pictures
		</span>
	</div>
	<div class="header2">
		<span class="keywords">
			Skitso provides <acronym title="High Quality">HQ</acronym> Celebrity and Supermodel Images.
			Most pictures are scanned from the world's top fashion magazines and men's lifestyle periodicals
			such as Maxim, FHM, GQ,Razor, and Stuff.
		</span>
	</div>
</div>

<div class="welcome">
	This div right here is the problem. Can you help me? If you open this code up on IE, it displays FINE. In Mozilla 
	is screws up! Why does Mozilla keep screwing me up? There this is enough text to show you my problem.
</div>
</div>
</body>
</html>

**devised** · Oct 25, 2003 20:59

Add "clear: both;" to the div like this:

Code:

.welcome {
	margin: 0px 0px 5px 0px;
	border-top: 5px #000 solid;
	clear: both;
}

**Skitso** · Oct 25, 2003 21:26

Now the margins don't work.

**devised** · Oct 25, 2003 22:35

Are you speaking of the margin right above the thick horizontal border that splits it from the thick vertical line? If so, then that can be fixed by adding a 5px bottom margin to the following div like this:

Code:

.header {
	border-right: 5px #000 Solid;
	width: 300px;
	float: left;
	margin: 0px 5px 5px 0px;
}

**Skitso** · Oct 26, 2003 19:21

Thanks soo much! Wow, this is great. I thought all hope was lost and started another version that uses tables to house the divs, lol.

That just sorta made my day

Could someone explain the clear: both; reasoning? I've used it before in previous layout simply because it was probably in the free base css layout I used. Now that I've learned a good bit, I just kinda start with an idea and have no need to use anyone else's layouts...so if someone could enlighten me I'd be happy.

**devised** · Oct 27, 2003 09:12

clear: both; puts the div below any elements that are floating beside it.

User Tag List

Thread: Need help - Unknown problem

Thread Tools

Display

Need help - Unknown problem

Bookmarks

Bookmarks

Posting Permissions