Closed Thread Icon

Preserved Topic: css stuff... for IE only. Pages that link to <a href="https://ozoneasylum.com/backlink?for=18164" title="Pages that link to Preserved Topic: css stuff... for IE only." rel="nofollow" >Preserved Topic: css stuff... for IE only.\

 
Author Thread
3rdperson
Paranoid (IV) Inmate

From: your subconscious. (scared yet?)
Insane since: May 2001

posted posted 09-06-2001 08:26

threep wanders back into the forum, this time with a question:
"i have this chunk of css:

code:
A.button, A.buttonHL       {
width: 150px;
height: 40px;
border: 1px solid #000000;
TEXT-DECORATION: none;
font-family: arial;
font-weight: bold;
font-size:14px;
background-color: #ccc;
COLOR: #000;
text-align:center;
padding: 3px 5px;
margin: 5px 5px;}


...which basically makes a link look like a button (it also has hover properties). yes, it IS only supposed to work in IE.
now... the text within this box, if it is 2 lines, looks fine, but if it is one line, sticks to the top half of the 150 x 40 px box.
how can i align the text within this box to centre?"
hoping someone can help him, he wanders off to tinker himself.

edit: threep quickly adds "don't worry yourselves about this one, i have found a cheat workaround, but if anyone knows the solution offhand, i would like to know the legit way of doing it! "



[This message has been edited by 3rdperson (edited 09-06-2001).]

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

posted posted 09-06-2001 15:03

Can't you use vertical-align: middle?

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 09-06-2001 18:00

I would think the vertical align: middle would work, but it may not be perfect...

Just for giggles...if you want it to look more like a button, change the border from solid to outset.



Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted posted 09-06-2001 18:43

Check out the CSS they use for the cool button effect here (its probably the best of its kind available online):
http://webfx.eae.net/dhtml/coolbutton2/cb2.html

Emps

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 09-06-2001 19:46

You could avoid setting the height of it, which would shrink the edges to fix around the text, if you wanted.

3rdperson
Paranoid (IV) Inmate

From: your subconscious. (scared yet?)
Insane since: May 2001

posted posted 09-13-2001 00:21

threep returns, once again seeking a solution:
"hey, im back!
i have this box:

code:
#midcircle {	position:absolute;
left: 142px;
top: 165px;
width: 170px;
height: 170px;
border: 1px solid black;
text-align: center;
color: ff6400;
font-size: 20px;
font-family: verdana, arial, sans-serif;
}


...and what i would love to have is the text centered both horizontally and vertically in this box.
does anyone have any ideas?
thanks in advance!"

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted posted 09-13-2001 03:40

vertical-align: middle;
text-align: centre;

This should work - in other browsers setting the margins to auto is said to be the way to centre things but doesn't work in IE5.5/Win.

Emps

"I like long posts, that's why i admire Emperor Posts!!" (Wakkos)

« BackwardsOnwards »

Show Forum Drop Down Menu