margin question

Hi,

I'm getting a visual discrepancy in Internet Explorer between loading a .htm file alone, and when it is loaded as part of a page (i use an ajax script to load .htm files into a central div)

here's the file on my own
www.enviromark.ca/head/medical.htm
click 'workshops', and it's the 2nd level <ul>


and here it is in it's context (where it displays properly)
www.enviromark.ca/head/index.htm
click the fourth vertical black/white button, then click 'workshops', and it's the 2nd level <ul>

the css in question is

/* CSS Document */
html, body {
height:100%;
font-family: "verdana", trebuchet ms, arial, sans-serif;
font-size: 12px;
}
* a {
color: #0000A0;
text-decoration: none;
text-align: center
}
#pageHolder {
margin-top: 40px;
margin-left: 40px;
}
.centerLinks {
text-align: center;
margin-bottom: 20px;
}
.centerLinks a {
color: #006633;
margin-left: 10px;
margin-right: 10px;
}
.bold {
font-weight: bold
}
#pageHolder ul {
list-style:url(../images/bullet.gif) none outside;
padding:25px 0px 0px 15px;
margin: 5px 10px 0px 0px;
}
#pageHolder li {
margin-bottom: 15px
}
#pageHolder ul ul {
list-style:url(../images/bullet.gif) none outside;
padding:1px 0px 1px 15px;
margin:-15px 10px 2px 0px;
}
#pageHolder li li{
margin-top: -10px
}
#servicesMedical, #clinicsMedical, #workshopsMedical, #calendarMedical, #sexualityMedical, #drugEdMedical, #bodyImageMedical {
display: none
}
#linksMedical {
margin-bottom: 15px;
text-align: center;
height: 20px
}
#linksMedical a {
margin-left: 10px;
margin-right: 10px
}

they look the same to me. But I did notice your nesting your lists wrong.

you have:

<li>Last year the health education team visited over 800 youth.</li>
<ul><li>All of our topics can be catered to the needs of the group.</li></ul>
<li>Trained and accountable presenters facilitate our workshop sessions and are presented in an accessible and non-judgmental manner.</li>


it should be:

<li>Last year the health education team visited over 800 youth.
<ul><li>All of our topics can be catered to the needs of the group.</li></ul>
</li>
<li>Trained and accountable presenters facilitate our workshop sessions and are presented in an accessible and non-judgmental manner.</li>


that might be causing the issue that you see.

PERFECT!

Thanks :)

Maybe you can point something out for me, because i can't seem to figure it out

1) in IE -- on the page www.enviromark.ca/head.index.htm, if you click the 2nd vertical button and then click on 'main points' ... if you click any of the green links the list bullet appears to be cut in half... I can't figure out why

Thanks again Harbinger :o

#mainPointsYPP ul {
list-style:url(../images/bullet.gif) none outside;
padding:25px 0px 1px 15px;
margin:5px 0px 2px 0px;
}


try making that 24px and see if it doesn't fix IE. IE like 24"ish" px for the LI's when they bullets. Go figure.

I didn't check all the pages but it appears your using a different css for each page. If so you'll need to fix that on all of them.

Have fun, it's a jungle in that code ;)

hahah, thank you.

Honestly though, any suggestions for streamlining the CSS would be much appreciated. The only requirement is that each page has its own css file associated (annoying but the people here want it that way so they can make aesthetic changes easily when i'm not around :)