Custom CSS buttons

Question

Hi,

I have some problems with an implementations off custom submit buttons.

pleas take a look on this : http://jsfiddle.net/snowman/xhxwS/9/

The submit button is placed on the wrong side of the text input. To fix this I could remove the following :

a.btn1 > float: left;
a.btn1 > display: block;
a.btn1 span > display: block;

The problem is that the image(button graphics) will look vary strange?

Pleas advice

I don't get it. Edit: I'm guessing I "don't get it" because you're referring to images which don't exist on jsFiddle such as "Images/Menus/regularButton_span_300x78.png", so it doesn't look the same for us. — thirtydot
– thirtydot, Commented Feb 21, 2011 at 18:14
Do you want the image on the left, and the input on image's left? or what? — Damien Pirsy
– Damien Pirsy, Commented Feb 21, 2011 at 18:19
@thirtydot - Sorry, I didnt know how to upload resources to fiddle but its fixed now. — Banshee
– Banshee, Commented Feb 21, 2011 at 18:27
@Damien Pirsy - The image button is placed to the left but I need it to be placed to the right, this is why I have placed the "button" element after the test input. — Banshee
– Banshee, Commented Feb 21, 2011 at 18:29

Damien Pirsy · Accepted Answer · 2011-02-21 18:32:51Z

2

<input type="text" value="" style="width: 100px; float:left;" name="S" id="S" class="tb1" title="Sökord">
<a onclick="" class="btn1">
    <span>Sök</span>
</a>

Simply add

float:left

to the input style and it places on the left, and the image on its right, as you wanted

edited Feb 21, 2011 at 18:32

answered Feb 21, 2011 at 18:18

Damien Pirsy

25.5k8 gold badges72 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Banshee Over a year ago

But input, <a> and span elements is inline elements, should thay not by default be placed as thay are in code? In this case Input, <a, span, a>? float is often a style I use on div(blocked elements)

derekcohen · Accepted Answer · 2011-02-21 18:27:00Z

1

This fixes it - put the elements in divs and float the divs

<div><div style="float:left"><input type="text" value="" style="width: 100px;" name="S" id="S" class="tb1" title="Sökord"></div>
<div style="float:left"><a onclick="" class="btn1">
    <span>Sök</span>
    </a></div>
<div style="clear:both"></div></div>

answered Feb 21, 2011 at 18:27

derekcohen

1,5144 gold badges17 silver badges34 bronze badges

1 Comment

Banshee Over a year ago

Yes I could solve the problem like this but it is alot more code. All the elements I am using in my example is inline elements, should thay not be placed as thay are in code then? float is somthing I use on div(block).

Collectives™ on Stack Overflow

Custom CSS buttons

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related