text-align:center sits aligned right
Posted: 27 April 2010 04:20 AM   [ Ignore ]
Newbie
Rank
Total Posts:  9
Joined  2008-02-11

This is driving me crazy - I have an <h2> tag with text as follows:

<div id="page_one"  >
                <
h2>MsJuliette . . .  Music with Me</h2>
                <
h5 class="margin_top_zero"><span class="largecaps18">M</span>usic With Me A Musical Heritage Project</h5

and the <h2> is defined as follows:

h2 {
    font
-size:14pt;
    
font-weight:bold;
    
text-align:center;
        

But the text displays against the right margin.

Here is the website:

problem website

thanks for any help you can offer.

Anne

Profile
 
 
Posted: 27 April 2010 03:46 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  9
Joined  2008-02-11

I have found a fix for this, and understand what was happening, but not why.

This page is set up to show tabs - you click on a tab and get different information. I had set it up so that to turn tabs on and off I simply set the height of the div that defines the tab to be 1 pixel taller

height:42px 
instead of
height:41px 
. Since the tabs are positioned
top:0px 

this caused the bottom of the div to drop down over the border of the page div below, thus making the tab look attached to the page.

This worked fine, but it turns out pushing the tab div over the top of the border was causing the text to be pushed to the right of the tab div. Since it was only extending over the top of the border, not past the the border, I don’t understand why it would interfere with the text. And in fact, in Chrome, using the inspect element tool, it showed the text box actually one or two pixels below the border.

I fixed it by making the tab divs remain a constant height and switching background images between one that was 41 pixels and another that was 42 pixels (with overflow:visible). But I would still like to understand why the tab div poking over the border affects the text positioning on the next line.

thanks
Anne

Profile