Hey guys! 
I know you're all thinking, "What?! Jona is asking a question!?" But yeah, the greatest minds always have questions.
Anywho, I was wonderin' if anyone could help me out with a li'l problem I've got here. You know how in HTML, when they use (barf) tables for layout, erhem, they have images for rounded borders? I'd like to do that. I know I can use CSS to make rounded edges, but it comes out square in IE, and although IE is not square (socially), it's the most popular browser so I'd like to use images for it. But absolute-positioning of the images isn't going to work, and putting IMG tags inside of each DIV and using margins to move it ontop of the border won't work either. I even tried putting four backrounds on there! (Just goes to show you I've been working on this for about four hours--although not this part in particular.)
I've searched all through the Web, but couldn't find anything on this. Every CSS-designed site either uses images or has square borders. I like things to be well-rounded (like me).
So, if any kind soul out there would be willing to gimme a boost, I'd appreciate it.
[J]onaHey Jona, welcome back. Haven't seen you around here for a while.
As for your question, check this thread (<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=22344">http://forums.webdeveloper.com/showthre ... adid=22344</a><!-- m -->) for an answer. It is possible with CSS, but only Mozilla supports it as of now (hence the vendor-specific prefix on the property name). You may also find this (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/customcorners/">http://www.alistapart.com/articles/customcorners/</a><!-- m -->) A List Apart article helpful, but note that it doesn't use pure CSS — it uses images (which I realize you don't want to use) to provide the rounded border. The only real problem with this solution is that if you try to make the font-size bigger it will appear to jump out of the box, so using CSS would of course be the best solution, but it just isn't supported very well yet.Hey Fredmv, I guess you're a lot like me. I usually don't read all of the posts completely either.
Really, I mentioned that I know it's possible to be done in CSS alone, but I want to use images and CSS together, rather than images and tables or just CSS alone. THanks for the ALA link, though, I'll look and see what I can find in there.
[J]onaOops. I completely missed where you said that. Sorry about that.
But still, as I said before, the browser support just isn't there. Only Mozilla supports what you want to do and I guess images along with CSS will be your only cross-browser solution.Yep. That article works all right. It's going to be more work than I want to do, lol, but it will suffice. Thanks a million!
*Goes off ranting about how he hates the fact that there isn't some kind of background-top-right, background-topleft, etc. properties in CSS.*
[J]onaOriginally posted by Jona "What?! Jona is asking a question!?That's exactly what I was thinking.
Originally posted by Jona But yeah, the greatest minds always have questions.That's not quite what I was thinking.
Anyway, take a look at my newest development (<!-- m --><a class="postlink" href="http://www.fsg-uk.com/">http://www.fsg-uk.com/</a><!-- m -->), on the side-bars I have used rounded corners. I have acheived this effect by simply using background images (CSS rollovers) and no border. (IE always messes up borders anyway, probably because it wouldn't know what a box model was if one hit it in the face.)
There is one image I have used though, purely because I couldn't get it to work otherwise (in any browser). That's at the bottom of the left hand side-bar. I suppose you could just replace the image with a div and have the image in there, but I didn't.
Has this helped any? I hope so.You're quite welcome. As for your rant, I think background-position (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS1#background-position">http://www.w3.org/TR/REC-CSS1#background-position</a><!-- m -->) is what you're looking for.
Originally posted by fredmv
You're quite welcome. As for your rant, I think background-position (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS1#background-position">http://www.w3.org/TR/REC-CSS1#background-position</a><!-- m -->) is what you're looking for.
That... doesn't... work...
Lavalamp, you're using like just one image, though. I'm trying to make them expand like I want and everything. I think this ALA article will do nicely... I'm hoping it will.
[J]onaWhat do you mean "expand like you want"? I'm not sure that I know what you want anymore.I skimmed through the ALA article (see fred's link), and looked at their ending example--font sizes aren't going to be a big issue with their method.
Thanks for your help, though!
[J]onaOh I see what you wanted now, different images for each corner. I took a look at their example, pretty snazzy design even if it is a demonstration.
Maybe I should pay more attention to ALA, it looks like they have a pretty good site going.Just so all you crazy people know, I got it to work.
I'm actually just making a kind of "site" for the fun of it, lol. I came across this and wanted to know how to do it. I am so bookmarking that ALA article.
I'll post here when the test-version of the site is up and running. Thanks again, guys!
[J]onaOkay! I put it online for all of you who were soooo eager to see my masterfull "I put together in just five hours" site!
<!-- m --><a class="postlink" href="http://www.cmm.jedihost.net/tfk/">http://www.cmm.jedihost.net/tfk/</a><!-- m --> is the URL. Clickie, it's pwetty!
Err... enough ranting. Happy hunting, guys!
BTW, spread the word... Photoshop RULLZ!
[J]onaOriginally posted by lavalamp
Maybe I should pay more attention to ALA...Definitly.
Jona, this might also help you (or others) out: <!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=15922#post88367Originally">http://forums.webdeveloper.com/showthre ... Originally</a><!-- m --> posted by pyro
]Jone, this might also help you (or others) out: <!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=15922#post88367">http://forums.webdeveloper.com/showthre ... #post88367</a><!-- m -->
Thanks for the link! But um... Jone!?
Okay, I really know that was a typo. I can get over it. I can, honest!
[J]onaCripes, sorry dude... Edited back to normal...lol. It's okay. Whatcha' think of my... err... "site"?
[J]onaIt's a little bit more simple, with colors a little more bold, than I link to go...Crud! I just looked at the thing in IE... Not good, the navigation doesn't show up. Grr...
And, I didn't get that reply, pyro. Sorry.
[J]onaI figured out what the problem was and everything. So I put the menu on the other side. Tell me whatcha' think, iffin' ya beez wantin' to.
Well anyway, I'm out for tonight. Peeshie out, guys! Have a good one.
[J]onaIn Moz FB 0.7, when you first roll over the "Home" link, all the links drop down a line.Paul Jr, do you know what would cause this problem?
[J]onaOriginally posted by Jona
Paul Jr, do you know what would cause this problem?
[J]ona
Hmmm, at a quick glance, I don't see anything...
. But my knowledge on such things is a bit limited .Hmm, it happens in IE as well.
[J]ona
I know you're all thinking, "What?! Jona is asking a question!?" But yeah, the greatest minds always have questions. Anywho, I was wonderin' if anyone could help me out with a li'l problem I've got here. You know how in HTML, when they use (barf) tables for layout, erhem, they have images for rounded borders? I'd like to do that. I know I can use CSS to make rounded edges, but it comes out square in IE, and although IE is not square (socially), it's the most popular browser so I'd like to use images for it. But absolute-positioning of the images isn't going to work, and putting IMG tags inside of each DIV and using margins to move it ontop of the border won't work either. I even tried putting four backrounds on there! (Just goes to show you I've been working on this for about four hours--although not this part in particular.)
I've searched all through the Web, but couldn't find anything on this. Every CSS-designed site either uses images or has square borders. I like things to be well-rounded (like me).
So, if any kind soul out there would be willing to gimme a boost, I'd appreciate it.
[J]onaHey Jona, welcome back. Haven't seen you around here for a while.
As for your question, check this thread (<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=22344">http://forums.webdeveloper.com/showthre ... adid=22344</a><!-- m -->) for an answer. It is possible with CSS, but only Mozilla supports it as of now (hence the vendor-specific prefix on the property name). You may also find this (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/customcorners/">http://www.alistapart.com/articles/customcorners/</a><!-- m -->) A List Apart article helpful, but note that it doesn't use pure CSS — it uses images (which I realize you don't want to use) to provide the rounded border. The only real problem with this solution is that if you try to make the font-size bigger it will appear to jump out of the box, so using CSS would of course be the best solution, but it just isn't supported very well yet.Hey Fredmv, I guess you're a lot like me. I usually don't read all of the posts completely either.
Really, I mentioned that I know it's possible to be done in CSS alone, but I want to use images and CSS together, rather than images and tables or just CSS alone. THanks for the ALA link, though, I'll look and see what I can find in there.
[J]onaOops. I completely missed where you said that. Sorry about that.
But still, as I said before, the browser support just isn't there. Only Mozilla supports what you want to do and I guess images along with CSS will be your only cross-browser solution.Yep. That article works all right. It's going to be more work than I want to do, lol, but it will suffice. Thanks a million!
*Goes off ranting about how he hates the fact that there isn't some kind of background-top-right, background-topleft, etc. properties in CSS.*
[J]onaOriginally posted by Jona "What?! Jona is asking a question!?That's exactly what I was thinking.
Originally posted by Jona But yeah, the greatest minds always have questions.That's not quite what I was thinking.
Anyway, take a look at my newest development (<!-- m --><a class="postlink" href="http://www.fsg-uk.com/">http://www.fsg-uk.com/</a><!-- m -->), on the side-bars I have used rounded corners. I have acheived this effect by simply using background images (CSS rollovers
) and no border. (IE always messes up borders anyway, probably because it wouldn't know what a box model was if one hit it in the face.)There is one image I have used though, purely because I couldn't get it to work otherwise (in any browser). That's at the bottom of the left hand side-bar. I suppose you could just replace the image with a div and have the image in there, but I didn't.
Has this helped any? I hope so.You're quite welcome. As for your rant, I think background-position (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS1#background-position">http://www.w3.org/TR/REC-CSS1#background-position</a><!-- m -->) is what you're looking for.
Originally posted by fredmv You're quite welcome. As for your rant, I think background-position (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS1#background-position">http://www.w3.org/TR/REC-CSS1#background-position</a><!-- m -->) is what you're looking for.
That... doesn't... work...
Lavalamp, you're using like just one image, though. I'm trying to make them expand like I want and everything. I think this ALA article will do nicely... I'm hoping it will.
[J]onaWhat do you mean "expand like you want"? I'm not sure that I know what you want anymore.I skimmed through the ALA article (see fred's link), and looked at their ending example--font sizes aren't going to be a big issue with their method.
Thanks for your help, though!
[J]onaOh I see what you wanted now, different images for each corner. I took a look at their example, pretty snazzy design even if it is a demonstration.
Maybe I should pay more attention to ALA, it looks like they have a pretty good site going.Just so all you crazy people know, I got it to work.
I'm actually just making a kind of "site" for the fun of it, lol. I came across this and wanted to know how to do it. I am so bookmarking that ALA article.
I'll post here when the test-version of the site is up and running. Thanks again, guys!
[J]onaOkay! I put it online for all of you who were soooo eager to see my masterfull "I put together in just five hours" site!
<!-- m --><a class="postlink" href="http://www.cmm.jedihost.net/tfk/">http://www.cmm.jedihost.net/tfk/</a><!-- m --> is the URL. Clickie, it's pwetty!
Err... enough ranting. Happy hunting, guys!
BTW, spread the word... Photoshop RULLZ!
[J]onaOriginally posted by lavalamp
Maybe I should pay more attention to ALA...Definitly.
Jona, this might also help you (or others) out: <!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=15922#post88367Originally">http://forums.webdeveloper.com/showthre ... Originally</a><!-- m --> posted by pyro
]Jone, this might also help you (or others) out: <!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=15922#post88367">http://forums.webdeveloper.com/showthre ... #post88367</a><!-- m -->
Thanks for the link! But um... Jone!?
Okay, I really know that was a typo. I can get over it. I can, honest!
[J]onaCripes, sorry dude...
Edited back to normal...lol. It's okay. Whatcha' think of my... err... "site"? [J]onaIt's a little bit more simple, with colors a little more bold, than I link to go...
Crud! I just looked at the thing in IE... Not good, the navigation doesn't show up. Grr...And, I didn't get that reply, pyro. Sorry.
[J]onaI figured out what the problem was and everything. So I put the menu on the other side. Tell me whatcha' think, iffin' ya beez wantin' to.
Well anyway, I'm out for tonight. Peeshie out, guys! Have a good one.
[J]onaIn Moz FB 0.7, when you first roll over the "Home" link, all the links drop down a line.Paul Jr, do you know what would cause this problem?
[J]onaOriginally posted by Jona
Paul Jr, do you know what would cause this problem?
[J]ona
Hmmm, at a quick glance, I don't see anything...
. But my knowledge on such things is a bit limited .Hmm, it happens in IE as well.[J]ona