Or WHY the hell does my blog look different on IE8, Firefox and Chrome?
I guess it all started from a setting of blogger I left at it’s default state. After pasting some code in my site using Windows live writer extension Paste As Visual Studio Code the code looked different on IE than in Firefox/Chrome. But let me show you what I mean:
IE:
Chrome:
Firefox:
So I have decided to fix that using the tools I know, I should have just Googled the problem!
But onto the story…
I have a confession to make I haven’t really looked at any of my Blog Posts on the site since the first one I made with Windows Live Writer till I wrote the post about Writing Code in a Post.
I knew I had a problem with paragraphs but I didn’t think it was so severe.
Another confession is though I believe in this and in this, I use all of the browsers: at home I browse with Firefox (I customized it to much to move to Chrome), at work I browse with Chrome. Oh yes I also debug using IE, why? Because the debugger sometimes crushes and closes the browser and I prefer that it closes the one browser that is useless unused by me (I have a genetic disorder (my brother has the same problem) I always have too many tabs opened so when Firefox/Chrome dies its a cause for alarm).
I am not a hacker of html but I am a tinkerer. Most sites which I spent a lot of time in and I don’t like their design I just change in Firefox. It starts in using FireBug (an extension of Firefox – get it from here) and finding what I want to change (usually changing the background to black and text the white and font size). And then I open Stylish (an extension of Firefox/Chrome, can be found here) and just change the CSS of the site.
(I also use FireBug sometimes to change Javascripts runs – some sites like to have a count down, I like to change the counter variable to zero and see what happens… Sometimes it’s the difference between waiting a minute and tinkering for a minute per site).
So I opened Firefox and started tinkering with FireBug.
Use this tool:
To select the element on the screen:
We get the Html of that line:
What we can see is that we have a Tag <li> that wraps the code’s line and two <br> which are line breaks.
Clicking on the <li> tag will show us on the right side of FireBug all the CSS the <li> tag has (from inheritance or directly):
The things that pop up (at least for me) are:
margin-bottom: 0.25em;
padding: 0.25em 0;
line-height: 1.4;
Another great thing about FireBug is that you can change those values on the fly. Just edit the values (you can even add new values like margin-top: -0.7em; (hint hint)).
The biggest change I managed was in line-height, it had the greatest influence. That and margin-top made the difference. My changes:
In <li>:
line-height: 0.9;
margin-bottom: 0.0em;
margin-top: -0.7em;
padding: 0.0em 0;
In post-body:
line-height: 1;
padding: 0.0em 0;
When you have all the changes all you have to do is create a CSS from them:
.widget li{
line-height: 0.9 !important;
margin-bottom: 0.0em !important;
margin-top: -0.7em !important;
padding: 0.0em 0 !important;
}
.post-body {
line-height: 1 !important;
padding: 0.0em 0 !important;
}
And then paste that into Blogger Template Designer->Advanced->Add CSS
And Click on Apply Template:
Now that we are done lets compare results:
Text Before:
Text After:
(Maybe a bit less spacing)
Code Before:
Code After:
(That’s more like it!)
Code Before with classes:
Code After with classes:
Bugs:
1. I found the bug in Firefox:
A fix to that was adding:
.widget ul {
margin-top: 0.9em !important;
}
ul.posts li {
margin-top: 1em !important;
}
Result:
2. IE is making problems:
Fixed it by using “body:nth-of-type(1)” before each class in the CSS, according to this (especially the comments) this CSS will effect both Firefox and Chrome (but not IE!).
3. Different resolution in Chrome caused this problem:
removing margin-top: -0.7em !important; fixed it in that resolution and it still works on the wide screen 24’ screen.
4. Not really a bug – but… I didn’t like how in some cases the lines of text I had were a bit on top of each other:
So I have added:
body:nth-of-type(1) p {
line-height: 1.4;
}
(when using p tags (paragraph tags) use the original settings)
Final CSS:
body:nth-of-type(1) .widget li{
line-height: 0.9 !important;
margin-bottom: 0.0em !important;
padding: 0.0em 0 !important;
}
body:nth-of-type(1) p {
line-height: 1.4;
}
body:nth-of-type(1) .widget ul {
margin-top: 0.9em !important;
}
body:nth-of-type(1) ul.posts li {
margin-top: 1em !important;
}
body:nth-of-type(1) .post-body {
line-height: 1 !important;
padding: 0.0em 0 !important;
}
And then I wept because I found the blogger settings to fix the problem and didn’t need all the tweaking…
Resources:
Web browser hacks, Css hacks - ie, firefox, chrome, safri, Opera
Keywords: Blog, code, IE8, Firefox, Chrome, FireBug, Blogger, Spaces, line, paragraph, Stylish, CSS, Internet Explorer, bug, text, settings, line break
