Welcome to WebmasterWorld Guest from 54.196.244.186

Forum Moderators: not2easy

Message Too Old, No Replies

CSS sizing... Mac/IE wants to make my button bigger

     
8:15 pm on Apr 29, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 27, 2003
posts:41
votes: 0


On Mac/IE, why is this button showing up 66 pixels wide, and 25 pixels high? It's showing up correctly (56 x 20) on Windows, both IE and Netscape.

<div style="height: 20px; width: 56px;">
<input style="height: 20px; width: 56px;" type=submit value="OK">
</div>

Help!
8:22 pm on Apr 29, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 0


Some browsers don't allow certain properties of form elements to be styled. An alternative it to use:

<input type="image" src="path" />

...and create an image of the exact button you want.

8:32 pm on Apr 29, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 27, 2003
posts:41
votes: 0


Thanks, I don't think it's that, though. It's letting me size this item. It's always increasing the size that I specify, though. It seems to be adding 10 pixels to any width I pass in.
8:34 pm on Apr 29, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


>any width

Really? - How about at the extreme?

I'm no gfx guy but isn't this maybe a dpi thing?

Nick

8:36 pm on Apr 29, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 0


Could it be the text within the button making it stretch?

Experiment by explicitly defining:

font-size
border
padding

Something to toy with, anyway.

8:38 pm on Apr 29, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


Damn! - I glanced at the code but didn't really take it in!

Birdmans quite right of course. Well, more likely right than I am ;) - I thought it was a graphical button!

Nick

8:58 pm on Apr 29, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 27, 2003
posts:41
votes: 0


It's the border attribute that's affecting it. Investigating further...
9:00 pm on Apr 29, 2003 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts:12166
votes: 51


If you are mixing inline styles with an external style sheet, I've been finding some bugs throughout different browsers. Try moving the style into the external sheet and make a class for the input button.

P.S. Actually had my first site that passed the Mac browser test without any tweaking just last week. All css and not one thing had to be adjusted, Woohoo!

9:51 pm on Apr 29, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 27, 2003
posts:41
votes: 0


Problem is, as soon as I mess with border-width, I lose the nice styled border. And I don't think there's a border-style setting for "that nice default border".

Seems like the only way to handle this, if I want both the "native" button and the exact same button size across browsers/platforms, is with a browser conditional. Sigh.

10:13 pm on Apr 29, 2003 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts:12166
votes: 51


You have ten attributes that you could apply to the border-style.

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

I believe it is the outset one that will give you that button appearance you are looking for. I typically don't mess around much with button styles, most are used to seeing the default gray. I will of course css the font so it doesn't look out of whack with the rest of the content.

10:59 pm on Apr 29, 2003 (gmt 0)

New User

10+ Year Member

joined:Jan 27, 2003
posts:28
votes: 0


While "outset" works as a lineŽbutton style, I don't like the way it is interpreted cross-browser, especially when you get to >2px thickness. Also, the highlight & shadow values are different between browsers making it difficult to ensure everything adheres to the palette scheme one has chosen.

Another factor affecting button size is line-height. We often define font sizes without realizing that we are also affecting line height which can be interpreted differently. If I am styling button text I always specify both font-size and line-height explicitly.

DE