By mikeprinsloo on

I have the following in my style.css file to hide bullets in a specific view.

.view-content-home-image ul
{
    list-style: none;
    margin-left: -1em;
    padding-left: 5px;
    text-indent: -1em;
}

This works in Internet explorer 6 and 7 but in Firefox 1.5 and 2.0 it displays a bullet over the first letter of the list item.

Any help is greatly appreciated.

⋅ Categories: Drupal 5.x

Comments

vm’s picture

vm commented

I don't think list-style is correct shouldn't it be list-style-type: none; ?

mikeprinsloo’s picture

mikeprinsloo commented

I tried that but the result is the same as with list-style.

vm’s picture

vm commented

odd because its working in both browsers in this example http://css.maxdesign.com.au/floatutorial/tutorial0502.htm

coreyp_1’s picture

coreyp_1 commented

Mozilla/Firefox are often more exacting in their CSS interpretation and overrides. Perhaps you have not defined the class explicitely enough for their taste. I would be happy to look at it if you were to provide a link.

- Corey

avolve’s picture

avolve commented

i am having a similar issue with a project. I can't seem to get it to work in either Firefox or Safari

Here is the block code

<div id="block-views-name" class="block block-views">
  <h2>About this community</h2>
  <div class="content">
    <div class='view view-name'>
      <div class='view-content view-content-SandonPt'>
        <div class="item-list">
        <ul><li>
          <div class='view-item view-item-name'>
            <div class='view-field view-data-node_title'><a href="/about">About</a>
            </div>
          </div>
        </li><li>
        <div class='view-item view-item-name'>
          <div class='view-field view-data-node_title'><a href="/location">Location</a>
          </div>
        </div>
        </li><li>
        <div class='view-item view-item-name'>
          <div class='view-field view-data-node_title'><a href="/community">Local community</a>
          </div>
        </div>
        </li><li>
        <div class='view-item view-item-name'>
          <div class='view-field view-data-node_title'><a href="/history">History</a>
          </div>
        </div>
        </li></ul>
      </div>
    </div>
  </div>
</div>

I have tried both list-sytle:none & list-style-type:none for:

  • .block-views ul
  • .item-list ul

item-list ul overwrites what is generated in system.css. Both work for changing the padding.

I have also tried a host of other configurations...

I have looked at if for too long and can't understand why it will not work. Perhaps this will help lead to an answer for all of us??

any thoughts appreciated.

thx
c.

avolve designs | ethical by design

coreyp_1’s picture

coreyp_1 commented

Do you have a link where we can see this in context? Most of the devoper tools that makes this investigantion easier need to have a page to look at, with all the CSS involved, etc. Generally speaking, code in isolation is useless, because the problem is probably in the interaction of other CSS files, surrounding html, etc. Everything may look fine when isolated like this, but context is everything.

- Corey

avolve’s picture

avolve commented

thanks for the interest in helping Corey.

I have set it up so that the block can be viewed at

http://www.shonklands.info/user

[the site is 'offline']

I have worked on other projects all day and have not had a chance to get back to this issue. It is a views generated block

Any ideas you have would be appreciated.

Thanx
c.

avolve designs | ethical by design

coreyp_1’s picture

coreyp_1 commented

use this:

.list-item ul li {
  list-style-type: none;
}

- Corey

avolve’s picture

avolve commented

i re-added this code (must have been some corrupt text) and it now works

thx

[i edited (deleted) rather than add another post]

avolve designs | ethical by design

davegan’s picture

davegan commented

I have the same problem, and re-entering text doesn't change it.

coreyp_1’s picture

coreyp_1 commented

Do you have a link? The problem could be other conflicting code, but the only way to know for sure it to see the website in question.

- Corey

jbergeron’s picture

jbergeron commented

I've had similar problems with a couple different themes including Zen. You may want to check the icons.css style sheet for list style types. Some of them specify images there for the bullets.

jbergeron’s picture

jbergeron commented

I've had similar problems with a couple different themes including Zen. You may want to check the icons.css style sheet for list style types. Some of them specify images there for the bullets.

julien.reulos’s picture

julien.reulos commented

Well, It has been a long time since Mike asked for help but i will answer for all the drupallers like me that found this thread through google.

To hide bullets in a specific view, you have to put the following in your style.css sheet (i use drupal 4.7 and box grey stylesheet):

.name-of-your-view ul li 
{
  list-style-type: none;
  list-style-image: none;
}
tiff’s picture

tiff commented

comment moved to new thread http://drupal.org/node/213875