Thu, 2004-08-26 18:12
Hello:
I am having a text alignment problem. I have a line of text which I want to be centered vertically inside of a <div> container. Using the code and CSS below Safari, Opera, and IE6 all center the text vertically. In Netscape 7 and Mozilla (Firefox etc), the text is placed slightly above the vertical center of the box.
Any ideas of a solution? Thanks for the help.
Here is the css:
.onlinecatalogue {
position: absolute;
width: 558px;
height: 40px;
left: 0px;
top: 272px;
margin: 0px;
padding: 0px;
text-align: center;
z-index: 5
}
.onlinecataloguetext {
margin-top: 11px;
margin-bottom: 11px;
padding-left: 2px;
padding-right: 2px;
font-family: helvetica, verdana, sans-serif;
font-size: 18px;
font-weight: bold;
color: #000000
}
and the accompanying code:
<div class=onlinecatalogue>
<div class=onlinecataloguetext><a href=catalogue.php class=nounderline>Check out our On-Line Catalogue</a></div>
</div>
Thu, 2004-08-26 18:53
#1
vertical text centering problem
It's not a solution, but a suggestion - don't use horrible describing names like onlinecataloguetext.
Instead of giving the divs a class, give them ids (use the '#' instead of ',' and 'id' instead of 'class'.
This way, you can just use #onlinecat for the main div.
For the text inside, use something like this:
#onlinecat span {blah}
then instead of wrapping the text in that div, just wrap it in a span.
Thu, 2004-08-26 20:21
#2
vertical text centering problem
I removed the height from the outer div, this seems to have fixed the problem with Netscape/Mozilla.
Thanks for the other suggestion about using ids instead of classes.