6 replies to this topic

[Bengo]

http://squeakyzoneproductions.com/AV/
It should be showing a 5 pixel border on the top, right and bottom sides, the color white, here's the CSS:
http://squeakyzonepr...udes/styles.css
I cannot figure this out, as you can tell, I've added and removed tons of things to try to fix it, Firefox isn't getting it and IE doesn't work for me. I'm a bit of a novice at CSS, so I'm assuming many of you stumbled onto this problem too.

[Jacorre]

Make sure you define your borders top, right, bottom, left. I always think that I'll be in "TRouBLe" if I don't define them in the correct order!

[rc69]

It looks to me like you used dreamweaver or some other WYSIWYG editor to make that CSS. That's never a good idea.

But my personal first rule of CSS, use shorthand when possible. Try this:

/* Aftervision Cascading Style Sheet (CSS) */
body
{
	background: #132121;
	vertical-align: top;
	text-align: left;
	margin: 20px 40px 0 0;
	font-family: arial;
	color: #132121;
	font-size: small;
}
img
{
	border: 0px;
}
a, a:link
{
	color: #132121;
	font-weight: bold;
	text-decoration: none;
}
a:active, a:visited:active
{
	color: #132121;
	font-weight: bold;
	text-decoration: none;
}
a:hover, a:visited:hover
{
	color: #132121;
	font-weight: bold;
	text-decoration: none;
}
a:visited
{
	color: #132121;
	font-weight: bold;
	text-decoration: none;
}
#header
{
	width: 900px;
	height: 89px;
	background: #31365a url('./images/banner.png') no-repeat top left;
	border-collapse: none;
	border-spacing: none;
	border: 5px solid #FFFFFF;
	border-width: 5px 5px 0 0;
}
#navigation
{
	width: 900px;
	height: 5px;
	background: #7192a9;
	border-right: 5px solid #FFFFFF;
}
#content
{
	width: 900px;
	text-align: left;
	vertical-align: top;
	background: #e3f3ef;
	border-right: 5px solid #FFFFFF;
}
#footer
{
	width: 900px;
	text-align: center;
	vertical-align: top;
	background: #7192a9;
	border: 5px solid #FFFFFF;
	border-width: 0 5px 5px 0;
}

The border appears fine in IE7, but not FF. Can't tell you why atm. You also had a few too many verticle-align's and text-align's in the body.

Edit: Bengo posted after i already loaded the page. Don't ask me what is different about his CSS though. I can't read non-shorthand to well.

Edited by rc69, 01 June 2007 - 02:42 PM.

[Bengo]

rc69, on Jun 1 2007, 07:40 PM, said:

The border appears fine in IE7, but not FF. Can't tell you why atm. You also had a few too many verticle-align's and text-align's in the body.

Yeah, it's been working in IE, but Firefox has done this to me before... Also, I type all that code by hand, aside from some things, I am using Dreamweaver but 95% of the coding is done by hand, I use Dreamweaver for previewing and thats about it.

Edit: I deleted the post I made after seeing his, all I did was organize the borders correctly like Jacorre said, didn't do anything though.

Edited by Bengo, 01 June 2007 - 02:47 PM.

[Bengo]

Oh wait, it works now, awesome, thanks guys, you rule.
Another quick question, how do you uh.... give spacing to divs? Like instead of all my text being straight to the left and straight to the top, how would I put them 3 pixels apart from it?

Edited by Bengo, 02 June 2007 - 03:27 PM.