homepage Welcome to WebmasterWorld Guest from 54.226.180.223
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
border-radius in safari - am I going mad!
greencode




msg:4529979
 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




msg:4530078
 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




msg:4530145
 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…

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

drhowarddrfine




msg:4530213
 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




msg:4530227
 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




msg:4530258
 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




msg:4530268
 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




msg:4530319
 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




msg:4530321
 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




msg:4530328
 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved