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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question <li> and <ul> creating problems with Drop Down Menu

    hello cf

    trying to integrate a drop down menu into my site but I am encountering a small graphical hiccup.

    I am using the Liferay platform to work the front end side of the graphics and post content through a GUI portlet much like this text box to type for the fourms.
    this is how it appears when I am about to post it to the site
    and this is how it appears after I publish it
    it appears to me that the <li> and <ul> tags on the main css for the site have some sort of style that forces any <li> to have a bullet and for every <ul> to be dotted lines instead of a solid line.

    the main CSS for the site is server side and I mainly deal with the front end and usually go without access to that content.


    Code:
    <a class="MenuBarItemSubmenu" href="#">Research </a>
    				<ul>
    					<li>
    						<a href="#">1</a></li>
    					
    				</ul>
    			</li>


    I guess my question here is - is there any possible way I can ignore the rules set for <li> / <ul> so that my drop down menu will work correctly?

  • #2
    Senior Coder
    Join Date
    Jul 2011
    Posts
    1,226
    Thanks
    3
    Thanked 171 Times in 171 Posts
    can you not apply 'list-style-type: none;' to your <ul>? That should remove all bullet points. If you have no access to the CSS for some bizarre reason, just attach it to your <ul> by doing
    Code:
    <ul style="display:block; list-style-type:none;">
    . That should get rid of the default list style.

  • Users who have thanked BluePanther for this post:

    KidQuarrel (07-12-2011)

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by BluePanther View Post
    can you not apply 'list-style-type: none;' to your <ul>? That should remove all bullet points. If you have no access to the CSS for some bizarre reason, just attach it to your <ul> by doing
    Code:
    <ul style="display:block; list-style-type:none;">
    . That should get rid of the default list style.
    thanks! I tried this but it did not do the trick :|

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,776
    Thanks
    41
    Thanked 196 Times in 195 Posts
    how exactly are you using this GUI? like are you selecting areas and uploading them (similar to attaching files here) or are you hard coding <ul> <li> blah </li> <li> blah two </li> </ul> etc... i guess what i am driving at is from your post it seems as though you are selecting images to post and then idk what happens... is the GUI adding in the <ul> and <li> sections?

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by alykins View Post
    how exactly are you using this GUI? like are you selecting areas and uploading them (similar to attaching files here) or are you hard coding <ul> <li> blah </li> <li> blah two </li> </ul> etc... i guess what i am driving at is from your post it seems as though you are selecting images to post and then idk what happens... is the GUI adding in the <ul> and <li> sections?
    I am hard coding it. I open up a web content and press a button called "source" and then enter my code there.

    Code:
    <script src="http://mysite.com/content/menujs.js" type="text/javascript"></script>
    <link href="http://mysite.com/content/menucss.css" rel="stylesheet" type="text/css" />
    <div>
    	<center>
    		<center>
    			<ul class="MenuBarHorizontal" id="MenuBar1" style="display:block; list-style-type:none;">
    				<li>
    					<a href="#">Login</a></li>
    				<li>
    					<a href="#">Forums</a></li>
    				<li>
    					<a class="MenuBarItemSubmenu" href="#">Research </a>
    					<ul>
    						<li>
    							<a href="#">1</a></li>
    						<li>
    							<a href="#">2</a></li>
    						<li>
    							<a href="#">3</a></li>
    						<li>
    							<a href="#">4</a></li>
    						<li>
    							<a href="#">5</a></li>
    						<li>
    							<a href="#">6</a></li>
    					</ul>
    				</li>
    				<li>
    					<a class="MenuBarItemSubmenu" href="#">Support </a>
    					<ul>
    						<li>
    							<a href="#">1</a></li>
    						<li>
    							<a href="#">2</a></li>
    						<li>
    							<a href="#">3</a></li>
    						<li>
    							<a href="#">4</a></li>
    					</ul>
    				</li>
    			</ul>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>		</center>
    	</center>
    </div>

  • #6
    Senior Coder
    Join Date
    Jul 2011
    Posts
    1,226
    Thanks
    3
    Thanked 171 Times in 171 Posts
    Edit the menucss file to include list-style-type:none;, and make sure all the li's also have list-style-type:none;. If you have chrome, I suggest you use 'Inspect Element' to check your menu's CSS properties. Of firefox's plugin whose name escapes me.

  • #7
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    12345
    Last edited by KidQuarrel; 07-12-2011 at 09:33 PM. Reason: delete

  • #8
    Senior Coder
    Join Date
    Jul 2011
    Posts
    1,226
    Thanks
    3
    Thanked 171 Times in 171 Posts
    Any addition to the tag through the style attribute should override the initial style document. In other words, adding style="width:2px;" will cancel any width applied by a .css document. Open up your page in chrome's inspect element and you'll be able to see all your changes to your document in real time. Bullet points are created by the list-style-type attribute and I know I'm just repeating myself, but I do think the problem is related to that.

    Could you maybe link us to this bit of code so we can see exactly what's going on?


  •  

    Posting Permissions

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