View Full Version : Mysterious 1px / 2px Space - Solved

05-30-2008, 06: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">
<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="

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

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.

05-30-2008, 06: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.

05-30-2008, 06: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.

05-30-2008, 06:43 PM

Try using these css codes. Here is an example:

border-width: 20px;
border-height: 20px;

You can adjust the heigt and width as you need.

I hope this helps,

05-30-2008, 06:47 PM
When I set your border to black, it showed up perfectly...


05-30-2008, 06:56 PM
stmacoding has got it right, it's just that that didn't work. There is still the 2/1px space.

05-30-2008, 08:53 PM

05-30-2008, 09: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?

05-30-2008, 09: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.

05-30-2008, 09:17 PM
Thanks Aerospace! =D