Should I be using padding, margins & inline ?

[certificates]

I have one or two pages left on my site which I have left till the end because they will be hard for me as a beginner to change.

One example is www.c5d.co.uk/hurstpages.php

The layout is mainly in a table with some items centred with CSS.

To remove the tables and keep the horizontal lines, should I be using margins and paddings with in line or is there another way to keep the phrases evenly spaced out ?

I have tried to find this out by googling, and using my CSS book but I cannot spot this one

I don't want it done, I'd like to try and do it myself, but would like confirmation that I am using the right tools

Thanks

Antony

[Stevie D]

I have one or two pages left on my site which I have left till the end because they will be hard for me as a beginner to change.

One example is www.c5d.co.uk/hurstpages.php

The layout is mainly in a table with some items centred with CSS.

To remove the tables and keep the horizontal lines, should I be using margins and paddings with in line or is there another way to keep the phrases evenly spaced out ?

If you are referring to the spacing between lines/items in the main content block, that is dead easy to do with <p>s, <div>s or <li>s and margins.

[certificates]

It's the spacing between the phrases. The lines are OK.

At present the table has 5 columns and each column contains either one phrase or is blank when there are not five items in that row.


Thanks for the quick response

Antony

[ronpat]

Antony, let's begin by replacing ALL occurrences of "&nbsp;" on the page with an ordinary space, INCLUDING those in the php menu. None seem to be needed. Right now, one table row is overflowing because of those non-breaking spaces between the words; i.e., the words can't wrap normally.

The tables are inconsistent. All do not contain 5 columns and of course the column widths differ.

This page contains several mismatched tags. Some are orphans and some seem to be needed but are missing their partner.

The biggest problem that I see is that there is no obvious difference between links and ordinary text. Everything looks exactly the same. The user is given no clues.

If you can verbally describe how you want the page to look, I'll see what I can do.

[certificates]

What I actually want to do is remove the tables, and shall we say style it properly.

I do want to keep the content of the horizontal rows as it is now. I know that the links are not highlighted at present but that's easy enough to resolve.

It's the layout that is the problem if I remove the tables.

What I am trying to ascertain is how, using CSS, I can get the phrases to space out equally across the page. Should I be using marging and padding and inline which does seem a bit cumbersome with a lot of guessing and adjustment. Or is there another way.

I'd welcome your efforts of course, and please have a go by all means

Antony

[certificates]

I think I have now found what I am after

It to use a <li> tag styled with padding and display in line.

It certainly seems to do the trick

Antony

[ronpat]

Good. It will be interesting to see how it works out.

PS: If you would like me to create a higher-quality image for the header, give me the specs and I'll make one more.

[certificates]

I have now styled this with the <li> tag using the CSS tag of padding left/right and display in-line

Have a look: www.c5d.co.uk/hurstpages.php See what you think.

Antony

[ronpat]

You know how to write tables? You know that the <td> tag is not used alone... that it has to be surrounded by <tr> tags which are in turn surrounded by <table> tags. That defines a complete table structure.

In the same way, <li> tags do not stand alone. They are part of a <ul> or <ol>, an unordered list or an ordered list. The structure of a list is

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

[certificates]

OK, then I misunderstood the instructions in this article on this site http://www.sitepoint.com/tables-vs-css/

However by inserting <ul></ul> It has adjusted the spacing. I shall have look at why that has happened

There shouldn't be any tables left I don't think

Did you spot one.

Antony

[certificates]

Now that I have done this, again, I have encountered a problem.

About two thirds of the way down the page in the maps section, there is a phrase And the big Back

It is horribly out of place and should go directly under where my dad lived. I am utterly stuck on this, have you any ideas how I can move it ?

Thanks

Antony

[ronpat]

"And the big Back" is a paragraph and is not included in the list item with "were my dad lived". Since it is apparently a continuation of the sentence about your dad, don't you think it should be in that list item? I don't understand what "And the big Back" means, so my assumption may be wrong. If so, please forgive.

[certificates]

It is part of that sentence, but if I put it in the same line, it runs under the next item --Map of Hurst.

I want " Highlighted are Where My Dad Lived
And the Big Back"

to read as I have typed it in this forum. Thus How Ashton Grew will be on the same line as where my dad lived.

This is where I am stuck

Antony

[ronpat]

Antony, if someone who is visually impaired attempts to read your page using a screen reader, that item will make no sense at all because the segments are entirely disconnected from one another in the HTML. They will never connect. It is not reasonable (screen reader or not) to try to put the paragraph under the list item using css. That would make less sense than using the old table code.

The content should be arranged in a logical, coherent order, THEN css can be utilized to present it on the page the way you would like it to appear (assuming appropriate HTML structure, of course).

[certificates]

OK, I have done what I think you want me to do, but now there is a line bewteen the rows of text.

Is it possible to remove that line space ?

One for tomorrow for me though

Antony

[certificates]

Good Morning

There about 125 pages which use the hurststyle.css sheet

Antony

[ronpat]

Antony, hurstpages is rewritten with lists instead of tables.

This HTML page includes the php menu code. I recommend that you replace the code in your php menu with this version. I deleted the "&nbsp;"s in the menu and added "#header" to the top div, plus it's indented which makes it very easy to read.

The footer code is at a different depth on this page.

There are TWO links to stylesheets in the head. While coding, I called the new code for this page with the second stylesheet link. You can test the same way, or you can simply add the new css to the end of the main stylesheet and delete the second link.

Conspicuously missing from the HTML page are the plethora of classes for every item. Your challenge is to delete the unused classes from the main stylesheet. There could be up to 30.

CHANGES/CHOICES

Headers and Links look different.

1. The CSS anchor behaviors break most of your rules, but those changes are easily undone.
The anchors are colored and have underlines like conventional HTML anchors, except :hover is white.
If you don't want users to remember where they have been, you can change the :visited color to blue.
For what it's worth, I recommend that you keep the blue color and the underline because that's how older users expect anchors to behave.

2. Non-anchor text is still black.

3. Header text is larger than anchor text.

4. Anchors can have a border around the individual items, the row of items, or no border at all.

5. "Can you name them?" and "dad's text" can be left-aligned or centered.


Hope this helps

h2 {
    font-size:1.25em;
    text-align:center;
    margin:.9em 0 .1em;
}
h3 {
    font-size:1.2em;
    text-align:center;
    padding-bottom:8px;
    margin:0;
}
.intro {
    display:table;
    padding-top:12px;
    margin:0 auto;
}
.intro p {
    margin:.375em 0px;
}
ul.list {
    display:table;
    border-spacing:1px 0;
    padding:0px;
    margin:0 auto;
}
.list.nohead {
    margin-top:.9em;
}
.list li {
    display:table-cell;
    border:1px solid transparent;    /* borders around the lists *//* #789, #bcd or transparent */
    border-radius:7px;
    vertical-align:top;
    padding:0px 20px;
    margin:0;
}
.list li span {
    display:block;
    text-align:left;
    padding:.1em 0;
}
.list a {
    display:inline-block;
    padding:2px 0px 3px;
    text-decoration:underline;
}
.list a:link {color:#00a;}       /* dark blue   */
.list a:visited {color:#707;}    /* dark purple */
.list a:hover {color:#fff;}      /* white       */
.list a:active {color:#f00;}     /* red         */

.footer {
    height:76px;
    padding-top:24px;
    text-align:center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>The Hurst Pages</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://www.c5d.co.uk/hurststyle.css" type="text/css" media="screen">
    <link rel="stylesheet" href="hurststyle4g.css" type="text/css" media="screen">
    <link rel="stylesheet" href="http://www.c5d.co.uk/c5ddropdownmenu.css" type="text/css" media="screen">
    <script src="http://www.c5d.co.uk/mootools-1.2.5-core-yc.js" type="text/javascript"></script>
    <script src="http://www.c5d.co.uk/MenuMatic_0.68.3.js" type="text/javascript"></script>
    <script type="text/javascript">
window.addEvent('domready', function() {
    var myMenu = new MenuMatic();
});
    </script>
</head>
<body>
<div id="wrapper">
    <div id="container" class="container">
<!-- BEGIN c5dmenu.php INCLUDE -->
        <div id="header">
            <img src="http://www.c5d.co.uk/c5dbackground.png" alt="c5dlogo" width="950" height="115">
        </div>
        <div class="span-24">
            <div id="navcontainer">
                <ul id="nav" class="menu">
                    <li><a href="http://www.c5d.co.uk/homepage.php"><img src="http://www.c5d.co.uk/home.gif" alt="home" /></a></li>
                    <li><a href="http://www.c5d.co.uk/homepage.php">Eng &amp; Wales</a>
                        <ul class="sub-menu">
                            <li><a href="http://www.c5d.co.uk/homepage.php">England &amp; Wales Certificates</a></li>
                            <li><a href="http://www.c5d.co.uk/groups.php">Family Groups</a></li>
                            <li><a href="http://www.c5d.co.uk/research.php">Research Service</a></li>
                            <li><a href="http://www.c5d.co.uk/ninthfield.php">Large Orders</a></li>
                        </ul>
                    </li>
                    <li><a href="http://www.c5d.co.uk/scotland.php">Scotland</a>
                        <ul class="sub-menu">
                            <li><a href="http://www.c5d.co.uk/scotland.php">Scottish Certificates</a></li>
                            <li><a href="https://secure.jotformeu.com/form/20562318766356">Scottish Order Form</a></li>
                        </ul>
                    </li>
                    <li><a href="http://www.c5d.co.uk/northernireland.php">N.Ireland</a>
                        <ul class="sub-menu">
                            <li><a href="http://www.c5d.co.uk/northernireland.php">Northern Irish Certificates</a></li>
                            <li><a href="https://secure.jotformeu.com/form/20562335218347">Northern Ireland Order Form</a></li>
                        </ul>
                    </li>
                    <li><a href="http://www.c5d.co.uk/roi.php">Eire</a>
                        <ul class="sub-menu">
                            <li><a href="http://www.c5d.co.uk/roi.php">Irish Certificates</a></li>
                            <li><a href="http://form.jotformeu.com/form/20560737900349">Irish Certificate Order Form</a></li>
                        </ul>
                    </li>
                    <li><a href="http://www.c5d.co.uk/parishrecords.php">P R Es</a>
                        <ul class="sub-menu">
                            <li><a href="http://www.c5d.co.uk/parishrecords.php">Parish Register Entries</a></li>
                            <li><a href="https://secure.jotformeu.com/form/20563263008345">Parish Register Order Form</a></li>
                        </ul>
                    </li>
                    <li><a href="http://www.c5d.co.uk/censusentries.php">Censuses</a>
                        <ul class="sub-menu">
                            <li><a href="http://www.c5d.co.uk/censusentries.php">Census Entry Copies</a></li>
                            <li><a href="https://secure.jotformeu.com/form/20563312173343">Census Order Form</a></li>
                        </ul>
                    </li>
                    <li><a href="http://www.c5d.co.uk/sterlingpayments.php">Payments in £</a>
                        <ul class="sub-menu">
                            <li><a href="http://www.c5d.co.uk/sterlingpayments.php">Make Payments in £</a></li>
                        <li><a href="https://secure.jotformeu.com/form/20562220135338">Order Form</a></li></ul>
                    </li>
                    <li><a href="http://www.c5d.co.uk/nzcerts.php">NZ</a>
                        <ul class="sub-menu">
                            <li><a href="http://www.c5d.co.uk/nzcerts.php">New Zealand Certificates</a></li>
                            <li id="radius"><a href="http://www.c5d.co.uk/nzcerts.php">Order Form</a></li>
                        </ul>
                    </li>
                    <li><a href="http://www.c5d.co.uk/probates.php">Probates</a>
                        <ul class="sub-menu">
                            <li><a href="http://www.c5d.co.uk/probates.php">Probates, Wills &amp; Admons</a></li>
                            <li><a href="http://www.c5d.co.uk/pre1858.php">Pre 1858 Probates</a></li>
                            <li><a href="https://secure.jotform.com/form/20393244360"> Probate Order Form</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
<!-- END c5dmenu.php INCLUDE -->
        <h1>Your Certificates in 5 Days ?</h1>
        <p class="one">There is another way. <a href="http://www.c5d.co.uk">Certificates in 5 Days (C5D)</a> Why not give me a try ?</p>
<!--START ancestry 14 day free trial advertisement -->
        <div id="advert1">
            <a href="http://www.jdoqocy.com/click-5433512-10520381" target="_top">
                <img src="http://www.awltovhc.com/image-5433512-10520381" width="264" height="60" alt="264x60: I am your Nan">
            </a>
        </div>
<!--START MERCHANT:merchant name Find My Past from affiliatewindow.com -->
        <div id="advert2">
            <a href="http://www.awin1.com/cread.php?s=265538&amp;v=2114&amp;q=126749&amp;r=127588">
                <img src="http://www.awin1.com/cshow.php?s=265538&amp;v=2114&amp;q=126749&amp;r=127588" width="264" height="60" alt="264x60">
            </a>
        </div>
<!-- START CONTENT -->
        <p class="hursttext"><img class="center" alt="Hurst Cross Circa 1900" src="Image9.gif"></p>
        <h3>Hurst Cross Circa 1900</h3>
        <ul class="list">
            <li><a href="http://www.c5d.co.uk/oldhurst.php">Click for a description of Hurst circa 1832</a></li>
        </ul>
        <div class="intro">
            <p>This is the introduction to my pages about the place that I was born and lived for the first 30 years of my life.</p>
            <p>Being the adventurous type, I then moved to Hartshead all of one mile up the road!</p>
            <p>I hope that you find these pages both helpful and entertaining:</p>
        </div>
        <h2>The Censuses 1841-1911</h2>
        <p class="methodists">To view the census transcriptions please click the button below:</p>
        <div class="button">
            <button onClick="window.location='http://www.c5d.co.uk/censuspages.php'"> Hurst Censuses 1841-1911</button>
        </div>
        <p class="methodists">Other Transcriptions: Just Click the Link</p>
        <h2>Kellys Directory of Hurst</h2>
        <ul class="list">
            <li><a href="http://www.c5d.co.uk/kellyshurst.php">1905</a></li>
            <li><a href="http://www.c5d.co.uk/kellyshurst1918.php">1918</a></li>
        </ul>
        <ul class="list nohead">
            <li><a href="http://www.c5d.co.uk/er1918.php">The Electoral Roll of 1918</a></li>
            <li><a href="http://www.c5d.co.uk/hurstlocalboard.php">Hurst Local Board</a></li>
        </ul>
        <h2>The First World War</h2>
        <ul class="list">
            <li><a href="http://www.c5d.co.uk/warmemorial.php">The Fallen of Hurst on Hurst War Memorial</a></li>
            <li><a href="http://www.c5d.co.uk/alt.php">The Fallen of Alt from Alt War Memorial</a></li>
            <li><a href="http://www.c5d.co.uk/munitionsfactory.php">The Ashton Munitions Factory Explosion</a></li>
        </ul>
        <h2>The Boer War 1899-1902</h2>
        <ul class="list">
            <li><a href="http://www.c5d.co.uk/manchesterregiment.php">The Manchester Regiment in the Boer War</a></li>
        </ul>
        <h2>Local Parish Register Transcriptions</h2>
        <ul class="list">
            <li><a href="http://www.c5d.co.uk/qrm.php">Queen Street Memorial Inscriptions</a></li>
            <li><a href="http://www.c5d.co.uk/qrmbintro.php">Queen Street Baptisms</a></li>
            <li><a href="http://www.c5d.co.uk/hhb.php">Baptisms at Hooley Hill Wesleyan Chapel 1802/34</a></li>
        </ul>
        <h2>On the way to Wembley ?</h2>
        <ul class="list">
            <li><a href="http://www.c5d.co.uk/umfc.php">Queen Street UMC F C 1913/1914</a> <span>Can you name them?</span></li>
            <li><a href="http://www.c5d.co.uk/umfc19199.php">Queen Street UMC F C 1918/1919</a> <span>Can you name them?</span></li>
            <li><a href="http://www.c5d.co.uk/stjames.php">St James's Football Team 1919</a> <span>Can you name them?</span></li>
            <li><a href="http://www.c5d.co.uk/hurstboys.php">Ashton Schools' Football Team c1905</a> <span>Can you name them?</span></li>
        </ul>
        <h2>Local Anecdotes</h2>
        <ul class="list">
            <li><a href="http://www.c5d.co.uk/joewood'spies.php">Joe Wood's Pies</a></li>
            <li><a href="http://www.c5d.co.uk/ghandi.php">Ghandi</a></li>
            <li><a href="http://www.c5d.co.uk/happyland.php">Hurst A Happy Land</a></li>
            <li><a href="http://www.c5d.co.uk/skinnyhatton.php">Skinny Hatton</a></li>
            <li><a href="http://www.c5d.co.uk/tmt.php">Two Minute Topping</a></li>
        </ul>
        <h2>Ashton Under Lyne Golf Club</h2>
        <ul class="list">
            <li><a href="http://www.c5d.co.uk/golfclub.php">Founder Members</a></li>
        </ul>
        <h2>Maps of Old Hurst &amp; Ashton</h2>
        <ul class="list">
            <li><a href="http://www.c5d.co.uk/hurstcross1900.php">A Map of Hurst Cross about 1900.</a> <span>Highlighed are where my dad lived and the Big Back</span></li>
            <li><a href="http://www.c5d.co.uk/hurst1848.php">Map of Hurst in 1848.</a></li>
            <li><a href="http://www.c5d.co.uk/oldashton.php">A Map of Ashton from 1824.</a></li>
            <li><a href="http://www.c5d.co.uk/map.php">Three maps of Ashton superimposed on each other.</a> <span>How Ashton Grew</span></li>
        </ul>
        <h2>Photos of Hurst Old and New</h2>
        <ul class="list">
            <li><a href="http://www.c5d.co.uk/hurstinoldphotos.php">Hurst in Old Photos </a></li>
            <li><a href="http://www.c5d.co.uk/mrs.php">Mossley Road School 1931 Group 12</a></li>
        </ul>
        <h2>The Chartists in Ashton</h2>
        <ul class="list">
            <li><a href="http://www.c5d.co.uk/chartists.php">Members of the Chartist Movement</a> </li>
        </ul>
        <h2>Ladysmith Barracks</h2>
        <ul class="list">
            <li><a href="http://www.c5d.co.uk/ladysmithbarracks.php">The Barracks</a></li>
        </ul>
        <h2>My Dorset Interests</h2>
        <ul class="list">
            <li><a href="http://www.c5d.co.uk/dorsetinterests.php">Kimmeridge A Lovely village on South Coast</a></li>
        </ul>
    </div>
</div>
<div class="footer">
    <button onClick="window.location='http://www.c5d.co.uk/hurstpages.php'">Return to the Hurst Pages</button>
    <p class="copy">&copy;C5D-Certificates</p>
</div>
</body>
</html>

[certificates]

Thanks for this. It must have taken you some time.

I have utilised a lot but not all of it. With so many links on the page, I really think it looks wrong if they are all underlined, so I have switched it so that the headings are underlined and the links not. I just think it looks better. I also didn't think that the blue and black contrast looked very good either so have moved it to all black. I shall have a think about a suitable font colour later on today.

Can you explain to me what this bit does please ?

.list li {
display:table-cell;
border:1px solid transparent; /* borders around the lists *//* #789, #bcd or transparent */
border-radius:7px;
vertical-align:top;
padding:0px 20px;
margin:0;
}


Is this what causes the items to be evenly spaced on the line ?

On www.c5d.co.uk, I removed the tables by doing this


<ul class="census1841">
<li class="ED"><a href="http://www.c5d.co.uk/homepage.php">England &amp; Wales</a></li>
<br /><li class="ED"><a href="http://www.c5d.co.uk/scotland.php">Scotland</a></li>
<br /><li class="ED"><a href="http://www.c5d.co.uk/northernireland.php">Northern Ireland</a></li>
<br /><li class="ED"><a href="http://www.c5d.co.uk/roi.php">Republic of Ireland</a></li>
<br /><li class="ED"><a href="http://www.c5d.co.uk/nzcerts.php">New Zealand Certificates</a></li></ul>
<p class="two"> And for Probates &amp; Administrations/p>
<ul class="census1841">
<li class="ED"><a href="http://www.c5d.co.uk/probates.php">Probates &amp; Administrations</a></li></ul>

with this CSS

.ED a:hover { color: #ffffff;}
.census1841 {list-style:none; }
.ED{margin-left:125px;display:inline; line-height:25px;}
.ED {font-weight:bold;color: #000000;}
.ED a {color: #000; text-decoration: none; font-style:italic; font-family:"New Century Schoolbook", Times, serif;}

Thanks again for your efforts

Antony

[ronpat]

Choice of colors are "in the eye of the beholder". Most important to me is that the code is easy for you to read and modify to suit yourself.

The unordered list is coded to behave like a one-row table, the list items are the table-cells. The UL has no width declared and is centered with margin-left:auto; margin-right:auto;. Without a width, a one-row table will shrink-to-fit the width of its cells. The cells, in turn, conform to their contents. The horizontal padding within the li's provide the visual spacing between text. If you temporarily replace "transparent" with a color, you will see the borders around the list items in the rows.

In <ul class="census1841"> you should not need the <br> tags at all. Nothing should appear between the <ul> tags except <li> tags. Even the validator is balking at them.

.ED {margin-left:125px;display:inline; line-height:25px;} DELETE the red property and you should not need the <br> tags.

You should also not need to class every <li>. You can target every <li> by using the same technique shown in my code (did you notice the <li>s do not have classes?).

.census1841 li {... properties ...}

will target its <li>s without requiring you to class them individually.

If you take a web design course, or read a book or two, you will discover even more opportunities for improvement within you web site and learn how to do them.

Sounds like you're about finished with this project. Been quite an experience, hasn't it? And fun, too.

[certificates]

Thanks, I am almost done, and it has been an experience.

I do have a book SAMS giude to HTML CSS and Java but do not find it easy to use.

I find it easier to google for similar queries and try and solve them myself, hence the wrong code sometimes.

There's probably loads to do still on the site but I shall keep doing a bit at at time rather than all at once.

On this page for example, the links at the bottom need sorting but I guess I can do that

http://www.c5d.co.uk/1861-70.php They are all scrunched up together. On this one the links have all those &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
you tell me about !

I can't your point about the lines and one line table, but what when there are two columns in the table ?

Maybe a better use would be a table ?

If you have a look at this page with the classes in the <li> so all the second columns line up together, you would probably be horrified !! www.c5d.co.uk/1841.php

I have enjoyed it but is's not finished yet !

Thanks Again

Antony

[ronpat]

I usually have to go to a bookstore and browse through several books in search of one that presents the material that I'm seeking and does so in such a way that is meaningful to me.

Yes, copying and pasting code without understanding it isn't very educational; especially if the copied code doesn't cause obvious problems.

I would have probably put those two columns of data on www.c5d.co.uk/1841.php in an HTML table instead of a list. The list code is invalid, anyway.

&nbsp; is a fine tool for keeping words together that should not wrap separately. You understand that. Anything can be overused or misused. Most of the time, when someone uses a string of &nbsp;s, they are trying to create a line of space... not a line of unbreakable space... just space. So why not put a space between pairs of &nbsp;? Takes less typing, looks less ugly, wraps at end of lines. Go figure. (not advocating, just musing.)

In your menu bar, the &nbsp;s aren't needed, they serve no purpose, period.

I'm curious to know something, please. On that page, http://www.c5d.co.uk/1861-70.php, how did so many short lines of <td> text end up taking two lines before the closing </td>? I can't imagine how or why that happend. Do HTML editors to that on purpose?

That's a huge amount of data. How did you ever do it? Incredible determination and patience you have.

[certificates]

I didn't think there were any &nbsp,s on the menu bar.

Have I missed some ?

I can't answer your question about the tables, I'm afraid. I type them all out in Exvel and convert them to HTMl via the save as web page option.

If you think there' a hugh amount of data, then you should look at the census pages too. 1841-1911 for my locality. Not yet complete but more than half way there.

As for the two columns, everyone tells me tables are a no go unless it's tabular like the baptism entries.

Antony

[ronpat]

Is it possible that you are calling a different c5dmenu.php file than you intend? The menu that I see if full of "&nbsp;"s and does not contain the flyout menu in the first drop-down item.

Ahhh, data exported from Excel as a web page. That explains it. Thanks.

"Everyone"? That's funny. I see a small, two column matrix. It could have come from an Excel spreadsheet. It can be coded quite efficiently with an HTML table. Positioning list items is certainly doable, but not as efficient. However, the present list code is just plain broken no matter whose camp you follow.

NOTHING about your page is as "broken" as the links. Your page has been designed to look like a printed page. The trouble with that is that printed pages do not contain hyperlinks. At this time, a user is obligated to mouse over *everything* on your page, images and print, in an effort to discover whether or not any links exist on the page. THERE ARE NO CLUES. Your design does not consider the classic web page user who expects links to look distinct. THAT is a BAD thing. Your site has hundreds of pages, some of which contain a huge amount of information. As a user, I would be frustrated after viewing the first two or three pages because of the difficulty of identifying links.

Since inception, HTML has had default link behaviors built in... no css modifications necessary. Those default behaviors include colors and underline. Those are behaviors that people have been trained to expect from web pages since HTML was introduced. CSS gives us the power to alter the user experience. Unfortunately for users, some of today's designs depart from those anchor expectations a bit too far and are difficult to navigate. Your site is "difficult to navigate" because the links are hidden within the text. Underlines on non-link text further obscure the links. That's just how it is. The "look" that you like is not the "look and feel" that works best for the users.

[certificates]

I have uploaded the c5ddropdownmenu again.

Are you still seeing the &nbsp; ? When I look at the source now in Chrome it looks fine

Antony

[ronpat]

I opened the homepage in Opera and did a hard reload in Firefox. The results of both are the same.

I still see the "&nbsp;"s in the menubar code and the flyout is still missing.

Are you sure the php include is calling the correct file?
<?php include $_SERVER["DOCUMENT_ROOT"] . "/c5dincludes/c5dmenu.php"; ?>