Borders Defined In Css Do Not Display

[rickduley]

I am working in CSS 2.1 and HTML 4.01 Strict.in a CSS I define:

#canvas   {	  width: 100%;	  color: #000000;			/* black */	  background-color: #FFFFCC; /* pale gold */	  margin: 0;	  border-color: #0066FF;  /* royal blue */	  border-style: solid;	  border-right: 6px;	  border-top: 0;	  border-left: 6px;	  border-bottom: 0;	  padding: 5%;   }

In index.html I use the code:

			<div id="canvas">			   This is the canvas			</div>  <!-- canvas -->

The text is displayed, but no borders appear.There is trouble at my website server at the moment and I cannot upload anything to it. I would be happy to email the code and a JPEG of the visual if some concerned soul emails me at rickduley.hotmail.comAny and all help appreciated

[Mencarta]

Try using:

border-width:1px;

I think you can use border-width-left/right/top/bottom if you want to be even more specific. You have to have border-style, though.

[Ingolme]

You're using a shorthand declaration. Shorthand declarations reset all the properties except the ones you set in the declaration.

border-right: 6px;border-top: 0;border-left: 6px;border-bottom: 0;

Those declarations are resetting the border-style to "none" and border-color to blackTry setting only the width:

border-right-width: 6px;border-top-width: 0;border-left-width: 6px;border-bottom-width: 0;

[rickduley]

Thanks IngolmeThat correction worked fine intill I nested something in #canvas. When I do that (in this case .mainText (standard.css line 100) and .sidebar (standard.css line 114)) the borders and the background color disappear again.You can see the page at http://rickduley.webs.com/Sample-Webpage.html and the code is at http://rickduley/div-canvas-Ignored.zip.kgb (you have to remove the dot kay gee bee suffix - webs.dot com think I am a spy if I send them ZIP files )I cannot see any reason for borders and backgrounds to go away just because something is added on top of them. Neither can I see any reason for .mainText and .sidebar to overlap when they are contained within, and dimensioned relative to, #canvas.This has got me beat. I hope someone can unravel the mystery.

[thescientist]

maybe it's because you're using shorthand declaration in those nested <div>'s? Always specify the property you want to use (width, style, etc) and define a unit of measurement too (px, em, %, etc).

[rickduley]

maybe it's because you're using shorthand declaration in those nested <div>'s? Always specify the property you want to use (width, style, etc) and define a unit of measurement too (px, em, %, etc).

Thanks for the suggestion, thescientist. I have gone through the relevant code and been stringent in property definitions, but there is no change. The current state of the project is at http://rickduley.webs.com/Sample-Webpage.html (and the current code at http://rickduley.webs.com/div-CSS-ignored.zip.kgb - remove the 'dot kay gee bee' suffix). If you view the webpage you will see that there are four issues:1. The 'pale gold' screen colour (see #screen at line 8 of standard.css) does not extend to the perimeter of the screen;2. The 'pale gold' screen colour stops altogether at the bottom of the breadcrumbs line;3. The borders and background colour of #canvas (line 85 of standard.css) are not displayed;4. .mainText and .sidebar, which are encapsulated within #canvas, will not display side by side if their cumulative width is 100%.After about a fortnight's work I am down to these four problems. From experience with other languages, they probably stem from one simple mistake somewhere. However, my experience in HTML and CSS is insufficient for me to see what is probably staring me in the face.I hope someone can solve these issues so I can get on with something productive. Thanks

[ShadowMage]

Are you by chance using any floated elements? I've had a lot of issues in the past with borders and backgrounds not acting right with floated elements. If so try adding overflow: auto or overflow: hidden to the parent of your floated elements, as Ingolme suggested to me.

[rickduley]

The solution to this problem was two-fold:1. have the line "body html { margin: 0; border: none; padding: 0; }" at the top of every CSS and overwrite it as necessary. This appears to be a general fix-it especially with regard to viewing in MsIE;2. make <div style="clear: both; "></div>" the last line as you close any page area (<div>). Try it - the background chases you down the divisions. Cheers

[jeffman]

That's why you were asked if any elements were floating, which I now assume some were. Float takes elements out of the normal flow, so their containers do not always expand to accomodate their height. Having a cleared element cleans that up.