I haven’t been happy with the way code snippets look on my blog. Yesterday I decided to do something about it, but, which is typical me, the number of changes got a lot more than I set out for, including a WordPress upgrade and a new theme.
After a couple of minor layout and style sheet changes, I was satisfied with the new look – in Firefox that is; When I tested it in Internet Explorer 6.0, I noticed that the content of the sidebar got displaced when there were code snippets in a post.
With a little investigation, I discovered that the triggering factor of this annoying bug was the following css rule, or more precisely, the padding property.
code{
font:1.2em 'Courier New',Courier,Fixed;
display:block;
overflow:auto;
text-align:left;
margin: 10px 0 10px 0;
background: #FBF5DF;
border-top: solid 1px #EDE0B3;
border-bottom: solid 1px #EDE0B3;
padding: 5px 10px 5px 10px;
}
When I changed it and removed the right hand side padding, the problem went away.
code{
font:1.2em 'Courier New',Courier,Fixed;
display:block;
overflow:auto;
text-align:left;
margin: 10px 0 10px 0;
background: #FBF5DF;
border-top: solid 1px #EDE0B3;
border-bottom: solid 1px #EDE0B3;
padding-left: 5px;
padding-top: 10px;
padding-bottom: 10px;
}
One may wonder how an internal space property like padding could have this effect on the positioning of other objects, but then again, I’m not surprised. I can see why Internet Explorer is not the favorite browser among web designers, or among you for that matter.
Anyway, I hope you like the new looks of my blog; If you don’t, please let me know.
Cheers!