Jump to content
Stef's Coding Community
JasonDavis

CSS border not working, too much space in element

Recommended Posts

Hi all,

 

I just finished the CSS tutorials on here. They were very helpful. I've been coding in Dreamweaver for years but am just now trying to learn to build pages from scratch in text. I'm trying to do that below, and I'm having a couple issues.

 

I'm using this code for my HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <title>School Climate</title>
   <link href="style.css" rel="stylesheet" type="text/css">

   </head>

   <body>
       <div id="leftbar">

       </div>       

   </body>

</html>

 

and I'm using this code for my CSS:

 


#leftbar {
   position: absolute;
   width: 120 px;
   height: 100%;
   border-right: 1px solid white;
   background-color: #543a5c;  
}

body {
   background-color: #fffdee;
}

 

Two things are not happening as I want.

 

1. I'm trying to get the left bar snug up against the left side of the browser with no space showing. I've tried setting padding, border and margin all to zero, and nothing seems to change. I still see a little background between the top and left side (but not the bottom, interestingly).

 

2. The border-right isn't working. I'm not sure why. I had it working at one point while I was playing around, but it seems to have stopped. I increased the size to 4px to make sure I was actually able to see it, but it still wasn't there.

 

Any suggestions?

 

Thanks!

Share this post


Link to post
Share on other sites

For starters, always put some content in your divisions - even if it's just some bogus lorem ipsem placeholder - an empty division takes up no space.

 

Second, browsers have default settings - specific margins and paddings, that will keep things from going 'snug up against sides'. A global zero-set of

* {margin: 0; padding: 0;}

will fix that.

 

Your border is showing - but the color you have set for your body background and the white border color are so close, it's not obvious on the monitor.

 

here, I've applied above default zero-setting and changed the background color to gray, and voila: http://aandbwebdesign.com/KSforum/border.html

Share this post


Link to post
Share on other sites

Two other minor things:

 

1) If you don't want to reset browser defaults, you can remove the space by using

 

body { padding:0; margin:0; }

2) On #leftbar, this line

 

width: 120 px;

should be

 

width: 120px;

Share this post


Link to post
Share on other sites

Wow, thanks for the quick responses!

 

Using

padding:0; margin:0;

works either with the * global setting or by placing it in the body section. But I notice when I put it in the leftbar section, it doesn't work. Why is that? Wouldn't it override the browser settings there as well?

Share this post


Link to post
Share on other sites
works either with the * global setting or by placing it in the body section. But I notice when I put it in the leftbar section, it doesn't work. Why is that? Wouldn't it override the browser settings there as well?

The margin/padding is on the body element, so setting margin/padding to 0 on the leftbar won't do anything (by default, that should be 0 anyway.) The * character is a wildcard, so using * { margin:0; padding:0; } sets all elements (including the body) to have 0 padding/margin.

Share this post


Link to post
Share on other sites

Hi again,

 

I can start a new thread if needed, but since you guys have been such a great resource in here, I thought I would show you my progress and ask another question.

 

I've uploaded my site here: http://www.wvconfidential.com/test/

 

The problem I'm currently having is the three purple boxes with matching divs: blog, philosophy and book. Why do they appear underneath each other? I didn't make them absolute like the other elements. So my questions are:

 

1. How to fix the boxes to make them side-by-side under the top bar, and

2. Am I doing things right from a CSS standpoint so far?

 

Thanks! Let me know if I should start a new thread since this has now deviated from the original question.

Share this post


Link to post
Share on other sites

This thread is fine. Just float them all to the left. That will line them all up on the same line.

 

You could otherwise do display inline-block but float is easier.

Edited by Eric

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...