form <select> inside <a>
Regular
Posted: Thu, 2008-05-08 09:04
I have a weird problem,
I have tabs, each tab is an <a> tag, inside one tab i'd like a list box. easier said than done.
my code for this is:
<form>
<a href="#">
Tab Name
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
</a>
</form>IE will handle this fine, but in firefox expanding the list box acts like clicking the link.
i'm pretty sure its not proper markup to put form elements inside of anchor tags.. but i've been using anchor tags with CSS to keep minimal markup. thats the beauty of CSS right?
to get around this I would have to change the entire structure of my tab system... I kinda got my hands tied behind my back.... 
any help?
Enthusiast
Posts: 201
Joined: 2008-03-16
jrock wrote:I have a weird
Posted: Thu, 2008-05-08 09:56
So, where is your CSS?
I am not getting the sense of giving options when you link away right in front of it
Moderator
Posts: 6509
Joined: 2004-05-01
Location: Brisbane
jrock wrote:but i've been
Posted: Thu, 2008-05-08 11:12
Er, no. CSS won't work correctly cross browser with invalid markup and what you have there is a very bad example of that. You're going to need to give more details about what you're actually trying to do to get helpful advice.
How to get help
tags.
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use
My articles | CSS Reference
Regular
Posts: 34
Joined: 2008-04-16
Caposoft wrote: I am not
Posted: Thu, 2008-05-08 16:18
I have a tab called Calender, I click the tab to load the calender and events, the drop-down is to select what type of calender, whether it's School, Business, Activities, Family, etc. ...
The a tag targets an iFrame so it's not really linking away.
Alright, here is my HTML code:
<div class="tabBox" style="text-align: left;"><div class="tabArea">
View:
<a class="tab" id="currentDate" href="eventsModule.php?type=family&show=today" target="tabIframe2"><script type="text/javascript">showDate();</script></a>
<a class="tab" href="eventsModule.php?type=family&show=week" target="tabIframe2">Week</a>
<a class="tab" href="eventsModule.php?type=family&show=bi-week" target="tabIframe2">Bi-Week</a>
<a class="tab" href="eventsModule.php?type=family&show=month" target="tabIframe2">Month</a>
<a class="tab" href="eventsModule.php?type=family&show=all" target="tabIframe2">All</a>
</div>
<div class="tabMain">
<div class="tabIframeWrapper"><iframe class="tabContent" id="tabContent" name="tabIframe2" src="eventsModule.php?type=family&show=today" marginheight="8" marginwidth="8" frameborder="0" style="border-left: none; border-right: none; border-bottom: none; height:245px;"></iframe></div>
</div>
</div>
^^ this is without any form elements.
here is my CSS:
div.tabBox {
position: relative;
margin: auto;
margin-bottom: 2em;
}
div.tabArea {
text-align: left;
font-size: 8pt;
font-weight: bold;
padding: 0px 0px 6px 4px;
}
a.xtraTab {
font-style: oblique;
background-color: #eee;
border: 1px solid #ccc;
border-bottom-width: 0px;
padding: 6px 12px 5px 12px;
position: relative;
top: 1px;
z-index: 2;
}
a.tab{
background-color: #ddd;
border: 0px solid #888;
border-bottom-width: 0px;
border-color: #888;
padding: 6px 12px 5px 12px;
position: relative;
text-decoration: none;
top: 1px;
z-index: 2;
}
a.tab, a.tab:visited, a.xtraTab, a.xtraTab:visited {
color: #272A36;
font-size: 9pt;
}
/* Passive Tab Hover*/
a.tab:hover, a.xtraTab:hover {
background-color: #333;
color: #fff;
}
/* Active Tab */
a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited, a.xtraTab.activeTab, a.xtraTab.activeTab:hover, a.xtraTab.activeTab:visited {
background-color: #fff7c3;
border: 1px solid;
border-bottom-width: 0px;
border-color: #888;
color: #000;
font-size: 10pt;
font-weight: bold;
}
a.tab.activeTab, a.xtraTab.activeTab {
padding-bottom: 9px;
top: -2px;
z-index: 3;
}
/* iFrame */
div.tabMain {
background-color: #fff;
position: relative;
z-index: 1;
}
div.tabIframeWrapper {
width: 100%;
}
iframe.tabContent {
background-color: #fff;
border: 1px solid #888;
width: 100%;
}
Here is my code w/ the form elements:
<a class="tab" href="memberHomeModule.php?show=schedule" target="tabIframe1">My Calender<form method="post" action="">
<select name="">
<option>All</option>
<option>Family</option>
<option>Friends</option>
<option>School</option>
<option>Business</option>
<option>Activities</option>
</select>
</form>
</a>
Enthusiast
Posts: 308
Joined: 2008-02-04
Location: Netherlands
Ah, well, in your first post
Posted: Tue, 2008-05-13 14:06
Ah, well, in your first post you had a form, and then an a inside... but in this last post, you have something clearly illegal : )
<a class="tab" href="memberHomeModule.php?show=schedule" target="tabIframe1">My Calender<form method="post" action="">
Inlines are like water and blocks are like buckets. Even though you can make an inline act like a block with CSS, it's still water trying to hold a bucket instead of the other way around. A is inline and form is a block.
So you already know that's gotta go.
And, yeah, the a is a link so of course it will try to take the user somewhere... so how can they use the form?
It seems to make more sense to use some sort of scripting (maybe server-side so it can even work for those without scrips enabled) in the form itself... otherwise, AJAX comes to mind, which does require Javacscript enabled but then you can have your menus/tabs/whatevers bring up the appropriate calendar based on which dropdown was selected (with server-side scripting the user would have to hit a submit button somewhere).
Hmm, I think first you should decide if you're going to stay with just the drop-down selecting is going to bring up the correct calendar or if the users must hit submit, before doing anything else with your code. Esp since frames can be a royal pain (at least for me to navigate through, I dunno about building... I HATE trying to tab through a frame page, bleh : ) and maybe you can just get rid of them entirely (since that seems to be the reason why you are using a's in the first place, to target another frame...)
...THEN we can figure out what you can do to get the same result. When code is all valid (HTML and CSS) then bug-squashing gets much easier.
Squish!
I'm no expert, but I can fake one on teh Interwebz
Regular
Posts: 34
Joined: 2008-04-16
Stomme poes wrote:I HATE
Posted: Tue, 2008-05-13 18:15
Well, i hate using iFrames aswell, but i'm no javascript/ajax script god, so.. how can I create something ajax intensive? it seems like you must know javascript language very well to be able to create something even as simple as tabs. On another note, most of the site i'm building is server-side scripted, but i'm just trying to create a gui for the user that works fluently without having to reload the entire page for every option they click on... hmmm.. iFrames work though.. i guess.
Enthusiast
Posts: 308
Joined: 2008-02-04
Location: Netherlands
Quote:how can I create
Posted: Wed, 2008-05-14 06:59
Nope, I've never done a page where "stuff happens" using tabs... all my tabs so far have been just menus, which does mean the whole page gets reloaded (well it would, except the work I do is make the HTML/CSS template and a colleague of mine who does all the programming throws it into a perl-based template, so only part of a page needs to be reloaded.. which is possibly another solution). I actually have a strong allergy to Javascript... I break out in annoyance. But it has its place.
In any case, if you have to stay with frames then we still need to get those a's out of there, they may not contain a block such as a form... your "action" within the form is empty, is there a way to move the ref of the anchor to the action of the form? Though then people still need to hit a submit-button to get anywhere. Hmmm... I saw a page Centauri made where clicking on the menu tabs looked like it made stuff appear on the page... but since I never saw the header, main image or footer reload, I think he must be using a template too... php includes. That might be a way around it.
We can still work with this, there's gotta be a way to get this valid and still have it working.
I'm no expert, but I can fake one on teh Interwebz
Regular
Posts: 34
Joined: 2008-04-16
thanks for your replies
Posted: Wed, 2008-05-14 07:36
thanks for your replies Stomme poes, I decided to just use a series of radio buttons instead since it was bad HTML anyways. and yes, javascript can be annoying, but o so powerful..
Enthusiast
Posts: 308
Joined: 2008-02-04
Location: Netherlands
How are you getting the
Posted: Wed, 2008-05-14 07:40
How are you getting the radio buttons to bring up the calendar though? Do the users have to hit a submit?
I'm no expert, but I can fake one on teh Interwebz
Regular
Posts: 34
Joined: 2008-04-16
Something like this, except
Posted: Wed, 2008-05-14 18:31
Something like this, except it submit when you select a field.
could be done with tabs, but this uses <input type="radio"> as markup.
http://developer.yahoo.com/yui/examples/button/btn_example04.html