2 replies [Last post]
trebor
Offline
newbie
Last seen: 16 years 44 weeks ago
Joined: 2004-03-26
Posts: 5
Points: 0

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>

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 44 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

Verschwindende wrote:
  • CSS doesn't make pies

trebor
Offline
newbie
Last seen: 16 years 44 weeks ago
Joined: 2004-03-26
Posts: 5
Points: 0

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.