Cause my LSI seem to get crunched when i zoom out with using the browser.

Am I making sense?

Reason being, it seems I spend more time hacking for IE6 than I would like, I am still not very good at it, and it has only 10% of the browser share and falling??

    <li><p>Oil-free formula suitable for use as moisturiser for oily skin and daily treatment for blemishes.</p> </li>
    <li><p>Calms and soothes inflamed, damaged and aggrevated skin and suitable for all dry, mature skins and dry skin conditions such as eczema. </p></li>
    <li><p>Enhances the effectiveness of other products such as moisturisers and serums allowing better absorption. </p></li>
    <li><p>Natural opulent fragrance instantly calms the mind creating peace and stillness. </p></li>
</p>
</ul>

Any help?

So... did i do this correctly or should I just leap off a tall buildin'?

CSS:

#nav {
    width:170px;
    float:right;
    margin-top:70px;
    }
   
#nav ul {
    width:170px;
    display:block;
    list-style:none;
    padding:0px;
    margin:0px;
    }
   
#nav li a:link {
    text-decoration:none;
    color:#9cdbfb;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    display:block;
    }

#nav li a:hover {
    color:white;
    text-transform:uppercase;
    }
   
#nav li {margin-bottom:3px;}
   
.airport {
    height:70px;
    font-size:20px;
    background-color:#000;
    border-bottom:thin inset white;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background-image:url(images/menu_icons/airplane_selector.png);
    background-position:5%;
    background-repeat:no-repeat;
    }

** .airport .banking .beaches .embassys.... etc: each have a different icon for each list item.
Now, when I try to close off the <div id="nav"> in DW it automatically requests an </li> immediately after the closing </ul>.

Am i missing something here?

HTML:

<div id="nav">
    <ul>
        <li span class="airport"><a href="#">Airports</a></span></li>
            <li span class="banking"><a href="#">Banking</a></span></li>
            <li span class="beaches"><a href="#">Beaches</a></span></li>
            <li span class="embassys"><a href="#">Embassy's</a></span></li>
            <li span class="hotels"><a href="#">Hotels</a></span></li>
            <li span class="hospitals"><a href="#">Hospitals</a></span></li>
            <li span class="rules"><a href="#">Kingdom Rules</a></span></li>
            <li span class="media"><a href="#">Media</a></span></li>
            <li span class="taxi"><a href="#">Taxi</a></span></li>
            <li span class="tours"><a href="#">Tours</a></span></li>
            <li span class="training"><a href="#">Training</a></span></li>
            <li span class="weather"><a href="#">Weather</a></span></li>
    </ul>

I'm working on a new layout for this site I'm doing and I can't seem to figure out why this one area is all messed up.
so as you should be able to see what I'm trying to do is put a video below the nav bar and then some text to the right. The video part is find and dandy. The text by itself also looks alright. But when I add a border to the text box I get this crazy set of boxes instead of a single square like with the video (when I added a border). I would have left it alone but I'm trying to put a background behind the text (http://www.userqqqq.123bemyhost.com/ima … ground.jpg)
Whenever I add the background via the stylesheet I get a mess.

<div id="promovideo">
    <object width="500" height="315">
        <param name="movie" value="http://www.youtube.com/v/jqd9GiaJUos&hl=en_US&fs=1&rel=0&color1=0x006699&color2=0x54abd6&border=1"></param>
        <param name="allowFullScreen" value="true"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed src="http://www.youtube.com/v/jqd9GiaJUos&hl=en_US&fs=1&rel=0&color1=0x006699&color2=0x54abd6&border=1" 
            type="application/x-shockwave-flash" 
            allowscriptaccess="always" 
            allowfullscreen="true" 
            width="500" 
            height="315">
        </embed>
    </object>
    </div>
    <div id="schedule">
        <h3>Glorious Church Schedule:</h3>
 
        <h5>For Worship:</h5>
        <p>Services Time:<br>
        <span title="sunday service time">Sun 11:00am - 1:00pm</span></p>
 
        <h5>For Learning:</h5>
        <p>Bible Study:<br>
        <span title="bible study time">Friday 7:00pm - 9:00pm</span><br></p>
        <h5>How to find us</h5>
        <span title="Bible Study Location">Location for Sunday Service and Bible Study is St. Paul School at Parliament and Queen St.80 Sackville St.<br>
        Toronto, Ontario<br>
        Canada.</span>
    </div>

CSS code.

#promovideo{
    width: 600px;
    float:left;
}
#schedule{
    width: 500px;
    border: .2em dotted #900;
    display: inline;
}

#schedule{
    width: 500px;
    border: .2em dotted #900;
    display: inline;
    background: url('../images/schedule_background.jpg');
    padding: 105px 50px 91px;
}

ul {line-style-type: none; }

in the main page instructions, and in every one of the sidebar divs, and it isn't working.  (When I set the instructions for the main page this way, the bullets disappeared for the navigation bar - which I also wanted - but I can't get the ones in the sidebar to disappear.)  What am I missing?

How can I make the backgrounds for the navigation bar fill the full height of that bar?  They are currently set up as the backgrounds for the links that comprise the list items.  Is there another way I could do this?

Basically, I am trying to create a layout that has a container that encompasses all of the text in an inner div, for instance:

html {
min-height: 100%;
height: 100%;
width: 100%;
}

body {
    min-height: 100%;
    height: 100%;
    width: 100%;
}

#container {
    min-height: 100%;
    height: 100%;
    width: 100%;
}

#main {
    width: 50%;
    margin-left: 200px;
    height: 100%;
    float: left;
    min-height: 100%;
}

<html>
<body>
<div id="container">
<div id="main">About 3 pages worth of text in here....</div>
</div>
</body>
</html>

With a setup similar to this, once I add so much text to the #main, the text overflows both the main, the #container, the body, and the html elements. I thought I could fix this by adding either, overflow: auto, overflow: hidden, or adding a clearing div to the bottom of #main, but none of these worked. I tested this by adding a border around #main and the text inside would flow out of the border once I added so much content. I know I am either setting up my floats wrong and/or it has something to do with the 100% height I am trying to implement. Any ideas? Thanks!

I tried to use the following code but it doesn't seem to work.

ul#navmenu li.activehome{
background-repeat:no-repeat;
background-position:22em 8px;
background-image:url(images/homeon.gif);
}
html>body ul#navmenu li.activehome{
background-position:22px 8px;
}

I want to make these coloured columns an even lengh. How do I do that.

Here is the website, look near the bottom you will see what I mean.

Thanks  

I know how to design half circle image (or full circle the same problem) with transparent background.But my problem is how to make only the half circle clickable and not the whole image square using CSS?
In other words how to make the transparent part unclickable as it doesn't exist?

1) I wonder what you all think is the best example of a free multi-tiered dropdown css-based nav
in terms of compatibility that's out there (to be interesting lets say it needs background images=sized block)?

b. Add also if you want, why css instead of javascript for nav menus, in terms of degradation.

2) Is there a good sniffer & media -info resource, out there you've seen?

Thanks, N

I'm building a site and am in need of a little bit of help.  My css knowledge isn't beyond basic so bear with me.

I have a main css file that I use for the entire site and all works well with that except for my links page.  I've been trying to overwrite the main css just for one part of the page but it ends up overwriting it for the entire page which isn't good.  I've tried inline css on the links page and I've tried divs but can't get it to work right unless I was doing it wrong I don't know.

Not sure what else to do.  the site is http://www.countryautoglass.com the links page is what I'm trying to correct.

The css code:

BODY {background: #ffffff; font-family:verdana}
TEXT {font-family:verdana}
A:link {color: #ffffff}
A:visited {color: #ffffff}
A:hover {COLOR:#FFFF3E; FONT-FAMILY:verdana; TEXT-DECORATION: underline overline}
TD {font-family:verdana;}

I want the links under the navigation bar to stay black and the navigation bar to stay how I have it in the main css file.  Couldn't find the info I needed in the help or searching the forums.

Any help or advice is appreciated,

Anita