Text position inside DIV element.

[Monie]

I have a footer in my css page:

Code: Select all

#footer {
 clear: both;
 margin: auto;
 Width: 872px; 
 Height: 30px;
 padding: 0.2em 0.2em;
 border-top: 1px dotted #99C;
}

Code: Select all

 
#footer h3 {
 font: Small Verdana;
 font-size: 10px;
 text-align: center;
 padding: 0 0 5px 0;
}

The problem is, when I view this page in internet explorer (ie7), the text is not in the center of the div.
Maybe this illustrator will help me explain:

ie7:
______________
This is my footer <-- The text is on top of the div element
______________

Firefox:
______________

This is my footer <-- The text is on the bottom of the div element


How do I make so that the text is in the center of the div element something like this:
______________

This is my footer <-- The text is in the center of the div element
______________


Thank you.

[Lchad]

Here's a link to center things vertically with css. http://murphy.cz/victoria-s-vertical-centering/

[Monie]

Thanks Lchad for that links.
I solved my problem already. Now I can move on...

[karinne]

Why not post the solution? It could help other members with the same problem.

[Monie]

Originally Posted by karinne

Why not post the solution? It could help other members with the same problem.

Sorry about that,
Well it was actually my <h3> problem. I put my <h3> inside the footer div.
and I started to give padding, margin and bla..bla..bla.. to the div instead of the <h3>

After playing around with the code I've come up with this code that looks perfect inside Firefox and IE7:

Code: Select all

#footer {
    clear: both;
    margin: auto;
    Width: 872px; 
    Height: 36px;
    border-top: 1px dotted #99C;
}
#footer h3 {
    margin: 0;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    font: Small Verdana;
    font-size: 10px;
    text-align: center;
}

[Monie]

I will make it my habbit from now on

[Lchad]

Good job Monie!!