Table TD width not rendering correctly

[karlman]

I am trying to create a web page that shows a calendar schedules. I am
attempting to use table cells with fixed widths and different colors to
display this.

It seems that IE6 doesn't always correctly render the widths exactly as
intended. I am using dream weaver and when I copy the HTML code into
that it renders perfectly.

Is there any known issues with the way IE6 renders table cells with
fixed widths?

Thanks!

Karl

[Jukka K. Korpela]

ka*****@pacbell.net wrote:

I am trying to create a web page that shows a calendar schedules. I am
attempting to use table cells with fixed widths and different colors to
display this.
You should have posted the URL of your best attempt so far. And maybe
considered the group for your posting - setting widths and especially
colors is best done in CSS, not in HTML.
It seems that IE6 doesn't always correctly render the widths exactly as
intended.
That is true, and correct, for suitable values of "correct". Browsers are
expected to override your width suggestions in many situations.
Is there any known issues with the way IE6 renders table cells with
fixed widths?

Yes. But we need to see the patient before suggesting a cure. Someone might
want to sell you some table-layout: fixed snake oil, but beware.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

[Stan Brown]

"" wrote in comp.infosystems.www.authoring.html:

I am trying to create a web page that shows a calendar schedules. I am
attempting to use table cells with fixed widths and different colors to
display this.

It seems that IE6 doesn't always correctly render the widths exactly as
intended.

For once, IE isn't wrong. Any width specification you make is a
_suggestion_ to the browser. Browsers are free to adjust table-cell
widths based on the content.

If you give us the URL of your page we might be able to suggest a
way to code it that is more likely to give the widths you're after,
though still not guaranteed even in a proper browser.

--

Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/

[karlman]

I have uploaded my latest effort. If you hover over the colored areas
then you will see a popup that shows the meeting times. I am trying to
get them to line up properly with the times above. When I copy this
code into Dreamweaver it lines up perfectly...

My next effort will be to try doing it with images...

Thank you!!

http://www.geocities.com/uberkase/default.htm

Karl

[Adrienne]

Gazing into my crystal ball I observed "karlman" <ka*****@pacbell.net>
writing in news:11*********************@g14g2000cwa.googlegro ups.com:

I have uploaded my latest effort. If you hover over the colored areas
then you will see a popup that shows the meeting times. I am trying to
get them to line up properly with the times above. When I copy this
code into Dreamweaver it lines up perfectly...

My next effort will be to try doing it with images...

Thank you!!

http://www.geocities.com/uberkase/default.htm

Karl

I can see several problems with page.

First, take things like this: <TD style='border:solid 1px #000000'
width='35'> and turn it into this:
..times {border:solid 1px #000000; width:35px}
<td class="times">

You have other issues with nesting tables. That's always a bad idea, IMHO.
Keep everything in the same table.

I would not use the title attribute to describe the events. It might not
be available to the user long enough. Make the width and height of the
cell large enough to take a certain amount of character, and use only that
amount of character.

You would also be better off keeping the width of each cell the same,
regardless of whether the date is available or not.

I have an example calendar I made last year. You're more than welcome to
look at the source and CSS to see what I did:
<http://www.cavalcade-of-coding.info/usenet/calendar.html>

--
Adrienne Boswell
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

[s_m_b]

"karlman" <ka*****@pacbell.net> wrote in news:1109700610.147052.31980
@g14g2000cwa.googlegroups.com:

I have uploaded my latest effort. If you hover over the colored areas
then you will see a popup that shows the meeting times. I am trying to
get them to line up properly with the times above. When I copy this
code into Dreamweaver it lines up perfectly...

My next effort will be to try doing it with images...

Thank you!!

http://www.geocities.com/uberkase/default.htm

Karl

Following Adrienne's comments, you really need to do something to the
title attribs. Might be worth having a message bar below to show any such
up, avoiding the variable quality of the output displayed - FF doesn't
like the spacing etc, whereas IE blocks it quite well (for a change).
The message back can be done with a onMouseOver/onFocus/onClick,
depending on how you want to trigger.

[karlman]

Thank you Adrienne!

I converted my styles into CSS/Class and eliminated the nested tables.
Thank you for the suggestions.

I took a look at your calendar which was nice but won't really help me
here because I am trying to show the hours that a room is booked.

I have actually got everything to work and I really appreciate your
help!

Both you and s_m_b suggest eliminating the title (now alt since I am
using images inside of a single cell rather than cells thenselves). Is
this primarily because some browsers won't display it properly or that
it only lasts for a few seconds when the mouse is not moving?

Thank you!

[s_m_b]

"karlman" <ka*****@pacbell.net> wrote in news:1109878847.988496.297800
@g14g2000cwa.googlegroups.com:

Thank you Adrienne!

I converted my styles into CSS/Class and eliminated the nested tables.
Thank you for the suggestions.

I took a look at your calendar which was nice but won't really help me
here because I am trying to show the hours that a room is booked.

I have actually got everything to work and I really appreciate your
help!

Both you and s_m_b suggest eliminating the title (now alt since I am
using images inside of a single cell rather than cells thenselves). Is
this primarily because some browsers won't display it properly or that
it only lasts for a few seconds when the mouse is not moving?
the 'alt' tag is actually intended as a descriptor when images are
suppressed, or for text-only browsing - eg text-to-speech.
If you view via FireFox and via IE, you'll see the difference.
For the purpose of 'snapshot' type views, you #can# get away with them -
I use just such a technique for showing data that simply won't fit
anywhere else, but gives context to a link - but for practical viewing
and use, you really need something that will produce the detail and hold
it as long as needs be.

Thank you!

[Alan J. Flavell]

On Thu, 3 Mar 2005, s_m_b wrote:

the 'alt' tag is actually intended as a descriptor

The "alt" text is called "alt" because it's intended to be a textual
*alternative*. If it was meant to be a description, rather than an
alternative, then I reckon it would have been called something else.

[Tim]

s_m_b wrote:

the 'alt' tag is actually intended as a descriptor

"Alan J. Flavell" <fl*****@ph.gla.ac.uk> posted:
The "alt" text is called "alt" because it's intended to be a textual
*alternative*. If it was meant to be a description, rather than an
alternative, then I reckon it would have been called something else.

I won't argue what alt means, as it's well defined, and anybody (by now)
arguing to the contrary is being a fool. But I don't know if I'd go along
with they'd have named it differently for *sensible* reasons. After all,
the "title" attribute would rarely be used as a title for the element it's
used with.

--
If you insist on e-mailing me, use the reply-to address (it's real but
temporary). But please reply to the group, like you're supposed to.

This message was sent without a virus, please delete some files yourself.

[s_m_b]

"Alan J. Flavell" <fl*****@ph.gla.ac.uk> wrote in
news:Pi*******************************@ppepc56.ph. gla.ac.uk:

On Thu, 3 Mar 2005, s_m_b wrote:

the 'alt' tag is actually intended as a descriptor

The "alt" text is called "alt" because it's intended to be a textual
*alternative*. If it was meant to be a description, rather than an
alternative, then I reckon it would have been called something else.

same thing! use to 'describe' the image for text-only. Of course, you can
have some garbage in there, but that kind of defeats the point...

[Alan J. Flavell]

On Fri, 4 Mar 2005, s_m_b wrote:

The "alt" text is called "alt" because it's intended to be a textual
*alternative*. If it was meant to be a description, rather than an
alternative, then I reckon it would have been called something else.
same thing!

Don't agree. Neither do the W3C, when they're having one of their
clear-headed days.
use to 'describe' the image for text-only.
Used to provide a textual alternative for the image.
Of course, you can have some garbage in there,
Who says you can?
but that kind of defeats the point...

Exactly. What -was- the point again? Answer in your own time: you
may refer to the HTML4.01 specification and to the relevant WAI
guidelines. SCNR.

http://www.w3.org/TR/html401/struct/objects.html#h-13.8

http://www.w3.org/TR/WCAG10/#gl-provide-equivalents

*Sometimes* the best textual equivalent might be a description of the
image, but in my experience that's the wrong choice more often than
it's right - with results that range from the slightly silly to the
absurd.

[me]

<ka*****@pacbell.net> wrote in message
news:11*********************@f14g2000cwb.googlegro ups.com...

I am trying to create a web page that shows a calendar schedules. I am
attempting to use table cells with fixed widths and different colors to
display this.

It seems that IE6 doesn't always correctly render the widths exactly as
intended. I am using dream weaver and when I copy the HTML code into
that it renders perfectly.

Is there any known issues with the way IE6 renders table cells with
fixed widths?

Thanks!

Karl

Save this as an HTML document or open the DW code view and paste it in. Note
that you may have to fix the line wraps.
Good Luck,
me

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
..border { border: 1px #000000 solid}
-->
</style>
<script language="JavaScript">
<!--
function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document); return x;
}

function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null)
{ v=args[i+2];
if (obj.style) { obj=obj.style;
v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>

<body bgcolor="#FFFFFF">
<div id="layer1" style="position:absolute; width:691px; height:57px;
z-index:1; left: 10px; top: 115px; background-color: #FFFF00;
layer-background-color: #FFFF00; border: 1px none #000000; visibility:
hidden">Updated:
WEEKLY 1ST MORTGAGE METRICS/CAPACITY MEETING Mark Lefanowicz 3/1/2005
9:00:00
AM to 3/1/2005 9:45:00 AM</div>
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#CCCC99"
width="700">
<tr>
<td width="175" bgcolor="#FFFFFF">&nbsp;</td>
<td colspan="16" class="border"><font color=#FFFFFF
size='5'><strong>Tuesday,
March 01, 2005</strong></font></td>
</tr>
<tr>
<td width="175" class="border">Room Name</td>
<td width="35" class="border">6a</td>
<td width="35" class="border">7a</td>
<td width="35" class="border">8a</td>
<td width="35" class="border">9a</td>
<td width="35" class="border">10a</td>
<td width="35" class="border">11a</td>
<td width="35" class="border">12p</td>
<td width="35" class="border">1p</td>
<td width="35" class="border">2p</td>
<td width="35" class="border">3p</td>
<td width="35" class="border">4p</td>
<td width="35" class="border">5p</td>
<td width="35" class="border">6p</td>
<td width="35" class="border">7p</td>
<td width="35" class="border">8p</td>
</tr>
<tr>
<td width="175" class="border">Bay</td>
<td width="35" class="border">&nbsp;</td>
<td width="35" class="border">&nbsp;</td>
<td width="35" class="border">&nbsp;</td>
<td width="35" class="border"><a href="#"
onMouseOver="MM_showHideLayers('layer1','','show') "
onMouseOut="MM_showHideLayers('layer1','','hide')" >R</a></td>
<td width="35" class="border">&nbsp;</td>
<td width="35" class="border">&nbsp;</td>
<td width="35" class="border">&nbsp;</td>
<td width="35" class="border">&nbsp;</td>
<td width="35" class="border">&nbsp;</td>
<td width="35" class="border">&nbsp;</td>
<td width="35" class="border">&nbsp;</td>
<td width="35" class="border">&nbsp;</td>
<td width="35" class="border">&nbsp;</td>
<td width="35" class="border">&nbsp;</td>
<td width="35" class="border">&nbsp;</td>
</tr>
</table>
</body>
</html>

[Rick Cook]

Adrienne wrote:

Gazing into my crystal ball I observed "karlman" <ka*****@pacbell.net>
writing in news:11*********************@g14g2000cwa.googlegro ups.com:

I have uploaded my latest effort. If you hover over the colored areas
then you will see a popup that shows the meeting times. I am trying to
get them to line up properly with the times above. When I copy this
code into Dreamweaver it lines up perfectly...

My next effort will be to try doing it with images...

Thank you!!

http://www.geocities.com/uberkase/default.htm

Karl

I can see several problems with page.

First, take things like this: <TD style='border:solid 1px #000000'
width='35'> and turn it into this:
.times {border:solid 1px #000000; width:35px}
<td class="times">

You have other issues with nesting tables. That's always a bad idea, IMHO.
Keep everything in the same table.

I would not use the title attribute to describe the events. It might not
be available to the user long enough. Make the width and height of the
cell large enough to take a certain amount of character, and use only that
amount of character.

You would also be better off keeping the width of each cell the same,
regardless of whether the date is available or not.

I have an example calendar I made last year. You're more than welcome to
look at the source and CSS to see what I did:
<http://www.cavalcade-of-coding.info/usenet/calendar.html>

Nice example.
However it brings up something I've been wondering about. Is there a
place to get (download) a generic calendar for use on web pages? All I
want is the calendar display.
I'm probably going to end up writing my own calendar app but I'd prefer
not to reinvent the wheel any more than I absolutely have to.

--RC

[Beauregard T. Shagnasty]

Adrienne wrote:

I have an example calendar I made last year. You're more than welcome to
look at the source and CSS to see what I did:
<http://www.cavalcade-of-coding.info/usenet/calendar.html>

Nice looking calendar, Adrienne. May I suggest you add this to the CSS?

#calendar td {
vertical-align: top;
}

Looks a bit nicer than having the numbers floating about in different
positions, if there is text or not for the day.

--
-bts
-This space intentionally left blank.

[Adrienne]

Gazing into my crystal ball I observed "Beauregard T. Shagnasty"
<a.*********@example.invalid> writing in
news:38*************@individual.net:

Adrienne wrote:

I have an example calendar I made last year. You're more than welcome
to look at the source and CSS to see what I did:
<http://www.cavalcade-of-coding.info/usenet/calendar.html>

Nice looking calendar, Adrienne. May I suggest you add this to the CSS?

#calendar td {
vertical-align: top;
}

Looks a bit nicer than having the numbers floating about in different
positions, if there is text or not for the day.

You're right. Done.

--
Adrienne Boswell
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

[Adrienne]

Gazing into my crystal ball I observed Rick Cook
<rc****@TAKEOUT.mindspring.com> writing in
news:M5*****************@newsread3.news.pas.earthl ink.net:

I have an example calendar I made last year. You're more than welcome
to look at the source and CSS to see what I did:
<http://www.cavalcade-of-coding.info/usenet/calendar.html>

Nice example.
However it brings up something I've been wondering about. Is there a
place to get (download) a generic calendar for use on web pages? All I
want is the calendar display.
I'm probably going to end up writing my own calendar app but I'd prefer
not to reinvent the wheel any more than I absolutely have to.

Depending on what language you have available, I'm sure there's lots of
calendars available.

I'm going to have to do this myself as I have a client that wants to have
appointments available online. Now, I'm just going to have to figure out
how to get their existing appointment app to talk to the web based one, and
vice versa.

--
Adrienne Boswell
http://www.cavalcade-of-coding.info
Please respond to the group so others can share