CSS3 Border-image question.

[Mrbloodworth]

So, I have been revamping (Retrofit really) the Wurm Online website. I am currently using the border-image property to style some of the <div> elements. Works great in Firefox and safari. However in Opera the top navigation bar will not show its border images, while it does show them on the other elements (the lower boxes/sections).

I am stumped as to whats going on, any insight would be helpful.

Opera and border-image reference.

[Tarami]

I would suggest not using CSS3. The support is very iffy. Safari is like the only browser that actually properly supports it. FireFox is so-so. Opera only a little. IE not at all.

Yeah, I know, very helpful advice. :P

[Salamok]

lol I was going to post the same thing but it probably isn't what he wants to hear.

[Mrbloodworth]

Well, the thing is, I'm not sure why it works in opera on other elements, but not that top bar. Its all the same definitions.

[Miasma]

Opera is much more strict about proper syntax etc.  Usually if it works in everything but Opera you probably missed a semicolon or closing bracket or some other small mistake that the other browsers would have fixed for you.  This is especially true if the same effect works elsewhere.

[Miasma]

In #topmenu your font-size attribute has no ending semicolon.  Opera will typically stop processing after such an omission, try that.

[Mrbloodworth]

In #topmenu your font-size attribute has no ending semicolon.  Opera will typically stop processing after such an omission, try that.

I owe you one beer. 

That was it, thank you!

[RhyssaFireheart]

Can we make this a CSS question thread?  Otherwise, I'll just hijack it anyways...

Question for those who do write CSS - do you put everything for an element on one line or do you break things down by style on it's own line?  Does it really make any difference when the browser is parsing the file for the CSS definitions?

Here's an example of what I'm talking about:

Code:

/* =-=-=-=-= Menu =-=-=-=-= */
#access{margin-top:0}
.skip-link{display:none}
#menu{}
#menu ul{margin:0;list-style:none;clear:both}
#menu ul ul{display:none}
#menu li{}
#menu a{display:block;padding:0;line-height:24px;text-decoration:none}
#menu a:hover{}
#menu a:hover:after, #menu a:active:after, #menu a:focus:after{content: " ※"}
#menu .current_page_item a{cursor:default;color:#99AFAF}
#menu .current_page_item a:after{content: " ※"}
#menu a:focus{}

instead of

Code:

/* =-=-=-=-= Menu =-=-=-=-= */
#access {
	margin-top:0;
	}
	
.skip-link {
	display:none;
	}
	
#menu {
	}
	
#menu ul {
	margin:0;
	list-style:none;
	clear:both;
	}
	
#menu ul ul {
	display:none;
	}
	
#menu li {
	}
	
#menu a {
	display:block;
	padding:0;
	line-height:24px;
	text-decoration:none;
	}
	
#menu a:hover {
	}
#menu a:hover:after, #menu a:active:after, #menu a:focus:after {
	content: " ※";
	}
	
#menu .current_page_item a {
	cursor:default;
	color:#99AFAF;
	}
	
#menu .current_page_item a:after {
	content: " ※";
	}
	
#menu a:focus {
}

The first certainly takes up much less vertical space, but I find it harder to read when I'm editing CSS or writing something out.  And I find it takes me longer if I'm looking to change one specific aspect of a definition when I'm tweaking things.  I'm not sure if I'm just being resistant to changing how my CSS files look for no good reason (aka I learned to write them the second way, so that's worked well so far!) or if there really is a better reason to use the first method.

[Lantyssa]

Multiple lines.  There is no difference in browser performance, so readability is more important to me.

[Tarami]

It's just about preference. I mix, depending on how many attributes a definition has.

Although I don't "get to" do much CSS anymore, for which I'm eternally grateful.

[KallDrexx]

Just write it anyway you want, and if you are concerned with bandwidth (the only real issue with having readable, formatting) you can always minify the CSS prior to deployment, which will essentially convert it to your first example.

[Krakrok]

Add some CSS3 to IE:

http://css3pie.com/


I tried the CSS3pie example on one of our sites though and it made it hugely slow in Firefox.

[Mrbloodworth]

I can't get that to work at all, its nifty though.

[Trouble]

I recently switched to one-line CSS definitions with indentation sort of corresponding to the DOM structure of the page. Each line is somewhat less readable, but when you have a lot of CSS it makes it much more manageable to navigate. Having each property on a line makes the stylesheet really fucking long and difficult to navigate. A couple examples of recent stuff I did which gives you a feel for how it looks:

http://mauijim.sunglasshut.com/css/style.css
http://luisarana.com/socialsun/css/socialsun.css

After switching to this format I find it much easier to navigate within my CSS which offsets the somewhat higher difficulty of reading the properties.

Edit: I also use an editor that colors the shit out of my code so it's somewhat easier (for me at least) to parse it

Screenshot:

[HaemishM]

Multiple lines.  There is no difference in browser performance, so readability is more important to me.

This. I hate it when I have to dissect code that's all on one line.

[RhyssaFireheart]

What editor is that, Trouble?  I mean, I'd go blind looking at that rainbow on a black background, but some color coding isn't a bad idea.  I currently use HTML Beauty which works for my needs.  Some color coding and I can tell if a trailing ; has been left out usually as well.

[Lantyssa]

You might give Notepad++ a try.

[Trouble]

It's e Text Editor (http://www.e-texteditor.com). It's basically a semi-port of the Mac program TextMate (http://macromates.com). I've used a lot of editors but it's my favorite currently.

[Viin]

It's e Text Editor (http://www.e-texteditor.com). It's basically a semi-port of the Mac program TextMate (http://macromates.com). I've used a lot of editors but it's my favorite currently.

The Cygwin integration sounds intriguing ... normally I use TextPad, which works well enough but nothing amazing (except block select, which *is* amazing).