IE 7 still not that good!

[ToonMariner]

OK how can I solve this.

I have a content div which has a left margin of 140px; and a right border of 1px. There is a div to the left containg a div for navigation (sub nav width 140).

The navigation list has sub list. If the active section (the item in the list) has no sub-sections (ie. the li element has no child ul or li) then the left border of the content div moves all the way to the left of the page other wise it maintains its margin left setting and the border is in teh correct place.

The site is not live yet so I am including a couple of images to show you.

Image 1 is when the selected li has no child li's and image 2 is when it does.

here is the relevant html for ech case...

case 1 (the problem)
[code]
<div id="wrapper">
<div class="normal" id="accessibilty">
<span>Text Size</span>
<a id="accessnormal" href="/about-us/people/directors/mike-douglas/normaltext" title="Normal Text"><span>Normal Text</span></a>
<span class="hidden">|</span>
<a id="accesslarger" href="/about-us/people/directors/mike-douglas/largertext" title="Larger Text"><span>Larger Text</span></a>
<span class="hidden">|</span>
<a id="accessbig" href="/about-us/people/directors/mike-douglas/largertext" title="Big text"><span>Big Text</span></a>
</div>
<div id="leftpanel">
<h1><a class="live" href="/about-us" title="About Us">About Us</a></h1>
<div id="subnav">

<ul>
<li><a class="live" href="/about-us/people" title="People">People</a>
<ul>
<li><a class="live" href="/about-us/people/directors" title="Directors">Directors</a>
<ul>
<li><a class="live" href="/about-us/people/directors/mike-douglas" title="Mike Douglas">Mike Douglas</a> </li>
<li><a href="/about-us/people/directors/rob-charlton" title="Rob Charlton">Rob Charlton</a></li>
<li><a href="/about-us/people/directors/joe-gellert" title="Joe Gellert">Joe Gellert</a></li>
<li><a href="/about-us/people/directors/andy-roberts" title="Andy Roberts">Andy Roberts</a></li>
<li><a href="/about-us/people/directors/richard-elphick" title="Richard Elphick">Richard Elphick</a></li>
</ul>
</li>
<li><a href="/about-us/people/employee-spotlight" title="Employee Spotlight">Employee Spotlight</a></li>
</ul>
</li>
<li><a href="/about-us/history" title="History">History</a></li>
<li><a href="/about-us/background" title="Background">Background</a></li>
<li><a href="/about-us/culture" title="Culture">Culture</a></li>
<li><a href="/about-us/approach" title="Approach">Approach</a></li>
<li><a href="/about-us/news" title="News">News</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="media">
<img src="/global/images/people/directors/rob-charlton.jpg" alt="Rob Charlton - Managing Director" width="380" height="320" longdesc="/longdesc.php/rob_charlton" />
</div>
<div id="text">
<h1>Mike Douglas</h1>
<h2>Chairman</h2>
<p>Mike joined Waring and Netts in 1972 following the completion of his training in America. Mike has been involved in many major schemes over the years including Blyth Community Hospital and Health Centre and more recently the Newcastle Hospitals PFI. Mike became Chairman of the business following incorporation in 2004 and leads the board in its strategic direction.</p><p>A keen sportsman Mike’s interests include Cricket, Rugby and Fishing.</p>
<a href="/userfiles/mike-douglas.pdf" title="Mike Douglas">Curriculum Vitae</a>

</div>
<div class="clear"></div>
</div>
[/code]

case 2 (when the li has li children)

[code]
<div id="wrapper">
<div class="normal" id="accessibilty">
<span>Text Size</span>
<a id="accessnormal" href="/about-us/people/directors/normaltext" title="Normal Text"><span>Normal Text</span></a>
<span class="hidden">|</span>
<a id="accesslarger" href="/about-us/people/directors/largertext" title="Larger Text"><span>Larger Text</span></a>
<span class="hidden">|</span>
<a id="accessbig" href="/about-us/people/directors/largertext" title="Big text"><span>Big Text</span></a>
</div>
<div id="leftpanel">
<h1><a class="live" href="/about-us" title="About Us">About Us</a></h1>
<div id="subnav">

<ul>
<li><a class="live" href="/about-us/people" title="People">People</a>
<ul>
<li><a class="live" href="/about-us/people/directors" title="Directors">Directors</a>
<ul>
<li><a href="/about-us/people/directors/mike-douglas" title="Mike Douglas">Mike Douglas</a></li>
<li><a href="/about-us/people/directors/rob-charlton" title="Rob Charlton">Rob Charlton</a></li>
<li><a href="/about-us/people/directors/joe-gellert" title="Joe Gellert">Joe Gellert</a></li>
<li><a href="/about-us/people/directors/andy-roberts" title="Andy Roberts">Andy Roberts</a></li>
<li><a href="/about-us/people/directors/richard-elphick" title="Richard Elphick">Richard Elphick</a></li>
</ul>
</li>
<li><a href="/about-us/people/employee-spotlight" title="Employee Spotlight">Employee Spotlight</a></li>
</ul>
</li>
<li><a href="/about-us/history" title="History">History</a></li>
<li><a href="/about-us/background" title="Background">Background</a></li>
<li><a href="/about-us/culture" title="Culture">Culture</a></li>
<li><a href="/about-us/approach" title="Approach">Approach</a></li>
<li><a href="/about-us/news" title="News">News</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="media">
<img src="/global/images/people/directors/rob-charlton.jpg" alt="Rob Charlton - Managing Director" width="380" height="320" longdesc="/longdesc.php/rob_charlton" />
</div>
<div id="text">
<h1>Directors</h1>
<p>A mixed bunch, with spare time interests that range from travelling the world to raising alpacas, what unites the people that make up our Board is their many years’ experience, as well as a passion for exploring new and better ways of doing things.</p>
</div>
<div class="clear"></div>
</div>
</div>
[/code]

and finally the relevant css

[code]
div#wrapper
{
position: relative;
top: 0;
bottom: 0;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
margin: 18px 0;
}

div#wrapper div#leftpanel
{
float: left;
clear: left;
z-index: 1;
}

div#wrapper div#rightpanel
{
float: right;
clear: right;
z-index: 1;
}


div#wrapper div#leftpanel div#subnav ,
div#wrapper div#rightpanel div#subnav
{
width: 140px;
}

/*SUBNAV*/

div#wrapper div#leftpanel div#subnav ul ,
div#wrapper div#rightpanel div#subnav ul
{
list-style-type: none;
margin: 1em 0;
font-size: 0.8em;
}

div#wrapper div#leftpanel div#subnav li ,
div#wrapper div#rightpanel div#subnav li
{
margin: 2px 5px 2px 0;
text-indent: -5px;
padding-left: 5px;
}

div#wrapper div#leftpanel div#subnav ul ul ,
div#wrapper div#rightpanel div#subnav ul ul
{
margin: 0 0 0 5px;
font-size: 1em;
}

div#wrapper div#leftpanel div#subnav a ,
div#wrapper div#rightpanel div#subnav a
{
font-size: 0.9em;
font-weight: bold;
}

a.live
{
background: transparent;
color: #fdad3e;
}


div#wrapper div#content
{
padding: 0 0 0 0;
margin-left: 140px;
border-left: 1px solid gray;
padding-left: 10px;
}

[/code]

Any help here would really be appreciated...(and here's me thinking MS were really trying to give better standards support - that is of course I haven't balles it up!)


[attachment deleted by admin]

[ToonMariner]

Update on this one...

Not solved the problem yet but it appears to be when more than one paragraph appears in the text div. Hope that refreshes someones memory