[thelist] calling all css gurus >>>bl**dy css.....gggrrrr...
Scarlett Julian (ED)
Julian.Scarlett at sheffield.gov.uk
Mon Apr 29 08:43:01 CDT 2002
update:
if the links in the submenu are set to align left then the problem goes
away. This isn't a solution, I just mention it in case it gives someone some
clues.
thanks
J.
> -----Original Message-----
> From: Scarlett Julian (ED) [mailto:Julian.Scarlett at sheffield.gov.uk]
> Sent: Monday, April 29, 2002 2:39 PM
> To: 'thelist at lists.evolt.org'
> Subject: [thelist] calling all css gurus >>>bl**dy css.....gggrrrr...
>
>
> Hi all
>
> I don't know if anyone can solve this but if so they will
> earn my utmost
> respect.
>
> A page has two divs for layout both controlled by css
> positioning and both
> float left. The left one is a nav menu and the right contains
> content. In
> the right there is a submenu with more nav links that are
> aligned center. In
> IE5.0Win the text in the submenu moves to the right when a
> user moves the
> mouse over the menu in the left hand nav div. This behaviour
> is not shown in
> IE5.5Win, IE4Win, Opera6, or NS6.2. I'm sorry there's no URI
> cos it's on an
> intranet. The html and css are shown below.
> Many thanks in advance
>
> HTML
> **********
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
> "http://www.w3.org/TR/REC-html40/loose.dtd">
> <html><!-- #BeginTemplate "/Templates/bureau.dwt" -->
> <head>
> <!-- #BeginEditable "doctitle" -->
> <title>Bureau of Services to Schools</title>
> <!-- #EndEditable -->
> <meta http-equiv="Content-Type" content="text/html;
> charset=iso-8859-1">
> <link rel="stylesheet" href="style/bureau2.css" type="text/css"
> media="screen">
> <link rel="stylesheet" href="style/print2.css" type="text/css"
> media="print">
>
> </head>
>
> <body>
> <div class="banner">
> <div class="imageplacer"><a href="http://www.sheffield.gov.uk/"
> title="link to the Sheffield City Council home page"><img
> src="img/scclogo.gif" width="90" height="70" alt="Sheffield
> City Council"
> border="0"></a></div>
> <h1>Bureau of Services to Schools</h1></div><br>
> <div class="navmenu">
> <table width="145" border="0" cellspacing="0"
> cellpadding="1" summary="
> Layout table for navigation menu. Each link will take you to
> a top level
> page from which you can access sub-categories.">
> <tr>
> <td><a href="about.htm" title="information on what the
> Bureau is for,
> future plans and how to use the site">About
> the Bureau</a></td>
> </tr>
> <tr>
> <td><a href="contact.htm" title="contact details if you
> need to ask a
> question">Contact
> us</a></td>
> </tr>
> <tr>
> <td><a href="otherinfo.htm" title="useful information
> on the subject
> of purchasing">Other
> information</a></td>
> </tr>
> <tr>
> <td><a href="help.htm">How to use the site</a></td>
> </tr>
> <tr>
> <td><span class="navmenuheading">Service categories</span></td>
> </tr>
> <tr>
> <td><a href="effectiveness.htm" title="sub-categories are
> 'curriculum', 'schools management' and 'other'">School
> Effectiveness</a></td>
> </tr>
> <tr>
> <td><a href="finance.htm" title="sub-categories are 'budgets',
> 'payroll','insurance' and 'other'">Finance</a></td>
> </tr>
> <tr>
> <td><a href="personnel.htm" title="sub-categories are 'personnel
> services', 'supply teachers' and 'other'">Personnel</a></td>
> </tr>
> <tr>
> <td><a href="premises.htm" title="sub-categories are 'grounds',
> 'buildings', 'cleaning' and 'other'">Premises
> maintenance</a></td>
> </tr>
> <tr>
> <td><a href="facilities.htm" title="sub-categories are
> 'catering','ICT
> provision', 'transport' and 'other'">Facilities
> management</a></td>
> </tr>
> <tr>
> <td><a href="office.htm" title="sub-categories are
> 'office supplies',
> 'office machines' and 'other'">Office
> & admin</a></td>
> </tr>
> </table>
>
> </div>
> <!-- #BeginEditable "content" -->
> <div class="content">
> <h2 class="title">Personnel</h2>
> <div class="submenu"><a href="personnelserv.htm">Personnel
> services</a> | <a href="supply.htm">Supply
> teachers </a> | <a
> href="otherpers.htm">Other</a></div>
> <p>To narrow the list please choose from one of the links above.</p>
> <p>The table below shows all suppliers providing services
> pertaining to
> Human
> Resources management in the table below. Click on the name of the
> company
> to find out more information. </p>
>
> <table border=1 cellpadding=0 cellspacing=0>
> <tr >
> <th>Services provided</th>
> <th>Company name</th>
> <th>Address</th>
> <th>Contact</th>
> <th>Contract period if applicable*</th>
> </tr>
> <tr >
> <td >Human resources/personnel</td>
> <td ><a href="company/hbs.htm" target="_blank">HBS</a></td>
> <td > </td>
> <td >Mark Johnson - 01234 228132</td>
> <td > </td>
> </tr>
> <tr >
> <td >Human resources/personnel</td>
> <td ><a href="company/leahr.htm" target="_blank">LEA
> Human Resource
> Service</a></td>
> <td > </td>
> <td >see company information</td>
> <td > </td>
> </tr>
> <tr >
> <td >Supply teachers</td>
> <td ><a href="company/leasupply.htm"
> target="_blank">LEA Supply Agency
> (SESSA)</a></td>
> <td > </td>
> <td >Paul Thorpe - 2930919</td>
> <td > </td>
> </tr>
> </table>
> <br>
> * the contract period is only applicable to those suppliers
> with whom
> Sheffield
> City Council has a contract.
>
> </div>
> <!-- #EndEditable -->
> <div class="footer">
> <strong><em> Disclaimer</em></strong><br>
> The appearance of a supplier on this list does not mean
> that the LEA is
> recommending
> that supplier above others. None of the external
> suppliers have been
> quality
> assured by the LEA.
> </div>
>
>
> </body>
>
> <!-- #EndTemplate --></html>
> *******************************************
> CSS
> ************
> body { font-family: arial, helvetica, sans-serif; background-color:
> #e4ffff; font-size: x-small; margin: 0px 0px 0px 0px;}
> p { font-family: arial, helvetica, sans-serif; font-size: x-small;
> line-height: 1.25em;}
> h1 { font-family: arial, helvetica, sans-serif; font-size: medium;
> font-weight: bold; color: #000}
> table { font-family: arial, helvetica, sans-serif;
> font-size: x-small;
> border-color: 1px #369 solid;}
> td { text-align: center; border-color: #ccc;}
> th { border-color: #ccc;}
> a:link { font-family: arial, helvetica, sans-serif; text-decoration:
> underline; font-weight: normal; background-color: transparent;}
> a:hover { font-family: arial, helvetica, sans-serif; color: #fff;
> text-decoration: underline; background-color: #369;
> font-weight: normal;}
> a:active { font-family: arial, helvetica, sans-serif;
> text-decoration:
> underline; font-weight: normal;}
> a:visited { font-family: arial, helvetica, sans-serif;
> font-weight: normal;
> text-decoration: underline;}
> h2 { font-family: arial, helvetica, sans-serif; font-size: small;
> font-weight: bold; color: #000}
> h3 { font-family: arial, helvetica, sans-serif; font-size: x-small;
> font-weight: bold; color: #000}
>
> .banner { height: 80px; border-bottom: 1px #369 solid;
> border-top: 3px #369
> solid; margin-top: 5px; background-color: #eee;
> background-image:url(../img/bannerbg.gif); background-repeat: repeat;}
>
> .imageplacer { left: 5px; width: 100px; position: absolute;
> top: 10px;}
>
> .footer { background-color: #fff; font-family: arial,
> helvetica, sans-serif;
> font-size: 0.75em; color: #666; margin-left: 10px; border:
> 1px #369 solid;
> border-right: none; padding-top: 3px; padding-bottom: 5px;
> padding-left:
> 10px; padding-right: 10px; clear: both;}
>
> .navmenu { background-image:url(../img/bannerbg.gif);
> background-repeat:
> repeat; width: 145px; text-align: center; padding-top: 5px;
> padding-bottom:
> 5px; border : 1px #369 solid; margin-left:5px; margin-top:
> 0px; float: left;
> font-size: xx-small;}
>
> .soundbite { font-family: arial, helvetica, sans-serif;
> font-size: x-small;
> color: #003; width: 50%; text-align: center; margin-left: 35%}
>
> .content { background-color: #fff; margin-left: 10px; margin-top: 0px;
> margin-bottom: 10px; border-top: 1px #369 solid; border-left: 1px #369
> solid; border-bottom: 3px #369 double; padding: 10px; width: auto;
> float:left;}
>
> .banner h1 {color: #fff; margin-left: 165px;
> background-color: #336699;
> color: yellow; font-size: large; width: 370px; text-align: center;
> border-left: 3px #369 solid; border-bottom: 3px #369 solid;}
>
> .banner h2 {color: #000; margin-left: 180px;
> background-color: #e4ffff;
> font-size: medium; width: 370px; text-align: center;
> border-left: 3px #369
> solid; border-top: 3px #369 solid;}
>
> .title { width: 100%; font-family: arial, helvetica,
> sans-serif; font-size:
> medium; font-weight: bold; color: #369; border-left: 1px #ccc solid;
> border-bottom: 1px #ccc solid; padding-left: 10px;}
>
> .content h2 {color: #369;}
>
> .textnav { clear: both; border: 1px #ccc solid; border-left
> 3px; margin-top:
> 5px; text-align: center; padding: 2px;}
>
> fieldset { border: none;}
>
> .intro:first-letter
> {
> font-size:2.5em;
> float:left;
> }
>
> .bannertop { margin-left: 105px; height: 20px; border: 2px #000 solid;
> background-color: #e4ffff; color: #000;}
>
> .submenu { text-align: center; padding: 3px;
> background-color: #eee; border:
> 1px #369 solid;}
>
> .submenu a:link { font-family: arial, helvetica, sans-serif;
> text-decoration: underline; font-weight: bold; background-color:
> transparent;}
> .submenu a:hover { font-family: arial, helvetica,
> sans-serif; color: #f00;
> text-decoration: underline; background-color: transparent;
> font-weight:
> bold;}
> .submenu a:active { font-family: arial, helvetica, sans-serif;
> text-decoration: underline; font-weight: bold;}
> .submenu a:visited { font-family: arial, helvetica, sans-serif;
> font-weight: bold; text-decoration: underline;}
>
> .contentindex { font-size: small; text-align: center;
> background-image:url(../img/montage.jpg); background-repeat:
> no-repeat;
> background-position: center center; margin-left: 10px;
> margin-top: 0px;
> border-left: 3px #369 solid; padding: 10px; width: auto;
> float: left; }
>
> .navmenu a {width: 144px; padding: 2px; background-color: #369; color:
> yellow; border: 1px yellow solid; text-decoration: none;}
> .navmenu a:hover {width: 144px; background-color: #e4ffff;
> color: #369;
> border: 1px black solid; text-decoration: none;}
> .navmenuheading {font-weight: bold;}
> **************************************************************
> **************
> **********************
>
> Julian Scarlett
> Web Design & Document Management System Officer
> PPU
> Education Directorate
> Sheffield City Council
> 0114 2735721
> mob 07904914976
> julian.scarlett at sheffield.gov.uk
>
> The information in this email is confidential. The contents
> may not be disclosed or used by anyone other than the
> addressee. If you are not the addressee, please tell us by
> using the reply facility in your email software as soon as
> possible. Sheffield City Council cannot accept any
> responsibility for the accuracy or completeness of this
> message as it has been transmitted over a public network. If
> you suspect that the message may have been intercepted or
> amended please tell us as soon as possible.
>
> --
> For unsubscribe and other options, including
> the Tip Harvester and archive of thelist go to:
> http://lists.evolt.org Workers of the Web, evolt !
>
The information in this email is confidential. The contents may not be disclosed or used by anyone other than the addressee. If you are not the addressee, please tell us by using the reply facility in your email software as soon as possible. Sheffield City Council cannot accept any responsibility for the accuracy or completeness of this message as it has been transmitted over a public network. If you suspect that the message may have been intercepted or amended please tell us as soon as possible.
More information about the thelist
mailing list