CSS / HTML problem!

zenonflare · #1 (**permalink**) 08-17-05, 05:44 PM

Hey guys, well, I've got the following code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>HumorSiteScript v. 1.0</title>
<style type="text/css">
<!--

a:link { 
	color: #ededed;
	font-family: verdana, Geneva, Arial, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-decoration: none;
	}

a:visited { 
	color: #ededed;
	font-family: verdana, Geneva, Arial, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-decoration: none;
	}

a:hover { 
	color: #fff;
	font-family: verdana, Geneva, Arial, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-decoration: none;
	}

a:active { 
	color: #ededed;
	font-family: verdana, Geneva, Arial, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-decoration: none;
	}

body {
	background-image: 
	url('images/background.gif');
	background-repeat: repeat-x;
	background-color: #f2f2f2;
	color: #678;
	font-family: Verdana, Geneva, Arial, sans-serif;
	font-size: 10px;
	margin: 0px;
}

input, select, textarea {
	border: solid 1px #7e7e7e;
	background-color: #ffffff;
	color: #002a77;
	padding: 2px;
	font-face: verdana;
	font-size: 8pt;
	font-weight: bold;
}

#mainbody {
	width: 778px;
	background-color: #fff;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	height: 100%;
}


#license_text {
	color: #8396a4;
	padding-top: 5px;
	float: left;
	width: 20%;
	height: 62px;
	position: relative;
	background-image: url(images/header_bg.gif);
}

#logo {
	float: left;
	height: 67px;
	background-image: url(images/header_bg.gif);
	width: 80%;
}

#navbar {
	clear: left;
	background-image: url(images/nav_bg.gif);
	height: 19px;
	position: relative;
	padding-left: 10px;
	width: 768px;
}

#fix	{
	background-image: url(images/header_bg.gif);
	height: 67px;
}

#nav_dividers {
	color: #ededed;
	font-family: verdana, Geneva, Arial, sans-serif;
	font-size: 10px;
	font-weight: bold;
}

#content_area {
	background-color: #fff;
	border-left: solid 2px #ebebeb;
	border-right: solid 2px #ebebeb;
	
}

#main_box {
	background-color: #e6e9ec;
	position: relative;
	width: 748px;
	margin-left: auto;
	margin-right: auto;
	border-top: solid 3px #a2a3a6;
	border-bottom: solid 3px #a2a3a6;
	height: 720px;
	padding: 7px;
}

.title_box {
	background-color: #d8dadd;
	font-weight: bold;
	border-top: solid 3px #a2a3a6;
	border-bottom: solid 3px #a2a3a6;
	padding: 5px;
	color: #8396a4;

}
.content {
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 10px;

}






	
#footer {
	font-weight: bold;
	text-align: center;
	background-color: #fff;
	padding: 5px;
	border-left: solid 2px #ebebeb;
	border-right: solid 2px #ebebeb;
}
-->
</style>
</head>
<body>
<div id="borders">
<div id="mainbody">
		<div id="fix">
			<div id="logo">
				<img src="images/logo.gif" alt="" />
			</div>
			<div id="license_text">
				Version 1.0 Stable Release<br />
				Licensed to: Mike Rowland<br />
				http://www.humorscript.net
			</div>
			<div id="navbar">
				<span id="nav_dividers"><a href="#">Home</a> | <a href="#">Support Forums</a> | <a href="#">License</a> | <a href="#">Help</a> | 
				<a href="#" style="color: #bfbfbf">View Your Site</a> </span>
			</div>
			<div id="content_area">
				<br/>
				<div id="main_box">
					<div class="title_box">
					<a href="#" style="color: #8396a4">Add A New Category</a>
					</div>
					<br />
					<div class="content">
					Category Name: <input type="text" name="name"> <input type="submit">
					</div>
					<div class="title_box">
					<a href="#" style="color: #8396a4">Add A New Category</a>
					</div>
					<br />
					<div class="content">
					Category Name: <input type="text" name="name"> <input type="submit">
					</div>
					
				</div>
			</div>
			<div id="footer">
			Copyright 2005, humorscript.net all rights reserved. Licensed only to Mike Rowland.
			</div>
		</div>
		
		
		
</div>
</div>
</body>
</html>

http://www.humorscript.net/developem...ing/index.html

It's my first site I'm trying to code in divs.

It's nearly done now, as you can see the problem (look in internet explorer) is it messes up the nav bar a bit?

Thanks.

zenonflare · #2 (**permalink**) 08-18-05, 05:45 AM

Fixed it.