Subject: Noveau theme weird issue (GLfusion)

Posted on: 26/06/08 06:23am
By: nicholas

Hi,

I have been testing GLfusion and have struggled to figure something werid out for days myself, could someone pls pls advise me? Really appreciate it.

The default GLfusion style.css has body font size set to 73%, if I reduce it to anything less than 73%, my right blocks shifts to below the footer? cant figure why? Does anyone observe same symptoms?

Thanks
Nicholas

Re: Noveau theme weird issue (GLfusion)

Posted on: 26/06/08 06:29am
By: Anonymous

oh forgot to mention, it happens only in firefox, not IE???

Re: Noveau theme weird issue (GLfusion)

Posted on: 26/06/08 09:19am
By: mevans

Nicholas,

The joys of CSS. Nouveau used em measurements to determine the width of the right and left navigation areas. The em sizes are based on the initial font size set in the body tag. Using em measurements makes the display a bit more flexible, if someone wants to increase their default browser font, things scale much better.

Fixing the issue isn't to difficult, just a little cumbersome.

First, you need to calculate your baseline, so if you want to use a font size of 60%, then calculate the base px font size:

16 * .60 = 9.6px - this is the base font size

Now you need to recalculate the em sizes for #gl_content, #gl_content-full, #gl_content-wide-left, #gl_content_wide_right, #gl_navigation, #gl_extra.

Using this formula, you recalculate the sizes

1 / parent_font(px) * desired pixels = em size

So, for #gl_content, the right margin is currently 15.79em, based on 192 pixels wide. So the new size in this example is:

1 / 9.6px * 192px = 20em

I use this online em calculator to make things much easier. All you'll need to do is calculate your base size (the first formula above), then type in the desired pixel size and it will give you the proper em size.

Here are the pixel widths that Nouveau uses for the layout styles:

PHP Formatted Code

#gl_content {
background:#FFF;
height:1%;
margin:0 192px;
}
#gl_content-full {
background:#FFF;
height:1%;
margin:0 10px;
}
#gl_content-wide-left {
background:#FFF;
height:1%;
margin:0 10px 0 192px;
}
#gl_content-wide-right {
background:#FFF;
height:1%;
margin:0 192px 0 10px;
}
#gl_navigation {
background:#F7F7F7;
border:1px solid #CCC;
float:left;
margin-left:-100%;
width:180px;
height:1%;
}
#gl_extra {
background:#F7F7F7;
border:1px solid #CCC;
float:left;
margin-left:-182px;
width:180px;
height:1%;
z-index:10;
}
 


Clear as mud, right? Of course you can simply not use em measurements and change your style.css to use the actual pixel width as shown above, that works as well, just doesn't scale as well if folks increase their font size in the browser.

Thanks!
Mark

Re: Noveau theme weird issue (GLfusion)

Posted on: 26/06/08 10:39am
By: Anonymous

Wow! I love your reply, so concise, really appreciate it. I will follow step by step and give it a shot. Thanks so much for your kind advise.

Geeklog - Forum
https://www.geeklog.net/forum/viewtopic.php?showtopic=83449