I thought I knew basic html but apparently I can't get the html right to do what I want so here is what I need.

I need the following code:

<form method="post" action="topdog_whois.php" name="theform">
    <input type="text" name="domain" size="10" style="border: 1px solid #C0C0C0; text-align:left">
    <select size="1" name="ext" style="color: #E08E37; border: 1px outset #FFFFFF; padding: 0; background-color: #E9EAED">
    <option selected value="com">.com</option>
    <option value="net">.net</option>
    <option value="org">.org</option>
    <option value="co.ug">.co.ug</option>
    <option value="ac.ug">.ac.ug</option>
    <option value="or.ug">.or.ug</option>
    <option value="sc.ug">.sc.ug</option>
    <option value="ne.ug">.ne.ug</option>
    <option value="co.za">.co.za</option>
    <option value="co.uk">.co.uk</option>
    <option value="info">.info</option>
    <option value="biz">.biz</option>
    <option value="ro">.ro</option>
    </select>
    <input type="hidden" name="option" value="check">

Which appears like this:

to appear like this:

But I need it to function the same. I can't get it to work right for me.

The look of the select is being controlled by the css you have in the style=" " on the <select> and the <input>. In fact the the way you say it's currently displaying looks like what the css code is telling the select box to display.

Also some of the css that's on the <input> is being overidden by what's on the <select> I think you just need to change the css around on both to get the look you want.

Originally Posted by vangogh

The look of the select is being controlled by the css you have in the style=" " on the <select> and the <input>. In fact the the way you say it's currently displaying looks like what the css code is telling the select box to display.

Also some of the css that's on the <input> is being overidden by what's on the <select> I think you just need to change the css around on both to get the look you want.

Can you use the code I provided and change it to look mor like the second image? The css page that is used is used on the page I took the snapshot and cropped out the 2nd image.

My mistake about the input part. That should have nothing to do with how the select is looking. I guess it was a little too late when I posted. For the css on the select you can try:

style="color: #848484; border: 1px solid #848484; background: #fff"

I think that's the right color for the text and border. Try that and let me know if it works.

I am sorry I didn't exactly explain very well. That did change the style which will make it look more like the page and thanks for the help on that but can you also make it the same width and height as the 2nd image? Thanks again!

Oh I misunderstood. I don't know what the exact sizes will be, but to change the height you'll want to adjust either the font-size or the height or both so you'll want to add to the style=" " for the select

style="font-size:10px; height:20px"

The 10px and 20px is just a guess and the values will probably need to be a little different for both the font-size and the height. You don't need a new style="" Just add them to the same one already there.

For the width the css property is naturally enough 'width' The width may be controlled to some degree by the length of the text on the <option>s. I think you cn set any width you want, but it's possible that you're always going to get the width as whichever one of your options is the longest.

Try adding width:50px to your style and see if that works. you can adjust the number of px up or down till you get the width you want. If you're not seeing a change in the width when you change the px then if might just be controlled by the length of the text of the longest <option>.

It also looks like the text is aligned to the right so you may want to try adding text-align:right to the css as well.

Hope that works.

hmm... I got it to look pretty much the way I want it but not it won't align right. Man I hate html :P

Here is the page I am having trouble with:
http://www.visiohosting.com/index-page-copy.html

Here is the page I want the form to look like. Aligned the same way.
http://www.visiohosting.com/developerplan.html

Thank you for your help!

You're very close. Couldn't you have just copied the code from the page that works?

Part of the problem is that IE and Firefox will display form elements a little differently by defualt. In Firefox the <select> has a greater height and in IE the text box has a greater height. I think you'll need to add the same font-size and hieght values to both.

The whole form is a little lower in IE than Firefox. I think if you explicitly set a margin-top on the form

style="margin-top:10px" the 10px are just a guess you'll get the same alignment in both browsers.

As you probably have alreayd figured out I have a hard time getting html to work. It is funny I can do php easier than html :P

Could you just take the code I gave or use the source code of the page I provided and insert the code you provide and change it the best you can. It would be most appreciated.

That's funny given how much easier html is. I think if you add:

font-size:10px; height:20;

to the style on the <input> then the text box and the select will be the same height in both IE and Firefox.

IE and Firefox also use different default size for the width of the input box so you might also want to add:

width:85px to the <input> It looks like 85px is what it's showing in Firefox though you may need to make it a little smaller or larger than 85px to suit what you want.

The 'submit' button looks like it's a little higher than the input and select in Firefox which I think is because of the way the image was created. If you add:

style="margin-top:10px" to the image tag of the submit button it should push it down a little. It might be 15px or even 20px, but you get the idea.

Let me know if that works.

I am sorry but I cannot seem to get it to work right. I get the size right and then the positions are off. I then fix the positions and the sizes are off.

Maybe you could do this for me. tell me how to take this code and use the form post and other data on the following page which displays the form the way I want it. The page http://www.visiohosting.com/developerplan.html

This code:

 <form method="post" action="topdog_whois.php" name="theform">
    <br>
    <input type="text" name="domain" 
font-size:10px; height:20; style="border: 1px solid #C0C0C0; text-align:left" size="8">
    <select size="1" name="ext" 
style"font-size:6px; height:20; border: 1px solid #C0C0C0; background: #fff; width:10">
    <option selected value="com">.com</option>
    <option value="net">.net</option>
    <option value="org">.org</option>
    <option value="co.ug">.co.ug</option>
    <option value="ac.ug">.ac.ug</option>
    <option value="or.ug">.or.ug</option>
    <option value="sc.ug">.sc.ug</option>
    <option value="ne.ug">.ne.ug</option>
    <option value="co.za">.co.za</option>
    <option value="co.uk">.co.uk</option>
    <option value="info">.info</option>
    <option value="biz">.biz</option>
    <option value="ro">.ro</option>
    </select>
    <input type="hidden" name="option" value="check">
    <img src="/with_flash/Html/images/go.jpg" 
style="margin-top:20px" onClick="document.theform.submit()" align="bottom">
</form>

If I could figure out how to atleast make that form work then maybe everything will layout right. Again thanks for all your help.

Hey Visio. I got as close as I could. Here's the code:

<form method="post" action="topdog_whois.php" name="theform">
    <br />
    <input type="text" name="domain" style="border: 1px solid #C0C0C0; font-size:10px; height:20px; text-align:left; width:80px; margin:0; padding:0">
    <select size="1" name="ext" style="font-size:10px; height:18; border: 1px solid #C0C0C0; background: #fff; width:50px">
    <option selected value="com">.com</option>
    <option value="net">.net</option>
    <option value="org">.org</option>
    <option value="co.ug">.co.ug</option>
    <option value="ac.ug">.ac.ug</option>
    <option value="or.ug">.or.ug</option>
    <option value="sc.ug">.sc.ug</option>
    <option value="ne.ug">.ne.ug</option>
    <option value="co.za">.co.za</option>
    <option value="co.uk">.co.uk</option>
    <option value="info">.info</option>
    <option value="biz">.biz</option>
    <option value="ro">.ro</option>
    </select>
    <input type="hidden" name="option" value="check">
    <img src="/with_flash/Html/images/go.jpg" width="31" height="19" style="margin:2px 0 0 0; vertical-align:middle" onClick="document.theform.submit()">
</form>

Hopefully that works. It looks almost exact in Firefox and in IE there's a liitle bit of a gap between the select and the flash image for the 'go' button. Hopefully it will work in IE. If for any reason you find the button dropping below the input and select in IE look for the code on the <input> that says width:80px and keep reducing 80 until the button rises back up.

You were actually pretty close in what you had. A missing = sign here and a couple of the styles outside of the style="". I think I may have changed a little too, but not very much.

Let me know if this works.

Your probably thinking "oh know, not another thread by taht Visio guy" :P

Thanks I think it is almost perfect.
I have only 1 more question and I will let you go. First I want the text box text to be aligned in the middle of the box from top to bottom.
Thanks again for all your help!

Funny.

I'm seeing two possible ways to align the form vertically.

You have a div tag right above the form <div style="margin-left:14px "> You might try adding some margin-top to it so it looks like:

<div style="margin-left:14px; margin-top:25px"> the 25px being a guess. Playing around with the margin might work to get the form where you want.

If you look right above that div there's a line of code starting

<TD WIDTH=192 HEIGHT=287 valign="bottom"

You could change it to valign="middle" and see if that helps as well. Depending on where you want the form to be you might need to play around with both. You can use top, middle, or bottom on the valign.

I would try just using valign="middle" first without the margin-top I mentioned above and see where you are. If it's still not quite right play around with different values on the margin-top for the div.

And I promise to still come back if you have another question.