Pulldown Menu Vertical Spacing (PC vs Mac)

@pointypussFeb 03.2003

~~[url]~~http://www.virmalo.net[/url]

Working with stacked pulldowns (as you can see at the link above or the attached image).

On a mac (attached screenshot) the dropdowns hold together with about 2-4 pixel spaces between them – Nice! On a PC the spacing is huge (10-15 pixels)… making the bottom few pulldowns drop below the bottom border of my frameset.

Does anyone know how to get this spacing consistent?

Thanks in advance.

~~[upl-file uuid=cc87579f-d363-41f0-b9ea-4356cbd634db size=21kB]~~howitshouldlook.jpg[/upl-file]

to post a comment

HTML

14 Comments(s) _↴

@Zach_ElfersFeb 03.2003 — #What browser are you using on the PC? To me on NS 7.0 it looks like their is no spacing.

You can set the spacing by do <select style="margin:2px;">. This might not have the effect you want though. If the select's are still appearing with that extra space that you don't want, do this: <select style="position:relative;top:-15px;">. DON'T add this to the topmost select. Only to the one's below it. You will have to double the top:-15px; from the third one down and on.

@pointypussauthorFeb 03.2003 — #Sorry... Netscape is fine, yes (I usually ignore netscape at this point - their market share is down to something like 3%) - IE adds the extra spaces.

The negative pixel shift you suggest sounds promising... I will try and repost my results here.

@StefanFeb 04.2003 — #[i]Originally posted by pointypuss [/i]

Sorry... Netscape is fine, yes (I usually ignore netscape at this point - their market share is down to something like 3%) - IE adds the extra spaces.
[/QUOTE]

From a webdesinging point of view ignoring NS 6+ is a bad idea, becuse it's the most correctly to spec working browser today. That means that if it looks like you want it in it but not in another browser, you are very likely looking at a browserbug in the other browser. Knowing if you are dealing with a desing flaw or a browserbug is normally the first step to finding the solution.

Anyway, I see that each selectbox is inside it's own form. Try using CSS to specificaly set {margin: 0; } on the form.

BTW, I see you for some reason are placing all your forms inside a table. Why?

I suggest you remove it all togheter as they are not doing anything apart from bloating your code.

@pointypussauthorFeb 04.2003 — #NETSCAPE:

Netscape 7 on the Mac is nice, but Netscape 6 for PC has been horrid in my experience. Tabbed browsing is nice though. Learn more:

http://www.oreilly.com/news/flanagan_1100.html

http://thebase.weblogger.com/stories/storyReader$3146

http://www.evolt.org/article/Does_Netscape_6_Break_Your_Table_Layouts/17/4427/

PULLDOWN SPACING:

I previously tried them as you suggested in the previous post, not in table rows but all together, but it did not help. Perhaps in conjunction with the MARGIN tag or negative pixels tag it may work.

Have not gotten to trying these suggestions yet, but soon soon.

Thanks again.

@toicontienFeb 05.2003 — #Try encasing all the pull-down menus and the table in one set of form tags, instead of each pull-down having it's own form. IE adds spacing around the forms. I've never tried using CSS to limit that, however.

@meowFeb 05.2003 — #Netscape 6 was a big bug based on Moz 0.6 or something. ?

Netscape 7 has been out for half a year and they are up to 7.1 now. I say check in the latest first. :p

@pointypussauthorFeb 06.2003 — #Netscape 6, Netscape 7, Mozilla, Oh My!

Weren't we talking about pulldowns! ?

Yea, so the Margin=0 was a no-go.

But using only one form tag sounds promising...

Thanks again.

@pointypussauthorFeb 06.2003 — #Just tried putting all pulldowns in one form tag, but that unfortunately disables the javascripts that jump the form. Not sure if it kills the spacing issue on a PC (on a mac now) but will see if it did later this eveing.

Thanks again agian.

@StefanFeb 06.2003 — #Funny how removing the compleatly unnessecary table and adding 0 margin to the forms seems to work for me.

Are you sure you tried it before saying it didn't work?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>- virmalo.net of north america -</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta http-equiv="Content-Script-Type" content="text/javascript">

<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">

form {margin:0;}

</style>

<script language="javascript">

function jump(form) {

var myindex=form.menu.selectedIndex

if (form.menu.options[myindex].value != "0")

{window.open(form.menu.options[myindex].value, target="R");

}

}

function jumpNew(form) {

var myindex=form.menu.selectedIndex

if (form.menu.options[myindex].value != "0")

{

window.open(form.menu.options[myindex].value, target="");

}

}

</script>

</head>

<body>

<form name="recent">

<select name="menu" size="1" style="margin:0px; background-color:#f00; border-style:0px; font-size: 9; color: #fff; font-family: Geneva, arial" onchange="jump(this.form)">

<option value="index_R.htm" selected>recent work

<option value="index_R.htm">-----------------------------

<option value="work/rene/rene_R.htm">web : renemarie (2002)

<option value="work/esmill/esmill_R.htm">illustration : esm ills (2002)

<option value="work/arch/arch_R.htm">web : site architecture (2002)

<option value="work/vma/vma_R.htm">web : vma (2002)

<option value="work/space/space_R.htm">web : spacetrucker (2002)

<option value="work/thome/thome_R.htm">web : triphome (2001)

<option value="work/thomeph/thomeph_R.htm">photo : triphome pics (2001)

</select>

</form>

<form name="old">

<select name="menu" size="1" style="margin:0px; background-color:#f60; border-style:0px; font-size: 9; color: #fff; font-family: Geneva, arial" onchange="jump(this.form)">

<option value="index_R.htm" selected>old work

<option value="index_R.htm">-----------------------------

<option value="work/ubzcd/ubzcd_R.htm">print : ubuzz cd (2001)

<option value="work/loewy/loewy_R.htm">illustration : loewy (2001)

<option value="work/adzf/adzf_R.htm">print : focus24 (2001)

<option value="work/adzintro/adzintro_R.htm">motion : adz flash intro (2000)

<option value="work/ubzproach/ubzproach_R.htm">motion : roach (1999)

<option value="work/ceb/ceb_R.htm">motion : caution (1999)

<option value="work/cubic/cubic_R.htm">type : cubic display (1999)

<option value="work/self00/self00_R.htm">print : self promo cd (1999)

<option value="work/color/color_R.htm">print : color flyers (1999)

</select>

</form>

<form name="influence">

<select name="menu" size="1" style="margin:0px; background-color:#039; border-style:0px; font-size: 9; color: #fff; font-family: Geneva, arial" onchange="jumpNew(this.form)">

<option value="0" selected>influence links

<option value="0">-----------------------------

<option value="http://www.fantagraphics.com/artist/acme/acme.html">beauty : acme novelty

<option value="http://www.warprecords.com">sound : warp records

<option value="http://www.pixelsurgeon.com/pages/interview/design/jakobnielsen/index.html">information : jakob nielsen 01

<option value="http://www.useit.com/alertbox">information : jakob nielsen 02

<option value="http://www.manovich.net">information : lev manovich

<option value="http://www.stereotypography.com">links : stereotypography

<option value="http://www.theconnection.org/shows/2003/01/20030121_b_main.asp">sound : a love supreme

<option value="http://www.refreshreload.com">function : screensaver

<option value="http://www.thislife.org">information : this american life

</select>

</form>

<form name="brett">

<select name="menu" size="1" style="margin:0px; background-color:#060; border-style:0px; font-size: 9; color: #fff; font-family: Geneva, arial" onchange="jump(this.form)">

<option value="index_R.htm" selected>influence text

<option value="index_R.htm">-----------------------------

<option value="0">coming soon...

</select>

</form>

<form name="brett">

<select name="menu" size="1" style="margin:0px; background-color:#606; border-style:0px; font-size: 9; color: #fff; font-family: Geneva, arial" onchange="jump(this.form)">

<option value="index_R.htm" selected>brett info

<option value="index_R.htm">-----------------------------

<option value="contact/contact.htm">[email protected]

<option value="contact/401.htm">401.272.8033

<option value="resume/resume.htm">resume

</select>

</form>

</body>

</html>

@pointypussauthorFeb 09.2003 — #Got it.

The form tag needs to include a style="margin:0px" to ensure that PCs don't add a border due to the form tag.

Stephen...

The table ensures that on a MAC the tables stack vertical and not horizonatal. BR tags between the forms make th eMac run vertical but leaves too big a break on a PC. Your solution (it works on the PC) is inconsistent on the Mac.

Thank you for your help everyone.

@StefanFeb 10.2003 — #[i]Originally posted by pointypuss [/i]

Stephen...

The table ensures that on a MAC the tables stack vertical and not horizonatal.
[/QUOTE]

I assume you meant to write form instead of the second table?

Is that a common error on Mac browsers?

Could it be solved by eg using <div> around (or instead) of <form>?

@pointypussauthorFeb 10.2003 — #Stefan: "I assume you meant to write form instead of the second table? "

Me: Yes. The table ensures that on a MAC the FORMS stack vertical and not horizonatal.

--

Stefan "Is that a common error on Mac browsers? Could it be solved by eg using <div> around (or instead) of <form>? "

Me: Not sure. I am a novice with forms. i know I can;t use DIV to replace FORM, as I need to FORM tags to connect to my javascript.

If these is a site related to this and you want me to test on the mac, let me know. I will send you a screenshot.

@StefanFeb 10.2003 — #[i]Originally posted by pointypuss [/i]

i know I can;t use DIV to replace FORM, as I need to FORM tags to connect to my javascript.
[/QUOTE]

Well you could rewite the JS to connect to the <div>s instead of the <form>s, but even if you don't rewite the code something like this should make the <table> unnessecary.

<div>

<form>

</form>

</div>

@pointypussauthorFeb 13.2003 — #true, true.

Thanks again stefen. You are a wiser man then I.

Also in #HTML _↴

Success!

Help @pointypuss spread the word by sharing this article on Twitter...

Tweet This

Pulldown Menu Vertical Spacing (PC vs Mac)

14 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Pulldown Menu Vertical Spacing (PC vs Mac)

14 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #HTML _↴