button next to a text box

[Css_Calav]

hi guys,

how can i have the button next to the text box and not on the next line?

or is this achieved in my css file?

<div id="search">
<p class="text">
<input type="text" name="keyword" value="Search class="search_box_2" />
<input type="submit" value="Search" class="search_button" />
</p>
</div>

thanx guys

[BonRouge]

Originally posted by Css_Calav
<div id="search">
<p class="text">
<input type="text" name="keyword" value="Search class="search_box_2" />
<input type="submit" value="Search" class="search_button" />
</p>
</div>

If this is the same as on your page, you need to fix it.
:

value="Search"

[Css_Calav]

ahh.. thanx man

[Css_Calav]

ok.. i just checked my page and the code is this:


<div id="search">
<p class="text">
<input type="text" name="keyword" value="Search" class="search_box_2" />
<input type="submit" value="Search" class="search_button" />
</p>
</div>


i must have deleted the " by accident as i moved it round on this page. so back at square one!

[BonRouge]

Going off the code you've posted, there's no problem. Try it yourself - put that in a page by itself and you'll see. So, I'm guessing #search is too narrow.

[Css_Calav]

hi there,

i checked out what you said and did some changes and still the same.

here is what i have now.

you can see the search box on this page:
http://www.deskjetmodels.co.nz/index_test.php


<div id="search">
<p class="text">
<input type="text" name="keyword" value="Search" class="search_box_2" />
<input type="submit" value="Search" class="search_button" />
</p>
</div>



input.search_button {
font: 10px/11px Verdana, sans-serif;
font-style: normal;
background-color: #e6e6e6;
border: 1px solid #999999;
color:#333333;
margin-top: .5em;
float: left;
/*margin-left: 15em;*/
padding-top:0 !important; padding-top:2px;
margin-bottom: 10px;
}



input.search_box_2{
font: 11px/14px Verdana, sans-serif;
width: 3em;
height: 14px;
background-color: #FBFBFB;
border: 1px solid #999999;
}


thank you very much for your help

[BonRouge]

Hi there,

I've changed quite a few things - I hope it's alright (http://bonrouge.com/test/deskjet.htm).

[Css_Calav]

thanx BonRouge,

thats how i want it.

in IE 6 the main content div is pushed under the left nav div. is this something you changed?

[Css_Calav]

thanx :)

[BonRouge]

That was a mistake - fixed it now (I think).

[Css_Calav]

hey what bits did you change can you give me a run down? trying to put site back togther but am having trouble :confused:

[BonRouge]

Can I suggest just saving my pages (the html and css files)?

I changed some div names, the position of the content in the source, the height of things, margins... you'd really be better just copying what I did - sorry if that's a problem.

You had some pointless things there - like an unordered list inside a div. The div was called nav container, but it didn't the nav didn't need a container. I changed it to <ul id="nav">.

The content is better higher up in the source, so I moved it up...

I don't remeber what else...

[Css_Calav]

i copied the code and the css file into my old files with the php and came out like this.. still playing around with it

www.deskjetmodels.co.nz/index_test.php

[BonRouge]

The page you've shown me there isn't linked to 'my' style sheet.

[Css_Calav]

hi,

i copied and pasted your style sheet too into my old one. can you check and see if that is ok?

[BonRouge]

That's what I'm telling you - I checked the css and it's not 'my' page.

[Css_Calav]

thanx BonRouge,

i was accidently putting the old css file in :(

thanx for your help looks great.

last thing to do is fix that footer in FF!

any pointers?

thanx again for your help i will be back on later tonight

[BonRouge]

#container {
min-height:100%;
}

[Css_Calav]

Thanx BonRouge,

The content height 100% fixed my prob in FF which is awsome.

I was just wondering why the Content is better higher up on the html page?

and another question is the position of the text inside all my buttons, how can i make them all the same height, centered text etc? if you look at the search button the text is a little towards the top.

is there a way to apply the text style to all the buttons?

thanx for your help

[BonRouge]

Height... Firefox is smart and does things the right way. You use 'minimum-height:100%' and you get what you want in good browsers.
IE is a little bit stupid - it doesn't understand 'minimum-height' - but we can put its stupidity to good use as it treats 'height' as it should treat 'minimum-height' so people using stupid-boy to view your page will also see your page correctly when you use this : * html #container {
height:100%;
} (which you already had in your code).

For the search box...
Try this instead of what you have now : #search_btn {
width:50px;
font: 10px/11px Verdana, sans-serif;
font-style: normal;
padding-top:0 !important; padding-top:2px;
}

I was getting confused by your classes. For example, in your .button class, you have 'float:right;' which is good for the button at the bottom of the page, but not for the search button.
I think it's best to define how you want the buttons to look with the .button class, but use ids to position them.

Another thing I noticed (which doesn't matter a great deal, but can just make your code a little less-easy to read and just basically make the page bigger) is the repetition of the same property. You have this : input{
font: 11px/14px Verdana, sans-serif;
background-color: #FBFBFB;
border: 1px solid #999999;
}
which is good, but then you repeat these lines for different classes of input too. Really not necessary.

Your content is better above the menu for search-engine purposes. SEO wizards often say that it's best if your content is as close to the top of the page as possible. Not a huge problem, but putting the content higher just makes the code a little bit better.

I hope this helps.

[Css_Calav]

thanks so much that helps and clears alot of things up. i will get on to these changes in the morning and let you know how it goes.

cheers for your time

[Css_Calav]

hi BonRouge,

i have been fixing up my website and done all the changes (made all the pages the same etc etc)

i have a few last query's for you if you dont mind.

all the buttons on the website are perfect in FF but are quite big in IE, can you help me with this?

i added in the <form> around all the search div's and it droped the div a little. i have the form margin set to 0; and i tried padding 0; but that didnt do anything. its not a big issue but it looked properly alighned before i put the form tags in.

and the search box in FF, if you put for example a 'p' in the bottom of the 'p' ets cut off. and in IE, differnt the search box text if differnt form the other text boxes.

here is a page with lots of buttons

http://www.deskjetmodels.co.nz/cart.php

http://www.deskjetmodels.co.nz/css/model.css

thanx you for your help and time!

[BonRouge]

If you take out all of these : !important; padding-top:2px (just do a quick find/replace) your input elements will be the same size in IE as they are in FF.

I think the problem with the search box is this css error :
input{
font: 11pxpx Verdana, sans-serif;
background-color: #FBFBFB;
border: 1px solid #999999;
}

You've actually named the font-sizes and families again for the other input classes, so the error is overruled. The search box defaults to this error. Try '11px'.

[Css_Calav]

hi there,

i took out all the '!important; padding-top:2px' and now in IE the words in the buttons are kind of v-aligned to the top.

have i done something wrong? was i ment to take all the '!important; padding-top:2px' out of the code?

thanx

[BonRouge]

Strange... I did test it the other day and it seemed fine....

How about this then (http://bonrouge.com/test/deskjetcart.htm)?

I gave all the buttons the same class - .btn -(as I mentioned earlier - this is the best way) so that everything you want to be the same in the buttons can be the same and anything specific for a particular button can be handled with an id. You know you can also use two classes if you need to. I took 'margin-right:4em' out of the .btn class because I couldn't see why it was there. If you need it for a specific button or a few buttons, you could add it to the id or as another class.

So, what I'd do is go through your pages and add the .btn class to the buttons that you want to look the same. With the risk of repeating myself, then add ids to any buttons you need to position or change the width of or whatever.

I added 'line-height' to the .btn class so that the text is aligned in the middle (although, to be honest, in FF it seems to be about 1px lower than the middle).

Something I've been wondering about, but haven't mentioned as it shows how little I know, was what this kind of thing is all about :
font: 11px/14px Verdana, sans-serif;
What is that?

I hope this helps anyway.

[Css_Calav]

hi BonRouge,

thanx for the inout was very helpful, all this help from you is building my webdesign skills alot! just little things like this.

ok, so i have reclassed all my buttons, great!

now i have a button where i need it to have some different properties.

so before i had it like this

input.addbutton {
margin-left: 22em;
width: 8em;
font: 10px/11px Verdana, sans-serif;
font-style: normal;
background-color: #e6e6e6;
border: 1px solid #999999;
color:#333333;
margin-right: 4px;
padding-top:0;
}

the button is on this page http://www.deskjetmodels.co.nz/wwi_aircraft.php

now i have it with the class ".btn" and i need it to have these properties.

you said to make a id for it

would this be the correct way?

#add_button{
margin-left: 22em;
width: 8em;
margin-top: 2em;
}

http://www.deskjetmodels.co.nz/historic_1st_flight.php

it works, just wondering if this is what you ment?

i think before i was using ".something" if i wanted to change the properties.

about this: font: 11px/14px Verdana, sans-serif;

i have no reson for it, im pretty sure i read it off a tutorial for something and has stuck in my code ever since.

and why do people when they do margin's etc go

margin: 0 0 15 0

is that declaring the margin top,bottom,left,right all at once?

thanx for your help!

[BonRouge]

Ah... not quite right.
Please read this to save me typing it again here. (http://bonrouge.com/br.php?page=faq#class-id)

OK... so what you need in that situation is to use two classes.
Change this : #add_button{
margin-left: 22em;
width: 8em;
margin-top: 2em;
}

to this :
.add_button{
margin: 2em 0 0 22em;
width: 8em;
}

and then change this :
<input type="submit" name="add" value="Add to Cart" class="btn" id="add_button" />
to this :
<input type="submit" name="add" value="Add to Cart" class="btn add_button" />(on each of the 'Add to Cart' buttons).

You're half-right about the margin thing. It declares all four at once, but the order is clockwise - top, right, bottom, left.

Good luck.

[Css_Calav]

thanx man,

can you have a look here

http://www.deskjetmodels.co.nz/wwi_aircraft.php

and

here

http://www.deskjetmodels.co.nz/css/model.css

i did the changes and not as i expected. am i doing something wrong?

for the planes pages i also have another style sheet

http://www.deskjetmodels.co.nz/css/plane.css

for some reason (when i first started site) its not conflicting with that is it?

and does it matter if i have

input.add_btn{
margin: 2em 0 0 22em;
width: 8em;
}

or

.add_btn{
margin: 2em 0 0 22em;
width: 8em;
}


both seem to do the same thing

thanx !

nice site by the way will give it a thorough read when i have done this.

[BonRouge]

Looking at that page, you don't seem to have done what I said. I saidOriginally posted by BonRouge
change this :
<input type="submit" name="add" value="Add to Cart" class="btn" id="add_button" />
to this :
<input type="submit" name="add" value="Add to Cart" class="btn add_button" />(on each of the 'Add to Cart' buttons).
.

I'm not promising that this will fix the problem - but I think it will.


'input.btn' applies to all 'input' elements with the class 'btn' - not divs with that class or paragraphs with that class.
'.btn' applies to all elements with that class.
In this situation, they do the same thing as the only elements on your page with that class are input elements.

I hope this helps.

(...and thanks for the comment about the site :))

[Css_Calav]

thanx man,

i was pretty sure i did do those changes! but obviously not...

the changes worked out fine.

another question about the class's:

if i have


input.btn {
font: 10px/11px Verdana, sans-serif;
font-size: 10px;
font-style: normal;
background-color: #e6e6e6;
border: 1px solid #999999;
color:#333333;
padding-top:0;
line-height:12px;
}


and i want a button to be right alighned, or text aligned to the right

i go


.mail_btn{
text-align: right;
}


it wont let me do it, is it because of this conflicting with it?


#buttons {
margin-top: 1em;
margin-bottom: 1em;
text-align: center;
}


it is the "send" button on the index page i am playing with. at the moment i just add this to it

.mail_btn{
margin-left: 14em;
}

basically to cut a long story short i want to right align a button and it didnt work and want to klnow why!

thanx man

[BonRouge]

Can you show me?

[Css_Calav]

hi BonRouge,

my bad, i put text align instead of float right for the button 'send' on the page

www.deskjetmodels.co.nz/index.php

i think i have it right now

[BonRouge]

The link's broken, but I'm guessing your message means you're OK now, right?

[Css_Calav]

hi BonRouge,

my bad typed the link wrong.. all good now

you can take a look if you wish.

how do i apply a property to IE and not FF and/or visa versa?

!important <- something like this

thanx

[BonRouge]

You have this in your css :
* html #container {
height:100%;
} The '* html' part targets IE. It has to come after the regular style.

[Css_Calav]

Hi,

Somebody recomended that i put that in there.

shall i take it out?

i think they were helping me with my footer

thanx

[BonRouge]

Yes - I told you to put that there. I'm telling you about that now to answer the question in your last post. (Don't take it out - it's important!)