Text position inside DIV element.

Monie · #1 (**permalink**) Sep 11th, 2007, 00:20

I have a footer in my css page:

#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 · #2 (**permalink**) Sep 11th, 2007, 01:08

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

Monie · #3 (**permalink**) Sep 12th, 2007, 02:45

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

karinne · #4 (**permalink**) Sep 12th, 2007, 12:15

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

Monie · #5 (**permalink**) Sep 13th, 2007, 01:50

Quote:

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 · #6 (**permalink**) Sep 13th, 2007, 06:11

I will make it my habbit from now on

Lchad · #7 (**permalink**) Sep 13th, 2007, 13:14

Good job Monie!!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
dynamic text field inside movieclip	shan	Flash & Multimedia Forum	0	May 1st, 2008 13:47
position of text within div tag	Craigj1303	Web Page Design	4	Apr 24th, 2007 23:04
Picture wrap around text? (more info inside)	KOinMotion	Web Page Design	1	Nov 13th, 2006 09:59
text position	bean_2k1	Web Page Design	2	May 13th, 2006 21:58
XHTML Block Element in an Inline Element	gohankid77	Web Page Design	6	Jul 27th, 2004 10:15

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Text position inside DIV element.