Home > blogging, web-design > New looks and stuff

New looks and stuff

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.

Display Bug in IE 6

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!

Categories: blogging, web-design Tags:
  1. January 23rd, 2008 at 13:22 | #1

    I have also run into issues with displaying code and since I run a site that compares code it was a big problem. I ended up using a python script called pygments:

    http://pygments.org/

    I actually use the compiled exe since I use Rails for that particular site.

    Another one that will probably be more attractive to WordPress users is syntaxhighlighter. It’s all javascript and thus will be easier with various hosting services.

    http://code.google.com/p/syntaxhighlighter/

    …Michael…

    • January 23rd, 2008 at 14:30 | #2

      Thank you Michael!

      I’ll give the syntaxhighlighter a close look.

      Btw, I’ve seen your language comparison site and I like it.

  2. Javi
    January 23rd, 2008 at 14:09 | #3

    I used to use the Firefox, it’s nice, but now I wouldn’t change my dear Opera… in my opinion it’s the best and safest navigator.

    Cheers,
    Javi

    P.S. I like the new theme.

    • January 23rd, 2008 at 14:47 | #4

      And it’s Norwegian 🙂 I too like what I’ve seen of Opera, and I might switch to it one day.

  1. No trackbacks yet.