H1 title miss placed

Hi

On this page

http://emc.ianhobson.co.uk/menu/Extras.htm

the first h1 title ("Extras") is shown about two character positions to
the right of the place the later h1 titles (Snacks, Sweets, Drinks)
appear.

I think the selectors for the h1 titles are all the same. I intended the
styles starting at line 238 of the siteStyle.css file should apply.

I need the the first h1 title places centrally, like the others.

Has anyone any idea why this is happening, and what to do about it?

Thanks.

Ian

p.s. It is wrong is Firefox 2 and IE 6, so I suspect I have somehow
messed up the CSS.

In article <20T4j.1379$zw.758 (AT) newsfe3-win (DOT) ntli.net>,
Ian Hobson <ian.hobson (AT) ntlworld (DOT) com> wrote:

Hi

On this page

http://emc.ianhobson.co.uk/menu/Extras.htm

the first h1 title ("Extras") is shown about two character positions to
the right of the place the later h1 titles (Snacks, Sweets, Drinks)
appear.

I think the selectors for the h1 titles are all the same. I intended the
styles starting at line 238 of the siteStyle.css file should apply.

I need the the first h1 title places centrally, like the others.

Has anyone any idea why this is happening, and what to do about it?

Thanks.

Ian

p.s. It is wrong is Firefox 2 and IE 6, so I suspect I have somehow
messed up the CSS.

If you decrease the text size in FF, the difference is much greater
than "about two character positions", and gets bigger as the text
font gets smaller. This suggests to me that it has something to do
with the placement of your various divs, especially with the
navigation side panel. Unfortunately, I found there were rather to
many divs to wade through to find where the error was.

I don't understand why you have so many divs, though. For example,
why do this?

<div class="centered"><h1>Heading</h1></div>

If you want all your <h1> elements to be centred, define them to
be so in your css file. That way, you eliminate a whole bunch of
superfluous html, which will make debugging your page a bit easier.
I'm sure there are other redundancies in the page that could safely
be removed, too...

Ian Hobson wrote:

Hi

On this page

http://emc.ianhobson.co.uk/menu/Extras.htm

the first h1 title ("Extras") is shown about two character positions to
the right of the place the later h1 titles (Snacks, Sweets, Drinks)
appear.

I think the selectors for the h1 titles are all the same. I intended the
styles starting at line 238 of the siteStyle.css file should apply.

I need the the first h1 title places centrally, like the others.

Has anyone any idea why this is happening, and what to do about it?

Thanks.

Ian

p.s. It is wrong is Firefox 2 and IE 6, so I suspect I have somehow
messed up the CSS.

Well I can say is your page is just tag soup...

<your markup>

<h3>Boiled Rice</h3>
<h6>£1.50p</h6>
<h3>Rice &amp; Peas</h3>

<h6>£2.50p</h6>
<h3>2 Fried Dumplings</h3>
<h6>£0.75p</h6>
<h3>Fried Plantains</h3>

</your markup>

H3 followed by H6? You are just using H# to size your text aren't you?
Actually this menu is tabular data, right? Then use a table. Using CSS
does *not* mean *no tables*!


<table class="menu">
<tr><th colspan="2"><Extras</th><tr>
<tr>
<td>Mini Platter
<span>2 mini fried dumplings, fried plantain,
2 mini saltfish fritters, jerk chicken wing
</span>
</td>
<td class="price">£4.50p</td>
</tr>
<tr>
<td>Boiled Rice</td>
<td class="price">£1.50p</td>
</tr>

....

table.menu { ...style to taste... }
table.menu td { font-size: 1.3em; font-style: bold; }
table.menu td span {
font-size: .75em; font-style: normal;
display: block: margin-left: 2em;
}

Of course if you want to forego IE support your could even get rid of
the class "price" with adjacent sibling selectors

table.menu td + td { font-size: .85em; text-align: right; }

But you probably should show mercy

table.menu td.price { font-size: .85em; text-align: right; }

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

David Stone wrote:

I don't understand why you have so many divs, though. For example,
why do this?

div class="centered"><h1>Heading</h1></div

If you want all your <h1> elements to be centred, define them to
be so in your css file. That way, you eliminate a whole bunch of
superfluous html, which will make debugging your page a bit easier.
I'm sure there are other redundancies in the page that could safely
be removed, too...

I'm sure there is a lot of redundant stuff. The css files are common to
all pages, and the pages are generated using a template and "markdown".

The template provides a central area that cannot be compressed so much
that the layout breaks down, and neither can it be set so wide that the
lines are difficult to read, and this works (according to the author) in
more browsers than I can test it in.

As for why I didn't use a table - I didn't recognise the tabular nature
of the data, and I was trying to get the page together quickly.

David and Jonathan - thanks for your comments.

Regards

Ian

In comp.infosystems.www.authoring.stylesheets message <18081$47541e69$40
cba7b1$2689 (AT) NAXS (DOT) COM>, Mon, 3 Dec 2007 10:19:09, Jonathan N. Little
<lws4art (AT) centralva (DOT) net> posted:

Well I can say is your page is just tag soup...

your markup

h6>£1.50p</h6

I would not trust anyone who believes that it is appropriate to put p
after £1.50 anywhere near my digestion.

The page fails W3; I suspect all pages in the set have the same errors.

At least one instance of "shall" on the site should IMHO be "will".

--
(c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
Proper <= 4-line sig. separator as above, a line exactly "-- " (SonOfRFC1036)
Do not Mail News to me. Before a reply, quote with ">" or "> " (SonOfRFC1036)