Rounded corners

[Bogdan]

Hello everybody!
I have a problem with a rounded corner box.It is exactly like first from this link : http://css-tricks.com/examples/RoundedCorners/ . The problem is that in IE a line appears just under the box (the background from the middle of the box) .My question is that I can in anyway to solve this .

[jamygolden]

I think we will need more information, such as the html and css, or an example page.

Add this to the top of your css and see if it makes a difference:

Code:

* { margin: 0; padding: 0; }

[Bogdan]

I have already put *{margin:0; padding:0}. My box is exactly the same with first from this link http://css-tricks.com/examples/RoundedCorners/ .Also if you open that url in IE you will what I am talking about.

[virtual]

You can fix it by adding this line of code to the css

Code:

.box-one img {margin-bottom: -5px;}

But for the life of me, I couldn’t figure out why :? Anyone know – Chris????

[Bogdan]

Yeah, I have noticed that if I put margi-bottom:-5px I solve that ,but I really want to find out why does it happens. :|

[jamygolden]

Try removing

Code:

.box-one { margin:10px 0; }

Personally, I think that is probably the worst way of rounding corners. Why don’t you try using example-two instead? It still uses images, therefore the box will be rounded in all browsers, but you have much more development freedom – And you won’t experience the problems you are having now.

[Bogdan]

You’re right.I have already changed the way I made the box, but I am steel curious why does it happens. :) :?:

[jamygolden]

Have a look at this in your modern browser, and then try it in your IE (I’m guessing you are using IE 7):
http://acid3.acidtests.org/
IE 6, 7 and even 8 barely get anywhere.
Now have a look at these CSS 2.1 browser selector and declaration compatibility results:
http://www.quirksmode.org/css/contents.html
As you can see, IE 6 and 7 barely support any of these common CSS selectors.

This little rounded-corner annoyance is happening because IE 6 and 7 don’t render websites the way they should be doing so.

[Author]

Posts