CSS help, please!!

3speed · 08-07-2006, 05:04 AM

I'm fairly new to web design & CSS, but learning all the time. I'm having a few problems with my website that I just can't figure out. I have designed the site ( http://lagette.net ) on a mac and only have occasional access to a pc so I'm struggling to iron out IE6 problems.

1) On the vertical navigation list on the left, bullet points are showing up in internet explorer 6. In my CSS I have:

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

It looks fine in Safari, ie, opera & firefox on mac, but shows unwanted bullet points in ie on windows. Have searched on google, but I can only find references to the opposite problem where you want bullets but they don't show up.

2) I want the links in the main content to be underlined at all times. My navigation links & footer links are set to be underlined when active and hovered over, but not otherwise. At the moment main content links are underlined only when not visited. For visited, hover & active they are all not underlined. I don't know why! The CSS is:

a:link, a:visited, a:hover, a:active
{
text-decoration:underline;
}

This is for all browsers on mac, and ie6 on pc.

Hope this makes sense & hope someone can help!

Mrblogs · 08-10-2006, 07:52 AM

1)

In firefox I see the bullet points, as well as in IE - but for the Features section, and not the Navigation at the side.

They display normally.

2) You may want to try a:* { text-decoration: underline; }

Make sure also that you are including the right css file, and that your browser isn't caching the OLD css file.

niceguyeddie · 08-10-2006, 09:14 AM

You're going a little overboard on the div calls:

Code:

      <div id="leftColumn"> 
        <div id="innerLeftColumn"> 
          <div class="vnav"> 
            <ul>
              <li id="nav-news"><a href="http://www.lagette.net/news/" title="Find out family news and updates to the website">News</a></li>
              <li id="nav-names" title="Find out information on some of the names in the La Gette family tree."><a href="names.html">Surname data</a></li>
              <li id="nav-places"><a href="places/places.html"title="Find out information on some of the places in the La Gette family tree.">Places</a></li>

            </ul>
          </div>

Think of CSS as something that cascades down... In this example the lists inherent from LeftColumn, InnerLeftColumn, Class: vnav, UL, LI.

So, really you could do away with the vnav div and instead use:

Code:

<ul class="vnav">

However, to be even more fancy if you think about it, that one list is an ID that might have a class style attached. So, for instance, you might have a class of unordered lists that do not show bullets and one that does:

Code:

.bullets ul li {}
.nobullets ul li {list-style-type: none}

#vnav {font-color: #000;}

<ul id="vnav" class="nobullets">
    <li>one</li>
    <li>two</li>
</ul>

that way you can define your list style for this list, but still use the DOM in your javascript. In later lists, you might have id="newlist" class="bullets" ...

Make sense?

3speed · 08-11-2006, 04:51 AM

Ok thanks for that. I will try using the * { text-decoration: underline; }

Also will try and sort my divs out! The second part of what you said, niceguyeddie, is going over my head a bit, but I will read some more about it.

I don't really know why I could see the bullet points in the wrong place when I looked at it. A friend of mine who has a pc said it looked fine, but i looked at it from my workplace and it was messed up.

Mrblogs · 08-11-2006, 07:50 AM

er make sure its a:* not *

!