Problem with CSS (I don't know what else to say...)

beemaster Peon

Messages:: 103

Likes Received:: 2

Best Answers:: 0

Trophy Points:: 0

#1

I am having a problem with my website. I think the easiest thing to do is to show you what is wrong!

If you go to CanineYouth.com you will see the list of dog breeds down on the right. Well, that is all supposed to be inside of the white background. The problem it is having is that those links are queried from the database. If I hard-code them in there then it displays just fine.

I will put the code down below:

/* standard elements */
* {
	margin: 0;
	padding: 0;
}

a {
	color: #36C;
}

a:hover {
	color: #06F;
}

body {
	background: #C0D9D9;
	color: #444;
	font: normal 62.5% "Lucida Sans Unicode",sans-serif;
	margin: 0;
}

input {
	color: #555;
	font: normal 1.1em "Lucida Sans Unicode",sans-serif;
}

p,cite,code,ul {
	font-size: 1.2em;
	padding-bottom: 1.2em;
}

h1 {
	font-size: 1.4em;
	margin-bottom: 4px;
}

code {
	border: 1px solid #F0F0F0;
	border-left: 6px solid #39F;
	color: #555;
	display: block;
	font: normal 1.1em "Lucida Sans Unicode",serif;
	margin-bottom: 12px;
	padding: 8px 10px;
	white-space: pre;
}

cite {
	color: #666;
	display: block;
	font: normal 1.3em "Lucida Sans Unicode",serif;
	padding-left: 28px;
}

h1,h2,h3 {
	color: #367EA6;
	padding-top: 6px;
}

/* misc */
.clearer {
	clear: both;
}

/* structure */
.container {
	margin: 0 auto;
	padding-bottom: 6px;
	width: 800px;
}
.header {
	background: #668B8B;
}

/* title */
.title h1 {
	background-color: #668B8B;
	color: #FFF;
	font: normal 3em Verdana,sans-serif;
	height: 150px;
	line-height: 150px;
	margin-bottom: 8px;
	text-align: center;
}

/* navigation */
.navigation {
	margin-bottom: 4px;
}
.navigation a {
	background-color: #4A91C3;
	color: #FFF;
	float: left;
	font: bold 1.2em "Trebuchet MS",sans-serif;
	padding: 8px 0;
	width: 19%;
	border-right: 1px solid #FFF;
	text-align: center;
	text-decoration: none;
}
.navigation a:hover {
	background-color: #000;
	color: #FFF;
}

/* main */
.main {
	clear: both;
	padding: 8px 18px;
}

/* main left */
.sidenav h1,.sidenav ul {
	padding-left: 12px;
}
.sidenav {
	background: #E8E8E8;
	border: 1px solid #E5E5E5;
	float: left;
	width: 200px;
}
.sidenav h1 {
	color: #666;
	font-size: 1.2em;
	height: 20px;
	margin-top: 1.2em;
}
.sidenav ul {
	border-top: 1px solid #FAFAFA;
	margin: 0;
	padding: 0;
}
.sidenav li {
	border: 1px solid #FAFAFA;
	border-top: none;
	list-style: none;
	margin: 0;
}
.sidenav li a {
	color: #777;
	display: block;
	font-size: 0.9em;
	padding: 3px 6px 3px 14px;
	text-decoration: none;
}
.sidenav li a:hover {
	color: #111;
}

/* content */
.content {
	float: right;
	width: 553px;
}
.content .item {
	padding: 6px 12px;
	border: 1px solid #EEE;
	background: #FFF;
	margin-bottom: 8px;
}
.content .descr {
	color: #333;
	margin-bottom: 6px;
}
.content li {
	margin-left: 18px;
}

/* search form */
form {
	padding: 0 0 6px 8px;
}
.styled {
	border: 1px solid #DDD;
	padding: 4px;
}
.button {
	border: none;
	height: 27px;
	width: 27px;
}

/* footer */
.footer {
	background: #FFF;
	border: 1px solid #EEE;
	color: #666;
	font-size: 1.1em;
	margin: 0 auto;
	text-align: center;
	padding: 6px;
	width: 750px;
}
.footer a {
	color: #36C;
	text-decoration: none;
}
.footer a:hover {
	color: #06F;
	text-decoration: underline;
}

.leftlist {
	float: left;
	width: 49%;
	padding: 0;
	margin: 0;
}

.rightlist {
	float: right;
	width: 49%;
	padding: 0;
	margin: 0;
}

Code (markup):

I am so new with CSS that I don't even know exactly how much I would need to give you guys.

And here is the HTML:

<div class="item">
	
	<div class="rightlist">
		
		<h1>Breeds list</h1>
		
		<p>
		{foreach key=key item=row from=$breedArray}
			
			<a href="http://www.{$config.domain}/breeds/viewBreed.php?breedId={$row.breedId}">{$row.name}</a><br />
			
		{foreachelse}
			
			No items were found in the search.
			
		{/foreach}
		<br />
		<a href="http://www.{$config.domain}/breeds/">More breeds...</a>
		</p>
		
	</div>
	
	<div id="leftlist">
		
		<h1>Recent Posts</h1>
		
	</div>
	
</div>

Code (markup):

Thanks for the help guys!

P.S. If you click on the breeds link you will see that it has the same problem...

beemaster, Sep 20, 2007 IP

simonpeterong Peon

Messages:: 62

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#2

give us the complete HTML so that we can point out where did the problem started

simonpeterong, Sep 20, 2007 IP

beemaster Peon

Messages:: 103

Likes Received:: 2

Best Answers:: 0

Trophy Points:: 0

#3

Okay. Here is the full HTML...

<body>

<div class="container">
	
	<div class="main">
		
		<div class="header">
			
			<div class="title">
				<h1>CanineYouth.com</h1>
			</div>
			
		</div>
		
		<div class="content">
			
			<div class="item">
	
	<h1>CanineYouth.com</h1>
	
	<p>Hello and welcome to {$config.domainCaps}! The new community for young dog owners, trainers and lovers.</p>
	
	<p>There are numerous resources available to you including <a href="http://www.{$config.domain}/articles/">articles</a>, lists of <a href="http://www.{$config.domain}/shelters/">dog shelters</a> and <a href="http://www.{$config.domain}/breeds/">dog breeds</a>, and our growning <a href="http://www.{$config.domain}/forum/">online forum</a>.</p>
	
	<p>We are trying to create/obtain a database of dog breeders throughout the United States. If you are a <b>quality</b> breeder, we would love to get your information <a href="http://www.{$config.domain}/breeders/">here</a> so we can feature you on our site.</p>
	
	<p>If there is any feature/resource you would like to see on this website, please feel free to contact us so we can look into adding it to our website.</p>
	
	<p>- <i>{$config.domainCaps}</i></p>
	
</div>

<div class="item">
	
	<div class="rightlist">
		
		<h1>Breeds list</h1>
		
		<p>
		{foreach key=key item=row from=$breedArray}
			
			<a href="http://www.{$config.domain}/breeds/viewBreed.php?breedId={$row.breedId}">{$row.name}</a><br />
			
		{foreachelse}
			
			No items were found in the search.
			
		{/foreach}
		<br />
		<a href="http://www.{$config.domain}/breeds/">More breeds...</a>
		</p>
		
	</div>
	
	<div id="leftlist">
		
		<h1>Recent Posts</h1>
		
	</div>
	
</div>
			
		</div>
		
		<div class="sidenav">
			
			<h1>Main Navigation</h1>
			<ul>
				<li><a href="http://www.{$config.domain}/">> Home Page</a></li>
				<li><a href="http://www.{$config.domain}/forum/">> Message Board</a></li>
				<li><a href="http://www.{$config.domain}/shelters/">> Dog Shelters</a></li>
				<li><a href="http://www.{$config.domain}/articles/">> Articles</a></li>
				<li><a href="http://www.{$config.domain}/breeds/">> Breeds</a></li>
				<li><a href="http://www.{$config.domain}/breeders/">> Breeders</a></li>
				<li><a href="http://www.{$config.domain}/links/">> Links</a></li>
				<li><a href="http://www.{$config.domain}/contact/">> Contact Us</a></li>
			</ul>
			
			<h1>Message Board</h1>
				
				<ul>
					<li><a href="http://www.{$config.domain}/forum/viewforum.php?f=1">> General Canine Discussion</a></li>
					<li><a href="http://www.{$config.domain}/forum/viewforum.php?f=2">> Puppy Questions</a></li>
					<li><a href="http://www.{$config.domain}/forum/viewforum.php?f=3">> Canine Pictures</a></li>
					<li><a href="http://www.{$config.domain}/forum/viewforum.php?f=4">> Obedience Training</a></li>
					<li><a href="http://www.{$config.domain}/forum/viewforum.php?f=5">> Agility Training</a></li>
					<li><a href="http://www.{$config.domain}/forum/viewforum.php?f=17">> Conformation Training</a></li>
					<li><a href="http://www.{$config.domain}/forum/viewforum.php?f=7">> Obedience Competition</a></li>
					<li><a href="http://www.{$config.domain}/forum/viewforum.php?f=8">> Agility Competition</a></li>
					<li><a href="http://www.{$config.domain}/forum/viewforum.php?f=9">> Canine Good Citizen</a></li>
					<li><a href="http://www.{$config.domain}/forum/viewforum.php?f=18">> Conformation Competition</a></li>
					<li><a href="http://www.{$config.domain}/forum/viewforum.php?f=10">> Breeders Index</a></li>
					<li><a href="http://www.{$config.domain}/forum/viewforum.php?f=11">> General Breeding</a></li>
					<li><a href="http://www.{$config.domain}/forum/viewforum.php?f=12">> Puppy Nutrition</a></li>
					<li><a href="http://www.{$config.domain}/forum/viewforum.php?f=13">> General Nutrition</a></li>
					<li><a href="http://www.{$config.domain}/forum/viewforum.php?f=14">> Other Pets</a></li>
					<li><a href="http://www.{$config.domain}/forum/viewforum.php?f=15">> Off Topic</a></li>
					<li><a href="http://www.{$config.domain}/forum/viewforum.php?f=16">> Suggestions/Feedback</a></li>
				</ul>
			
			<h1>Search</h1>
			<form action="index.html">
			<div>
				<input type="text" name="search" class="styled" /> <input type="submit" value="" src="http://www.{$config.domain}/img/search.gif" class="button" />
			</div>
			</form>
			
		</div>
		
		<div class="clearer"><span></span></div>
		
	</div>
	
	<div class="footer">&copy; 2007 <a href="index.html">CanineYouth.com</a>. Template design by <a href="http://templates.arcsin.se">Arcsin</a>
	</div>
	
</div>

</body>

Code (markup):

beemaster, Sep 20, 2007 IP

simonpeterong Peon

Messages:: 62

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#4

I viewed your HTML, and made some changes if you don't mind


body {
background: #C0D9D9;
color: #444;
font: normal 62.5% "Lucida Sans Unicode",sans-serif;
margin: 0;
padding: 0;
}

.container {
width: 800px;
margin: 0 auto;
padding: 0;
}

.header {
background-color: #66bb8b;
width: 100%;
margin: 0;
padding: 0;
}

.title h1 {
background-color: #668B8B;
color: #FFF;
font: normal 3em Verdana,sans-serif;
height: 150px;
line-height: 150px;
margin-bottom: 8px;
text-align: center;
}

.main {
width: 100%;
margin: 0;
padding: 0;
}

.sidenav {
width: 200px;
margin: 0;
padding: 2px;
float: left;
}

.content {
float: right; 
width: 530px;
margin: 0;
padding: 0;
}

.item {
float: left;
width: 525px;
background-color: #ffffff;
margin-bottom: 1em;
padding: 3px;
}

.leftlist {
float: left;
width: 48%;
margin: 0;
padding: 0;
}

.rightlist {
float: right; 
margin: 0;
padding: 0;
width: 48%;
}

.footer {
clear: both;
margin: 0;
padding: 0;
}

Code (markup):

I only made the basic layout only for you to see if this is how you want it to look like, the rest is up to you to add your design



<div class="container">

	<div class="header">
	
		<div class="title">
		
		<h1>CanineYouth.com</h1>
		
		</div>
	
	</div>

	<div class="main">
	
		<div class="sidenav">
		
		<h1>Main Navigation</h1>
			
			<ul>
				<li><a href="http://www.canineyouth.com/">> Home Page</a></li>
				<li><a href="http://www.canineyouth.com/forum/">> Message Board</a></li>
				<li><a href="http://www.canineyouth.com/shelters/">> Dog Shelters</a></li>
				<li><a href="http://www.canineyouth.com/articles/">> Articles</a></li>
				<li><a href="http://www.canineyouth.com/breeds/">> Breeds</a></li>
				<li><a href="http://www.canineyouth.com/breeders/">> Breeders</a></li>
				<li><a href="http://www.canineyouth.com/links/">> Links</a></li>
				<li><a href="http://www.canineyouth.com/contact/">> Contact Us</a></li>
			</ul>

			<h1>Message Board</h1>
			
			<ul>
				<li><a href="http://www.canineyouth.com/forum/viewforum.php?f=1">> General Canine Discussion</a></li>
				<li><a href="http://www.canineyouth.com/forum/viewforum.php?f=2">> Puppy Questions</a></li>
				<li><a href="http://www.canineyouth.com/forum/viewforum.php?f=3">> Canine Pictures</a></li>
				<li><a href="http://www.canineyouth.com/forum/viewforum.php?f=4">> Obedience Training</a></li>
				<li><a href="http://www.canineyouth.com/forum/viewforum.php?f=5">> Agility Training</a></li>
				<li><a href="http://www.canineyouth.com/forum/viewforum.php?f=17">> Conformation Training</a></li>
				<li><a href="http://www.canineyouth.com/forum/viewforum.php?f=7">> Obedience Competition</a></li>
				<li><a href="http://www.canineyouth.com/forum/viewforum.php?f=8">> Agility Competition</a></li>
				<li><a href="http://www.canineyouth.com/forum/viewforum.php?f=9">> Canine Good Citizen</a></li>
				<li><a href="http://www.canineyouth.com/forum/viewforum.php?f=18">> Conformation Competition</a></li>
				<li><a href="http://www.canineyouth.com/forum/viewforum.php?f=10">> Breeders Index</a></li>
				<li><a href="http://www.canineyouth.com/forum/viewforum.php?f=11">> General Breeding</a></li>
				<li><a href="http://www.canineyouth.com/forum/viewforum.php?f=12">> Puppy Nutrition</a></li>
				<li><a href="http://www.canineyouth.com/forum/viewforum.php?f=13">> General Nutrition</a></li>
				<li><a href="http://www.canineyouth.com/forum/viewforum.php?f=14">> Other Pets</a></li>
				<li><a href="http://www.canineyouth.com/forum/viewforum.php?f=15">> Off Topic</a></li>
				<li><a href="http://www.canineyouth.com/forum/viewforum.php?f=16">> Suggestions/Feedback</a></li>
			</ul>
			
			<h1>Search</h1>
			<form action="index.html">
				<div>
					<input type="text" name="search" class="styled" /> <input type="submit" value="" src="http://www.canineyouth.com/img/search.gif" class="button" />
				</div>
			</form>				
		
		</div>
	
		<div class="content">
		
			<div class="item">
			
				<h1>CanineYouth.com</h1>
				
				
				<p>Hello and welcome to CanineYouth.com! The new community for young dog owners, trainers and lovers.</p>
				
				<p>There are numerous resources available to you including <a href="http://www.canineyouth.com/articles/">articles</a>, lists of <a href="http://www.canineyouth.com/shelters/">dog shelters</a> and <a href="http://www.canineyouth.com/breeds/">dog breeds</a>, and our growning <a href="http://www.canineyouth.com/forum/">online forum</a>.</p>
				
				<p>We are trying to create/obtain a database of dog breeders throughout the United States. If you are a <b>quality</b> breeder, we would love to get your information <a href="http://www.canineyouth.com/breeders/">here</a> so we can feature you on our site.</p>
				
				
				<p>If there is any feature/resource you would like to see on this website, please feel free to contact us so we can look into adding it to our website.</p>
				
				<p>- <i>CanineYouth.com</i></p>			
			
			</div>
		
			<div class="item">
			
				<div class="leftlist">
				
					<h1>Recent Posts</h1>
				
				</div>
			
				<div class="rightlist">
				
					<h1>Breeds list</h1>
					
						<p>
						<a href="http://www.canineyouth.com/breeds/viewBreed.php?breedId=1">Affenpinscher</a><br />
						<a href="http://www.canineyouth.com/breeds/viewBreed.php?breedId=2">Afghan Hound</a><br />
						<a href="http://www.canineyouth.com/breeds/viewBreed.php?breedId=3">Airedale Terrier</a><br />
						<a href="http://www.canineyouth.com/breeds/viewBreed.php?breedId=4">Akita</a><br />
						<a href="http://www.canineyouth.com/breeds/viewBreed.php?breedId=5">Alapaha Blue Blood Bulldog</a><br />
						<a href="http://www.canineyouth.com/breeds/viewBreed.php?breedId=6">Alaskan Malamute</a><br />
						<a href="http://www.canineyouth.com/breeds/viewBreed.php?breedId=29">Bluetick Coonhound</a><br />
						<a href="http://www.canineyouth.com/breeds/viewBreed.php?breedId=30">Border Collie</a><br />
						<br /><a href="http://www.canineyouth.com/breeds/">More breeds...</a>
						</p>				
				
				</div>			
			
			</div>					
		
		</div>
		
	</div>

	<div class="footer">
	
			&copy; 2007 <a href="index.html">CanineYouth.com</a>. Template design by <a href="http://templates.arcsin.se">Arcsin</a>
	
	</div>

</div>

HTML:

copy and paste it, then view it on your browser, i hope its what you're looking for...

simonpeterong, Sep 20, 2007 IP

Blame Me Guest

Messages:: 162

Likes Received:: 9

Best Answers:: 0

Trophy Points:: 0

#5

I think from looking at your css file you are missing a a class.item tag so I have added this and it worked in Firefox. Play around with it until your are happy.

.item {
float: right;
width: 500px;
height: auto;
} tag

You do have the following tag that has the .item included but it seems to be messing with the layout. And I think this is because your .item tag needs to include some width/height info (don't hold me to that as I'm no expert ).

.content .item {
padding: 6px 12px;
border: 1px solid #EEE;
background: #FFF;
margin-bottom: 8px;
}

It is in your html/php web page but not in your css document.

Hope it helps.

Blame Me, Sep 20, 2007 IP

simonpeterong Peon

Messages:: 62

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#6

I just find it odd that a script will generate a list but coded not as a list, if you look closely it is created as a paragraph with breaks on it, making it render on a browser like an unordered list...

hmmmmmm...

simonpeterong, Sep 20, 2007 IP

Blame Me Guest

Messages:: 162

Likes Received:: 9

Best Answers:: 0

Trophy Points:: 0

#7

simonpeterong said: ↑

I just find it odd that a script will generate a list but coded not as a list, if you look closely it is created as a paragraph with breaks on it, making it render on a browser like an unordered list...

hmmmmmm...
Click to expand...

Yep I noticed that too and just thought this is how this person has played it

Blame Me, Sep 20, 2007 IP

beemaster Peon

Messages:: 103

Likes Received:: 2

Best Answers:: 0

Trophy Points:: 0

#8

Thanks guys! I think I have in fixed now. The help is greatly appreciated.

beemaster, Sep 20, 2007 IP

Blame Me Guest

Messages:: 162

Likes Received:: 9

Best Answers:: 0

Trophy Points:: 0

#9

beemaster said: ↑

Thanks guys! I think I have in fixed now. The help is greatly appreciated.
Click to expand...

No problem That's my bit of good karma for the day done

Blame Me, Sep 20, 2007 IP

simonpeterong Peon

Messages:: 62

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#10

happy to help out!

simonpeterong, Sep 20, 2007 IP

Log in or Sign up

Problem with CSS (I don't know what else to say...)

beemaster Peon

simonpeterong Peon

beemaster Peon

simonpeterong Peon

Blame Me Guest

simonpeterong Peon

Blame Me Guest

beemaster Peon

Blame Me Guest

simonpeterong Peon

Useful Searches