First table row is different?

#1 July 20th, 2005, 05:28 PM

In the following HTML code, the whitespace to the right of "bla" is
clickable, whereas the whitespace to the right of "blubb" is not.
That is, IE6 behaves like this. In Mozilla 1.4, both areas of
whitespace are clickable.

How do I make that whitespace (to the right of "blubb") clickable in
IE6, too?

It's okay to use something other than tables. Actually, I am trying
to produce a column of "buttons" which stretch across the whole width
of the frame. I'm still not sure how to get the 3d look that buttons
in Windows normally have...

tia,
Kai

PS: Frame layout is required because the user is supposed to be able
to resize that column of buttons with the mouse.

<html>
<body>

<table width="100%" border="1">
<tr>
<td>
<a href="http://www.leo.org/">
<div>bla</div>
</a>
</td>
</tr>
<tr>
<td>
<a href="http://www.google.com/">
<div>blubb</div>
</a>
</td>
</tr>
</table>

</body>
</html>

#2 July 20th, 2005, 05:28 PM

"Kai Grossjohann" <kai@emptydomain.de> wrote in message
news:8765i14bai.fsf@emptyhost.emptydomain.de...[color=blue]
> In the following HTML code, the whitespace to the right of "bla" is
> clickable, whereas the whitespace to the right of "blubb" is not.
> That is, IE6 behaves like this. In Mozilla 1.4, both areas of
> whitespace are clickable.[/color]

A DIV is a block element. In valid HTML it cannot appear inside an A
element. The browsers are reacting in their own respective, unpredictable
ways to invalid code.
[color=blue]
>
> How do I make that whitespace (to the right of "blubb") clickable in
> IE6, too?
>
> It's okay to use something other than tables. Actually, I am trying
> to produce a column of "buttons" which stretch across the whole width
> of the frame. I'm still not sure how to get the 3d look that buttons
> in Windows normally have...[/color]

If you buttons, use images, with a rollover version if you'd like, and link
them. Or try this CSS trick, which I've tested in IE6, Netscape 6, Netscape
7, and Mozilla 1.5: (the "cursor" attribute works only in IE, and even there
it doesn't persist when the cursor is over the button's label; maybe if I
put the label in a span and gave the span a "cursor" style it would work)

<html>

<head>
<style>
.button {
background-color: #cccccc;
color: green;
border-style: outset;
border-width: 2px;
margin: 5px;
padding: 5px;
cursor: hand;
}
.navbutton { width: 125px; }
</style>
</head>

<body>

<div
class="button navbutton"
onmouseover="this.style.borderStyle='inset'"
onmouseout="this.style.borderStyle='outset'"
onclick="location.href='http://www.leo.org'">LEO</div>

<div
class="button navbutton"
onmouseover="this.style.borderStyle='inset'"
onmouseout="this.style.borderStyle='outset'"
onclick="location.href='http://www.google.com'">Search Google</div>

</body>
</html>

#3 July 20th, 2005, 05:29 PM

"Harlan Messinger" <h.messinger@comcast.net> writes:
[color=blue]
> If you buttons, use images, with a rollover version if you'd like, and link
> them. Or try this CSS trick, which I've tested in IE6, Netscape 6, Netscape
> 7, and Mozilla 1.5: (the "cursor" attribute works only in IE, and even there
> it doesn't persist when the cursor is over the button's label; maybe if I
> put the label in a span and gave the span a "cursor" style it would work)[/color]

It turns out that "cursor:pointer" seems to be the standard CSS way of
doing things; it works on Mozilla 1.4 (I think) and IE 6 on W2k.

Very nifty.

We will now buy a professional Javascript package for getting the
effect we wanted. It looks terrifyingly similar to the icons bar on
the left of Microsoft Outlook, animation effects and all.

Ah, the joy of hours wasted...

Kai

#4 July 20th, 2005, 05:30 PM

"Kai Grossjohann" <kai@emptydomain.de> wrote in message
news:877k2e5sm3.fsf@emptyhost.emptydomain.de...[color=blue]
> "Harlan Messinger" <h.messinger@comcast.net> writes:
>[color=green]
> > If you buttons, use images, with a rollover version if you'd like, and[/color][/color]
link[color=blue][color=green]
> > them. Or try this CSS trick, which I've tested in IE6, Netscape 6,[/color][/color]
Netscape[color=blue][color=green]
> > 7, and Mozilla 1.5: (the "cursor" attribute works only in IE, and even[/color][/color]
there[color=blue][color=green]
> > it doesn't persist when the cursor is over the button's label; maybe if[/color][/color]
I[color=blue][color=green]
> > put the label in a span and gave the span a "cursor" style it would[/color][/color]
work)[color=blue]
>
> It turns out that "cursor:pointer" seems to be the standard CSS way of
> doing things; it works on Mozilla 1.4 (I think) and IE 6 on W2k.[/color]

Pointer is the normal arrow, isn't it? It becomes a hand when hovering over
a hyperlink. That's what I was trying to get. "Hand" is in the CSS standard.
[color=blue]
>
> Very nifty.[/color]

Thanks.
[color=blue]
>
> We will now buy a professional Javascript package for getting the
> effect we wanted. It looks terrifyingly similar to the icons bar on
> the left of Microsoft Outlook, animation effects and all.[/color]

That should be easy. Just have alternate rollover files, load them with the
page into Image objects, and then use Javascript to change the src
attributes of the icons on mouseover and mouseout. I hope the software
you're buying gives you more than that, or else only costs a few dollars.
[color=blue]
>
> Ah, the joy of hours wasted...[/color]

#5 July 20th, 2005, 05:47 PM

"Harlan Messinger" <h.messinger@comcast.net> wrote in message news:<bodoi1$1dct1u$1@ID-114100.news.uni-berlin.de>...[color=blue][color=green]
> >
> > We will now buy a professional Javascript package for getting the
> > effect we wanted. It looks terrifyingly similar to the icons bar on
> > the left of Microsoft Outlook, animation effects and all.[/color]
>
> That should be easy. Just have alternate rollover files, load them with the
> page into Image objects, and then use Javascript to change the src
> attributes of the icons on mouseover and mouseout. I hope the software
> you're buying gives you more than that, or else only costs a few dollars.[/color]

It's not that easy: the outlook bar can be made wider or narrower. So
I would need several images: one for the left hand side 3d effect, one
for the middle part of the button, and one for the right hand side 3d
effect. The middle image would then be tiled to get to the right
width, I guess.

*shudder*

I can barely draw a straight line with pencil on paper, and now I'm
supposed to do these graphics tricks... Well, maybe I can find a
colleague who is better at it than I am.

Kai

#6 July 20th, 2005, 05:47 PM

"Kai Grossjohann" <Kai.Grossjohann@gmx.net> wrote in message
news:e808b168.0311121002.5d328665@posting.google.c om...[color=blue]
> "Harlan Messinger" <h.messinger@comcast.net> wrote in message[/color]
news:<bodoi1$1dct1u$1@ID-114100.news.uni-berlin.de>...[color=blue][color=green][color=darkred]
> > >
> > > We will now buy a professional Javascript package for getting the
> > > effect we wanted. It looks terrifyingly similar to the icons bar on
> > > the left of Microsoft Outlook, animation effects and all.[/color]
> >
> > That should be easy. Just have alternate rollover files, load them with[/color][/color]
the[color=blue][color=green]
> > page into Image objects, and then use Javascript to change the src
> > attributes of the icons on mouseover and mouseout. I hope the software
> > you're buying gives you more than that, or else only costs a few[/color][/color]
dollars.[color=blue]
>
> It's not that easy: the outlook bar can be made wider or narrower.[/color]

If you look more closely, you'll see that the active area doesn't change in
size when you do that, at least not in Outlook 2002. The area outside the
images doesn't cause the rollover effect and isn't hyperlinked. It's no
different from centering hyperlinked images inside a table cell or DIV.
[color=blue]
> So
> I would need several images: one for the left hand side 3d effect, one
> for the middle part of the button, and one for the right hand side 3d
> effect. The middle image would then be tiled to get to the right
> width, I guess.
>
> *shudder*
>
> I can barely draw a straight line with pencil on paper, and now I'm
> supposed to do these graphics tricks... Well, maybe I can find a
> colleague who is better at it than I am.[/color]

Eh, mouseovers really aren't tough. Just tedious.
[color=blue]
>
> Kai[/color]

#7 July 20th, 2005, 05:48 PM

"Harlan Messinger" <h.messinger@comcast.net> writes:
[color=blue]
> If you look more closely, you'll see that the active area doesn't change in
> size when you do that, at least not in Outlook 2002. The area outside the
> images doesn't cause the rollover effect and isn't hyperlinked. It's no
> different from centering hyperlinked images inside a table cell or DIV.[/color]

Ah, you're talking about the things with the icons next to them.
Those are fairly easy.

I'm talking about the grey buttons. The bottommost one says "My
Links" (or something similar, I'm translating from German "Eigene
Verknüpfungen" here).

If you make the outlook bar wider then the buttons will also be wider,
and there is a 3d effect to them.

Kai

#8 July 20th, 2005, 05:48 PM

"Kai Grossjohann" <kai@emptydomain.de> wrote in message
news:8765hoxbhx.fsf@emptyhost.emptydomain.de...[color=blue]
> "Harlan Messinger" <h.messinger@comcast.net> writes:
>[color=green]
> > If you look more closely, you'll see that the active area doesn't change[/color][/color]
in[color=blue][color=green]
> > size when you do that, at least not in Outlook 2002. The area outside[/color][/color]
the[color=blue][color=green]
> > images doesn't cause the rollover effect and isn't hyperlinked. It's no
> > different from centering hyperlinked images inside a table cell or DIV.[/color]
>
> Ah, you're talking about the things with the icons next to them.
> Those are fairly easy.
>
> I'm talking about the grey buttons. The bottommost one says "My
> Links" (or something similar, I'm translating from German "Eigene
> Verknüpfungen" here).[/color]

If there are three sections labeled "Outlook Verknüpfungen", "Eigene
Verknüpfungen", and "Andere Verknüpfungen" (Outlook Shortcuts, My Shortcuts,
Other Shortcuts), then we're both talking about the Outlook Bar, and in
Outlook 2002 (US version), at least, these buttons do not change size. If
you do want that feature, then I guess it is easier to buy it.
[color=blue]
>
> If you make the outlook bar wider then the buttons will also be wider,
> and there is a 3d effect to them.
>
> Kai
>[/color]

#9 July 20th, 2005, 05:48 PM

"Harlan Messinger" <h.messinger@comcast.net> wrote in message news:<bp0tur$1jajk3$1@ID-114100.news.uni-berlin.de>...[color=blue]
>
> If there are three sections labeled "Outlook Verknüpfungen", "Eigene
> Verknüpfungen", and "Andere Verknüpfungen" (Outlook Shortcuts, My Shortcuts,
> Other Shortcuts), then we're both talking about the Outlook Bar, and in
> Outlook 2002 (US version), at least, these buttons do not change size. If
> you do want that feature, then I guess it is easier to buy it.[/color]

Amazing. I just tried (with Outlook 2000) and made the outlook bar
very wide (across approx 1/2 of the screen, it wouldn't go wider), and
those buttons were as wide as the outlook bar. And I tried to click
on the very left and also on the very right, and also in the middle of
such a button (Eigene Verknüpfungen), and all three clicks invoked the
button function.

I then tried to click on one of the links themselves (Outlook Heute =
Outlook Today, I guess), and these links indeed did NOT grow. So
after making the outlook bar wide, there is a lot of dark-grey
unusable space to the left and to the right of the links.

Kai

What is Bytes?

Popular Articles