Question

I'm developing a site using jQuery, and jQuery UI tabs. For some reason, my tabs (unordered list) are showing their bullets in all browsers (tested thus far) except Firefox 3 on OS X. It displays them in Safari OS X, FF 3 Windows, and Google Chrome Windows (IE displays all the divs in a big stack in the corner... but that's another story).

Ok, on to the actual meat of it. It appears I've applied list-style-type: none everywhere I can and can't seem to get rid of them. Here is what firebug reports about an li element with a rogue bullet:

font-family "Trebuchet MS",Trebuchet,Verdana,Helvetica,Arial,sans-serif
font-size   12px
font-weight bold 
font-style  normal
color   #000000
text-transform  none
text-decoration none
letter-spacing  normal
word-spacing    normal
line-height 14.4px
text-align  center
vertical-align  baseline
direction   ltr
Background
background-color    transparent
background-image    url(http://agrifuels-dev/media/css/tab.png)
background-repeat   no-repeat  
background-position 0 -50px
background-attachment   scroll
opacity 1
Box Model
width   64px
height  18px
top auto
right   auto
bottom  auto
left    auto
margin-top  0
margin-right    0
margin-bottom   0
margin-left 0
padding-top 6px
padding-right   0
padding-bottom  1px
padding-left    10px
border-top-width    0
border-right-width  0
border-bottom-width 0
border-left-width   0
border-top-color    #000000
border-right-color  #000000
border-bottom-color #000000
border-left-color   #000000
border-top-style    none
border-right-style  none
border-bottom-style none
border-left-style   none
Layout
position    static
display block
visibility  visible
z-index auto
overflow-x  visible
overflow-y  visible
white-space nowrap
clip    auto
float   none
clear   none
-moz-box-sizing content-box
Other
cursor  text
list-style-image    none
list-style-position outside
list-style-type disc
marker-offset   auto
0
86
offset
margin
0
0
0
1
border
0
0
0
0
padding
0
0
0
0
84 x 25 
clientLeft  0
clientTop   0
contentEditable   "inherit"
type   ""
value   -1
getBoundingClientRect  getBoundingClientRect()
getClientRects  getClientRects()
getElementsByClassName  getElementsByClassName()
scrollIntoView  scrollIntoView()
attributes  NamedNodeMap
baseURI   "http://agrifuels-dev/qcs/management_responsibility#"
childNodes  [a management...fragment-2]
className   ""
clientHeight  25
clientWidth   84
dir   ""
firstChild   a management...fragment-2
id    ""
innerHTML    "<a href="#fragment-2"><span>Closed</span></a>"
lang    ""
lastChild    a management...fragment-2
localName   "LI"
namespaceURI    null
nextSibling    "\n "
nodeName    "LI"
nodeType  1
nodeValue   null
offsetHeight   25
offsetLeft   86
offsetParent   div.tab_container
offsetTop    0
offsetWidth   84
ownerDocument   Document management_responsibility#
parentNode   ul.policy_page_tabs
prefix    null
previousSibling    "\n "
scrollHeight    25
scrollLeft    0
scrollTop    0
scrollWidth    84
spellcheck    false
style    CSSStyleDeclaration
tabIndex    -1
tagName    "LI"
textContent     "Closed"
title    ""

The list-style-type: disc seems to be coming from "html.css", which isn't part of my project. Is that maybe a css page from the browser or something?

Was it helpful?

Solution

Have you added the list-style:none to the ol/ul tag containing the li tag? Sometimes, browsers require the list-style attribute to be placed on the list rather than an individual list element.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top