Member Avatar for dante123

HI
i have two menu, one on the top and one on the left, they are generated from an outside php file that calls the "list-nav" id style, the problem is that i need to see an image as list-style-image in the left menu and the image is hidden, this is the style of the top menu:

/****************************toptmenu********************************************/
#menu{
margin-bottom:12px;
margin-top:20px;
text-align:right;
}

ul#list-nav {
/*list-style:none;*/
direction:ltr;
font-size:10.5px;
font-family:Helvetica Light;
}

ul#list-nav li {
display:inline;
border-right:1px #575354 solid;
padding:0 35px 0 35px;
}

ul#list-nav li a {
text-decoration:none;
font-weight:normal;
color:#000000;
text-align:center;
}

ul#list-nav li a:hover {
color:#eb0089;
}

ul#list-nav li.hebrew{padding-right:0; border-right:0}

And this is the style of the left menu:

/********************************leftmenu************************************************/
#logo{
margin-top:26px;
width:242px;
height:118px;
border-top:1px #8a8889 solid;
border-bottom:2px #000 solid;
background:transparent url("../images/logo.png") no-repeat 0 0;
margin-bottom:30px;
}

span#logospan 
{ 
visibility: hidden;
width:242px;
height:118px;
}

#left{float:left; width:242px; height:100%; position:absolute}

#imageMenu
{
background:transparent url("../images/imageMenu.gif") no-repeat 0 0;
width:707px;
height:118px;
border-top:1px #8a8889 solid;
border-bottom:2px #000 solid;
margin-bottom:33px;
}

#leftMenu ul#list-nav, #submenu ul#list-nav{
list-style: url("../images/plus.png") !important;
font-family:Helvetica Medium;
font-size:11px;
font-style:normal;
margin-left:0;
padding-left:0;
}

#leftMenu ul#list-nav li, #submenu ul#list-nav li{
display:block;
border-right:0 #575354 solid;
margin-bottom:14px;
margin-left:20px;
padding-left:0;
}
#submenu ul#list-nav{
Margin-top:30px;
font-family:Helvetica Light !important;
}
div.hr{
height:15px;
background: url("../images/borderB.png") repeat-x bottom;
}

div.hr hr {
  display: none;
}

#submenus{margin-top:20px}

why i can't see the bullet: "list-style: url("../images/plus.png") !important;"
thanks

  • 3 Contributors
  • 3 Replies
  • 111 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by drjohn

Dani AI

Generated

The left menu's bullets are almost certainly being suppressed by CSS rather than an image error. In this thread already has the left menu LIs set to behave like normal blocks, which removes the list-item marker; 's advice about checking the image path is still valid, and 's point about the float/absolute combination is worth checking because it can cause clipping. The most reliable fixes are to restore list-item rendering or to switch to a background icon for each LI.

Restore the marker (quick fix)

.left-menu ul li {
  display: list-item;            /* ensure markers are drawn */
  list-style-position: outside;  /* marker sits outside the content box */
  padding-left: 18px;            /* make room for the marker */
}

Use a background icon (more control, works when LIs must be block)

.left-menu ul li {
  list-style: none;
  background: url('icons/plus.png') no-repeat left center;
  padding-left: 22px; /* space for the icon */
}

Debug checklist (in order)

  • Verify the image request in DevTools Network (path is relative to the CSS file, not the HTML). See MDN on list-style-image for details: list-style-image.
  • Inspect the LI computed style to see if another rule overrides list-style or forces display:block: display.
  • Check parent overflow/positioning: markers positioned outside can be clipped if the container is absolutely positioned or has overflow:hidden.
  • Avoid duplicate IDs (using the same id on both menus is invalid); use classes so rules are unambiguous: id global attribute.

Applying one of the two CSS approaches above plus the checklist will reveal whether the problem is the marker being suppressed, the image path, or container clipping.

Recommended Answers

All 3 Replies

Member Avatar for Dragennd

The only thing that comes to mind is one of two things. 1) The image's location is different than that referenced in the code or 2) The !Important is throwing off the code for some reason. You might check to make sure you have your syntax correct for the list style image. The only other thing that stood out to me (and I'm not sure if this is an actual issue) is the code on line 19.

19.#left{float:left; width:242px; height:100%; position:absolute}

The missing semi-colon at the end of the line could cause an issue but small things like that always throw me off.

Member Avatar for dante123

I checked but it still doesn't work

Member Avatar for drjohn

line 19 float:left AND position:absolute ???

There's no need for a semi-colon at the end of the last style rule in any css declaration, but having one avoids problems later if you add another rule, as then you might forget to add it.

And solving this would be an awful lot easier if we could see the site and thus the problem in situ and all the code.
Post the url

Edited by drjohn
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.