• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 330
  • Last Modified:

Drop down menu

I have a simple drop down menu and an image for the go button.  For some reasons, the row ends up higher than what it should be and the button is higher than the menu itself.  I even tried setting the height of the <tr> but didn't work.  The form works fine but the alignment doesn't. Here is a sample code for it..

<form name="jump">
<script>
function jumpMenu(){location=document.jump.menu.options[document.jump.menu.selectedIndex].value;
}
</script>
<select name="menu">
<option value="http://www.toronto.edu/" selected>UofT</option>
<option value="http://www.ryerson.edu/">URyerson</option>
<option value="http://www.york.edu">YorkU</option>
</select>
<a href="Javascript:jumpMenu()"><IMG SRC="go.gif" border=0 width="22" height="22"></a>
</form>
0
qudoos
Asked:
qudoos
1 Solution
 
knightEknightCommented:
set the align in the image tag:

<a href="#" onClick="jumpMenu(); return false;"><IMG SRC="go.gif" border="0" width="22" height="22" align="top"></a>


... or you might try align="bottom" , I don't remember which one
0
 
brunoCommented:
you most likely need to set alignment on the image...

check here for the proper values for that attribute, and try a few until it works.

http://www.blooberry.com/indexdot/html/tagpages/i/image.htm#attrib



BRUNO
0
 
brunoCommented:
sorry, knight, your comment wasn't there when i started posting.


gudoos, make sure you check what the alignment looks like in any browser you need it to work in.  while one value might look ok in one browser, might not look good in another.  make sure to try them all...sometimes things like "baseline" or "textop" or "absmiddle" work well as well.


BRUNO
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
COBOLdinosaurCommented:
Try:

<IMG SRC="go.gif" style="float:right" border=0 width="22" height="22">

Cd&
0
 
lexxwernCommented:
or you can position the image as and where you want,

some ppl may not want to do this, but it still is a solution


<IMG SRC="go.gif" style="position:absolute;top:10px;left:10px" border=0 width="22" height="22">
for more css http://www.w3.org/

lexxwern
0
 
winninglCommented:

place a <table> there to format the form display.


*****************************

<form name="jump">
<table>
<script>
function jumpMenu(){location=document.jump.menu.options[document.jump.menu.selectedIndex].value;
}
</script>
<tr><td>
<select name="menu">
<option value="http://www.toronto.edu/" selected>UofT</option>
<option value="http://www.ryerson.edu/">URyerson</option>
<option value="http://www.york.edu">YorkU</option>
</select></td>

<td>
<a href="Javascript:jumpMenu()"><IMG SRC="go.gif" border=0 width="22" height="22"></a></td>

</tr></table>
</form>

winningl
0
 
TenTonJimCommented:
You may also want to try resizing your image to match the line height...

try 10 or 12 pixels high for your image height

JimS
0
 
qudoosAuthor Commented:
Works perfectly!! Thank you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now