Welcome to Dream.In.Code
Become an Expert!

Join 149,527 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,476 people online right now. Registration is fast and FREE... Join Now!




XHTML sizing help

 
Reply to this topicStart new topic

XHTML sizing help, Button image size vs. Drop-down box size.

JadeoftheDead
26 May, 2007 - 11:08 PM
Post #1

New D.I.C Head
*

Joined: 14 May, 2007
Posts: 21


My Contributions
I've been playing around with XHTML programming learning by trial and error and I have a question. It may be a silly question but as I am new, I am clueless.

I made a test page and it has a few samples on it. There is a drop-down box with 3 choices and then underneath it, there is a button.

Purely for aesthetic reasons, I wanted to make both of these the same width.

This is the code i have for the drop-down box.
CODE
<form method="get" style="width: 64px">
        <select name="Select1">
    <option>Stars</option>
    <option>trees</option>
    <option>water</option>
    </select></form>


And this is the code I have for the button.
CODE
<form method="get" action="http://www.imdb.com/find">
    <button name="q" value="Nick Frost"><img src="imdb.gif" width="64" /></button>
</form>


I have checked these together in both Firefox and Internet Explorer but the button is always bigger. I can't really see the error (if there is one.)

Am I missing something?
User is offlineProfile CardPM
+Quote Post

Joshnathan
RE: XHTML Sizing Help
27 May, 2007 - 02:04 AM
Post #2

New D.I.C Head
*

Joined: 25 May, 2007
Posts: 18


My Contributions
QUOTE(JadeoftheDead @ 27 May, 2007 - 12:08 AM) *

I've been playing around with XHTML programming learning by trial and error and I have a question. It may be a silly question but as I am new, I am clueless.

I made a test page and it has a few samples on it. There is a drop-down box with 3 choices and then underneath it, there is a button.

Purely for aesthetic reasons, I wanted to make both of these the same width.

This is the code i have for the drop-down box.
CODE
<form method="get" style="width: 64px">
        <select name="Select1">
    <option>Stars</option>
    <option>trees</option>
    <option>water</option>
    </select></form>


And this is the code I have for the button.
CODE
<form method="get" action="http://www.imdb.com/find">
    <button name="q" value="Nick Frost"><img src="imdb.gif" width="64" /></button>
</form>


I have checked these together in both Firefox and Internet Explorer but the button is always bigger. I can't really see the error (if there is one.)

Am I missing something?


As far as I know, firefox and IE both have their "default" buttons. The IE one is just bigger. One solution would be to customize your button.
<img src="..." onClick="form.submit()">
User is offlineProfile CardPM
+Quote Post

JadeoftheDead
RE: XHTML Sizing Help
27 May, 2007 - 10:01 AM
Post #3

New D.I.C Head
*

Joined: 14 May, 2007
Posts: 21


My Contributions
I don't think that I properly laid out my problem. I am trying to figure out why when I put a width of 64 pixels for the drop down box and the customized button also has a width of 64 pixels, why they aren't the same size.

I know that in the code for the button it says "64" instead of "64px", but I've tried it with the "64px" and there was no difference between the two.

But as you can see, I have already customized the button.

This post has been edited by JadeoftheDead: 27 May, 2007 - 10:02 AM
User is offlineProfile CardPM
+Quote Post

NickDMax
RE: XHTML Sizing Help
27 May, 2007 - 12:48 PM
Post #4

2B||!2B
Group Icon

Joined: 18 Feb, 2007
Posts: 2,868



Thanked: 53 times
Dream Kudos: 550
My Contributions
The problem seems to be that the button adds a little extra to your width (the image is placed inside the button so you still have the button's graphics layed out about the image). So rather than just setting the width of your image, set the width of your button (and make sure the image's width is smaller than the width of the button so that it does not force the button to grow to fit the image).

Here is an example:
CODE
        <form method="get" >
            <select name="Select1" style="width: 128px">
            <option>Stars</option>
            <option>trees</option>
            <option>water</option>
            </select>
        </form>
        <form method="get" action="http://www.imdb.com/find">
            <button name="q" value="Nick Frost" style="width: 128px"><img src="imdb.gif" style="width: 64px" /></button>
        </form>

User is online!Profile CardPM
+Quote Post

JadeoftheDead
RE: XHTML Sizing Help
28 May, 2007 - 02:41 PM
Post #5

New D.I.C Head
*

Joined: 14 May, 2007
Posts: 21


My Contributions
thanks
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 1/7/09 08:51PM

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month