Text does not appear in IE, and contents spill over in Opera. URL included.

[-Lost]

Sorry, for two separate browser questions, but I figured a multi-post about the same URL
might not get favorable results.

I am making a little website for the daycare my mother and wife works at and for the life
of me I cannot figure out two things.

http://foomanchu.com/littlepeoples/

1. In Internet Explorer 6 the text to the right of the logo does not appear unless I
highlight it. The text is "Little People's CDC" and then I list the phone numbers.

2. In Opera 9.10 on the "Philosophy" page, all the text that goes past the menu on the
left, spills over to the left.

In Firefox neither of these things happen.

Can anyone direct me how to fix it, or perhaps guide me in the right direction?

Thanks.

-Lost

[-Lost]

"-Lost" <mi*********@comcast.netwrote in message
news:Sr******************************@comcast.com. ..

2. In Opera 9.10 on the "Philosophy" page, all the text that goes past the menu on the
left, spills over to the left.

Sorry, I forgot to say that Internet Explorer does this as well.

-Lost

[Richard Formby]

-Lost wrote:

http://foomanchu.com/littlepeoples/

1. In Internet Explorer 6 the text to the right of the logo does not
appear unless I highlight it. The text is "Little People's CDC" and then
I list the phone numbers.

Google for peekaboo bug. There is a standard fix for it, the Holly fix IIRC.

2. In Opera 9.10 on the "Philosophy" page, all the text that goes past
the menu on the left, spills over to the left.

Dunno but I was totally confused by the fact that the entire page is a
collection of multiply nested unordered lists. I wonder if IE and FF are
confused as well. I suspect IE and FF differ on their handling of the
content of those uls when it comes to wrapping it about the floated ul. FWIW
I think IE is getting it right. in the absence of any left margin the
content *should* wrap under the navigation.

The fact that you have incorrect nesting of the UL's (as the validator would
tell you) is not helping.

Why not just wrap the navigation and content in a div per each, float left
the navigation and left-margin the content by the width of the navigation?
That's the way a two column layout is usually done.

--
Richard.

[Bergamot]

-Lost wrote:

>
http://foomanchu.com/littlepeoples/

1. In Internet Explorer 6 the text to the right of the logo does not appear unless I
highlight it. The text is "Little People's CDC" and then I list the phone numbers.

IE6 has a lot of float bugs. Search for the peek-a-boo bug.

2. In Opera 9.10 on the "Philosophy" page, all the text that goes past the menu on the
left, spills over to the left.

In Firefox neither of these things happen.

Gecko has some peculiarities wrapping certain elements around floats.
Tables and lists are 2 that come to mind.

Can anyone direct me how to fix it, or perhaps guide me in the right direction?

Here's some direction - get rid of the rule:
a {outline:none}

When I tab through links on the page, the focus outline is supposed to
give me a visual clue to which link I'm on. The above rule hides it,
making it very difficult to navigate the page.

Your choice of list mark up for the major page sections is strange, not
to mention questionable from a semantics POV. I suggest sectioning the
page off with divs instead. You'll probably get better results, or at
least more consistent results.

BTW, you shouldn't need kludges like empty elements and &nbsp; to get
what you want. You've also got errors like an h4 without any h1-h3 that
need correcting.

Thanks.

You're welcome.

--
Berg

[-Lost]

"Richard Formby" <ne********@barefile.com.auwrote in message
news:Pq******************@news-server.bigpond.net.au...

-Lost wrote:

>http://foomanchu.com/littlepeoples/

1. In Internet Explorer 6 the text to the right of the logo does not appear unless I
highlight it. The text is "Little People's CDC" and then I list the phone numbers.

Google for peekaboo bug. There is a standard fix for it, the Holly fix IIRC.

Will do, thanks!

>2. In Opera 9.10 on the "Philosophy" page, all the text that goes past the menu on the
left, spills over to the left.

Dunno but I was totally confused by the fact that the entire page is a collection of
multiply nested unordered lists. I wonder if IE and FF are confused as well. I suspect
IE and FF differ on their handling of the content of those uls when it comes to wrapping
it about the floated ul. FWIW I think IE is getting it right. in the absence of any left
margin the content *should* wrap under the navigation.

Believe it or not, I read an article some time ago that discussed, that semantically,
using lists was a more tactically inclined method of laying out a page.

This was my attempt in using lists.

The fact that you have incorrect nesting of the UL's (as the validator would tell you)
is not helping.

Really? I did not know. What validator are you using? I get valid CSS and XHTML on:

http://jigsaw.w3.org/css-validator/v...ttlepeoples%2F

http://validator.w3.org/check?verbos...ttlepeoples%2F

Why not just wrap the navigation and content in a div per each, float left the
navigation and left-margin the content by the width of the navigation? That's the way a
two column layout is usually done.

You are completely right, there is a much more generalized, and definitely easier method
for layout. I was just attempting to be trendy as I stated before.

Thanks again.

-Lost

[-Lost]

"Bergamot" <be******@visi.comwrote in message news:55*************@mid.individual.net...

-Lost wrote:

>>
http://foomanchu.com/littlepeoples/

1. In Internet Explorer 6 the text to the right of the logo does not appear unless I
highlight it. The text is "Little People's CDC" and then I list the phone numbers.

IE6 has a lot of float bugs. Search for the peek-a-boo bug.

Thank you.

>2. In Opera 9.10 on the "Philosophy" page, all the text that goes past the menu on the
left, spills over to the left.

In Firefox neither of these things happen.

Gecko has some peculiarities wrapping certain elements around floats.
Tables and lists are 2 that come to mind.

Ah, it figures I would go straight towards a problem.

>Can anyone direct me how to fix it, or perhaps guide me in the right direction?

Here's some direction - get rid of the rule:
a {outline:none}

This is a major accessability no-no, I know, however, the owner of daycare actually asked
for that. "Is there a way to get rid of those dot things?" was the exact question.

I will remove it for the time being whilst requesting assistance.

When I tab through links on the page, the focus outline is supposed to
give me a visual clue to which link I'm on. The above rule hides it,
making it very difficult to navigate the page.

Your choice of list mark up for the major page sections is strange, not
to mention questionable from a semantics POV. I suggest sectioning the
page off with divs instead. You'll probably get better results, or at
least more consistent results.

I cannot for the life of me remember the exact URL that basically spoke about the semantic
effeciency of using lists in markup.

Upon remembering that I decided to give it a go. Here is one that talks about it:

http://blog.rd2inc.com/archives/2004...igation-in-ie/

I would however be interested if you had a good link on semantic markup.

BTW, you shouldn't need kludges like empty elements and &nbsp; to get
what you want. You've also got errors like an h4 without any h1-h3 that
need correcting.

How do you know? The validators told me there was nothing wrong. Did I miss something?

Thanks again.

-Lost

[Richard Formby]

-Lost wrote:

>>http://foomanchu.com/littlepeoples/

Believe it or not, I read an article some time ago that discussed, that
semantically, using lists was a more tactically inclined method of laying
out a page.

Lists make sense (sometimes) for navigation constructs. On your page you
have a "list" of links over there on the left. I'm sure that is what the
article was addressing.

IMHO lists don't make sense for the rest of the content. That is what Hx, p
etc elements are for, plus the occasional div, or even span, to allow you to
style a section of the page. I would not consider your content to be a
"list" of Hx's, p's etc. Most of it is a linear collection of paragraphs
(p's).

BTW, you don't use HTML for "laying out a page", you use it to describe the
logical structure of the page: A ul of links, a H1, a bunch of p's. It is
CSS that then gives that structure a visual layout.

>The fact that you have incorrect nesting of the UL's (as the validator
would tell you) is not helping.

Really? I did not know. What validator are you using? I get valid CSS
and XHTML on:

I validated http://foomanchu.com/littlepeoples/a...philosophy.htm
over at validator.w3.org. Two misplaced ul's.

--
Richard.

[-Lost]

"Richard Formby" <ne********@barefile.com.auwrote in message
news:FW******************@news-server.bigpond.net.au...

-Lost wrote:

>>>http://foomanchu.com/littlepeoples/

>Believe it or not, I read an article some time ago that discussed, that semantically,
using lists was a more tactically inclined method of laying out a page.

Lists make sense (sometimes) for navigation constructs. On your page you have a "list"
of links over there on the left. I'm sure that is what the article was addressing.

Oh, I guarantee you the author was referring to the entire page being a list.

I do however, get your point.

IMHO lists don't make sense for the rest of the content. That is what Hx, p etc elements
are for, plus the occasional div, or even span, to allow you to style a section of the
page. I would not consider your content to be a "list" of Hx's, p's etc. Most of it is a
linear collection of paragraphs (p's).

BTW, you don't use HTML for "laying out a page", you use it to describe the logical
structure of the page: A ul of links, a H1, a bunch of p's. It is CSS that then gives
that structure a visual layout.

I did not mean visually, if I implied at all that markup was for visual layout. I meant
laying it out semantically so that it degrades nicely for browsers that do not have CSS
support.

Sorry for the miscommunication.

>>The fact that you have incorrect nesting of the UL's (as the validator would tell you)
is not helping.

Really? I did not know. What validator are you using? I get valid CSS and XHTML on:

I validated http://foomanchu.com/littlepeoples/a...philosophy.htm over at
validator.w3.org. Two misplaced ul's.

Ooops! I totally forgot about those. Thanks!

-Lost

[Richard Formby]

-Lost wrote

"Bergamot" <be******@visi.comwrote in message
news:55*************@mid.individual.net...

>Here's some direction - get rid of the rule:
a {outline:none}

This is a major accessibility no-no, I know, however, the owner of daycare
actually asked for that. "Is there a way to get rid of those dot things?"
was the exact question.

Over here in .au it is illegal to intentionally discriminate against anybody
with any form of disability. The legislation specifically covers publicly
available "for business" web sites and includes the inability to use a
mouse.

Believe it or not, removing the focus rectangle is therefore against the law
:-)

Besides, it only appears if the keyboard is used for navigation and that is
*exactly* when it is required.

--
Richard.

[Jukka K. Korpela]

Scripsit Richard Formby:

Google for peekaboo bug. There is a standard fix for it, the Holly
fix IIRC.

Looking at
http://www.positioniseverything.net/.../peekaboo.html
I can see several suggested fixes, but the most promising one seems to be
this:
"if the container that holds the float is given an assigned 'line-height'
(any assigned line-height) the bug vanishes".

So apparently if I set, say,
* { line-height: 1.25; }
in my general style sheet, I need not worry about the Peek-a-boo bug.
Naturally I would need to select the value according to the characteristics
of the fonts that I suggest and the layout (line length etc.), but that's
something I should do anyway.

Is there any reason _not_ to do that? Setting line-height is useful anyway,
since the common browser defaults are too small for fonts that authors
commonly specify on their pages.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[-Lost]

"Jukka K. Korpela" <jk******@cs.tut.fiwrote in message
news:YQ*******************@reader1.news.saunalahti .fi...

Scripsit Richard Formby:

The 5th Dudeson! : ) Sorry! I just think of The Dudesons everytime I see Jukka.

In fact, given your background, I wonder if you are even familiar with them?

>Google for peekaboo bug. There is a standard fix for it, the Holly
fix IIRC.

Looking at
http://www.positioniseverything.net/.../peekaboo.html
I can see several suggested fixes, but the most promising one seems to be this:
"if the container that holds the float is given an assigned 'line-height' (any assigned
line-height) the bug vanishes".

So apparently if I set, say,
* { line-height: 1.25; }

Really? Both of the LIs in question had line-height set.

Actually, it was by setting a height: 1%; on them that made Internet Explorer give me the
peek and not the boo.

in my general style sheet, I need not worry about the Peek-a-boo bug. Naturally I would
need to select the value according to the characteristics of the fonts that I suggest
and the layout (line length etc.), but that's something I should do anyway.

Is there any reason _not_ to do that? Setting line-height is useful anyway, since the
common browser defaults are too small for fonts that authors commonly specify on their
pages.

Irregardless of it fixing the peek-a-boo bug, it does have a use. In general it is wise
to set a line-height. Cannot remember where I read that, but it was a reputable source.

So, I agree. Set it.

Leave it to Jukka to shed some light. Thanks.

-Lost

[Jukka K. Korpela]

Scripsit -Lost:

>I can see several suggested fixes, but the most promising one seems
to be this: "if the container that holds the float is given an
assigned 'line-height' (any assigned line-height) the bug vanishes".

So apparently if I set, say,
* { line-height: 1.25; }

Really? Both of the LIs in question had line-height set.

Yes, but the container that holds the float is the UL element, and for it
there is no line-height set. Of course, the defined meaning of line-height
implies that there is no need to set it for the UL when you set it for all
of its children, but this is a matter of a bug fix, so normal rules of logic
and reason might not apply. :-)

Actually, it was by setting a height: 1%; on them that made Internet
Explorer give me the peek and not the boo.

Fine, but unless I'm not missing something, my test with your current page
shows that if I remove those height: 1% rules, the bug appears on IE 6, and
if I then add * { line-height: 1.25; }, the bug disappears, so the
line-height trick works, too (and is simpler).

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Bergamot]

-Lost wrote:

"Bergamot" <be******@visi.comwrote in message news:55*************@mid.individual.net...

>-Lost wrote:

>>>
http://foomanchu.com/littlepeoples/

get rid of the rule:
a {outline:none}

This is a major accessability no-no, I know, however, the owner of daycare actually asked
for that. "Is there a way to get rid of those dot things?" was the exact question.

It is your responsibility to educate the client when they ask for Bad
Things. Tell them why it is bad and that you cannot do it in good
conscience. My experience has been that they will listen if you tell
them in a respectful manner.

BTW, if the client uses IE, outline:none won't have any effect anyway.

URL that basically spoke about the semantic
effeciency of using lists in markup.
http://blog.rd2inc.com/archives/2004...igation-in-ie/

They are discussing using lists for the navigation menu only, not the
whole page.

>You've also got errors like an h4 without any h1-h3 that
need correcting.

How do you know? The validators told me there was nothing wrong.

Validators don't check for things like proper nesting of heading levels.
That is a logic error, not a syntactical one.
http://www.htmldog.com/guides/htmlbeginner/headings/

You might want to peruse the rest of that site, too. I don't advocate
their use of XHTML, but there is good information there nonetheless.

--
Berg