Welcome to Geeklog Saturday, September 21 2019 @ 06:58 am EDT

Geeklog Forums

Noveau theme weird issue (GLfusion)


Status: offline

nicholas

Forum User
Junior
Registered: 20/10/07
Posts: 16
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

nicholas

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

Status: offline

mevans

Forum User
Full Member
Registered: 08/02/04
Posts: 393
Location:Texas
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

Nicholas

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.

All times are EDT. The time is now 06:58 am.

  • Normal Topic
  • Sticky Topic
  • Locked Topic
  • New Post
  • Sticky Topic W/ New Post
  • Locked Topic W/ New Post
  •  View Anonymous Posts
  •  Able to post
  •  Filtered HTML Allowed
  •  Censored Content