CSS Container Border

HTML & CSS
1

I am trying to create a white border container around all my content. The container DIV is in the xhtml fine and will show up in development in dreamweaver but won’t show up in IE7 or Firefox.

Here is my full CSS, I have tried so many different ways to sort this problem out but had no success yet so far.

body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #000000;
}
body {
	background-color: #222423;
	margin-left: 0px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
	text-align: right;
}

#container {
	width: 900px;
	margin: auto;
	background-color:#FFFFFF;
	border: 10px #FFFFFF;
	overflow:auto;
	
}

#header {
	background-repeat: no-repeat;
	height: 100px;
	text-align: center;
	font-weight: bold;
	font-size: medium;
	background-image: url(images/topbanner.gif);
}


#nav {
		height: 160px;
		clear: all;
		width: 900px;
		padding: 0;
		margin: 0;

}


#splash {
	height: 300px;
	background-image: url(images/splash.jpg);
	
}



#content-left {
	float: left;
	width: 450px;
	height: 400px;
	padding-bottom: 5px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: small;
	background-image: url(images/contentlr.gif);
	text-align: justify;

}


#content-right {
	float: right;
	width: 447px;
	border: 1px solid #000000;
	height: 400px;
	padding-bottom: 5px;


}



#content-footer {
	clear: both;
	background-color: #999999;
	height: 100px;
	background-image: url(images/footer.gif);

}
#container #content-footer div {
	font-size: large;
}

#content {
	float: right;
	width: 450px;
	height: 400px;
	padding-bottom: 5px;
	background-image: url(images/contentlr.gif);
}

.post {
	margin: 0px 0px 30px 0px;
	font-weight: bold;
}

.post .title {
	margin: 0px;
	background: #444444 url(images/img02.jpg) no-repeat left 50%;
	padding: 7px 25px;
	font-size: 1.4em;
}

.post .title h1 {
}

.post .entry {
	padding: 0 20px;
	font-weight: bold;
	text-align: left;
	font-size: small;
}

.post .meta {
	font-weight: bold;
	padding-left: 20px;
}

.post .byline {
	margin: 0px;
	padding-left: 20px;
}
#container #content-left p {
	font-family: Arial, Helvetica, sans-serif;
}
#navigation {
	height: 150px;
	clear: all;
	width: 900px;
	padding: 0;
	margin: 0;
}

.header_image {
display: block;
}

	
#slide {
	height:400px;
}
img
{  border-style: none;
   margin: 0;
   padding: 0;
   border: 0;
}

Jake.

2

Hi jtrobinson, welcome to SitePoint! :wave:

I think you have an omitting-typo, the border style value is missing. :slight_smile:

#container {
    width: 900px;
    margin: auto;
    background-color:#FFFFFF;
    border: 10px [COLOR="Red"]solid[/COLOR] #FFFFFF;
    overflow:auto;
}
3

That didn’t throw up a error. I believe it automatically goes to solid, and if you miss a value there, it goes to 3px.

Also I should point up some validation errors, clear:all isn’t a vlaue. Clear:both; however, is.

4

Not always; if a border-style value is omitted from the ‘border’ shorthand property, that value is set to it’s initial value, which doesn’t always mean a border is rendered.

5

Tuirns out your right, according to the spec section 8.5.3,

Since the initial value of the border styles is ‘none’, no borders will be visible unless the border style is set

[edit]But then again, all I said is that the validator didn’t choke.

Edit:

No, I read a article that had exapmles, and it went to 3px. [/edit]

6

With this code

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>

<style>
div.one
{
border:solid red;
}
div.one
{
border:3px red;
}
div.three
{
border:3px solid;
}

</style>

</head>
<body>
<div class="one">This is going to be <b>3px?</b> solid red.</div>
<div class="two">This is going to be 3px <b>solid?</b> red.</div>
<div class="three">This is going to be 3px solid <b>black?</b>.</div>

</html>

Opera and Firefox doesn’t render the border on anything but the last one, it needs the border-style and border-width. But it doesn’t need the color.

IE6 renders all but the .two which is ommiting the border-style. I assume IE7 is the same

7

Adding solid fixed the error fine for me both in ie and firefox.

Sorry if my questions are basic this is my first website in a while and my first using xhtml & css all the others i have done used tables and standard html.

I have no run into another error where my gallery is messing up the div below. When javascript is disabled so the gallery doesn’t function the page keeps is correct structure, however when the gallery is running it pulls the left content box up & out of alignment.

Any ideas?

Jake

8

Could we possibly see the website in question? Leave off http://www. so the URL looks like…

sitehere . com / page . php

Hard ot say without looking :).

9

Sorry, tried to edit previous post to include the URL but it won’t let me?

haveyouarrived .com/newsite/rrphan.html

Jake

10

RyanReese, in your example there is no declaration block for ‘div.two’, but a ‘class’ attribute value of ‘two’ in the HTML.

Secondly, I think you may be getting confused with the different initial values that the three ‘border-*’ properties can use, and perhaps I wasn’t clear enough in my last post. In his example, jtrobinson omitted a ‘border-style’ value from his ‘border’ property, and as the initial value of ‘border-style’ is ‘none’, then the border isn’t rendered.

If you omit a ‘border-width’ value, then it is set to its initial value which is ‘medium’, and a border is rendered (I think you may have referring to this instance?)

If you omit a ‘border-color’ value, then the initial value is taken from the ‘color’ value.

No, I read a article that had exapmles, and it went to 3px.

What I suspect you saw an example of was when the ‘border-width’ value was omitted, which meant the initial value of ‘medium’ was rendered.

11

Either way it was just an example. Nothing to get worked up over. Merely making conversation. It was fixed so no need to keep bickering…

As tothe OP…
.gallery_demo needs overflow:hidden;

I don’t see the real issue here besides clearing that up?

12

I was merely trying to inform readers of the expected behaviour, and to correct you on what you stated. Believe me, I have no spare time in the day to bicker.

Like many similar posts, this conversation is now going off-topic.

@jtrobinson: Firstly, I would recommend you fix your many HTML validation errors.