CSS Safari Problem

[Nick Howes]

I have this web page in development, using CSS and with menu and body
divs.. basically on Safari the main text is all inside the menu div, I'm
sure the divs are terminated properly (w3 validator doesn't say anything
about it):

http://www.mildmanneredjanitor.com:8081/harmony/interfaces/start_session.jsp

I know the nested list is invalid XHTML at the moment and the <hr>'s aren't
<hr />'d, I'm fixing them in the next iteration, they shouldn't be the
problem? Works fine on IE for Mac and Windows, and Mozilla Firebird on
Windows and Linux.

I tried a static version with these problems fixed, I don't have a mac so I
can't myself look at them and the person I'm working with on his mac is
across the Atlantic, could somebody see if this version is any better on
Safari:

http://www.thehowesfamily.com/nick/efa/index.htm

Or even if you haven't got a mac and you notice something stupid about the
source... please lend a hand.

Thanks

 

[Toby A Inkster]

I have this web page in development, using CSS and with menu and body
divs.. basically on Safari the main text is all inside the menu div, I'm
sure the divs are terminated properly (w3 validator doesn't say anything
about it):

http://www.mildmanneredjanitor.com:8081/harmony/interfaces/start_session.jsp

It is probably because of your nightmare lists! You have:

<div id="menu">
<ul>
<li><a href="#">Find out more</a></li>
<ul>
<li><a href="#">Decision Technologies Ltd</a></li>
<li><a href="#">Financial decision research</a></li>
<li><a href="#">The E-advice system</a></li>
<li><a href="#">Partnerships</a></li>

</ul>
<li><a href="#">Most Common Advice</a></li>
<ul>
<li><a href="#">Savings</a></li>
<li><a href="#">Investments</a></li>
<li><a href="#">Debts</a></li>
<li><a href="#">Mortgage</a></li>

<li><a href="#">Insurance</a></li>
</ul>
<li><a href="#">Contact Us</a></li>
<ul>
</div>

Try:

<div id="menu">
<ul>
<li><a href="#">Find out more</a>
<ul>
<li><a href="#">Decision Technologies Ltd</a></li>
<li><a href="#">Financial decision research</a></li>
<li><a href="#">The E-advice system</a></li>
<li><a href="#">Partnerships</a></li>

</ul></li>
<li><a href="#">Most Common Advice</a>
<ul>
<li><a href="#">Savings</a></li>
<li><a href="#">Investments</a></li>
<li><a href="#">Debts</a></li>
<li><a href="#">Mortgage</a></li>

<li><a href="#">Insurance</a></li>
</ul></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

This seems to fix the issue in Konqueror (and Safari uses Konqueror's
rendering engine)

 

[Nick Howes]

It is probably because of your nightmare lists!>

I did mention this in my original, with a link to a fixed version. Scroll
down in future! Did you find that one to work? If you say that's a common
problem in Safari/Konqueror, then it probably is the cure; especially as a
previous version without listed menu seemed to work, I just didn't think
that such an unrelated error could have that impact. Thanks for confirming
it anyway.

 

[Toby A Inkster]

I just didn't think
that such an unrelated error could have that impact. Thanks for confirming
it anyway.

It wasn't unrelated though. There were two unclosed <ul> elements (as well
as some weird nesting going on, but that's beside the point). Because the
<ul>s were unclosed, KHTML (Konq/Safari's rendering engine) thought the
rest of the page was inside the list.

 

[Nick Howes]

It wasn't unrelated though. There were two unclosed <ul> elements (as well
as some weird nesting going on, but that's beside the point). Because the
<ul>s were unclosed, KHTML (Konq/Safari's rendering engine) thought the
rest of the page was inside the list.

Yes... I thought I'd only done the nesting wrong, completely hadn't seen the
<ul> instead of </ul> at the end of it all! I can totally understand why
that would mess up the page. So that was probably what was causing the
original symptom.

Cheers