(Yet another) Borders issue between IE7&FF

[Sadruddin]

Hi.
I have a disappearing borders problem.
It's also interesting in that it's OK in IE but not in FF.
My site sheffieldtrauma.com looks fine in IE7, but the borders on the navigation boxes disappear in Firefox.
The CSS file is sheffieldtrauma.com/stsc.css.
Which is strange, 'cos the WC3 validator doesn't mind, and nor does Dreamweaver CS3.
Any ideas?

 

[audiopro]

Try giving your menu area a height and width.


Keith

http://www.studiosoft.co.uk

 

[Sadruddin]

Thanks. I tried - didn't seem to help, though.

A bit more info - the borders seem to work on 'Span' tags, but not 'div' tags.

Like this:

<div id="menu"><ul>
<li><a href="trauma.html">Trauma</a></li>
<span>Attachment Therapy</span>
<li><a href="ptsd.html">PTSD</a></li>
<li><a href="psych.html">Psychotherapy</a></li>
<li><a href="children.html">Children</a></li>
<li><a href="emdr.html">EMDR</a></li>
<li><a href="supn.html">Supervision</a></li>
<li><a href="train.html">Training</a></li>
<li><a href="rates.html">Rates</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="contactus.html">Contact Us</a></li>
<span>0845 456 3898</span>
<li><a href="index.html">Home</a></li>
</ul></div>

 

[PaulBricker]

Try commenting out the line

border: #003399;

in the div

#menu a

I can't tell you why, but that seems to have done it for me.


Paul

 

[audiopro]

Well spotted Paul - That has to be a typo as it should be border-color:#003399;

Keith

http://www.studiosoft.co.uk

 

[Vragabond]

Sadruddin, which validator allows you to have span tags inside <ul> tags? There's only one tag allowed inside <ul> and that is <li>. Browsers can (and should) ignore all other tags there.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Sadruddin]

Hmmm. Agreed.
Dreamweaver doesn't seem to notice.
That said, how else do I get the effect I have on span, (red on white). Li doesn't do it.
Also, Dreamweaver didn't pick up on the border-color issue, either. And the w3c css validator didn't mind it, either

http://jigsaw.w3.org/css-validator/...sc.css&profile=css21&usermedium=all&warning=1

S

 

[PaulBricker]

You don't have to make them a list. You can just make them regular block items and float them left into each other for the same effect and then just make the background adjustments for the telephone number.


Paul

 

[ChrisHunt]

how else do I get the effect I have on span

You could put your <span> inside an <li>, or just give the <li> a class:

<div id="menu"><ul>
    <li><a href="trauma.html">Trauma</a></li>
    <li class="highlight">Attachment Therapy</li>
    <li><a href="ptsd.html">PTSD</a></li>
</ul></div>

Then your CSS could be something like this:

#menu ul {
   padding: 0;
   margin: 0;
   list-style: none;
}

#menu li {
   border: solid #039;
   border-width: 1px 2px;
   float: left;
   font-family: Arial, Helvetica, sans-serif; 
   font-size: 12px;
}

#menu li.highlight {
   background: #fff;
   color: #f00;
   padding: 1px 2px;
}

#menu li a {
   padding: 1px 2px;
   display: block;
   color: #039; 
   text-decoration: none;
}

#menu li a:hover {
   color: #f00;
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Sadruddin]

Excellent.
Thanks for this.
I made my changes based on the last response and now it's all fine!

Thanks, everyone.

S