CSS Forum

**Galaxian** · 09-28-2006, 12:11 PM

http://www.tagzor.com/new/

The new design UNDERCONSTRUCTION

I'm a total CSS noob and is my first time doing div's instead of tables.

Well I think I've messed up somewhere because it doesn't appear in my Internet Explorer browser.

Firefox seems fine though. I'm guessing it's some sort of margin or padding problemo. Help?

**jim.thornton** · 09-28-2006, 01:15 PM

First, you really should structure you code better so it is easier to read. I have attached an example.

Second, you were commenting out your stylesheet. Right after your <style> tag you have <!--. I took it out and it popped up in IE.

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tagzor</title>
<style type="text/css">
body {
	background-color: #000;
	font-size: 12px;
	font-family: Tahoma, Arial, Verdana;
}

#overall {
	width: 800px;
	background-color: #2f2f2f;
	margin-left: auto;
	margin-right: auto;
}

#top {
	width: 800px;
	height: 100px;
	background-image: url(images/topbgrad.gif);
	background-repeat: repeat-x;
}

#topleft{
	width: 100%;
}

#topright {
	background-image: url(images/topright.gif);
	background-repeat: no-repeat;
	background-position: right;
}

#nav {
	width: 100%;
	height: 20px;
	background-image: url(images/navgrad.gif);
	background-repeat: repeat-x;
	color: #fff;
	font-size: 9px;
	font-family: Tahoma, Arial, Verdana;
	border-top: 1px #000 solid;
	border-bottom: 1px #000 solid;
}

#msg {
	padding-top: 4px;
	width: 800px;
	position: absolute;
}

#mainwrap {
	margin: 20px;
	background-color: #fff;
}

#mainpart {
	background-color: #fff;
	width: 100%;
}

#topleft {
	background-image: url(images/topleft.gif);
	background-position: left;
	background-repeat: no-repeat;
	position: absolute;
	height: 10px;
}

#topright_main {
	background-image: url(images/topright_main.gif);
	background-position: right;
	background-repeat: no-repeat;
	height: 10px;
}

#bottomleft {
	background-image: url(images/bottomleft.gif);
	background-position: left;
	background-repeat: no-repeat;
	position: absolute;
	height: 10px;
	width: 100%;
}

#bottomright {
	background-image: url(images/bottomright.gif);
	background-position: right;
	background-repeat: no-repeat;
	height: 10px;
}

</style>

<script type="text/javascript">
<!--
function timerclearbox() {
setTimeout("document.chat.message.value = ''",500);
setTimeout("document.chat.action.enabled = false", 200);
}

function checkenter() {
if (document.chat.message.event.keycode == 13){
setTimeout("document.chat.message.value = ''",500);
document.chat.message.focus();
}
}
function checkForm(e) {
	if (e.keyCode == 13) {
setTimeout("document.chat.message.value = ''",500);
setTimeout("document.chat.action.enabled = false", 200);
setTimeout("document.chat.message.focus()",550);
	}
}
// -->
</script>
</head>

<body>
	<div id="overall">
		<div id="top">
			<div id="topright">
				<img src="images/logo.gif" width="251" height="100" />
			</div> <!-- closes topright -->
		</div> <!-- closes  top -->
	
		<div id="nav">
			<div id="msg">
				<marquee scrolldelay="0" scrollamount="2">News</marquee>
			</div> <!-- closes msg -->
		</div> <!-- closes nav -->
	
		<div id="mainwrap">
			<div id="topleft">
			</div> <!-- closes topleft -->
			<div id="topright_main">
			</div> <!-- closes topright -->
	
			<div id="mainpart">
				  <form name="chat" method="post" action="../chatw.php" target="chatw" style="padding: 0px; margin: 0px;">
					<table width="100%" align="center" cellspacing="0" cellpadding="0">
						<tr>
							<td width="29%" align="center" valign="middle">
								Display Name: <input name="tag" id="tag" type="text" style="border: 1px #000 solid; font-family: Verdana; padding-left: 4px; padding-right: 4px; font-size: 11px; background-color: #999999; color: #fff; text-align: center; background-image: url(images/inputbg.gif);" size="15" maxlength="50" value="" />
							</td>
	
							<td width="61%" align="center" valign="middle">
								Message: <input name="message" id="message" type="text" style="border: 1px #000 solid; padding-left: 4px; font-family: Verdana; font-size: 11px; background-color: #999999; color: #fff; background-image: url(images/inputbg.gif);" size="60" maxlength="500" onkeydown="checkForm(event);" />
							</td>
		
							<td width="10%" align="center" valign="middle">
								<input type="hidden" name="tagcolor" value="#000000" />
								<input type="hidden" name="messagecolor" value="#cccccc" />
								<input type="hidden" name="savetag" value="true" />
								<input type="image" src="images/tag_it.gif" width="60" height="25" value="Submit" alt="Submit" onmousedown="timerclearbox();" onmouseup="document.chat.message.focus();" />
							</td>
						</tr>
					</table>
				</form>
			</div> <!-- closes mainpart -->
	
			<div id="bottomleft">
			</div> <!-- closes bottomleft -->
			
			<div id="bottomright">
			</div> <!-- closes bottomright -->
		</div>  <!-- close mainwrap -->
	
		<div id="mainwrap">
			<div id="topleft">
			</div> <!-- closes topleft -->
			<div id="topright_main">
			</div>  <!-- closes topright_main -->
			
			<div id="mainpart">
				<div align="center">
					<iframe id="chatw" name="chatw" src="../chatw.php" width="757" height="500" frameborder="0"></iframe>
				</div>
			</div> <!-- closes mainpart -->
			
			<div id="bottomleft"></div>
			<div id="bottomright"></div>
		</div> <!-- closes mainwrap -->
		<img src="images/footer.gif" />
	</div> <!-- closes overall -->
</body>
</html>

**LadynRed** · 09-28-2006, 05:37 PM

You also need to understand that ID's must be UNIQUE, you cannot re-use them. If you need to reuse a set of rules, make them a class instead of an ID. Instead of #topright, it would be .topright (period denotes a class in your CSS).

**Galaxian** · 09-28-2006, 10:49 PM

Thanks everyone!

I've been using html tables for years so this may take some adjusting

**Galaxian** · 11:02 PM

Would there be any reason as to why in firefox it stretches the page and I notice in IE there is white space above the corners of about 3 pixels?

**Galaxian** · 09-29-2006, 12:20 PM

Solved!!

**jim.thornton** · 09-29-2006, 01:58 PM

What was causing the lines??

**Galaxian** · 09-30-2006, 02:49 AM

In IE, something was making the layer to stretch a few pixels in height. I had the rounded corners set to "left" and "right" so they weren't exactly at the top.

All I did was set it to

"top left"

"top right"

"bottom... etc

**jim.thornton** · 09-30-2006, 02:59 PM

Thanks for posting the solution.

**Galaxian** · 10-02-2006, 10:38 AM

I still have the problem of it giving extra space and stretching the page in Firefox though.

**LadynRed** · 10-02-2006, 12:23 PM

I'm afraid I don't see any problem, it looks fine in FF. If you are trying to make it pixel-perfect in all browsers, for get it, it's just not going to happen. Don't give yourself heartburn over 3px !

**Galaxian** · 10-03-2006, 07:07 AM

http://img242.imageshack.us/my.php?i...gmarginhy3.gif

**jim.thornton** · 10-03-2006, 12:21 PM

You can temporarily fix that buy adding overflow-x:hidden to your body.

Then, I would go into each div that you have and one at a time change the color of the background and see which DIV is causing it to expand, then make the necessary adjustments.

**kIDJOE** · 10-03-2006, 10:33 PM

its comming along pretty well