Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Optimizing CSS for form field in firefox?

    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!
    Code:
    <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
    Last edited by Simon Lloyd; 12-22-2009 at 07:47 AM.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Simon Lloyd View Post
    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!
    Code:
    <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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New Coder
    Join Date
    Dec 2009
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.
    Last edited by Rowsdower!; 12-22-2009 at 04:02 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    Simon Lloyd (12-22-2009)

  • #5
    New Coder
    Join Date
    Dec 2009
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    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

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Simon Lloyd View Post
    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. 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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    New Coder
    Join Date
    Dec 2009
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Simon Lloyd View Post
    ...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:
    Code:
    <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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #10
    New Coder
    Join Date
    Dec 2009
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.
    Attached Thumbnails Attached Thumbnails Optimizing CSS for form field in firefox?-forum.jpg  

  • #11
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Simon Lloyd View Post
    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:
    Code:
    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:
    Code:
    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.
    Attached Thumbnails Attached Thumbnails Optimizing CSS for form field in firefox?-test.jpg  
    Last edited by Rowsdower!; 12-22-2009 at 09:01 PM. Reason: Attaching image...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #12
    New Coder
    Join Date
    Dec 2009
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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!

  • #13
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Simon Lloyd View Post
    ...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.

    Quote Originally Posted by Simon Lloyd View Post
    ...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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #14
    New Coder
    Join Date
    Dec 2009
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •