Forums
This topic is locked
MX2004 Jump Menu
13 Apr 2005 12:19:45 Dan Slade posted:
Hi,I am creating a series of jump menus within a table. I am limited on space as the page is quite busy. The problem I'm having is that when I add a Jump menu (or a list/menu), it inserts an invisible line break when viewed in my browser IE6. There is no <br> inserted, but when rendered in my browser there is always a line of white space below the menu.
Can anyone help me fix this so that the list/menu fits snugly into the <td> without the unwanted space?
Edited by - Danski on 13 Apr 2005 12:20:11
Replies
Replied 13 Apr 2005 12:29:12
13 Apr 2005 12:29:12 Matt Bailey replied:
A bit of CSS should solve your problem:
select {
margin: 0px;
padding: 0px;
}
Jump menus are defined by the 'select' HTML tag, so by setting the padding and margins of the 'select' tag to '0px' you should see your unwanted space disappear.
___________________________________
* Sorry... how do you do that again?... *
select {
margin: 0px;
padding: 0px;
}
Jump menus are defined by the 'select' HTML tag, so by setting the padding and margins of the 'select' tag to '0px' you should see your unwanted space disappear.
___________________________________
* Sorry... how do you do that again?... *
Replied 13 Apr 2005 13:13:05
13 Apr 2005 13:13:05 Dan Slade replied:
Hi Matt,
Thanks for the prompt reply. I've done what you suggested, but it still renders the unwanted space. Below is the code for a test page I set up to get this working. Am I doing somewthing wrong here?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"
;
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<style type="text/css">
<!--
select {
margin: 0px;
padding: 0px;
}
-->
</style>
</head>
<body>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td><form name="form1">
<p>
<select name="menu1" onChange="MM_jumpMenu('parent',this,0)">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</p>
</form></td>
</tr>
<tr>
<td>Test</td>
</tr>
</table>
</body>
</html>
If I knew what I was doing, I'd be dangerous...
Thanks for the prompt reply. I've done what you suggested, but it still renders the unwanted space. Below is the code for a test page I set up to get this working. Am I doing somewthing wrong here?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"
;if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<style type="text/css">
<!--
select {
margin: 0px;
padding: 0px;
}
-->
</style>
</head>
<body>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td><form name="form1">
<p>
<select name="menu1" onChange="MM_jumpMenu('parent',this,0)">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</p>
</form></td>
</tr>
<tr>
<td>Test</td>
</tr>
</table>
</body>
</html>
If I knew what I was doing, I'd be dangerous...
Replied 13 Apr 2005 13:27:45
13 Apr 2005 13:27:45 Matt Bailey replied:
You've got your jump menu between 2 'p' tags (paragraph), which have a margin below by default. You can either remove them completely (which is ok to do) or if you need to have them there use CSS to remove any padding or margins, just like you've done on the 'select' tag.
___________________________________
* Sorry... how do you do that again?... *
___________________________________
* Sorry... how do you do that again?... *
Replied 13 Apr 2005 13:47:34
13 Apr 2005 13:47:34 Dan Slade replied:
Hi Matt,
I've removed the <p> tags, but it still renders the unwanted space below. I've just tried it in Netscape & Firefox and there is no unwanted space at all. It only happens in IE6. Any ideas?
--------------------------------------------------
If I knew what I was doing, I'd be dangerous...
I've removed the <p> tags, but it still renders the unwanted space below. I've just tried it in Netscape & Firefox and there is no unwanted space at all. It only happens in IE6. Any ideas?
--------------------------------------------------
If I knew what I was doing, I'd be dangerous...
Replied 13 Apr 2005 13:50:03
13 Apr 2005 13:50:03 Dave Thomas replied:
collapse the padding on the form, not the element.
form{
margin: 0px;
padding: 0px;
regards
Dave Thomas
<b>DMX Zone Manager</b>
form{
margin: 0px;
padding: 0px;
regards
Dave Thomas
<b>DMX Zone Manager</b>
Replied 13 Apr 2005 13:52:46
13 Apr 2005 13:52:46 Matt Bailey replied:
I've got it now. The 'form' tag also has a bottom margin by default. Use CSS to get rid of it as above:
form {
margin: 0px;
padding: 0px;
}
I've tested this and it works for me in IE6 so you should be alright now.
___________________________________
* Sorry... how do you do that again?... *
form {
margin: 0px;
padding: 0px;
}
I've tested this and it works for me in IE6 so you should be alright now.
___________________________________
* Sorry... how do you do that again?... *
Replied 13 Apr 2005 13:53:02
13 Apr 2005 13:53:02 Dan Slade replied:
Thats the one!!!
Many thanks to both of you for your help and prompt replies, it was starting to get very frustrating...<img src=../images/dmxzone/forum/icon_smile_big.gif border=0 align=middle>
---------------------------------------------
If I knew what I was doing, I'd be dangerous...
Many thanks to both of you for your help and prompt replies, it was starting to get very frustrating...<img src=../images/dmxzone/forum/icon_smile_big.gif border=0 align=middle>
---------------------------------------------
If I knew what I was doing, I'd be dangerous...