Stylesheets - margin-top in FF versus IE

Author

margin-top in FF versus IE

Andrea

2005-12-02, 6:48 pm

Hi -

In lieu of easily centering text vertically in a <div>, I am trying to
use margin-top to shove the text down. I have created a <div> wrapper
and put a <p> tag in it and am trying to format the <p>.

My understanding is that the browsers different interpretations of
width also affect how they treat height so I'm doing the margin on the
<p> instead of on the <div>. The following does what I want in IE but
not in FF which from what I've read suggests something is wrong in the
code.

I appreciate any suggestions -
Thanks!
Andrea

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
#wrapper {height: 160px; background-color: gray;}
#wrapper p {margin-top: 50px; text-align: center; background-color:
blue;}

</style>
</head>

<body>
<div id="wrapper">
<p>Text in the p in the div, want to see if I can format the margins
properly.</p>
</div>

</body>
</html>

Spartanicus

2005-12-02, 6:48 pm

"Andrea" <amaruky@yahoo.com> wrote:

>In lieu of easily centering text vertically

http://www.student.oulu.fi/~laurirai/www/css/middle/

--
Spartanicus

Andrea

2005-12-02, 6:48 pm

Thanks for the link. I think I'm still not understanding something,
though, as I'm having trouble getting the "Vertical centering using
margins" to work the same on IE as FF.

Spartanicus wrote:
> "Andrea" <amaruky@yahoo.com> wrote:
>
>
> http://www.student.oulu.fi/~laurirai/www/css/middle/
>
> --
> Spartanicus

Andrea

2005-12-02, 6:48 pm

Also, I went to the complext cases, "Common code of examples" and tried
the following (pasted from the example given) and it's still not
properly centering vertically. Have you found a method to be
successful for you?

Thanks,
Andrea

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
..text, .image, .block /* All container divs*/
{width:14em;height:8em;margin:0.5em;
border:thick solid;background:#fff;}

..block div {border:dashed;width:10em;} /* to make it more interesting*/
</style>
</head>

<body>
<div class="block">
<div> Block element, with long enough content to wrap.
</div>
</div>
</body>
</html>

Spartanicus wrote:
> "Andrea" <amaruky@yahoo.com> wrote:
>
>
> http://www.student.oulu.fi/~laurirai/www/css/middle/
>
> --
> Spartanicus

Spartanicus

2005-12-03, 6:19 am

Please don't top post, corrected this once.

"Andrea" <amaruky@yahoo.com> wrote:

[color=darkred]
>Also, I went to the complext cases, "Common code of examples" and tried
>the following (pasted from the example given) and it's still not
>properly centering vertically.

Take the time to read and understand the resource instead of skimming it
looking for a shortcut.

>Have you found a method to be
>successful for you?

I haven't looked at your example, and I don't know the quoted resource,
but it is written by a CSS expert and sure to contain good information.

If you want people to look at you code it's best to upload it and
provide the url instead of posting the code.

--
Spartanicus