homepage Welcome to WebmasterWorld Guest from 54.166.39.179
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

    
Using an image for submit in a form borks the layout
tearing my hair out here, surely this is doable?
fishfinger

5+ Year Member



 
Msg#: 3982186 posted 7:22 pm on Sep 1, 2009 (gmt 0)

Imagine a form to add items to a shopping cart which sits in a background image lozenge. When the submit button is an image the display breaks. The image itself sits neatly in the background lozenge, but the <select> form elements suddenly develop a top margin of about 8 pixels. The problem still exists when this identical code is isolated in its own page. I've tried all sorts of margins (including negative ones) on the button and the <select> - I've also tried cheating by adding blank space to the button image and the background lozenge image. No matter *what* I do I just cannot get the button image to be independent of the <select> form items (or vice versa). Looks identical in IE8 and Firefox 3.

Help!

Simplified HTML :

<div class="atbbg"><form class="addtobasket">
Value 1 - &pound;price each
<select name="value1" id="value1">
<option value=''>none</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
Value 2 - &pound;price each
<select name="value2" id="value2">
<option value=''>none</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="image" class="atbbutt" name="submit" src="/images/addtobasket.png">
</form></div>

Simplified CSS :

.atbbg {
margin-top:10px; margin-bottom:10px; height:25px;
background-image:url(../images/image.png);
background-repeat:no-repeat;
}
.addtobasket { margin:0px;
}
.atbbutt { margin:0px;
}

 

D_Blackwell

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3982186 posted 9:02 pm on Sep 1, 2009 (gmt 0)

The image used for the submit button is going to display at actual size. this is probably affecting your other form elements. Remember, they are all in the same container. If the submit button image is too to tall, you are going to get what looks like margin-top; - when what it really is, is the extra height of the image pushing the roof up.

Test this by adding an inline style to the submit button. You may need to jigger vertical-align: as well.

<input type="image" class="atbbutt" name="submit" style="height: 24px; padding: 0; vertical-align: bottom;" src="/images/addtobasket.png">

Just a quick thought. Probably other options available.

fishfinger

5+ Year Member



 
Msg#: 3982186 posted 8:47 am on Sep 2, 2009 (gmt 0)

Brilliant - just added 'vertical-align: bottom;' to the button style and that has done it.

Yes, it must be because what the image takes for a baseline is not the bottom of the text (i.e. where an underscore would go) but the middle or the top.

I never considered vertical align because I didn't think it was supported that widely, but having had another look I can see it obviously is now.

Thanks very much.

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