Print Page - CSS3 Border-image question.

Title: CSS3 Border-image question.
Post by: Mrbloodworth on August 14, 2010, 05:08:21 PM

So, I have been revamping (Retrofit really) the Wurm Online website (http://www.wurmonline.com/). 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. (http://dev.opera.com/articles/view/css3-border-background-boxshadow/#border-image)

Title: Re: CSS3 Border-image question.
Post by: Tarami on August 15, 2010, 12:20:20 AM

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

Title: Re: CSS3 Border-image question.
Post by: Salamok on August 15, 2010, 01:27:46 AM

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

Title: Re: CSS3 Border-image question.
Post by: Mrbloodworth on August 15, 2010, 07:47:15 AM

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.

Title: Re: CSS3 Border-image question.
Post by: Miasma on August 15, 2010, 08:37:37 AM

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.

Title: Re: CSS3 Border-image question.
Post by: Miasma on August 15, 2010, 08:44:42 AM

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

Title: Re: CSS3 Border-image question.
Post by: Mrbloodworth on August 15, 2010, 08:59:47 AM

Quote from: Miasma on August 15, 2010, 08:44:42 AM

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. :grin:

That was it, thank you!

Title: Re: CSS3 Border-image question.
Post by: RhyssaFireheart on August 16, 2010, 05:35:36 PM

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.

Title: Re: CSS3 Border-image question.
Post by: Lantyssa on August 16, 2010, 07:05:29 PM

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

Title: Re: CSS3 Border-image question.
Post by: Tarami on August 16, 2010, 10:27:41 PM

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. :-P

Title: Re: CSS3 Border-image question.
Post by: KallDrexx on August 17, 2010, 05:52:01 AM

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.

Title: Re: CSS3 Border-image question.
Post by: Krakrok on August 17, 2010, 06:39:36 AM

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.

Title: Re: CSS3 Border-image question.
Post by: Mrbloodworth on August 17, 2010, 07:05:06 AM

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

Title: Re: CSS3 Border-image question.
Post by: Trouble on August 17, 2010, 12:17:47 PM

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:

Title: Re: CSS3 Border-image question.
Post by: HaemishM on August 17, 2010, 12:47:49 PM

Quote from: Lantyssa on August 16, 2010, 07:05:29 PM

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.

Title: Re: CSS3 Border-image question.
Post by: RhyssaFireheart on August 17, 2010, 03:49:52 PM

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 (http://www.htmlbeauty.com) which works for my needs. Some color coding and I can tell if a trailing ; has been left out usually as well.

Title: Re: CSS3 Border-image question.
Post by: Lantyssa on August 18, 2010, 01:34:26 PM

You might give Notepad++ a try.

Title: Re: CSS3 Border-image question.
Post by: Trouble on August 18, 2010, 11:41:49 PM

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.

Title: Re: CSS3 Border-image question.
Post by: Viin on August 19, 2010, 12:48:55 PM

Quote from: Trouble on August 18, 2010, 11:41:49 PM

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).

f13.net

f13.net General Forums => General Discussion => Topic started by: Mrbloodworth on August 14, 2010, 05:08:21 PM