homepage Welcome to WebmasterWorld Guest from 54.225.57.156
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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




msg:1207330
 8:15 pm on Apr 29, 2003 (gmt 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!

 

Birdman




msg:1207331
 8:22 pm on Apr 29, 2003 (gmt 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.

bryndyment




msg:1207332
 8:32 pm on Apr 29, 2003 (gmt 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.

Nick_W




msg:1207333
 8:34 pm on Apr 29, 2003 (gmt 0)

>any width

Really? - How about at the extreme?

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

Nick

Birdman




msg:1207334
 8:36 pm on Apr 29, 2003 (gmt 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.

Nick_W




msg:1207335
 8:38 pm on Apr 29, 2003 (gmt 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

bryndyment




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

It's the border attribute that's affecting it. Investigating further...

pageoneresults




msg:1207337
 9:00 pm on Apr 29, 2003 (gmt 0)

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!

bryndyment




msg:1207338
 9:51 pm on Apr 29, 2003 (gmt 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.

pageoneresults




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

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.

DCElliott




msg:1207340
 10:59 pm on Apr 29, 2003 (gmt 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved