By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,487 Members | 1,074 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,487 IT Pros & Developers. It's quick & easy.

font-size with % problem

P: n/a
Hi

I have what seems to be a simple problem but i can't figure it out. I
need to make a header real big so i used the font-size with % and it
gets my header to be the size i want, but right under it i want a
<HR>.
It all works fine in I.E. 6.0 and Opera but not in Mozilla or of
course N.N.
Run the code below in I.E. and then in either Mozilla or N.N. and you
will see my <HR> being way too low below the "Paragraph" in Mozilla or
N.N..
I was practising positionning elements using margin, padding and float
only (And avoiding using position: absolute for a change) but i can't
get that to work.
The fix will have to work in all 4 major browsers listed above.

<html>
<head>
</head>
<body>
<p style="font-size: 700%">
paragraph </p>
<HR>
<p>
This is a paragraph typed for a test.
</p>
</body>
</html>

Thanks to all

Patrick
Jul 20 '05 #1
Share this Question
Share on Google+
11 Replies


P: n/a

"Patrick" <va******@netzero.net> wrote in message
news:a3**************************@posting.google.c om...
Hi Run the code below in I.E. and then in either Mozilla or N.N. and you
will see my <HR> being way too low below the "Paragraph" in Mozilla or
N.N..


<p style="font-size: 700%;margin-bottom:0">
paragraph </p>

That should take care of it. Set the margin to a non zero value if you think
it's to close.

Regards,
Jim
Jul 20 '05 #2

P: n/a

"Jim Roberts" <jr******@msn.com> wrote in message
<p style="font-size: 700%;margin-bottom:0">
paragraph </p>

Change that to 'margin:0'. I tried both but posted the wrong fix.

Regards,
Jim


Jul 20 '05 #3

P: n/a
va******@netzero.net (Patrick) wrote:
need to make a header real big so i used the font-size with % and it
gets my header to be the size i want, but right under it i want a
<HR>.
It all works fine in I.E. 6.0 and Opera but not in Mozilla or of
course N.N.
Run the code below in I.E. and then in either Mozilla or N.N. and you
will see my <HR> being way too low below the "Paragraph" in Mozilla or
N.N..

<html>
<head>
</head>
<body>
<p style="font-size: 700%">
paragraph </p>
<HR>
<p>
This is a paragraph typed for a test.
</p>
</body>
</html>


I'd be interested to know what font type and size you have as default,
because I was doing a similar thing a few days ago and in Opera 7.23
the font-size "maxed out" at just over 500% and wouldn't get any
bigger.

It wasn't a problem with the font itelf, I could make it much larger
by specifying px values instead of %.

Oh, yeah - it's the margin being 700% bigger, BTW. By now you've
already seen other responses saying that, no doubt.

--
Karl Smith.
Jul 20 '05 #4

P: n/a
On 8 Apr 2004 16:05:31 -0700, Patrick <va******@netzero.net> wrote:
Hi

I have what seems to be a simple problem but i can't figure it out. I
need to make a header real big so i used the font-size with % and it
gets my header to be the size i want, but right under it i want a
<HR>.


Why not use <h1> or similar markup instead, if it is a heading?
Jul 20 '05 #5

P: n/a
On 8 Apr 2004 16:05:31 -0700, Patrick <va******@netzero.net> wrote:
Hi

I have what seems to be a simple problem but i can't figure it out. I
need to make a header real big so i used the font-size with % and it
gets my header to be the size i want, but right under it i want a
<HR>.


Why not use <h1> or similar markup instead, if it is a heading?
Jul 20 '05 #6

P: n/a
Hi

To Jim:

-<p style="font-size: 700%;margin-bottom:0">
paragraph </p>

-That should take care of it. Set the margin to a non zero value if
you think
it's to close.

Jim i tried both your fixes and they both work for me. I chose to keep
the margin-bottom one as it's clearer for me what is happening to the
element (It's bottom margin is being changed to 0, opposed to margin:
0 which does work but doesn't indicate which margin.)
Thanks again Jim you fixed my problem.

To Karl:

-I'd be interested to know what font type and size you have as
default,
because I was doing a similar thing a few days ago and in Opera 7.23
the font-size "maxed out" at just over 500% and wouldn't get any
bigger.

Karl i have also noticed the same thing as you.In Opera the header is
definitely smaller as in other browsers but at this point it's big
enough for me. I have so much to learn in other areas of CSS that at
this point it's perfectly fine for me.

To Neal:

-Why not use <h1> or similar markup instead, if it is a heading?

Well two reasons.First i try as much as possible to apply CSS as
opposed to HTML.Second using <H1> would be too small for what i was
trying to do(Unless you were planning on styling the H1).
Thanks for your help.

Thanks to all for your kind help

Regards

Patrick
Jul 20 '05 #7

P: n/a
Hi

To Jim:

-<p style="font-size: 700%;margin-bottom:0">
paragraph </p>

-That should take care of it. Set the margin to a non zero value if
you think
it's to close.

Jim i tried both your fixes and they both work for me. I chose to keep
the margin-bottom one as it's clearer for me what is happening to the
element (It's bottom margin is being changed to 0, opposed to margin:
0 which does work but doesn't indicate which margin.)
Thanks again Jim you fixed my problem.

To Karl:

-I'd be interested to know what font type and size you have as
default,
because I was doing a similar thing a few days ago and in Opera 7.23
the font-size "maxed out" at just over 500% and wouldn't get any
bigger.

Karl i have also noticed the same thing as you.In Opera the header is
definitely smaller as in other browsers but at this point it's big
enough for me. I have so much to learn in other areas of CSS that at
this point it's perfectly fine for me.

To Neal:

-Why not use <h1> or similar markup instead, if it is a heading?

Well two reasons.First i try as much as possible to apply CSS as
opposed to HTML.Second using <H1> would be too small for what i was
trying to do(Unless you were planning on styling the H1).
Thanks for your help.

Thanks to all for your kind help

Regards

Patrick
Jul 20 '05 #8

P: n/a
On 11 Apr 2004 09:19:13 -0700, Patrick <va******@netzero.net> wrote:

Well two reasons.First i try as much as possible to apply CSS as
opposed to HTML.Second using <H1> would be too small for what i was
trying to do(Unless you were planning on styling the H1).
Thanks for your help.


But H1, H2, etc. have semantic meaning. The markup should reflect the
structure, and then you modify the presentation with CSS. See what I'm
getting at?

<p> is smaller than <h1>, right? So you have to apply CSS anyway. Why not
apply it to the structurally, semantically correct markup?
Jul 20 '05 #9

P: n/a
On 11 Apr 2004 09:19:13 -0700, Patrick <va******@netzero.net> wrote:

Well two reasons.First i try as much as possible to apply CSS as
opposed to HTML.Second using <H1> would be too small for what i was
trying to do(Unless you were planning on styling the H1).
Thanks for your help.


But H1, H2, etc. have semantic meaning. The markup should reflect the
structure, and then you modify the presentation with CSS. See what I'm
getting at?

<p> is smaller than <h1>, right? So you have to apply CSS anyway. Why not
apply it to the structurally, semantically correct markup?
Jul 20 '05 #10

P: n/a
Neal <ne*****@spamrcn.com> wrote
But H1, H2, etc. have semantic meaning. The markup should reflect the
structure, and then you modify the presentation with CSS. See what I'm
getting at?

<p> is smaller than <h1>, right? So you have to apply CSS anyway. Why not
apply it to the structurally, semantically correct markup?


Neal

Good point made, i see what you mean. You made me aware of something here!

Thanks again for your follow up.

Regards

Patrick
Jul 20 '05 #11

P: n/a
Neal <ne*****@spamrcn.com> wrote
But H1, H2, etc. have semantic meaning. The markup should reflect the
structure, and then you modify the presentation with CSS. See what I'm
getting at?

<p> is smaller than <h1>, right? So you have to apply CSS anyway. Why not
apply it to the structurally, semantically correct markup?


Neal

Good point made, i see what you mean. You made me aware of something here!

Thanks again for your follow up.

Regards

Patrick
Jul 20 '05 #12

This discussion thread is closed

Replies have been disabled for this discussion.