I Need Another Pair of Eyes Please | HTML, XHTML and CSS

Forum | I Need Another Pair of Eyes Please

This Forum is Currently Locked – Access is Read Only

You must be logged in to post

Forum HTML, XHTML and CSS I Need Another Pair of Eyes Please

I Need Another Pair of Eyes Please

Topic Locked

Page: 1 2

User

Post

8:54 AM
Dec 23, 2009

Karen Blundell

Member

posts 23

Hey guys,

I'm having a heck of a problem where the wrapper background of my design shows below the footer just a tad…you'll see a thin white line…what do I need to do to solve this?

see here

and here's my CSS first and XHTML second

* {
margin: 0;
padding: 0;
}

body {
font-family: Verdana, sans-serif;
font-size: 95%;
background-color: #150185;
color: #fff;
text-align: center;
}

#wrapper {
color: #000;
background: #fff url(images/wrapper.png) repeat-y;
margin: 80px auto;
width: 780px;
padding: 0;
position: relative;
}

#header {
background: #fff url(images/header.png) no-repeat;
width: 780px;
height: 150px;
padding: 0;
margin: 0 auto;
}

#header h1 {
padding: 20px;
text-align: center;
font-size: 1.6em;
color: #006633;
}

#header span {
font-size: 1.2em;
font-style; italic;
color: #333;
padding: 30px 5px; 5px; 20px;
}

#content {
float: left;
padding: 10px 20px;
margin: 0 auto;
width: 730px;
background-color: transparent;
}

#footer {
clear: both;
background: transparent url(images/footer.png) no-repeat;
height: 100px;
margin: 0 auto;
width: 780px;
padding: 0;
}

<!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=utf-8" />
<title>Immediate Money</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">

<div id="header">
<h1>Immediate Money</h1>
<span>Emergency cash generation that can save your marriage, your life, your sanity…</span>
</div>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

</div>

</body>
</html>

thanks in advance for your help… Smile

9:29 AM
Dec 23, 2009

NickyD

USA

Moderator

posts 86

What does the footer.png look like….length, width ?

9:31 AM
Dec 23, 2009

NickyD

USA

Moderator

posts 86

Oh, ignore my posts, just saw the link to the site above…. Embarassed

11:23 AM
Dec 23, 2009

Karen Blundell

Member

posts 23

fixed it so that you can see the image when you click the link above…

thanks Nicky D for taking a look…

if anyone can help, I'd really appreciate..I spent hours last night researching this, and tried a lot of recommended CSS tricks..none of which worked. I'm sure it's something so simple that I will be embarrassed I didn't think of it Embarassed

12:09 PM
Dec 23, 2009

virtual

Member

posts 39

Can you post at least the images somewhere to test with your code to see what's wrong. It's impossible to test in Firebug because your link is just an image.

12:55 PM
Dec 23, 2009

Karen Blundell

Member

posts 23

there are 3 images:

http://karenblundell.com/test/header.png

http://karenblundell.com/test/…..rapper.png

http://karenblundell.com/test/footer.png

4:44 PM
Dec 23, 2009

NickyD

USA

Moderator

posts 86

Hi Karen….ok, there are people here much more qualified than me. The reason I asked about your footer.png, was to see the size of it. In the css, it says the size is:

780 X 100

The demensions of the image you gave are:

780 X 99

What would happen if you made the height of the footer.png 100px instead of 99px? Just curious.

5:22 PM
Dec 23, 2009

Karen Blundell

Member

posts 23

NickyD said:

Hi Karen….ok, there are people here much more qualified than me. The reason I asked about your footer.png, was to see the size of it. In the css, it says the size is:

780 X 100

The demensions of the image you gave are:

780 X 99

What would happen if you made the height of the footer.png 100px instead of 99px? Just curious.

oh my goodness! it was suppposed to be 100px high…and you know what..I goofed..it's actually 99px, and that little bit of an error caused me hours of wasted time!

it is fixed, thank you, thank you…my friend, NickyD