Rounded corners in vB
 

I devised a way to add rounded corners to all standard vB tables without modifying the markup or using Javascript, just pure compliant CSS (that IE won't support). I must say, it's damn clever, and no, you won't see the code. A hint, though: you need to use some new CSS3 tricks to pull it off.

Fortunately, I wrote the CSS such that IE won't render the problematic parts at all and it'll just revert to still fine-looking squared corners.

Hmm, I also just realized I could probably do truly good-looking drop shadows, even using alpha-blended PNG images which lame IE doesn't support. Don't tell me about the filter hack to do it, it still doesn't get the color palette right.

well known mozilla only css:
http://books.mozdev.org/chapters/ch04.html#77028

You want a pat on the back or something? Why make a post like this and not share the code?

Need the attention?

<a href="http://www.bath.ac.uk/~cs1spw/demos/moz-border-radius.html" target="_blank">http://www.bath.ac.uk/~cs1spw/demos/...er-radius.html</a>

code? view source!

yawn

screenie atleast?

My thoughts exactly. Gotta love attention +++++s.
Nothing that pisses me off more than people saying "ooh heres something leet [insert long explanation]. PS: My ass you can have it, bugger off." :mad:

My thoughts too :tired:

My code doesn't use Mozilla-only extensions, and unlike most other rounded corner CSS snippets out there, mine works in the standard vB table structure it uses everywhere.

I'm not posting the code because people will copy it and use it without having any clue as to how it works, so I'll give hints instead. The first one: look into the first-child and last-child pseudoclasses.

again, can we atleast see a screenshot before you continue with the hinting game so i can see if i'm interested or not? ;)

Yeah but, how do you really feel about IE? Don't sugar coat it now ;)

tskk

Seriously mate, that is not a good argument. So what if someone guesses it, unless you pay that someone to keep up your little gig, they are going to use the code somewhere. Us who can't be buggered to spend ages googling and trying to figure out your bullcrap riddles will look at the code and learn to use it.
That's how it's going to go.

Screenshot attached. The password textbox is a Javascript experiment I'm doing that's quite simple, but, of course, IE thinks uses code that will make your computer burst into flames.

As I said before, my point of posting was to encourage people to figure out how to do it given that it's a popular visual technique and vB hardcodes all of its markup in the templates for layout purposes rather than semantic purposes.

now that's sexy so i'm interested :p

seeing how i really dont know css that well i'll wait on someone to release it and of noone does no loss to me

See, that's my point. The only way to truly appreciate something and make your forum unique is to learn it. If you don't know CSS, I suggest you pick up a book on it and start learning because it's the modern way of applying style to markup, and without it, you won't have strict control over your site's appearance.

nah too much effort i have other programming projects going on to learn css would be too big of a pain and seeing how its just a big "OH LOOK AT ME I HAVE ROUNDED CORNERS" more of a jerkoff move than anything else

Whether you want rounded corners or not, you should at least learn the basics of CSS. It's very easy to learn IMO.

And about the corners, they look really nice and it's something I really need for a current site I'm making...but I haven't looked at any of the new CSS 3 features...in fact I didn't know they existed. :ermm:

Perhaps you should re-read my numerous replies on why I made the post instead of directly insulting me. To speak as a moderator for a moment, you need to be respectful when posting.

Thanks for this. I like it.

Yes, and if you view the code, it uses Mozilla-specific extensions instead of W3C-compliant CSS.

I like it enough to resear a way to do it with W3C compliant code. And when I figure it out..I WILL POST IT FOR EVERYONE.

lmao go for it

i do know the basics already. have to know them to do most web.dev. outside of wysiwyg editors.
and filburt
if your going to be so anonymous why even post? its like me posting about a hack i have then saying go figure it out on your own. there is always psudo-code or even letting us know the logic behind it.

A smart guy Knows stuff....

a wise man shares his knowledge.

a Smartass knows stuff and ....

....well i don't know what he does but i think he posts stuff and teases people and is mean.

Is there a rule that I can't post threads now or something? Respectfully, you all need to calm down. If you don't care about my post, then don't reply to it.

We care that's why we post. We care that you are essentially saying:

"neh neh neneneh...I know something you don't and I'm not gona tell you" <play the annoying rythm in your head>

If it won't work with IE, then it won't be any good to me, anyway. ;)

yea does kinda defeat the purpose if 90% of the people out there cant see it doesnt it.

Use it as a way of advocating alternate browsers to that garbage of a software XD

Using mozilla-specific CSS is just as bad as abandoning IE IMO :) There is a solution for everything. You can add rounded corners exactly like your image there and because it's a constant color it'll only be about 1kb which is nothing. I don't see what the big deal here is really but hey.

And the bad thing about abandoning IE is...?
Note that Im not saying code stuff that makes the page fux0rd in IE, but coding stuff only other browsers can see is neccessary. Im gonna leave it at that ebfore this turns into another browser war thread.

The bad thing about abandoning IE is 90% of my traffic uses it :)

There are always ways to get around browser quirks. :)

About 65% in my case given my site's target audience, but it still falls back.

Brad: usually true, but in this case, all I could do in CSS that would work for IE is adjust the top-left image and possibly the top-right. The bottom ones, especially bottom-right, I don't think I could do without modifying the markup or using lame Javascript to do it.

See that is where you and I differ then :p. I strive to make my sites look perfect in as many browsers as I have access too. I support IE5.01+, Firefox, Opera. Those are the three major players and if you have it looking right in those, it'll look right in most of the others too. There's really no excuse for not supporting them, there are ways around all the bugs :) But yes, lets not start another browser debate ;) heh

Well I dont ignore IE in my sites, my site looks good in all browsers (apart from the small space in between my header and sub-header image, a bug which cannot be fixed when using nested tables along with passing the markup as XHTML), but transparency + opacity is one thing IE doesn't support but all other does. This round corner thing is another.
So basically, since you disagree with my view, you are saying that you are deliberately going to avoid making your site look as nice as it could have been just so it will look the same in all browsers.

You can find a good tutorial about css boxes (works with IE) here ;) http://www.stunicholls.myby.co.uk/boxes/krazy.html

If you look at the HTML, you have to modify the markup. That's my whole point; it's not practical to do so in vB given the number of templates that have vB tables in them.

So, to sum up.

You know how to make rounded corners, but you don't want to tell us mere mortals. :disappointed:

Well thanks for wasting my time reading this. I guess I'll move on to the next topic. :tired:

<shakes head>

Thanks for sharing :up: