Welcome to Geeklog, Anonymous Sunday, December 01 2024 @ 11:59 am EST
Geeklog Forums
Noveau theme weird issue (GLfusion)
Status: offline
nicholas
Forum User
Junior
Registered: 10/20/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
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
20
19
Quote
nicholas
Anonymous
oh forgot to mention, it happens only in firefox, not IE???
22
14
Quote
Status: offline
mevans
Forum User
Full Member
Registered: 02/08/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:
#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
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:
Text 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
20
16
Quote
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.
23
21
Quote
All times are EST. The time is now 11:59 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