Click to See Complete Forum and Search --> : Pulldown Menu Vertical Spacing (PC vs Mac)
pointypuss
02-03-2003, 09:39 AM
http://www.virmalo.net
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.
Zach Elfers
02-03-2003, 09:53 AM
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.
pointypuss
02-03-2003, 01:39 PM
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.
Stefan
02-04-2003, 01:59 AM
Originally posted by pointypuss
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.
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.
pointypuss
02-04-2003, 08:55 AM
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.
toicontien
02-04-2003, 10:53 PM
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.
Netscape 6 was a big bug based on Moz 0.6 or something. :D
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
pointypuss
02-05-2003, 07:12 PM
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.
pointypuss
02-05-2003, 07:21 PM
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.
Stefan
02-06-2003, 09:58 AM
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">brett@virmalo.net
<option value="contact/401.htm">401.272.8033
<option value="resume/resume.htm">resume
</select>
</form>
</body>
</html>
pointypuss
02-09-2003, 05:25 PM
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.
Stefan
02-10-2003, 01:40 AM
Originally posted by pointypuss
Stephen...
The table ensures that on a MAC the tables stack vertical and not horizonatal.
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>?
pointypuss
02-10-2003, 10:10 AM
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.
Stefan
02-10-2003, 12:14 PM
Originally posted by pointypuss
i know I can;t use DIV to replace FORM, as I need to FORM tags to connect to my javascript.
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>
pointypuss
02-13-2003, 01:17 PM
true, true.
Thanks again stefen. You are a wiser man then I.