[thelist] calling all css gurus >>>bl**dy css.....gggrrrr...
Scarlett Julian (ED)
Julian.Scarlett at sheffield.gov.uk
Mon Apr 29 08:37:01 CDT 2002
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.
More information about the thelist
mailing list