Topic: css background note (Page 1 of 1)

.top p {background:transparent url('bg.gif') no-repeat top right;}

and

.top p {background:transparent url('bg.gif')no-repeat top right;}

are nOT the same. The difference is the space between the url parenthesis and the repeat bit. An hour of tearing my hair out makes me pass this along. If you do it without the space using xhtml 1.0 strict, the background images will not show in IE 5, 5.6 or 6.

This has pretty much been a convention/habit of mine to leave no space there so this had me tearing my hear out for close to an hour.

Did you try the CSS validator? That might have caught it.


 

frankly, I normally just use the validator when I'm done to see how I did =\

I should put that button back on the link bar

It might not have caught it, either. I'm not sure if it's invalid. =)

Tracking down IE bugs is a time consuming activity.


 

Yeah, making a habit of keeping your markup neat and clean will help you avoid these kinds of problems. This is where being anal about whitespace, indentation, brackets, semi colons, etc pays off.

Of course being anal about it, and being correct about it don't always go hand in hand

I eliminate as much white space as possible from my CSS syntax, personally.
Always good to know where you can and can't cut the spaces...

body {
	color : black;
	}

everybody post your css conventions^ if you would. Mine is odd I think, it doesn't match most people's, the space either side of the colon and the tab on the closing bracket seem to be unique to me, helps *me* to be able to scan a long stylesheet but tends to irritate anyone else that has to look through mine

Nowadays I do this:

body {
    color: black;
}

Not too long ago, though, I preferred this:

body {
    color: black;
    }

I usually do

body {color: black;}

if I am only doing a few things, otherwise I do:

body {
color: black;
}

If it's inline:

body{ color:black; }

If it's internal/external:

body{
color:black;
}

Usually my biggest mistakes aren't really incorrect syntax, usualy I just put things where I didn't want them, like giving paragraph tags the color I wanted for the header tags. Most of my problems are with PHP anyway, that's another story though.

body {
     color: #000;
     }

(Edited by briggl on 08-24-2005 04:52)

very interesting

*rubs hands together* I'm going to have to find a way to bend the world to my style...

body
{
    color: #000;
}

If it's short like that sometimes I'll combine the opening bracket with the first line to keep from taking too much space, but otherwise I like having the opening and closing brackets in line like that for clarity.

selector space bracketopen bracketclose backarrow return tab return tab up arrow

ain't it funny how hard such simple habits are to break?!

quote:

---

selector space bracketopen bracketclose backarrow return tab return tab up arrow

---

Exactly the way I do it!

creeeepy!

I'm the same as reisio's first example, it just seems to make sense as most of the time I'll apply more than one property to a selector, if they're all on one line then they're harder to read and edit.

selector space bracketopen bracketclose backarrow return return up arrow tab

Cheers,



(Edited by Blaise on 08-24-2005 12:44)

Oops, my spacing didn't go through the right way - I set it up just like briggl has it. I tab over one tab for the brackets, so if the selector is longer than one tab length, I add a carriage return, so all of my brackets are always vertically aligned, along with the left edge of all the attributes.