Dreamweaver - conflicting css markup screwing up page

Author

conflicting css markup screwing up page

Koenig

2006-03-28, 6:29 pm

I have two css styles - one provides a custom bullet to a list

..bulletstar {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 150%;
vertical-align: middle;
list-style-image: url(../images/bulletstar.jpg);

One formats a div so it flushes right and wraps the text around to the left

..wrap {
padding: 5px;
clear: left;
float: right;
width: 200px;
}

I have the custom bullets applied to a list, but as soon as I insert a .div
and apply the .wrap class it totally screws up the bullet list (bullets
disappear, list appears unordered etc).

How can I have my custom bullets, as well as the div to the right and have
the text of the page flow around it?

Source code for page below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>Apprentice of the Year - Assessment Process</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<style type="text/css">
table.navbar {
border-collapse: collapse;
}
table.navbar td {
border: 0px solid #000000;
}
table.navbar td a{
display: block;
width: 11em;
padding: 0px;
text-decoration: none;
}
table.navbar td a:link, table.navbar td a:visited {
color: #003399;
background-color: #fff;
}
table.navbar td a:hover, table.navbar td a:active {
color: #fff;
background-color: #cddbeb;
}
</style>
<script language="JavaScript" type="text/JavaScript">

</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0" class="noimagerepeat">

<table width="1000" border="0" cellpadding="0" cellspacing="0"
background="images/bground.jpg" class="thinborder">
<tr>
<td><a name="backtotop" class="noimagerepeat"></a><img
src="images/header.jpg" width="1000" height="121"> 

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15%" rowspan="3" valign="top"><img
src="images/logo.jpg" width="225" height="98"></td>
<td width="85%"> </td>
</tr>
<tr> 
<td height="50" align="left" valign="middle"
class="noimagerepeat"><img src="images/ap.jpg" width="600" height="45"></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
 
<table width="100%" border="0" cellpadding="0" cellspacing="0"
class="noimagerepeat">
<tr>
<td width="250" valign="top" background="images/sidebar.jpg"
class="defaultfont">
<img src="images/140spacer.jpg" width="250" height="1">
<table width="75%" border="0" align="center" cellpadding="0"
cellspacing="5" class="navbar">
<tr>
<td bgcolor="#FFFFFF" class="cellheight"><a
href="results.asp">Results</a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><a href="index.asp">Background</a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><a href="ap.asp">Awards
/ Prizes</a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><a href="participate.asp">How
to Participate</a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><a href="assessment.asp">Assessment
Process</a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><a href="faq.asp">FAQ</a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="navbar"><a href="guidelines.asp">Guidelines
for Mentors & Managers</a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><a href="contactus.asp">Contact
Us</a></td>
</tr>
</table>
 
 
 
 
<img src="images/sidebar2.jpg" width="225" height="427">
 </td>
<td width="897" rowspan="2" valign="top"> <table width="90%"
border="0" cellspacing="0" cellpadding="10">
<tr>
<td valign="top">
<div class="wrap">Resources
Below are links to some resources that
will
assist you with your application and assessment for
the
QR Apprentice of the Year. All these documents have
been
made available in pdf format. 
<a
href="docs/wpperforasssheet.pdf">Workplace
Performance Assessment Sheet</a>
<a
href="docs/guidlines-vb.pdf">Guidelines
for Values & Behaviours Assessment Sheet</a>
<a
href="docs/perfvaluesbehsheet.pdf">Performance
Values & Behaviours Sheet</a>
<a
href="docs/workperftafebehanchors.pdf">Workplace
Performance and Tafe Behavioural Anchors</a>
</div>The
assessment process is based around an evaluation of the
apprentice’s
performance in relation to: 
<ul>
<li class="bulletstar"> Progress in the workplace</li>
<li class="bulletstar"> Demonstration of QR Values and
Behaviours</li>
<li class="bulletstar"> Progress at TAFE</li>
</ul>
Assessments are conducted by the
apprentice’s
supervisors or co-ordinators, content experts or
workplace
mentors, depending on who is the most appropriate at the
time
of assessment.
The Simon Law Encouragement Award
assessment
process involves:
<ul>
<li class="bulletstar"> Assessment in the workplace by 1
June
2006</li>
<li class="bulletstar"> Assessment in the workplace by
15
August 2006</li>
</ul>
*There is no requirement for a TAFE
assessment
for first year apprentices
The Mechanical, Electrotechnology
and
Construction and Allied Trades category assessment
process
involves:
<ul>
<li class="bulletstar"> Assessment in the workplace by 1
June
2006</li>
<li class="bulletstar"> Assessment in the workplace by
15
August 2006</li>
<li class="bulletstar"> TAFE Assessment due by 15 August
2006 
</li>
</ul>
Finalists will be chosen for the
four
categories based on the results of the above
assessments.
One finalist will be selected, per category, from each
site
within your business group. 
For example, there will be a
finalist
in the Mechanical category from RACS Redbank, RACS
Rockhampton
and RACS Townsville. 
<img src="images/Seminar.jpg"
width="300" height="305" hspace="10" align="right">Once
finalists have been selected further assessment will be
conducted
by the final judging panel. This panel will consist of
at
least the following:
<ul>
<li class="bulletstar"> A senior manager from one of the
business
groups</li>
<li class="bulletstar"> A union official (selected on a
rotational
basis)</li>
<li class="bulletstar"> The program
co-ordinator</li>
</ul>
The final judging panel will
interview
all finalists and the winners will be decided based on
the
results of this interview process and the assessments
conducted
throughout the year. 
 
</td>
</tr>
</table>
 </td>
</tr>
<tr>
<td valign="top">  
</td>
</tr>
</table></td>
</tr>
</table>
<table border="0" width="660" align="center" class="footer">
<tr>
<td valign="middle" align="center" width="450">

</td>
<td width="210" align="left" valign="middle" class="defaultfont">
Authorising
Manager: G Mullins 
Gatekeeper: A Wells 
Author: <a href="mailto:isg.infonet@qr.com.au">T Gensch</a> 
Last updated:
March 28, 2006
</td>
</table>
</body>
</html>

Murray *ACE*

2006-03-28, 6:29 pm

> .bulletstar {
> font-family: Arial, Helvetica, sans-serif;
> font-size: 12px;
> line-height: 150%;
> vertical-align: middle;
> list-style-image: url(../images/bulletstar.jpg);

List images are very notoriously flaky. I don't use them. Instead, I use a
background image, no-repeat, with enough padding to push the list content
far enough right to clear the image.

> One formats a div so it flushes right and wraps the text around to the
> left
>
> .wrap {
> padding: 5px;
> clear: left;
> float: right;
> width: 200px;
> }

I'm not really clear what you want here. Furthermore, your use of
individual table cells for these things sorta confuses the issue....

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================