JasonDavis Posted April 7, 2011 Report Share Posted April 7, 2011 Hi all, please reference my site for my issue: http://www.jasonrobertdavis.net/cc/ I used this site ( http://www.roundedcornr.com/ ) to generate some curved borders for myself, and realized in the process I'm missing something fundamental about CSS classes and DIVs. The HTML and CSS works properly, but I'm not satisfied to use someone else's code until I understand why this works. I cleaned it all up and still didn't get why it works. Questions: The HTML code only has DIVs for roundedcornr_top, roundedcornr_bottom, and roundedcornr_content. How on earth are the rest of the curved borders even showing up? After the roundedcornr_bottom DIV in the HTML code, there is a blank DIV section. If I remove that, the bottom right corner vanishes. Why? If nothing is in the DIV, how is it even doing anything? In the CSS code, there are two classes that have the word DIV after them (.roundedcornr_top div and .roundedcornr_bottom div). What is that all about? What does using the word DIV in a class definition in CSS mean? Thanks all for any help. Jason Quote Link to comment Share on other sites More sharing options...
pb1uk Posted April 7, 2011 Report Share Posted April 7, 2011 If i were you i wouldn't use images to create rounded corners for your div. Have a read up about css3. Most browsers support it now. I know firefox and chrome do, am pretty sure Safari does and IE 9 supports some css3, am sure it does border radius. To get you started my mate has created a site that will generate code for you, and trust me it's a lot easier to understand than using images! The link is here There is also ways you can set your css so that if the browsers doesn't support css3 then use images, but i'd not bother messing around with that and just use css3. In my view so what if some people using an old version of IE see square corners?!?! Serves that right for using a rubbish browser Quote Link to comment Share on other sites More sharing options...
falkencreative Posted April 7, 2011 Report Share Posted April 7, 2011 1) There are background images for 2 of the corners on roundedcrnr_top and roundedcornr_bottom, and there are also two background images on the div within those two rounded corner divs. 2) There is nothing in those divs, but they have a background image in them that creates a corner. 3) Using ".roundedcornr_top div" just targets any div elements within .roundedcornr_top. It's not part of the class, but referring to a div element within something that has the correct class. I personally would be hesitant to use CSS3 for rounded corners unless you don't mind that a majority of your audience who uses IE won't be able to see them (and would see square corners instead. If you need to keep it consistent, stick to your current method for now. According to http://www.w3schools.com/browsers/browsers_explorer.asp, only 1.1% of users are currently using IE9. That means that 98.9% of users (anyone still using IE6-8) can't see CSS3 based rounded corners. I'm sure that number will change over time, but just keep that in mind. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted April 7, 2011 Report Share Posted April 7, 2011 The fact that ie9 cannot work on an XP was the deciding factor to not use css3 for me. Ie6 - 8 will be around untill XP dies and that is prob 20 years off. If it was only untill all upgraded to ie9 I would have gone css3 for my rounded corners. But I went images. Quote Link to comment Share on other sites More sharing options...
JasonDavis Posted April 7, 2011 Author Report Share Posted April 7, 2011 Yea, I'm hesitant to use CSS3 to do this because of the legacy IE users. I've done it before, but this is a redesign of an existing site that uses corners. The corners were previously accomplished with tables, so I need to trash that method. Ben, thanks for the clarity on 2 and 3. So essentially, with that, we are applying TWO background images in different positions to the same DIV, right? Kind of a sneaky workaround to do that? Quote Link to comment Share on other sites More sharing options...
JasonDavis Posted April 8, 2011 Author Report Share Posted April 8, 2011 (edited) I was still confusing myself on this issue, so I did some research and was able to find a corner border solution that I can understand. However, the site is not rendering correctly in IE. It looks fine in Chrome and Firefox. Any ideas? Site: www.jasonrobertdavis.net/cc Edited April 8, 2011 by JasonDavis Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted April 8, 2011 Report Share Posted April 8, 2011 (edited) Hello, Here are your two best options. If css3 use http://css3pie.com/. If images you use 3 images 4 dives. Images are top, mid, bot.jpg. Top div holds top.jpg, mid holds mid.jpg with repeat-y, and bot div holds bot.jpg and nested in the the middle is content div which holds the padding. This is a fixed width rounded corner that will extend length wise as much as needed. If you need a flexible width box then you need about 8 images/divs. Edited April 8, 2011 by Eric Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.