positions are perfect with borders, but not without?

liunx

Guest
Is this a common problem, or is something wrong with my stylesheet?

to see the page, goto <!-- w --><a class="postlink" href="http://www.paradoxium.com">www.paradoxium.com</a><!-- w -->, but I posted it here if you didn't want to pull the files.


here's the css:


html, body {
font-size: 1em;
background-color: #868CA2;
margin: 0;
padding: 0;
text-align: center;
}

a {
color: blue;
text-decoration: none;
}

a:hover {
color: red;
}

p {
color: black;
margin: 5px;
}

h1 {
color: #868CA2;
text-align: center;
}

#container {
border: black 0px solid;
margin: 0 auto;
width: 90%;
}

#header {
border: white 1px solid;
background-image: url(paradoxiumcthru.png);
position: relative;
height: 125px;
margin: 0;
padding: 0;
}

#content {
border: red 1px solid;
background-color: white;
position: relative;
width: 80%;
text-align: left;
margin: 5px auto;
}

#footer {
border: green 0px solid;
color: white;
position: relative;
height: 1.5em;
margin: 0;
padding: 0;
}

#nav {
border: yellow 0px solid;
margin: 0px;
padding: 0px;
width: 100%;
}

#navul {
border-right: white 0px solid;
background-color: #C0C0C0;
text-align: left;
height: auto;
position: relative;
margin: 0px;
padding: 0px;
}

#nav ul li {
margin: 0;
padding: 0 3px;
border-right: white 0px solid;
border-left: white 0px solid;
display: inline;
height: 1em;
}

#nav ul a {
font-weight: bold;
color: white;
}

#nav li:hover, #nav ul a:hover {
color: #868CA2;
background-color: #c0c0c0;
}

a.signoff {color: white; float: left; position: relative;}
a.signoff:hover {color: #c0c0c0;}
a.validation {color: white; float: right; position: relative;}
.validimage {border: white 0px solid; width: 88px; height: 31px; }


and here's the html:


<!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>
<title>Paradoxium.com - Where even though there is nothing, you may still find something</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href=http://www.webdeveloper.com/forum/archive/index.php/"paradoxium.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div id="header"><h1>-Paradoxium.com-</h1></div>
<div id="nav">
<ul id="navul">
<li class="first"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.paradoxium.com/">Home</a></li>
<li><a title="Rant, raves, and random outpourings of my mind." href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.paradoxium.com/blog/">Blog</a></li>
<li><a title="Message Boards, feel free to join and chat, it's created mainly for my own html/php education, relating to message boards." href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.paradoxium.com/forum/" target="_blank">Forums</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.paradoxium.com/#">My Hobbies</a></li></ul></div>
<div id="content">
<h3>Welcome to Paradoxium.com!</h3>
<p>Please be patient as this website is being created from scratch. My old website could not be moved over, and I'd like to make this one as "good" as possible :)</p>
<p>This site is mainly up for me to increase my knowledge on html/xhtml, css, php, etc. I've setup a message forum, blog, and I'll be putting an image gallery up soon.</p>
<p>"What's the story on the name?" you might be thinking. Well, my original domain name is taken up and immobile until the end of June, so I needed a new domain. Ever since I was a little kid, I've always been fascinated by computers. Electricity creating images, text, even games. Quite unreal really. Almost paradoxial really, because even though there really isn't anything there, there is! Nothing but some organic and inorganic resources, lights, and electricity...yet we see beautiful things, and "do" wonderful things.</p>
<p>Thank you for your patience, feel free to email me with comments.</p></div>
<div id="footer">
<a class="signoff" href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]">- Robert Passmore -</a>

<a class="validation" href=http://www.webdeveloper.com/forum/archive/index.php/"http://validator.w3.org/check?uri=http%3A%2F%2Fwww.paradoxium.com%2Findex.htm" target="_blank">
<img class="validimage" alt="Valid XHTML 1.0!" src=http://www.webdeveloper.com/forum/archive/index.php/"images/valid-xhtml10.png" /></a>

<a class="validation" href=http://www.webdeveloper.com/forum/archive/index.php/"http://jigsaw.w3.org/css-validator/validator?uri=http://www.paradoxium.com/paradoxium.css" target="_blank">
<img class="validimage" alt="Valid CSS!" src=http://www.webdeveloper.com/forum/archive/index.php/"images/vcss.png" /></a>
</div>

</div>
</body>
</html>



thanks in advance :)
RobertI don't exactly get what your problem is, or am I missing something?hmm I had to make a new Username but this is rpassmore :)

I want to take out the borders. if you remove the borders, it adds spacing between the div elements, and I can't figure out how to remove them...I've been working at it for a while now, although I'm sure it's something simple. lolWhy don't you take them out so I can see what the problem is.ok...

with borders-
<!-- w --><a class="postlink" href="http://www.paradoxium.com">www.paradoxium.com</a><!-- w -->

without borders-
<!-- w --><a class="postlink" href="http://www.paradoxium.com/index2.htm">www.paradoxium.com/index2.htm</a><!-- w -->


only difference in the 2 stylesheets are all of the border rules taken out.ive never run into this problem before so the only advice i can give you is if you want the borders but dont want them visible make them the same color as the background.you may also try adding margin:0 to h1.I've never run into this or seen it either..really odd I think. that's why I was assuming somewhere else I did something wrong.

oh well...I'll do the background color trick, thanks :)

oh...regarding the h1...I was under the thinking that unless changed, elements use the parent rules? or are headers and div's on seperate sides of the track?huh...the 0 margin did the trick.

thanks! :)you can thank Jona he was the one that advised me.
 
Back
Top