...

View Full Version : Optimizing CSS for form field in firefox?



Simon Lloyd
12-22-2009, 07:43 AM
Hi all, i'm a newbie here and definately a newbie to css, php, html. I currently run a vBulletin powered forum but couldn't find how to get their native dropdowns nested (expanded tree view), so i found an online css generator that helped me create my navigation bar....i understood how to change and add things on the bar ok, but when adding a form feild, a couple of radio buttons and 2 further links to the same dropdown as the form one it throws everything out of whack in Firefox but looks and works great in IE can anybody help? below is the snippet of code i added before it went t**s up!

<li class=" cssMenui"><a class=" cssMenui" href="#"><span>Forum Search</span></a>
<ul class=" cssMenum">
<li class=" cssMenui"><a class=" cssMenui">

<form action="search.php?do=process" method="post">

<input type="hidden" name="do" value="process" />
<input type="hidden" name="quicksearch" value="1" />
<input type="hidden" name="childforums" value="1" />
<input type="hidden" name="exactname" value="1" />
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
<div><input type="text" class="bginput" name="query" size="17" tabindex="1001" /><input type="submit" class="button" value="$vbphrase[go]" tabindex="1004" /></div>
<div style="margin-top:$stylevar[cellpadding]px">
<label for="rb_nb_sp0"><input type="radio" name="showposts" value="0" id="rb_nb_sp0" tabindex="1002" checked="checked" />$vbphrase[show_threads]</label>
&nbsp;<br />
<label for="rb_nb_sp1"><input type="radio" name="showposts" value="1" id="rb_nb_sp1" tabindex="1003" />$vbphrase[show_posts]</label>
</div>
</form></a></li>
<li class=" cssMenui">
<if condition="$vboptions[threadtagging]"><a class=" cssMenui" href="tags.php$session[sessionurl_q]" rel="nofollow">$vbphrase[tag_search]</a>
</if></li>
<li class=" cssMenui"><a class=" cssMenui" href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[advanced_search]</a>
$template_hook[navbar_search_menu]</li>
</a></li></ul>I also find that the links that i have specified are sometmies a bit hit and miss, that is to say sometimes they get a 403.

Regards,
Simon Lloyd

Rowsdower!
12-22-2009, 02:09 PM
Hi all, i'm a newbie here and definately a newbie to css, php, html. I currently run a vBulletin powered forum but couldn't find how to get their native dropdowns nested (expanded tree view), so i found an online css generator that helped me create my navigation bar....i understood how to change and add things on the bar ok, but when adding a form feild, a couple of radio buttons and 2 further links to the same dropdown as the form one it throws everything out of whack in Firefox but looks and works great in IE can anybody help? below is the snippet of code i added before it went t**s up!

<li class=" cssMenui"><a class=" cssMenui" href="#"><span>Forum Search</span></a>
<ul class=" cssMenum">
<li class=" cssMenui"><a class=" cssMenui">

<form action="search.php?do=process" method="post">

<input type="hidden" name="do" value="process" />
<input type="hidden" name="quicksearch" value="1" />
<input type="hidden" name="childforums" value="1" />
<input type="hidden" name="exactname" value="1" />
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
<div><input type="text" class="bginput" name="query" size="17" tabindex="1001" /><input type="submit" class="button" value="$vbphrase[go]" tabindex="1004" /></div>
<div style="margin-top:$stylevar[cellpadding]px">
<label for="rb_nb_sp0"><input type="radio" name="showposts" value="0" id="rb_nb_sp0" tabindex="1002" checked="checked" />$vbphrase[show_threads]</label>
&nbsp;<br />
<label for="rb_nb_sp1"><input type="radio" name="showposts" value="1" id="rb_nb_sp1" tabindex="1003" />$vbphrase[show_posts]</label>
</div>
</form></a></li>
<li class=" cssMenui">
<if condition="$vboptions[threadtagging]"><a class=" cssMenui" href="tags.php$session[sessionurl_q]" rel="nofollow">$vbphrase[tag_search]</a>
</if></li>
<li class=" cssMenui"><a class=" cssMenui" href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[advanced_search]</a>
$template_hook[navbar_search_menu]</li>
</a></li></ul>I also find that the links that i have specified are sometmies a bit hit and miss, that is to say sometimes they get a 403.

Regards,
Simon Lloyd

Welcome to the forum! Giving us a link to the test page would be best so that we can debug what is actually there at this time. If that's not possible then it would be second best to post the full HTML (not the PHP source, just the resulting HTML) and the full CSS active on the page.

Once we have that we can be much more constructive.

Simon Lloyd
12-22-2009, 02:58 PM
Thanks for the reply!, the navbar can be found here http://www.thecodecage.com (the navbar i'm concerned with is the new one in the header, this header is viewable in every page), you will need to log in to view the navbar.

Username: CodingForums
Pword: CF123

Kind regards,
SImon

Rowsdower!
12-22-2009, 03:55 PM
OK, let's validate the page first (272 errors, 61 warnings based on the HTML delivered by the server).

I know people never want to hear this, but it's something you are going to have to do if you are serious about fixing this page. You will never be able to rely on cross-browser CSS performance with HTML that doesn't validate so this should be your first and most urgent concern.

Anyway, more specific to your question, it looks like Firefox is seeing your form as being OUTSIDE of the drop-down menu (the <ul> element). You most likely have a mis-match in closing element tags that is causing this. Moving the code snippet for the menu to the inside of the list seems to put the search function where it was meant to be.

Anyway, we can get into that more deeply after the HTML is valid per w3c specifications: http://validator.w3.org/

Since your page requires a login to be viewed you will need to view the source code of your page and paste it into the "validate by direct input" section of the validator. I highly recommend selecting the options to "show source" and to view "verbose output." These options are available on the front page of the validator in the bottom section ("More Options"). These two options make debugging your code much easier.


ALSO, on a somewhat unrelated note, you should really pull the javascript and CSS into separate files and link to them rather than having them appear in the HTML source code. This would make your pages load much more quickly due to browser caching. If you have questions about how to do that let me know.

Simon Lloyd
12-22-2009, 06:51 PM
OK, let's validate the page first (272 errors, 61 warnings based on the HTML delivered by the server).I have validated the page previously (before i started hacking around) and the validator shows native vbulletin software to have errors and faults??


I know people never want to hear this, but it's something you are going to have to do if you are serious about fixing this page. You will never be able to rely on cross-browser CSS performance with HTML that doesn't validate so this should be your first and most urgent concern.I am serious about fixing this, but i felt i couldn't trust the validator when it shows a clean vbulletin to have faults, just a standard url validation on this site gives 54 Errors, 2 warning(s)


Anyway, more specific to your question, it looks like Firefox is seeing your form as being OUTSIDE of the drop-down menu (the <ul> element). You most likely have a mis-match in closing element tags that is causing this. Moving the code snippet for the menu to the inside of the list seems to put the search function where it was meant to be.I know this probably sounds nieve but when i read the code it seems within the <li>


Anyway, we can get into that more deeply after the HTML is valid per w3c specifications: http://validator.w3.org/I will definitely have trouble with that as per my first comments and the fact i'm no coder, i can kinda get by :)



ALSO, on a somewhat unrelated note, you should really pull the javascript and CSS into separate files and link to them rather than having them appear in the HTML source code. This would make your pages load much more quickly due to browser caching. If you have questions about how to do that let me know.for the css vbulletin has a special section for additional css, however i would really like to make these fixes.

Regards,
Simon

Rowsdower!
12-22-2009, 07:08 PM
I know this probably sounds nieve but when i read the code it seems within the <li>

You're quite right. I realized it after posting, but I was viewing the code from within Firebug (highly recommended Firefox plugin, if you don't already have it) and it was actually showing me the "inferred" code that Firefox was rendering - it wasn't really there, but Firefox assumes it. This does illuminate one issue at hand, however, which is that you have placed a form element (block-level element) inside of an anchor element (in-line element). This would be one of the many issues reported in the validator.

Much like placing a paragraph within an anchor tag, Firefox assumes a missing close tag for your <a> element and - apparently in this case at least - is also assuming a missing set of close tags for the <li> and the <ul> nesting. I have honestly never tried to put a form inside of a list item before so I'm not sure if this is inherently undoable or not (I'm guessing that it's OK). I'm going to run some test code to see what turns up though before I make any solid comment on that.

In the meantime, at least get that form out of the <a> tag. You can change the <a> tag to a <div> and that will take care of the most immediate error. Just be sure to give the <div> the same class as your <a> tag had in order to maintain your style rules there.

I'll post back after I play with <ul> and <form> combinations. For now I will say that the validator should nearly always be trusted. Just because some invalid code is generated by vbulletin that does not make it any less invalid. :thumbsup: Once you know the rules you can spot errors even in fortune 500 company websites.

Browsers simply won't react with 100% reliability when code is funky. For now at least you should probably pull your menu section off to a separate file and get that part validated.

Simon Lloyd
12-22-2009, 07:26 PM
I have firebug but not entirely sure how to use it, i am at this moment making changes, i can't understand why i cannot use title="blah & blah" it shows & as an error, i've changed them but it doesn't ring the same :)

I cant go changing opening and closing <tr> tags as it suggests as i know 99% of them are native vbulletin and nothing i have changed, i will try to change what i can to resolve issues but won't mess with things outside my scope.

I have to thank you for your continued support, i know its way beyond my first question :)

As for the other thing you mentioned about serving the java script and css fromma seperate file, if that will help my forum run faster i would like to do that, but the css i thought was taken care of by vbulletins extra css module.

Very kind regards
Simon

abduraooft
12-22-2009, 07:56 PM
I have firebug but not entirely sure how to use it, i am at this moment making changes, i can't understand why i cannot use title="blah & blah" it shows & as an error, i've changed them but it doesn't ring the same You need to convert such characters in your output to their corresponding html entities. Here it's &amp;. You could use the function htmlentities()

PS: Such errors generally won't make any issues to the layout/functionality of the site.

Rowsdower!
12-22-2009, 07:59 PM
...As for the other thing you mentioned about serving the java script and css fromma seperate file, if that will help my forum run faster i would like to do that, but the css i thought was taken care of by vbulletins extra css module.

If that module is what is posting the extra css you enter into the document's head then I guess it's technically working. You'll get the presentation you expect that way but your users will have to download the thousands of characters of CSS every single time they change pages. It's not efficient at all, but if you aren't comfortable customizing your vbulletin then by all means leave it as is.


I tinkered around and got this menu block validated:
<ul class="cssMenu cssMenum">
<li class=" cssMenui"><a class=" cssMenui" href="http://www.thecodecage.com/forumz/" target="_parent" title="Forum Home Page">Forums View</a></li>

<li class=" cssMenui"><a class=" cssMenui" href="http://www.thecodecage.com/" target="_parent" title="members HomePage, full of information and links">Homepage</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="#"><span>Post 'n' Thread Tools</span></a><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class=" cssMenum">
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="forumdisplay.php?do=markread" target="_parent" title="Mark All Forums read">Mark Forums Read</a></li>
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=getnew&amp;member=1" target="_parent" title="Latest members posts">Members New Posts</a></li>
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=getdaily&amp;member=1" target="_parent" title="Members posts over the last 24 hours">Members Posts Today</a></li>
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=getnew" target="_parent" title="Latest Posts All Forums">New Posts</a></li>

<li class=" cssMenui"><a class=" cssMenui" href="#" title="Everything you have posted"><span>My Posts and Threads</span></a><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class=" cssMenum">
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=finduser&amp;u=1332" target="_parent" title="Any post you made">My Posts</a></li>
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=process&amp;showposts=0&amp;starteronly=1&amp;exactname=1&amp;searchuser=CodingForums" target="_parent" title="Any thread you started">My Threads</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class=" cssMenui"><a class=" cssMenui" href="#" title="Unanswered threads by section"><span>Unanswered Threads</span></a><!--[if lte IE 6]><table><tr><td><![endif]-->

<ul class=" cssMenum">
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=process&amp;replyless=1&amp;replylimit=0&amp;don tcache=1" target="_parent" title="Unanswered threads for all forums">All Forums</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="#" title="Excel forum threads"><span>Excel Threads</span></a><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class=" cssMenum">
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=process&amp;forumchoice[]=23&amp;childforums=0&amp;replyless=1&amp;replylimit=0&amp;nocache=0" target="_parent" title="Excel VBA Programming forum threads">Excel VBA Programming</a></li>
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=process&amp;forumchoice[]=24&amp;childforums=0&amp;replyless=1&amp;replylimit=0&amp;nocache=0" target="_parent" title="Excel Charting forum threads">Excel Charting</a></li>
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=process&amp;forumchoice[]=46&amp;childforums=0&amp;replyless=1&amp;replylimit=0&amp;nocache=0" target="_parent" title="Excel New User forum threads">Excel New Users</a></li>

<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=process&amp;forumchoice[]=45&amp;childforums=0&amp;replyless=1&amp;replylimit=0&amp;nocache=0" target="_parent" title="Excel Miscellaneous forum threads">Excel Miscellaneous</a></li>
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=process&amp;forumchoice[]=25&amp;childforums=0&amp;replyless=1&amp;replylimit=0&amp;nocache=0" target="_parent" title="Excel Worksheet Function forum threads">Excel Worksheet Functions</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class=" cssMenui"><a class=" cssMenui" href="#" title="Access forum threads"><span>Access Threads</span></a><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class=" cssMenum">
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=process&amp;forumchoice[]=26&amp;childforums=0&amp;replyless=1&amp;replylimit=0&amp;nocache=0" target="_parent" title="Access Vba Programming forum threads">Access Vba Programming</a></li>

<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=process&amp;forumchoice[]=27&amp;childforums=0&amp;replyless=1&amp;replylimit=0&amp;nocache=0" target="_parent" title="Access Database Function forum threads">Access Database Functions</a></li>
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=process&amp;forumchoice[]=28&amp;childforums=0&amp;replyless=1&amp;replylimit=0&amp;nocache=0" target="_parent" title="Access Table forum threads">Access Tables</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class=" cssMenui"><a class=" cssMenui" href="#" title="PowerPoint Forum threads"><span>PowerPoint</span></a><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class=" cssMenum">
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=process&amp;forumchoice[]=29&amp;childforums=0&amp;replyless=1&amp;replylimit=0&amp;nocache=0" target="_parent" title="PowerPoint Vba Programming forum threads">PowerPoint Vba Programming</a></li>

<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=process&amp;forumchoice[]=30&amp;childforums=0&amp;replyless=1&amp;replylimit=0&amp;nocache=0" target="_parent" title="PowerPoint Formatting forum threads">PowerPoint Formatting</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class=" cssMenui"><a class=" cssMenui" href="#" title="Project Forum threads"><span>Project Threads</span></a><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class=" cssMenum">
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=process&amp;forumchoice[]=31&amp;childforums=0&amp;replyless=1&amp;replylimit=0&amp;nocache=0" target="_parent" title="Project Formatting forum threads">Project Formatting</a></li>
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=process&amp;forumchoice[]=32&amp;childforums=0&amp;replyless=1&amp;replylimit=0&amp;nocache=0" target="_parent" title="Drawings &amp; Project Plan forum threads">Drawings and Project Plans</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class=" cssMenui"><a class=" cssMenui" href="#" title="Publisher Forum threads"><span>Publisher Threads</span></a><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class=" cssMenum">
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=process&amp;forumchoice[]=33&amp;childforums=0&amp;replyless=1&amp;replylimit=0&amp;nocache=0" target="_parent" title="Publisher VBA Programming forum threads">Publisher VBA Programming</a></li>
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=process&amp;forumchoice[]=34&amp;childforums=0&amp;replyless=1&amp;replylimit=0&amp;nocache=0" target="_parent" title="Formatting and Functionality forum threads">Formatting and Functionality</a></li>
</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class=" cssMenui"><a class=" cssMenui" href="#" title="Visio Forum threads"><span>Visio Threads</span></a><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class=" cssMenum">
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=process&amp;forumchoice[]=35&amp;childforums=0&amp;replyless=1&amp;replylimit=0&amp;nocache=0" target="_parent" title="Charts and Timeline forum threads">Charts and Timelines</a></li>
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=process&amp;forumchoice[]=36&amp;childforums=0&amp;replyless=1&amp;replylimit=0&amp;nocache=0" target="_parent" title="Drawings and Project Plan forum threads">Drawings and Project Plans</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

<li class=" cssMenui"><a class=" cssMenui" href="#" title="Word Forum threads"><span>Word Threads</span></a><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class=" cssMenum">
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=process&amp;forumchoice[]=37&amp;childforums=0&amp;replyless=1&amp;replylimit=0&amp;nocache=0" target="_parent" title="Document Properties andFormatting forum threads">Document Properties<br />and Formatting</a></li>
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=process&amp;forumchoice[]=38&amp;childforums=0&amp;replyless=1&amp;replylimit=0&amp;nocache=0" target="_parent" title="Word VBA Programming forum threads">Word VBA Programming</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class=" cssMenui"><a class=" cssMenui" href="#" title="Outlook Forum threads"><span>Outlook Threads</span></a><!--[if lte IE 6]><table><tr><td><![endif]-->

<ul class=" cssMenum">
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=process&amp;forumchoice[]=42&amp;childforums=0&amp;replyless=1&amp;replylimit=0&amp;nocache=0" target="_parent" title="Outlook Function forum threads">Outlook Functions</a></li>
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="search.php?do=process&amp;forumchoice[]=43&amp;childforums=0&amp;replyless=1&amp;replylimit=0&amp;nocache=0" target="_parent" title="Outlook Macro's and VBA forum threads">Outlook Macro's and VBA</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class=" cssMenui"><a class=" cssMenui" href="#" title="Useful resources, help and answers"><span>Resources and Help</span></a><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class=" cssMenum">
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="faq.php?faq=forumrules" target="_parent" title="Our forum rules, please read and try to follow them">Forum Rules</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="faq.php" target="_parent" title="Help on frequently asked questions">FAQs</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="helpvideos.php" target="_parent" title="A growing selection of help video's designed to help you navigate the forum">Forum Help Videos</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="extraresource.php" target="_parent" title="Our links page to useful websites">Resource Links</a></li>

<li class=" cssMenui"><a class=" cssMenui" href="helpfulanswers.php" target="_parent" title="Posts that members have rated as helpful, check them out!">Helpful Answers</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="calendar.php" target="_parent" title="Forum calendar and events">Calendar</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="local_links.php" target="_parent" title="Lots of off the shelf code for real life applications, why not submit an article yourself?">Code Cage<br /> Uploads/Downloads</a><br /></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="awc_ds.php?do=donation" target="_parent" title="Donations made go towards keeping these forums free and here in the future!">Donate to us</a></li>

<li class=" cssMenui"><a class=" cssMenui" href="http://www.thecodecage.com/hesk" target="_blank" title="A link to our HelpDesk ticketing system">Contact Us</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="#" title="The Code Cage extra services"><span>Our Services</span></a><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class=" cssMenum">
<li class=" cssMenui"><a class=" cssMenui" href="http://www.thecodecage.com/webhosting" target="_blank" title="A link to our hosting services">Hosting</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="http://www.thecodecage.com/blog" target="_blank" title="Our blog, feel free to visit and contribute.">Blog</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="http://www.thecodecage.com/register.html" target="_blank" title="Check out this link to our membership comparison page to see the benefits of purchasing a VIP membership!">Membership Comparison</a></li>

<li class=" cssMenui"><a class=" cssMenui" href="#" title="Not in use yet">Our Application Forms</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class=" cssMenui"><a class=" cssMenui" href="#" title="Members navigation to extra community tools"><span>Members Tools</span></a><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class=" cssMenum">
<li class=" cssMenui"><a class=" cssMenui" href="usercp.php" target="_parent" title="Your User Control Panle">User Control Panel</a></li>
<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="misc.php?do=buddylist&amp;buddies=0" target="_parent" title="Opens a window with your contact list to PM">My Buddy List</a></li>

<li class=" cssMenui"><a rel="nofollow" class=" cssMenui" href="profile.php?do=buddylist" target="_parent" title="Opens a window with your contact and friends list">My Contacts and Friends</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="members/albums.html" target="_parent" title="Pictures and albums list">Pictures and Albums</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="#" title="Tools for social groups,members and more"><span>Community Tools</span></a><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class=" cssMenum">
<li class=" cssMenui"><a class=" cssMenui" href="members/list/" target="_blank" title="Find Members">Find Members</a>

</li>

<!--[if lte IE 6]><table><tr><td><![endif]-->
<li class=" cssMenui"><a class=" cssMenui" href="groups/" target="_parent" title="members Social Groups">Social Groups</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="online.php" title="Who's online now">Who's Online</a></li>
</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

<li class=" cssMenui"><a class=" cssMenui" href="#"><span>Forum Search</span></a>
<ul class=" cssMenum">
<li class=" cssMenui">
<div class="cssMenui">
<form action="search.php?do=process" method="post">
<div>
<input type="hidden" name="do" value="process" />
<input type="hidden" name="quicksearch" value="1" />
<input type="hidden" name="childforums" value="1" />
<input type="hidden" name="exactname" value="1" />
<input type="hidden" name="s" value="" />
<input type="hidden" name="securitytoken" value="1261505703-eae0712fb8a709a7cb60844d9f3c785b3c9b013b" />
<input type="text" class="bginput" name="query" size="17" tabindex="1001" /><input type="submit" class="button" value="Go" tabindex="1004" />
<div>
<label for="rb_nb_sp0"><input type="radio" name="showposts" value="0" id="rb_nb_sp0" tabindex="1002" checked="checked" />Show Threads</label>&nbsp;<br />
<label for="rb_nb_sp1"><input type="radio" name="showposts" value="1" id="rb_nb_sp1" tabindex="1003" />Show Posts</label>
</div>
</div>
</form>
</div>
</li>
<li class=" cssMenui"><a class=" cssMenui" href="tags.php" rel="nofollow">Tag Search</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="search.php" accesskey="4" rel="nofollow">Advanced Search</a></li>


<!-- / header quick search form --></ul></li>
<li class=" cssMenui"> <a rel="nofollow" class=" cssMenui" href="login.php?do=logout&amp;logouthash=1261505703-eae0712fb8a709a7cb60844d9f3c785b3c9b013b" title="Log out of the forums removing Cookies">Log Out</a>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>

I don't know if it has everything you wanted where you wanted it because there were 2 or 3 places where <ul> or <li> (or both) were closed but list elements still followed. I made a best guess though and this validates as XHTML 1.0 transitional, which is what your page uses. Save a backup copy of your menu and then try popping the menu above into your page.

Simon Lloyd
12-22-2009, 08:15 PM
Thanks both!, @rowsdowner, thanks for taking the time to revise the code however it still doesn't change FF (see pic) but it makes the words Posts & Threads in the serach dropdown so tiny you cant read them in IE, i've left your code in place so you can see the effect on the forum.

Rowsdower!
12-22-2009, 08:48 PM
Thanks both!, @rowsdowner, thanks for taking the time to revise the code however it still doesn't change FF (see pic) but it makes the words Posts & Threads in the serach dropdown so tiny you cant read them in IE, i've left your code in place so you can see the effect on the forum.

The text became virtually invisible because of this:

ul.cssMenu li{
display:block;
margin:3px 0px 0px 3px;
font-size:0px;
}

You used to have your whole form wrapped inside of an anchor tag (which is not valid and was changed). Now that the <a> tag is gone, the text within the form is reverting to the next available style in the cascade. Since labels have not been styled separately (only <a> tags have specified style in the existing CSS) you will need to add something like this to your CSS:

color:#fff;
font-family:Verdana;
font-size:11px;

That will restore the appearance that you expect in IE. Which reminds me to mention before I forget again that you should quit using whatever menu generator you used for this. It pumps out invalid code and it attempts to compensate (hack) for IE6 using conditional comments but the syntax and overall approach are incorrect. It isn't the only problem you're having, but it's certainly giving you some garbage code.

As for Firefox, I'm just about stumped now. That menu validates perfectly well on its own (and operates with the existing menu CSS) but when it's in your page it still dumps the form out of the list.

This has something to do with Firefox not liking where that form is in your page. It keeps artificially closing your <li> and <ul> tags because it assumes there is an error. The issue might be completely fixed by validating the full page code but I have honestly never encountered this specific problem before. I couldn't guarantee that even that would work until I had tried it myself.

Simon Lloyd
12-22-2009, 09:05 PM
I appreciate all the help you have given :), i added this to the extra css
.lab{color:#fff;
font-family:Verdana;
font-size:11px;}
and in the label tag i did this <label ....etc class="lab"> and its fixed in IE but the text goes missing in FF

I had to use the generator to create the menubars as i am unable to do it myself, everything worked fine in both IE and FF until i added the search dropdown.

It's a little late now tonight to continue with the validation (and i know there's definitely lots i cannot change) but will be at it first thing tomorrow.....as i have been for a few days now!

Rowsdower!
12-22-2009, 09:16 PM
...but the text goes missing in FF...

Don't worry, the text is just white now and since it is on a white background you can't see it. Once the form gets itself back into the menu it will be fine.


...I had to use the generator to create the menubars as i am unable to do it myself...

Yep, that's perfectly understandable. My point is just that whichever particular one you found is not "Grade-A" material. You might want to search for another one somewhere.

Simon Lloyd
12-22-2009, 09:29 PM
I wont post back again tonight, but FYI this is the one i used http://purecssmenu.com/

Again, thanks very much for the responses, i will post back soon....have a great christmas!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum