[EN] CSS Freak - Fixing Regulus Template 28 June 2006
Posted by alwi in : berbagi ilmu , trackbackAs you can see, this blog is using template Regulus by Ben @ Binary Moon. I really like this template because it provides some customization and personalization. After all, this one is the closest to what I have in mind to present the look-and-feel for my blog.
However, there are some problems with the rendering of this template in some browsers. If you view this blog –before makeover– with Firefox 1.5, it renders and displayed perfectly. But if you are using Opera 7.5 and MSIE 7.0 you will see some sections is not displayed the way we’d expect.
Please see screen-shots below of how they looks
| Problems in Opera 7.5 | ||
 |
 |
 |
| Problems in MSIE 7.0 | ||
 |
 |
|
I took some time to observe the problem and I came up with some solutions I describe below.
Fixing Page Navigation in Opera 7.5
As you can see in the picture, page navigation buttons are not displayed properly. The buttons should be aligned at the bottom of heading area. The buttons are actually a regular list with <UL> and <LI> tags. This problem occurs because Opera didn’t seem to recognize width of the container where we placed the buttons/list.
To fix this problem, I simply add a fixed width value in the style-sheet that controls how the buttons displayed. Here is the CSS code that fixed the problem.
ul#nav {
position:absolute;
bottom:0; left:0;
margin:0 0 0 16px;
list-style-type:none;
/* this line below to fix Opera Navigation problem */
width: 700px;
}
Missing Text/Container in Opera
I didn’t really notice this at the first time, but while I was playing with this template I had to test and compare the results in several browsers. Then I noticed that some texts are missing in Opera. Aparently those texts are missing because Opera is not displaying the containers. Please see the marked area on the pictures.
Okay, then I look at the style-sheet and I see some style-sheet definitions that I didn’t understand. I didn’t try to find out what those definitions for, I just want my blog to display properly in at least these 3 browsers I am familiar with. Below the stylesheet definitions, may be someone can explain me later what are these definitions.
ul#feeds {
…
_height:1%;
…
}
#pageNav {
…
_height:1%;
…
}
I simply removed those definitions and replaced with fixed height as follows
ul#feeds {
…
height:30px;
…
}
#pageNav {
…
height:34px;
…
}
Strange Lists Rendering in MSIE 7.0
A very strange abnormal thing in the way MSIE 7.0 renders the list in this template. Take a look at these pictures. Notice that in sidebar, some lists had extra spaces between items. But if you can see the other list –above ‘Archive’– doesn’t have that extra spaces.
It took me a few hours trying to fix this, and aparently I’m too dumb in this CSS thing. I couldn’t find what was wrong with the style-sheet. All the lists in the sidebar are sharing the same CSS definition and why on earth they aren’t rendered the same way.
In the frustration, I came to think "Okay, lets take a look at the HTML code, see if any difference in those lists…". And there I found out that lists which properly displayed had extra whitespaces in the HTML code. As illustration, please take a look at the code below
<div id="sidebar">
<UL>
–below an illustration of HTML code in the list
–that not rendered correctly
<LI … >Archives</LI>
<UL>
<LI><A … >May 2006</A></LI>
<LI><A … >April 2006</A></LI>
</UL>
–below an illustration of HTML code in the list
–that rendered correctly, note an extra ’space’
–before </A> tag
<LI … >Proper List</LI>
<UL>
<LI><A … >Peta Jajan Djokdja </A></LI>
<LI><A … >Peta Jajan Bogor </A></LI>
</UL>
</UL>
</div>
So, in order to workaround this problem I had to go into the guts of PHP codes and add extra space before any closing </A> tags inside a list.
Strange huh..?? Only in MSIE 
Download Regulus Template
If you like this template, you can download at the author’s website. Go to the address below and find a download link there. You can also read users comment and discussion regarding Regulus template.
http://www.binarymoon.co.uk/2006/04/regulus-wordpress-theme-version-212/
Comments»
[…] There have been a couple of other changes. A few css fixes thanks to Alwi and the inclusion of support for the gravatar plugin which you can grab from gravatar.com. […]