Stylesheets - church website: having trouble with display in IE

Author

church website: having trouble with display in IE

fishwick@gmail.com

2006-11-05, 11:33 pm

I haven't really done any css in quite a while, and am banging my head
against the wall trying get the rudimentary layout together of a church
website home page to display correctly - I don't want to continue work
until I understand what I'm doing wrong.

http://www.christchurchinfo.net

The site displays nicely in Firefox/Mozilla and Safari, but the stained
glass windows navigation portion is getting pushed down in IE, and the
"news" box is appearing over top of it. I would much appreciate any
pointers... I just don't really understand all the IE layout hacks
yet...

Of lesser worry is that the text in the left nav bar is cut off on
hover, and that none of my background images as defined in the css are
showing up...

Thanks for any help you can provide!

James

Harlan Messinger

2006-11-05, 11:33 pm

two7s_clash

2006-11-05, 11:33 pm

Actually, as far as I'm told, the sermons are usually either downloaded
by:

1) regulars who are out of town and want to hear the sermon
irregardless

2) People who want to hear a sermon they've already heard again

Unfortunately, the site as it is now isn't really focused on
evagenlism, but catering to the regulars. I'm taking on what I can on
an volunteer basis, time will tell if I can find the time and skills to
get the site to where it needs to be...

Harlan Messinger wrote:
> fishwick@XXXXXXXXXX wrote:
>
> Completely irrelevant to your question, your Sermons page really ought
> to have a sentence describing the content of each sermon. How many
> people coming to that page are going to look at the links and say, "Hey,
> I think I'll see what Jeffrey Fishwick had on his mind on August 27,
> 2006"? If the sermons are going to be of any interest to visitors at
> all, it will be based on what the sermons are about. If you don't give
> them some idea of what that is before they click on a link, especially
> one for a PDF or an MP3, they're not going to bother.

2006-11-05, 11:33 pm

> I don't want to continue work
> until I understand what I'm doing wrong.
>
> http://www.christchurchinfo.net

Without saying that anything *you* do is right (in CSS sense) the first
step would be to fix the right things IE does in a wrong way.

IE - before the recent version 7 - expects that the first tag on the
page is either <html> or <!doctype>. Anything else except comments
enforce BackCompat (Quirk) mode for IE. The outcome (besides other
ones) is that IE stays in its default box model. It means that if you
decided to use XHTML doctype you *never* use prolog with it or you may
get more troubles than you would expect.

So the first step is to change

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

to

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

That will bring IE's box model in accordance with the W3C box model
used by other UA's. Then let's see which problems will remain.

P.S. This bug is acknowledged by Microsoft and fixed in IE7 but for now
IE6 is still is wider use.

Harlan Messinger

2006-11-05, 11:33 pm

two7s_clash wrote:
> Actually, as far as I'm told, the sermons are usually either downloaded
> by:
>
> 1) regulars who are out of town and want to hear the sermon
> irregardless

That may be so, but if that's the only consideration, then there isn't
much point in listing more than the list three or four of them! It also
begs the question: maybe other people WOULD download them if there was a
way to know in advance what the sermons were about. And you never know
who might stray in from the outside, through search engines.

> 2) People who want to hear a sermon they've already heard again

Is a person going to remember that the sermon of interest was "the
sermon given on such-and-such day in February" or is he going to
remember that it was "the sermon about respect for the environment" or
"the sermon about Peter's denial"?

> Unfortunately, the site as it is now isn't really focused on
> evagenlism, but catering to the regulars. I'm taking on what I can on
> an volunteer basis, time will tell if I can find the time and skills to
> get the site to where it needs to be...

I think my suggestion is a pretty low-effort one. You're taking the time
to add the link anyway. The effort-to-benefit ratio for adding a
sentence to describe the sermon seems pretty low to me.

Also, I recommend that you put (PDF) instead of (text). You should
always warn people that a link will lead to something that requires a
plug-in or an external application to load. Indicating the size is
helpful too, especially for the MP3s, so the user can decide in advance
whether he has the bandwidth and the time, instead of clicking, and then
realizing 30 seconds later that the darn thing is still loading.

dorayme

2006-11-05, 11:33 pm

In article
<1162317655.347784.256110@e3g2000cwe.googlegroups.com>,
fishwick@XXXXXXXXXX wrote:

> I haven't really done any css in quite a while, and am banging my head
> against the wall trying get the rudimentary layout together of a church
> website home page to display correctly - I don't want to continue work
> until I understand what I'm doing wrong.
>
> http://www.christchurchinfo.net
>
> The site displays nicely in Firefox/Mozilla and Safari, but the stained
> glass windows navigation portion is getting pushed down in IE, and the
> "news" box is appearing over top of it. I would much appreciate any
> pointers... I just don't really understand all the IE layout hacks
> yet...
>
> Of lesser worry is that the text in the left nav bar is cut off on
> hover, and that none of my background images as defined in the css are
> showing up...
>
> Thanks for any help you can provide!
>
> James

In Safari, the site appears as if the stylesheet is turned off.
Safari is very picky and you have errors there. As well as
following the doctype advice posted by another (do you really
need the xhtml business, why not stay with html doc type?),
check your css:

You have:

div.pdf_wrap {/
border-top:1px dotted #300;
font: normal 10px/12px arial, helvetica, san-serif;}

What is that / doing? Some sort of hack? And it is "sans serif",
not "san serif"

--
dorayme

Johannes Koch

2006-11-05, 11:33 pm

VK schrieb:
> So the first step is to change
>
> <?xml version="1.0" encoding="iso-8859-1"?>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>
> to
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Then without information on a protocol level about the character
encoding, an XML processor will assume UTF-8 or UTF-16, but not
iso-8859-1 as specified in the XML declaration.

Additionally the question arises, why XHTML 1.0 Transitional is used.
--
Johannes Koch
Spem in alium nunquam habui praeter in te, Deus Israel.
(Thomas Tallis, 40-part motet)

John Hosking

2006-11-05, 11:33 pm

fishwick@XXXXXXXXXX wrote:
> I haven't really done any css in quite a while, and am banging my head
> against the wall trying get the rudimentary layout together of a church
> website home page to display correctly - I don't want to continue work
> until I understand what I'm doing wrong.
>
> http://www.christchurchinfo.net
>
> The site displays nicely in Firefox/Mozilla and Safari, but the stained
> glass windows navigation portion is getting pushed down in IE, ...

Hello, James

First step in this situation is to run your page through the validator.
http://validator.w3.org/check?verbo...urchinfo.net%2F
says you've got 47 errors, but most of them are the same one. The
first problem relates to XHTML and XML, and that's the first question:
why not try HTML 4.01 (strict), and eliminate a lot of complexity?

But most of the rest of the errors are because you've got multiple lines
(table rows, actually) containing stuff like
<td><img src="spacer.gif" alt="" name="undefined_2" border="0"
height="1" width="47" id="undefined_2" /></td>

You can use an id only once on a page. And anyway, what does an id like
"undefined_2" mean? To say nothing of the name.

But if you're using CSS, why do you want to mess with width=47 (or
whatever) in every cell? Especially when every cell in the row is empty?
Why use the spacer.gifs at all?

I know why: you want to achieve pixel-perfect layout, so you are using
tables to layout non-tabular content, specifying font-size in px, and
hoping the user will see everything just as you see it. But apart from
the specific problems you mention in your OP (which I won't explicitly
address), the page doesn't really "display nicely in Firefox," no matter
how it looks in IE.

If I increase the font size even one notch in FF, the text grows out of
the nav boxes (upper-left). That's *before* I hover over them. The
"Forming Christians" motto (upper-right) starts to overlap the window
frame (so the purple text fades into the brown bg).

Even before I upsize the font, the e-mail address is partially obscured
by the job opening box (I see "e-mail: cec@ntel"). I don't see the phone
or fax numbers at all.

When my viewport is less than 985px wide, I get a horiz. scrollbar, for
no apparent reason. Your content isn't more than about 803px wide.

Drifting even farther from your query (but still in what I hope you will
find a constructive direction):
The stained glass links look like text, but are really graphics (one
smaller; another larger for the "hover"). You have no alt or title
attributes on the links, so we never see any tooltips, and if an image
doesn't load, there's no chance to follow its link (except true blind
luck). Also, I notice you've got some Dreamweaver-type javascript to
preload the "hover" images, but it looks like you don't call the code.
So I see a delay the first time I try to hover over the link before the
"large" version appears. Those with poorer eyesight than myself might
not call the link text large, though.

The upper-left nave links look a little funny to me, like they snuck in
from another website. I don't personally care for the effect on hover;
it looks broken to me.

From the other (non-home) pages, the navigation is completely
inaccessible when images are turned off or not usable. But maybe you're
re-doing those pages to match the style of the (new) Home page?

<link rel="stylesheet" href="jesus.css" type="text/css" />
Now *that's* a stylesheet to pay attention to! Talk about !important!

I hope some of the verbose drivel above is of some use to you. I think
you'll have trouble as long as you try to use px and pt to nail down
every element, and the vagaries of XHTML won't help you, esp. with IE.
Consider a design with images optional, and varying sizes of text and
browser windows.

--
John

two7s_clash

2006-11-05, 11:33 pm

Hi John-

Thanks for your thoughtful and constructive feedback. A lot to consider
and rework!

The odd stained-glass window menu is not of my design, but a relic from
the former home page, which, as bad as mine is, was a hundred time
worse. I'm taking on this site as a volunteer, with a plan to rework
all the pages, but right now I just want it to display mostly legibly
in the default view in the major three browsers... is there anyway I
can insititute a temporary fix just so IE doesn't drop the window below
the left-hand nav and the script?

Beyond that, any concrete suggestions/examples for instituting your
final suggestion, while keeping the window in some central element?

Thanks,

-J

On Oct 31, 10:01 pm, John Hosking <J...@Hosking.name.DROPTHE.invalid>
wrote:
> fishw...@XXXXXXXXXX wrote:
>
>
>
> First step in this situation is to run your page through the validator.http://validator.w3.org/check?verbo...www.christch...
> says you've got 47 errors, but most of them are the same one. The
> first problem relates to XHTML and XML, and that's the first question:
> why not try HTML 4.01 (strict), and eliminate a lot of complexity?
>
> But most of the rest of the errors are because you've got multiple lines
> (table rows, actually) containing stuff like
> <td><img src="spacer.gif" alt="" name="undefined_2" border="0"
> height="1" width="47" id="undefined_2" /></td>
>
> You can use an id only once on a page. And anyway, what does an id like
> "undefined_2" mean? To say nothing of the name.
>
> But if you're using CSS, why do you want to mess with width=47 (or
> whatever) in every cell? Especially when every cell in the row is empty?
> Why use the spacer.gifs at all?
>
> I know why: you want to achieve pixel-perfect layout, so you are using
> tables to layout non-tabular content, specifying font-size in px, and
> hoping the user will see everything just as you see it. But apart from
> the specific problems you mention in your OP (which I won't explicitly
> address), the page doesn't really "display nicely in Firefox," no matter
> how it looks in IE.
>
> If I increase the font size even one notch in FF, the text grows out of
> the nav boxes (upper-left). That's *before* I hover over them. The
> "Forming Christians" motto (upper-right) starts to overlap the window
> frame (so the purple text fades into the brown bg).
>
> Even before I upsize the font, the e-mail address is partially obscured
> by the job opening box (I see "e-mail: cec@ntel"). I don't see the phone
> or fax numbers at all.
>
> When my viewport is less than 985px wide, I get a horiz. scrollbar, for
> no apparent reason. Your content isn't more than about 803px wide.
>
> Drifting even farther from your query (but still in what I hope you will
> find a constructive direction):
> The stained glass links look like text, but are really graphics (one
> smaller; another larger for the "hover"). You have no alt or title
> attributes on the links, so we never see any tooltips, and if an image
> doesn't load, there's no chance to follow its link (except true blind
> luck). Also, I notice you've got some Dreamweaver-type javascript to
> preload the "hover" images, but it looks like you don't call the code.
> So I see a delay the first time I try to hover over the link before the
> "large" version appears. Those with poorer eyesight than myself might
> not call the link text large, though.
>
> The upper-left nave links look a little funny to me, like they snuck in
> from another website. I don't personally care for the effect on hover;
> it looks broken to me.
>
> From the other (non-home) pages, the navigation is completely
> inaccessible when images are turned off or not usable. But maybe you're
> re-doing those pages to match the style of the (new) Home page?
>
> <link rel="stylesheet" href="jesus.css" type="text/css" />
> Now *that's* a stylesheet to pay attention to! Talk about !important!
>
> I hope some of the verbose drivel above is of some use to you. I think
> you'll have trouble as long as you try to use px and pt to nail down
> every element, and the vagaries of XHTML won't help you, esp. with IE.
> Consider a design with images optional, and varying sizes of text and
> browser windows.
>
> --
> John

John Hosking

2006-11-05, 11:33 pm

Hi, James

It works better if you bottom-post (as I am doing here, rather than
top-post, as you did in your reply to me. I've fixed it for you (so your
response is now at the bottom).

two7s_clash wrote:

> On Oct 31, 10:01 pm, John Hosking wrote:
>
[color=darkred]
>
> Hi John-
>
> Thanks for your thoughtful and constructive feedback. A lot to consider
> and rework!
>
> The odd stained-glass window menu is not of my design, but a relic from
> the former home page, which, as bad as mine is, was a hundred time
> worse. I'm taking on this site as a volunteer, with a plan to rework
> all the pages, but right now I just want it to display mostly legibly
> in the default view in the major three browsers... is there anyway I
> can insititute a temporary fix just so IE doesn't drop the window below
> the left-hand nav and the script?
>
> Beyond that, any concrete suggestions/examples for instituting your
> final suggestion, while keeping the window in some central element?
>
Well, I've found what's happening, but I can't say *why* it is. I can
explain it in its most simplified form, though, and maybe somebody can
tell what you can do about it.

You're facing this fundamental situation:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML><HEAD><TITLE>Christ Episcopal Church</TITLE>
<style type="text/css">
body { margin:0; padding:0; background-color:aqua; }
..word { WIDTH:175px; FLOAT:left; }
</style>
</HEAD><BODY>

<DIV class="word">Forming Christians in order that they might serve
....</DIV>

<TABLE><TR><TD><IMG src="window3_r1_c1.jpg" width=697 height=96>
</TD></TR></TABLE>

</BODY></HTML>

The table with all your sliced up stained glass imagelets stays up where
you want it in Firefox, even at the height of the "word" DIV at the top
of the page. In IE6, however, the table always bumps down below the
"word" DIV, *unless* there is enough room for both in the width of the
viewport. So when the IE window is at least 697 + 175 pixels wide, both
elements are at the top, but if you reduce the size of the window, the
table drops down below the div.

If the image is not in a table, but in another DIV, then the img DIV
drops in Firefox as well as in IE6.

I'm sure the others here know about this and why it is. I do not. :-(
also don't know what to search for. Probably "replaced elements," if
only because that's the part of the W3C specs I understand least.

Originally, I hadn't realized you had sliced up images. I just assumed
the stained glass was a background image. So maybe that's the best idea
for a solution involves a large containing div w/ stained glass bg
image, and the .word DIV as well as a table for your links contained
inside the container. You could use text links rather than GIFs, so they
expand to suit the user's needs. Ergo no probs when no images.

BTW, as I was narrowing things down to make a simplified case of your
site, I noticed several instances in your CSS where top, right, bottom,
and left values where all identical for a given selector. For example,
#frame { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px;
MARGIN-LEFT: auto; WIDTH: 900px; MARGIN-RIGHT: auto; PADDING-TOP: 0px }

Maybe you know this, but things like this can be simplified to
#frame {PADDING:0px; MARGIN-LEFT:auto; WIDTH:900px; MARGIN-RIGHT:auto; }

I also think you don't need
#frame { WIDTH: 900px; } or
#container { WIDTH: 740px }, but you'll have to check.

dorayme

2006-11-05, 11:33 pm

In article <45484925$1_7@news.bluewin.ch>,
John Hosking <John@Hosking.name.DROPTHE.invalid> wrote:

> Hi, James
>
> It works better if you bottom-post (as I am doing here, rather than
> top-post,

Is there a name for text that makes what it says clearly untrue?

--
dorayme

John Hosking

2006-11-05, 11:33 pm

dorayme wrote:
> In article <45484925$1_7@news.bluewin.ch>,
> John Hosking <John@Hosking.name.DROPTHE.invalid> wrote:
>
>
>
>
> Is there a name for text that makes what it says clearly untrue?
>
Heh. Heh heh. Well, I *meant* "bottom-posting, as I am doing here in
this post with the rest of the content, not this little bit that so
poorly explains what I mean."

It's an abbreviation...

--
John

Ben C

2006-11-05, 11:33 pm

On 2006-11-01, John Hosking <John@Hosking.name.DROPTHE.invalid> wrote:
[snip]
> Well, I've found what's happening, but I can't say *why* it is. I can
> explain it in its most simplified form, though, and maybe somebody can
> tell what you can do about it.
>
> You're facing this fundamental situation:
>
><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
><HTML><HEAD><TITLE>Christ Episcopal Church</TITLE>
><style type="text/css">
> body { margin:0; padding:0; background-color:aqua; }
> .word { WIDTH:175px; FLOAT:left; }
></style>
></HEAD><BODY>
>
><DIV class="word">Forming Christians in order that they might serve
> ...</DIV>
>
><TABLE><TR><TD><IMG src="window3_r1_c1.jpg" width=697 height=96>
></TD></TR></TABLE>
>
></BODY></HTML>
>
> The table with all your sliced up stained glass imagelets stays up where
> you want it in Firefox, even at the height of the "word" DIV at the top
> of the page. In IE6, however, the table always bumps down below the
> "word" DIV, *unless* there is enough room for both in the width of the
> viewport. So when the IE window is at least 697 + 175 pixels wide, both
> elements are at the top, but if you reduce the size of the window, the
> table drops down below the div.
>
> If the image is not in a table, but in another DIV, then the img DIV
> drops in Firefox as well as in IE6.
>
> I'm sure the others here know about this and why it is. I do not. :-(

This is an interesting phenomenon I have observed before. I think it's a
quirk. I have not not seen where this specified, but Firefox, Opera and
Konqueror all do it.

The table in this case is not behaving like a block-level box, which
according to the CSS spec, it should (if it's display: table). If it
were a block level box, it should go below the float, always, whether
there's room or not. If it were behaving like an inline-level box, it
should go to the right of the float unless there isn't enough room, in
which case it should go below. It doesn't consistently behave like
either in FF.

It sounds like IE is treating the table as if it were display:
inline-table rather than display: table. So a possible fix might be to
add

table { display: table; }

but I don't hold out much hope for that making any difference.

> also don't know what to search for. Probably "replaced elements," if
> only because that's the part of the W3C specs I understand least.

If there's an explanation, it's likely in an HTML spec under "tables".
This is either not in CSS 2.1 or I haven't found it.

You get this behaviour with any table, whether it contains a "replaced
element" or not.

I would also like to know where and in what spec this is explained.

I think the fix here is not to use a float, but use positioning instead.

..word
{
width: 175px;
position: absolute;
left: 0px;
}

Then make the table

{
position: absolute;
left: 175px;
}