473,410 Members | 1,908 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,410 software developers and data experts.

Header Size Problems

Well everyone,

Out of all the troubles and problems and such that I've been having, I decided with each one of those to just move around them or forget about trying to do what I wanted to do.

It comes down to this thing though that I didn't notice before. My site has larger text. I know the issue IE has with resizing text and all, so I use % instead of em.

But that's not my problem (I think). My problem is that the headers become larger along with the text! I had them all set to be 100%, thinking that'd fix it. However, when viewing the headers like h4 in particular, it shows the header to be very much larger than it should be.

I've been trying to figure out the percentages for each of the headers, but can't find it. Then I realized that will not fix matters because it will be relevant to the containing div which has a font of 150%.

Can anyone please tell me, is there a way to keep the headers at their normal size?

This is the css concerning sizing and all:
[HTML]
/*Main Text Area*/
.maintext {
font-size: 150%; /*Use percent instead of em, due to IE bug*/
}
.maintext h1, .maintext h2, .maintext h3, .maintext h4, .maintext h5, .maintext h6 {
font-size: 100%;
text-align: center;
}
[/HTML]

I truly appreciate the help in this, especially to those who have been helping me!

~Michael
Mar 25 '08 #1
3 1457
drhowarddrfine
7,435 Expert 4TB
You have the right idea but the implementation is wrong. To fix the IE problem, just set the body to a percentage:
body{font-size:100%}

Then you can use ems everywhere else. So, 1.5em would be equal to 150%.

If in any particular div, if it has the <body> as the parent, you could say:
this_div{ font-size:1.5em }

and that div will have, as its base size for all fonts, 150%. But if you want .maintext to be a normal size, you don't have to do anything because it will inherit its parent size of 100% which is also equal to 1em.

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example Background</title>
<style type="text/css">
body{ font-size:100% }

.maintext h1, .maintext h2, .maintext h3, .maintext h4, .maintext h5, .maintext h6 {
text-align: center;
}
.maintext2 h1, .maintext2 h2, .maintext2 h3, .maintext2 h4, .maintext2 h5, .maintext2 h6 {
font-size:1.5em;
text-align: center;
}
.maintext3 h6 {
font-size: .75em;
text-align: center;
}
</style>
</head>
<body>
<div class="maintext">
<h1>Hello</h1>
<h2>Hello</h2>
<h3>Hello</h3>
<h4>Hello</h4>
<h5>Hello</h5>
<h6>Hello</h6>
</div>

<div class="maintext2">
<h1>Hello</h1>
<h2>Hello</h2>
<h3>Hello</h3>
<h4>Hello</h4>
<h5>Hello</h5>
<h6>Hello</h6>
</div>

<div class="maintext3">
<h1>Hello</h1>
<h2>Hello</h2>
<h3>Hello</h3>
<h4>Hello</h4>
<h5>Hello</h5>
<h6>Hello</h6>
</div>
</body>
</html>[/HTML]
Mar 25 '08 #2
drhowarddrfine
7,435 Expert 4TB
The base font size of browsers is 16px. Some people like to set the body to font-size:62.5%. This then makes the base size 10px. So
1em=10px
1.2em=12px
1.4em=14px
and so on. Easier to remember.
Mar 25 '08 #3
Thanks, drhowarddrfine! I hadn't thought of the body tag . . .

You've definitely been a great help with all this. I feel bad though that a lot seems to fall on you! But, I do thank you very much for all the help!

Still continuing to learn!

~Michael
Mar 25 '08 #4

Sign in to post your reply or Sign up for a free account.

Similar topics

11
by: Steven T. Hatton | last post by:
In the past there have been lengthy discussiions regarding the role of header files in C++. People have been very adamat about header files serving as in interface to the implementation. I do...
0
by: Lokkju | last post by:
I am pretty much lost here - I am trying to create a managed c++ wrapper for this dll, so that I can use it from c#/vb.net, however, it does not conform to any standard style of coding I have seen....
1
by: swc76801 | last post by:
I desperately need help. My understanding of CSS is non-existent. I have a store http://astore.amazon.com/texasheat-20 with Amazon.com. According to the information from Amazon.com "Write your own...
5
by: =?Utf-8?B?V2ViQnVpbGRlcjQ1MQ==?= | last post by:
I have a sub in vb.net that adds extra headers to a gridview and it works very well. however, i tried to translate it to c# and i'm getting the header inserting itself over the first datarows and...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.