Need a little help on vertically centered text in sidebox heading?

[tolefairy]

Actually I need help on 4 little issues.......

http://www.shabbychiccottage.com

Starting at the top of my home page:

1. Upper left corner where it says Home. I need that to be white text. I believe the fix for this will also take care of the footer text not being white.

2. Notice a very thin line around my header area? A little more pronounced in IE than FF, but is still there in FF,too. Any way to get rid of that so that the blue from the header image meets the blue in the background for a better blend?

3. I have images for my side box headings. I need for the heading titles to be vertically centered, not sitting at the top.

4. and also is there a way to enlarge the text of the box headings slightly?

Many thanks in advance,
Shirley

[tolefairy]

Well, I went searching on the web and found the answer to #3 of my little issues.

I learned that vertical align does not work in css, so you have to use the height of your image as your guide to vertically center text in your image.

To center my text in my box header images, I used the height of the image. i.e. I added the last two line in the code.

.leftBoxHeading, .rightBoxHeading {
    margin: 0em; height: 67px; width: 149px;
    background-color: #ACB8C8;
    background-image: url(../images/tilebktag.jpg);
    padding: 0;
    height:67px;
    line-height:67px;
    } 

Hope this helps someone else and now I'm still looking for my other answers if anyone can help...........

[dbltoe]

1. Upper left corner where it says Home. I need that to be white text. I believe the fix for this will also take care of the footer text not being white.

2. Notice a very thin line around my header area? A little more pronounced in IE than FF, but is still there in FF,too. Any way to get rid of that so that the blue from the header image meets the blue in the background for a better blend?

3. I have images for my side box headings. I need for the heading titles to be vertically centered, not sitting at the top.

4. and also is there a way to enlarge the text of the box headings slightly?

1. Around line 282 of the stylesheet, change the color to #FFFFFF
2. Around line 184 in the stylesheet, delete the border call completely
3. looks like you got 3 and 4 going.

[dbltoe]

All you need for everything to work on the Box Headings is

.leftBoxHeading, .rightBoxHeading {
background-image: url(../images/tilebktag.jpg);
line-height: 67px:
Margin: 0em;
}

All the other is superfluous.

[tolefairy]

wait! don't go away!

I still don't know #4................

[tolefairy]

and thank you for all the other!

[dbltoe]

Four is in the call at line 538 of the stylesheet. Change the font-size BUT watch out what it does to the shopping cart on the right.

You can also play with the color setting to make the titles stand out a little better.

[tolefairy]

I see what you mean about the shopping cart text. I thought I would go in and edit that text and use spaces to force it to go to two lines. Would that work?

and what do you mean about playing with the color settings? What would show better than white, do you think?

AND THANK YOU!!!

[dbltoe]

You might want to try inserting \n and nl2br before doing the space thing.

http://us2.php.net/nl2br

[dbltoe]

Forgot the color. Just my opinion that you need some color that contrasts the background enough for someone to see it.

I keep remembering the color-blind tests when I look at it now.