...

View Full Version : <li> and <ul> creating problems with Drop Down Menu



KidQuarrel
07-12-2011, 08:39 PM
hello cf :thumbsup:

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 :)
http://i.imgur.com/Ev2xj.png




and this is how it appears after I publish it :(
http://i.imgur.com/Lckxk.png


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.




<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?

BluePanther
07-12-2011, 08:49 PM
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
<ul style="display:block; list-style-type:none;">. That should get rid of the default list style.

KidQuarrel
07-12-2011, 09:31 PM
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
<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 :|

alykins
07-12-2011, 09:37 PM
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?

KidQuarrel
07-12-2011, 09:41 PM
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.



<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>

BluePanther
07-12-2011, 09:54 PM
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.

KidQuarrel
07-12-2011, 10:15 PM
12345

BluePanther
07-12-2011, 10:30 PM
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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum