Mysterious 1px / 2px Space - Solved

BabyJack

05-30-2008, 05:08 PM

Hey! Here is the site: Wifee V2 (http://wifeee.com/V2) If you notice next to the text 'sdafs' or something, there is no border. It is the same next to the image.

Here is my HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Wifeee - Enlighten your Simming Experience =]</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="all">
<link rel="shortcut icon" href="favicon.ico" type="favicon" media="all">
<script type="text/javascript" src="
http://www.dynamicdrive.com/dynamicindex11/gradualfader.js">
</script>
</head><body>

<div id="container">
<div class="logo"><?php include "logo.php"; ?></div>
<div id="sidebar1">sdfas</a>
</div>
<div id="content">
<img src="avatar.png" alt="This is Wifee Version 2. We are testing all the vista effects."></img>
</div></div>
<script type="text/javascript">
gradualFader.init() //activate gradual fader
</script>

and the CSS:
body {
background-image: url(back.jpg);
background-repeat: repeat-x;
font-family: verdana;
margin: 10px 00px 10px 250px;
}

.logo {
background-repeat: norepeat;
border: 2px solid #FFFFFF;
width: 800px;
height: 200px;
}

#sidebar1 {
border: 2px solid #FFFFFF;
border-top: 0px;
border-right: 3px;
background-color: #FFFFFF;
padding: 5px;
}
#content {
height: auto;
border-left: 2px solid #FFFFFF;
border-right: 3px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: left;
padding: 5px;
}

#container {
width: 800px;
height: auto;
background: #FFFFFF;
text-align: left;
}

I've tried expanding the border, but nothing is happening.

markosaurus

05-30-2008, 05:40 PM

That is because your border color is set to #ffffff, which is white.Change it to black and it will stand out better on a white background!

Hope this helps.

BabyJack

05-30-2008, 05:42 PM

No, it should show because My background is gradient blue to white.
Incase I mis-lead you, it is the one right on the edge, where the container width ends.

stmacoding

05-30-2008, 05:43 PM

BabyJack,

Try using these css codes. Here is an example:

#content
{
border-width: 20px;
border-height: 20px;
}

You can adjust the heigt and width as you need.

I hope this helps,
stmacoding

whizard

05-30-2008, 05:47 PM

When I set your border to black, it showed up perfectly...

Dan

BabyJack

05-30-2008, 05:56 PM

stmacoding has got it right, it's just that that didn't work. There is still the 2/1px space.

BabyJack

05-30-2008, 07:53 PM

UPDATE ON THE MYSTERIOUS SPACE!!
Image:
http://i25.tinypic.com/2db71vr.jpg

_Aerospace_Eng_

05-30-2008, 08:00 PM

Thats not a "space". You did this on your own. You gave your logo a border of 2px making your logo 804px wide yet your container is only 800px wide. Do you see where I'm going here?

tomws

05-30-2008, 08:06 PM

You put an 800px wide image in an 800px wide div - and then you added a 2px border to the div. Yes, it will be wider. Disable the border for class .logo, or resize the image to div width - 2x border width.

FYI, Firebug makes it easy to test something like like. Just a click to disable the border in CSS and everything is nice and square.

EDIT: Aero beat me to it.

BabyJack

05-30-2008, 08:17 PM

Thanks Aerospace! =D