CSS <p> problem

[k2.]

I have a problem with my css (surprise!)

I used the following html<p class="project">Project Information </p>
<ul>
<li><a href="../project_info/about.html">About the WAGE Project</a></li>
<li><a href="../project_info/aims.html">Aims and Objectives</a></li>
<li><a href="../project_info/why.html">Why is there a need for WAGE?</a></li>
<li><a href="../project_info/staff.html">Meet the WAGE Staff</a></li>
<li><a href="../glasgow/quiz.html" title="try the wage disability and employment test">Test
your Disability and Employment Awareness</a> </li>
</ul>
<p class="project">Contacting WAGE</p>
<ul>
<li><a href="../project_info/contact.html">Contact WAGE</a></li>
<li><a href="../project_info/where.html">Where are WAGE based?</a></li>
</ul>
<p class="project">Website Information </p>
<ul>
<li><a href="../project_info/new.html">Whats new on the WAGE website?</a></li>
<li><a href="../articles/accessibility/browse.html">Using the WAGE website</a></li>
<li><a href="../project_info/feedback.html" title="online feedback form">Tell
Us What You Think of the Site </a></li>
</ul>


the css for "project" is as follows:
{
font-family: arial, helvetica, sans-serif;
font-size: 100%;
color: #FFFFFF;
background-color: #666699;
text-align: center;
font-weight: bold;
}

When i view the page in Opera and Mozilla the page doesnt show up properly. Instead of only having one line for the heading highlighted in the colour, the colour extends upwards and sits behind the list before the heading...does that make any sense?

Ive attached an image showing the problem.
Does anyone know why this would be happening and how i can stop it from happening?

thanks

[RysChwith]

Looks fine in Mozilla 1.7.1, Opera 7.52, and Firefox 0.9.2.

Rys

[k2.]

thanks for checking, I wonder why it shows up funny in my browsers.

[scoutt]

why is it when i view the page I don't see any of that code. all I see are tables


<table class="rmenu" width="97%" border="0" summary="This table is for layout purposes only">
<tr>
<th valign="top" bgcolor="#666699" class="project" >Project
Information </th>

</tr>

which looks good to me.

[k2.]

sorry bout that

I had to change back to the old site while I try to resolve these issues and other validation issues.

The image shows what the problem is.
x

[scoutt]

well makes since but without seeing it happen it is hard to diagnose. but my guess is that you have a top margin/padding that is making it happen. a <p> tag is a block element so it has margins and padding. try removing both or jsut one of them from the top and it may work.

padding-top:0px;

might be one or the other but I think it is padding

[k2.]

I tried changing padding and margins and no change.

I thought i should show you screen shots of what I'm getting to see if it makes any more sense. The Red arrows point the the bit I'm having trouble with.

http://www.wage.eu.com/stuff/wage_ie.jpg
This is the Internet Explorer screen shot and it shows up fine (for a change)

http://www.wage.eu.com/stuff/wage_firefox.jpg
This is how the same menu appears in Mozilla's Firefox

http://www.wage.eu.com/stuff/wage_opera.jpg
Just for comparison, this is what opera does to the menu.

These images are based on the html below with the style .project listed below.

If anyone has any ideas how to standardise the look of this menu, I'd be grateful - its really starting to do my head in.

thanks

[scoutt]

what you see in mozilla screenshot is how it is suppose to look depending on the code. I still think it is margins and padding. take them both away for the <p> tag and it should make it go down. but without seeing it in action I can't tell.

{
font-family: arial, helvetica, sans-serif;
font-size: 100%;
color: #FFFFFF;
background-color: #666699;
text-align: center;
font-weight: bold;
margin:0;
padding:0;
}

[k2.]

ok duh me.

I did it and it solved some of the problem, thank you!

however it looks ultra cramped. So I added a 1% margin and padding to #menu ul and in Opera it gives me a purple border. Its almost as if the <p> tags never end and are merely hidden by the lists.