border-radius in safari - am I going mad! - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

border-radius in safari - am I going mad!

greencode

5:31 pm on Dec 20, 2012 (gmt 0)

Am I going mad here!?

When you view the following code in Safari (Mac) the rounded corners sort of bleed off the right side. This only happens on the "square" div and not the "button" div.

Any ideas or help would be greatly appreciated.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
 <title></title>
<style type="text/css">

.button {
display: inline-block;
-webkit-border-radius: 4px; 
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #efefef;
border: 1px solid #c2c2c2;
padding: 20px;
}

.square {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
height: 300px;
width: 300px;
background-color: #efefef;
border: 1px solid #c2c2c2;
}

</style> 
</head>
<body>
<div class="square">Area</div>
<div class="button">Button</div>
</body>
</html>

lucy24

12:09 am on Dec 21, 2012 (gmt 0)

I'm not seeing it. But, uh... HTML what?

Is that your entire code? That is, of course it isn't the whole page. But when you strip your code down to the part you pasted in, do you still get the effect? There may be something else involved. I know I've had issues in the past where some versions of Safari disagreed at the one-pixel level. (That was fuzzy, but it's as much as I can remember.)

I'm in 10.6.8, Safari 5.1.7. But as long as I had the file open, I-- stop me if you've heard this one-- tried it in other browsers. FF 15.0.1, Camino, Chrome 20.0.{buncha numbers}, Opera 12.0-something, SubEthaEdit www preview (webkit). I didn't see any issues anywhere.

I changed the border to 6 px, black to make potential problems more visible.

Variations that made no difference:
-- border 2px thick (this is where you sometimes see unwanted hiccups)
-- 4.01 DTD
-- no DTD at all
-- set both divs to inline-block.
-- set a small margin on body (I always do this by default to make text more visible)
-- shift all shared properties to a general "div" styling

Maybe I don't understand what you mean by "bleed off".

greencode

12:02 pm on Dec 21, 2012 (gmt 0)

Really weird this. I've checked on my Mac Mini and it displays incorrectly using Safari 6.0.2 but on my MacBook Pro it displays correctly. If you take a look at this image you'll see what I'm seeing…

http://i746.photobucket.com/albums/xx104/greencode/safar-border-radius-issue_zpsf68c79f8.png

drhowarddrfine

6:33 pm on Dec 21, 2012 (gmt 0)

Wow. A 3.2 doctype! I've never seen one of those. I heard about them back in olden times but never saw one in practice.

greencode

7:15 pm on Dec 21, 2012 (gmt 0)

I just threw that together. Wasn't really thinking about getting the Doc type correct to the latest version! It's still the same with any doc type.

lucy24

8:25 pm on Dec 21, 2012 (gmt 0)

I heard about them back in olden times but never saw one in practice.

You almost certainly see them all the time but don't know it ;) Next time you run into an auto-generated directory-index page, check the source. It will probably be html 3.something. (MAMP uses 3.2 Final. I just checked. Final, wow, that's decisive.)

:: detour to image ::

Mm, interesting. Does it continue to do it if you fiddle with the browser window? Not the code, the physical window: resizing or simply moving it around a bit. The Safari version does seem a bit skewed, as if the curves are 4px one way and 3 px the other.

It helps to put everything into a distinctive color-- including the kinds of horrible contrasts you would never use on a real www page-- to make it easier to see what's overwriting what. I notice that the Chrome version is also a few pixels to the right of the Safari version, though the object sizes and spacing are otherwise exactly the same. Is there a reason for this? If not, it's another thing to deal with: I make it an extra five px offset.

greencode

8:47 pm on Dec 21, 2012 (gmt 0)

I'm going to have a little bit more of a look at this after Christmas so I'll report back.

drhowarddrfine

11:52 pm on Dec 21, 2012 (gmt 0)

See them all the time? I can't imagine any site I visit would stoop that low. It was replaced December 1997.

A quick Google found a statement that said that doctype has limited support for stylesheets.

greencode

11:58 pm on Dec 21, 2012 (gmt 0)

There we go then…


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">

.button {
display: inline-block;
-webkit-border-radius: 4px; 
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #efefef;
border: 1px solid #c2c2c2;
padding: 20px;
}

.square {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
height: 300px;
width: 300px;
background-color: #efefef;
border: 1px solid #c2c2c2;
}

</style> 
</head>
<body>
<div class="square">Area</div>
<div class="button">Button</div>
</body>
</html>

drhowarddrfine

1:23 am on Dec 22, 2012 (gmt 0)

Here is the current recommended HTML 4.01 doctype since 1999:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

but already most of us are using the latest which is simply: <!DOCTYPE html>

I don't have a Mac so I can only test on an iPad with Safari and I don't see the problem.