Dev Diary: ITP Day 10

Today I’m back to work on styling the basic framework - specifically the sidebars and footers. In working on that, I ran into a CSS radius bug in Safari (desktop and mobile).

With the primary header and primary content (for news articles, at least) styled, it was time to take a look at the sidebars and footers.

The sidebar contains author information - name, bio, picture and more articles by that particular author. This is basically the same as is currently displayed on the site but there may be additions / subtractions from what is there as the site develops. The sidebars are only truly sidebars on the widest, desktop version. If you are browsing the site with your window at less than 990 pixels, then the sidebar is shifted below the body content.

CSS Radius Bug

I started at the top, giving the sidebar a bit of top padding to give it some breathing room from the header. Next, I focused on the avatar / profile photo. With everything else being a bit square, I decided to use some CSS3 - specifically, the border-radius property - to create a round profile image. No problem, right? Just set the proper radius percentage and be done with it. Yeah, that’s what you’d think.

The original profile photo had 3px of padding and a subtle gray border. For some reason, in Safari, when I applied the border-radius property, instead of creating a circle it creates a rounded square. Something about the border and padding is causing the problem. When I remove the padding and border, I get a circle as I would expect. So, I could have left it without a border, but what would be the fun in that?

Offending code:

277
278
279
280
281
282
283
284
.related img {
     border: 1px solid #efefef;
     padding: 3px;
     border-radius: 100%;
     float: left;
     margin: 0 10px 10px 0;
     overflow: hidden;
}

Safari Border Radius Issue

Safari and Chrome side by side.

As you can see, on the left, Safari is creating a square with rounded corners while Chrome is properly rendering the circle. What really drives me crazy is the fact that they are both Webkit rendering engines. I would expect something like this if they were different but being the same really threw me.

Final Results and Solution

Judging from the number of questions on Stack Exchange, this problems seems to flummox a lot of people. Here are a few solutions and the full list of questions related to this problem.

277
278
279
280
281
282
283
284
285
286
287
288
289
.profile_photo {
    background-color: #fff;
    border: 2px solid #efefef;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
    border-radius: 100%;
    float: left;
    height: 75px;
    margin-top: 1px;
    margin-right: 10px;
    overflow: hidden;
    text-align: center;
    width: 75px;
}

Final Profile Image

Safari rendering properly.

In addition to the profile photo, I styled the rest of the sidebar giving some padding to the list items there. I still need to style the sidebar for smaller window widths and screens.

Blockquote

A block quote is a quote that is pulled from the body of the article to give special emphasis or to summarize the content of the article. I gave the blockquote a lot of space - padding and margin - and floated it to the right to allow the text to wrap around it, contrasted the color to give it a bit more emphasis and finally, used the same bold typeface that is used for the site logo. I also decided to make the width flexible - 50% of the width of the body content container - to allow it to grow and shrink based on the window size.

The styles below are for the widest browser window and will need to be restyled for smaller windows - specifically mobile devices where the float doesn’t really make sense.

233
234
235
236
237
238
239
240
241
 
.body_content blockquote {
     padding: 20px 10px;
     margin: 20px;
     width: 50%;
     float: right;
     font-family: "facitweb-1","facitweb-2",sans-serif;
     color: #a90329;
}

Blockquote Styling

News article blockquote styling

I have also created a Flickr Photo Set for all of the screen captures that I take during the InThePanhandle.com redesign. One thing I always end up regretting is that I didn’t capture the development process. Between this developer diary and the Flickr set, I shouldn’t have that problem with this project.

⇠ Next Article Previous Article ⇢

About The Author

G. Brad Hopkins's avatar
  • G. Brad Hopkins
  • About Me: I bought my first computer - an Apple Performa 6320 - when I was in college and have been building websites ever since. These days I spend most of my time writing code and helping to bring interesting projects to life.
  • @gbradhopkins