As title says,
I know how to do that when the div is in fixed size, i simply wrap the div with borders i make in PS
But how do i achieve it on an element that is not fixed size? any ideas?
thanks,
ulthane.
Shadows:
Rounded corners:
http://css3pie.com/
http://www.bestinclass.com/blog/2008/css3-border-radius-rounded-corners-ie/
Maybe that can be of help to you.
Personally i would say don’t both, a new vibe that is spreading around the web development community is to make modern browsers have fancy effects and such but for IE8 and below make it visible to those visiting don’t give it any special treatment as you will actually have a faster performing site compared to if you uses shims, shivs and polyfils which decrease the load time quite a bit.
I’ll second that – just don’t. The code for the shiv is just bloat for supported browsers – and makes the old browsers slow to load, render and scroll anyways. Oh noes, the old browsers don’t get the fancy effects and instead still gracefully degrade into a page that’s just as functional, just not as pretty – isn’t that the POINT of CSS in the first place – progressive enhancement with CSS so you have graceful degredation when all the fancy stuff isn’t available?
So long as the page WORKS for those users, don’t waste time worrying about “oh noes, they don’t have rounded corners” when their numbers continue to dwindle every day. To be frank, a lot fo the people on those older systems will thank you for NOT throwing the shiv’s in anyways – since the page will load faster without them.
Part of why most of the pages I write are USABLE all the way back to IE5, even if they aren’t as fancy looking… give new stuff to what supports new stuff, and let it gracefully degrade in everything else. It’s a significant part of why I write my entire semantic markup BEFORE I even think layout, bend that markup to my will with CSS to make the layout, THEN hang the goofy graphics and effects on it… that way should each of those enhancements along the way not be available, the page will still be proper/functional… all the way down to no images, no CSS, or both!
hey, thanks for the answers
So i got another question, since i already worked on it yestarday, i managed to get the corners using only 1 image (sprites)
and then with conditional comments i add the nessary CSS/elements to the page
What do u think of such solution?
<!--[if lt IE 9]><link href="css/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
...
...
...
<div class="box">
<!--[if lt IE 9]>
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<![endif]-->
<h1>title</h1>
rest of content
</div>
I would say just get rid of it, what you have will end up make your page larger then what it actually needs to be and harder to manage.
Like I said above don’t give IE any special treatment as you will end up spending more time making IE look the same where as if you make it look nice but so it works still you will achieve better performance and much cleaner markup.
Sent from my iPhone using Tapatalk
Hey,
yes i considered ur answers and i decided to get rid of it, i just added an alternative, in this case regular boredrs for IE8 and below…thanks for ur input 
As a rule I’m against doing anything twice… and if you’re going to go the old image route, you might as well just send that to everybody since it would work for everybody – and if you use a method like my eight corners under one roof in most cases it would be less bandwidth than the js shiv and associated markup bloat.
I see it has been mentioned though less than ideal CSS3pie works very well. I always approach a project with an insight of gracefully degradation but with so many people using < IE9 most clients will think the page is broken. It is just better to use CSS3pie than go through the whole technical discussion with them which just ends up no where anyway. A little bloat is a small price to pay to please a client even if they don’t understand not everyone is going to see the same thing and there is some extra baggage associated which they probably won’t even notice so won’t care about in the first place. Again, not ideal but neither is an unsatisfied customer. Especially when a solution exists that is so easy to implement.
Yep, me too. I make sure to enlighten the client about the advantages and disadvantages of using extra scripts to make pages appear identical identical in all browsers and telling them that the latter is not to be accomplished anyway and instead they’d get a page that has full styling in modern browsers and decent styling, minus the bells and whistles in older browsers. And I must say, I’m getting more and more clients who are fine with that.
I work in-house at a large media company so all the people I work with I have worked with before. So I know when it is worth using things such as CSS3pie to avoid looking like a fool in a meeting and when graceful degradation or progressive enhancement will be fine. That is where I’m coming from… being pretty familiar with people I work with to the point where in some cases it isn’t worth the time or day to even discuss pe or gd – “just make it work” – as they put it…
At which point I’d probably say to hell with it, and just go back to using what works identical all the way back to IE 5.5 – images… but that’s probably due to things like CSS3Pie either not doing what I want done, breaking my layouts, or making the pages as painful to scroll or use as certain CSS3 properties do Firefox and Opera. (like say… that cicada background thing)
I’ve seen a few cases where it’s even less work and less code… oh noes, two to four extra div – not that… One cute approach you can use for it is to make the appearance you want with CSS3, screencap it, and slice it and recombine it into something like “eight corners”.
I used to make an effort to support those effects in IE7 & IE8. I would spend up to 1 hour on each website adding the rounded corners and box-shadow. I used CSS3PIE - but in many cases, it broke other parts of the design, so I would completely remove it in the end. Nowadays, I don’t bother. It’s a waste of time - the client would have to specifically request it, in which case, we charge extra. Rounded corners and box-shadow are for style only, so it is acceptable to ignore older browsers that can’t support those design features. I consider this to be graceful degradation.