Jump to content


CSS Problem...

Started by Dh., Dec 21 2005 07:24 AM

3 replies to this topic

#1 Dh.

    CSS Guru

  • Members
  • PipPipPip
  • 807 posts
  • Gender:Male
  • Location:Berkshire, England

Posted 21 December 2005 - 07:24 AM

I've just finished turning my HTML site into completely CSS and I've got one problem. Here's the page http://www.xlsite.com/dh89/index.html, underneath the banner logo there is a small 2px gap.
Now I know there's no padding or margins there, so if you could have a look at my code I would be very grateful.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>dh89</title>
<style type="text/css">

body {
	font-family: "Verdana", "Tahoma", "Arial", "Times New Roman"; 
	font-size: 8pt; 
	color: #46597b;
	background-color: #ffffff;
	background-image: url(images/bg.gif);
	background-repeat: no-repeat;
	background-attachment: fixed container;
		background-position: center top;
}

#container {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	width: 380px;
	height: 458px;
	border: 5px solid #485868;
}

#top {
	border-bottom: 6px solid #485868;
	padding-top: 0px;
	padding-bottom: 0px
	image: url(images/top.jpg)
	width: 380px;
	height: 137px;
}

#nav {
	width: 380px;
	border-bottom: 0px solid #485868;
	padding-top: 2px;
	padding-bottom: 10px;
}


#left {
	float: left;
	width: 250px;
	padding-top: 5px;
	padding-left: 5px;
	padding-bottom: 5px;
}

#right {
	float: right;
	width: 250px;
	padding-top: 5px;
}

.rhead {
	width: 243px;
	border: 5px solid #485868;
	padding-left: 2px;
	padding-bottom: 0px;
}

.rcontent {
	width: 243px;
	border-left: 1px solid #485868;
	border-right: 1px solid #485868;
	border-bottom: 1px solid #485868;
	margin-bottom: 5px;
	padding-left: 2px;
}

.lhead {
	width: 300px;
	border: 1px solid #FFFFFF;
	padding-left: 2px;
	font-size: 9px;
	font-family: verdana;
	text-decoration: underline;
}

.lcontent {
	width: 300px;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	margin-bottom: 5px;
	padding-left: 2px;
}

.link {
	width: 50px;
	text-align: center;
	margin-right: 5px;
	padding-left: 10px;
	padding-right: 10px;
	color: #d1e6ff;
}

.link1 {
	width: 50px;
	text-align: center;
	margin-right: 5px;
	padding-left: 29px;
	padding-right: 10px;
	color: #d1e6ff;
}

a {
	color: #485868;
	text-decoration: none;
}

a:hover {
	color: #485868;
	text-decoration: underline;
}
</style>
</head>
<body>

<div id="container">

	<div id="top">
		<img src="images/top.gif" width="380" height="137">
	</div>

	<div id="bar"> </div>

	<div id="nav">
		<a href="index.html" class="link1">Home</a> 
		<a href="portfolio.html" class="link">Portfolio</a> 
		<a href="services.html" class="link">Services</a> 
		<a href="contact.html" class="link">Contact</a> 
		<a href="links.html" class="link">Links</a> 
	</div> 

	<div id="left">

		<div class="lhead">
		Info.
		</div>
		<div class="lcontent">
		Dh89 Designs.<br>
		Welcome to my online portfolio.
		</div>
	
	</div>

</div>

</body>
</html>
Cheers

#2 Stu

    Retired P2L Staff

  • Publishing Betazoids
  • PipPipPipPip
  • 1,761 posts
  • Gender:Male

Posted 21 December 2005 - 09:14 AM

Quote

Error:

File not Found

please fix your link/site or this will be removed.

this works for me though : http://www.xlsite.com/dh89/ ... wierd is that :-s

#3 syndrome

    P2L patient #4819

  • Twodded Staff
  • PipPipPipPip
  • 1,311 posts
  • Location:Nottingham, UK
  • Interests:Photoshop, Tennis, PS2, web design, CS:S

Posted 21 December 2005 - 11:04 AM

You have two divs that have the id "bar". You havent assigned any properties to "bar", I think that is the reason for the plain white line. Btw you can't use the same ID in the same document it isn't XHTML valid.

EDIT: my mistake i mean "bar"

Edited by syndrome, 21 December 2005 - 12:03 PM.

#4 coolaid

    P2L Jedi Master

  • Members
  • PipPipPipPip
  • 1,435 posts
  • Gender:Male
  • Interests:i wonder..

Posted 21 December 2005 - 02:22 PM

image:

isn't a property....
....
i just realized how you coded your site... and not to be mean.. its aweful.

you shouldl learn to slice and use background images.


and i found the problem too.
<div id="top">
		<img src="http://www.xlsite.com/dh89/images/top.gif" width="380" height="137">
		
	</div>

change to:
<div id="top">
		<img src="http://www.xlsite.com/dh89/images/top.gif" width="380" height="137"></div>

Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design