Netscape problem

[Jeff Bowman]

Hello

I'm having a problem with Netscape 7.1 and Mozilla 1.7.1 not respecting
these styles for the <SPAN> tag:

height:
width:
text-align:
margin-bottom:

It works fine in IE6 and Opera; I haven't tried FireFox. Here's the page:

http://intexx.com/ice/new/

The CSS and markup are below. Does anyone know how I can get this to work?

TIA,
Jeff

-------------------------------------

/* tab placeholder */
Span.Tabs
{
width:100%;
text-align:center;
margin-bottom:20px;
border-bottom: solid 4px #ffee99;
}

/* all tabs */
Span.SelectedTab, Span.OtherTab
{
width: 115px;
font-family: Verdana;
font-size: x-small;
}

/* selected tab */
Span.SelectedTab
{
height: 22px;
color: navy;
font-weight: bold;
background-color: #ffee99;
border-top: solid 1px #999933;
border-right: solid 1px #999933;
}

/* unselected tabs */
Span.OtherTab
{
height: 20px;
background-color: #ffffdd;
border-top: solid 1px #cccc66;
border-right: solid 1px #cccc66;
}

/* separator tab */
Span.SeparatorTab
{
border-left: solid 1px #cccc66;
}

-----------------------------------
<p>
<span class="Tabs">
<span class="SelectedTab" style="border-left: solid 1px #999933">
What is it?
</span>
<span class="SeparatorTab"></span>
<span class="OtherTab">
<a class="Tab" href="?tab=3" target="_top">
History of ICE
</a>
</span>
<span class="SeparatorTab"></span>
<span class="OtherTab">
<a class="Tab" href="?tab=4" target="_top">
Technical Info
</a>
</span>
<span class="SeparatorTab"></span>
<span class="OtherTab">
<a class="Tab" href="?tab=5" target="_top">
Your Account
</a>
</span>
<span class="SeparatorTab"></span>
<span class="OtherTab">
<a class="Tab" href="?tab=6" target="_top">
Webmasters
</a>
</span>
</span>
</p>

 

[Toby Inkster]

I'm having a problem with Netscape 7.1 and Mozilla 1.7.1 not respecting
these styles for the <SPAN> tag:

height:
width:

"height" and "width" can only be set on block elements. SPAN is an inline
element.

 

[David Dorward]

Hello

I'm having a problem with Netscape 7.1 and Mozilla 1.7.1 not respecting
these styles for the <SPAN> tag:

height:
width:
text-align:
margin-bottom:

With the exception of margin-bottom, none of those properties apply to
elements which display: inline - which <span> does by default.

http://w3.org/TR/CSS2/ will confirm that. If it "works" in a browser then
that is a bug.

 

[Duncan Greenhill]

Hi,
I've always understood the border property to be width type colour i.e. 1px
solid black. Netscape might be just being picky. Can you be a bit more
specific? What exactly do you mean by 'not respecting'
Regards,
Duncan

 

[Jeff Bowman]

Hm, I tried tweaking the border style, but still no luck.

Here's what I'm trying to accomplish:

http://intexx.com/ice/new/

By 'not respecting' I mean the style settings have no effect.

Thanks,
Jeff

 

[Michael Winter]

I'm having a problem with Netscape 7.1 and Mozilla 1.7.1 not respecting
these styles for the <SPAN> tag:

height:
width:
text-align:
margin-bottom:

They shouldn't. Vertical margins and explicit dimensions are not taken
into account when laying out inline elements. Neither is text-align as
it only applies to block-level elements. The latter certainly makes
sense as inline elements fit their content, so there's no excess width
to align within.

Read the various sections of a recent CSS specification that pertains
to inline elements. Sections

9.4.2 - Normal flow: Inline formatting context
10.3.1 - Computing width and margins: Inline, non-replaced elements
10.6.1 - Computing height and margins: Inline, non-replaced elements

would seem good places to start.

It works fine in IE6 and Opera

Only because they are rendering in quirks mode, which purposefully
uses incorrect behaviour when rendering to act like older browsers.
Complete your DOCTYPE by adding a URL and they should display the same
as Firefox, too.

Mike

 

[Jeff Bowman]

Yikes! I'd better fix it then--pronto.

Any ideas how to display the tabs without using a table? (I'm trying to
learn how to do layout without tables.) I tried <DIV> but they stack
vertically instead of horizontally.

Thanks,
Jeff

 

[David Dorward]

Yikes! I'd better fix it then--pronto.

A: Putting the response before the quote
Q: What is a confusing means of communication frowned on on Usenet?

Any ideas how to display the tabs without using a table?

http://css.maxdesign.com.au/listamatic/ perhaps?

 

[Jeff Bowman]

A: Putting the response before the quote
Q: What is a confusing means of communication frowned on on Usenet?


http://css.maxdesign.com.au/listamatic/ perhaps?

I managed to get the look I was after, by using DIVs and float:left, but
ultimately I had to use a table to center the tab group. If you know of a
better way I'd be pleased to hear about it.

http://intexx.com/ice/new/

Regarding placement of the response, what's the history behind that, do you
know? How did it evolve as a Usenet standard?

It's more cumbersome and time-consuming, that's for sure--you have to scroll
all the way to the bottom in your reader to see what's going on. If the
response is at the top you can see it as soon as you open the message. A
quick glance at the text just below serves as a reminder of what the
conversation is about, without having to wade all the way to the murky
bottom.

Thanks,
Jeff

 

[Blinky the Shark]

It's more cumbersome and time-consuming, that's for sure--you have to scroll
all the way to the bottom in your reader to see what's going on. If the
response is at the top you can see it as soon as you open the message. A
quick glance at the text just below serves as a reminder of what the
conversation is about, without having to wade all the way to the murky
bottom.

Fifth through eighth links in Usenet section, here:

http://blinkynet.net/comp/ndx_internet.html

 

[Michael Winter]

On 10/04/2005 00:55, Jeff Bowman wrote:

[snip]

Don't quote signatures when replying.

I managed to get the look I was after, by using DIVs

You should be using lists. Rather than trying to retrofit your
existing code, it would probably be better to replace the navigation
using one of the Listamatic examples. There are both centred and
stylised tabs that match (more or less) your current design, and
there's no need for a nasty single-celled table.

It's more cumbersome and time-consuming, that's for sure--you have to scroll
all the way to the bottom in your reader to see what's going on.

No you don't. The point is to intersperse your comments amongst those
of the previous poster. Each time they make a point you want to
respond to, you insert what you have to write. Pretty much everything
else is removed.

You should see that this reply is fairly simple and easy to read. You
know exactly why I'm making a particular remark without having to
scroll up and down repeatedly. My first few comments should be
readable without any scrolling, and everything else follows naturally.
If you have a decent newsreader, it becomes second nature to skip
quoted sections if you know the order of conversation so you can move
directly from new remark to new remark.

If the response is at the top you can see it as soon as you open the message. A
quick glance at the text just below serves as a reminder of what the
conversation is about,

But what if several points have been made, just like here? What if I
dumped my entire response at the top? You might have to move up and
down the post just to find what I was referring to. Moreover, this
isn't just about you or I. Others will be reading this thread and they
might not be following it so closely. A quick glance might not be a
sufficient reminder.

without having to wade all the way to the murky bottom.

Again, only relevant material should be included. If someone has to
"wade", too much was probably left in.

In any case, there's no point debating the issue. The five groups I
frequent, plus several other technical groups that I've participated
in in the past all use this convention. Ignoring it after being asked
to follow the rules tends to illicit a negative response, and possible
subsequent killfiling. Getting ignored by the people you wish to help
you is hardly the quick way to getting a solution. That might not be
fair, but complaining isn't going to change the situation.

Mike

 

[Jeff Bowman]

Don't quote signatures when replying.
OK



You should be using lists. Rather than trying to retrofit your
existing code, it would probably be better to replace the navigation
using one of the Listamatic examples. There are both centred and
stylised tabs that match (more or less) your current design, and
there's no need for a nasty single-celled table.

Thanks, I'll poke around in there a bit more. I agree about the table. Ugh.

You should see that this reply is fairly simple and easy to read. You

It is, isn't it?

dumped my entire response at the top? You might have to move up and
down the post just to find what I was referring to. Moreover, this
isn't just about you or I. Others will be reading this thread and they
might not be following it so closely. A quick glance might not be a
sufficient reminder.

Ah, makes sense.

In any case, there's no point debating the issue. The five groups I
frequent, plus several other technical groups that I've participated
in in the past all use this convention. Ignoring it after being asked

Who said I wanted to debate or ignore it? I was just asking, offering my
rebuttals in advance. Like any diligent programmer, I want to know the
reasons behind things, that's all

Say, thanks for the good ListaMatic reference. I didn't quickly see a sample
described as what I'm looking for, but I'll look more closely. I'm under
heavy pressure to get this thing done asap, even if I have to cut some
corners to get it out the door. Hate to say it, and it raises the hair on
the back of my neck, but that's the case.

Jeff

 

[Jeff Bowman]

Fifth through eighth links in Usenet section, here:

http://blinkynet.net/comp/ndx_internet.html

Thanks, I just installed OE-QuoteFix--looks pretty slick.

 

[Jeff Bowman]

You should be using lists. Rather than trying to retrofit your
existing code, it would probably be better to replace the navigation
using one of the Listamatic examples. There are both centred and
stylised tabs that match (more or less) your current design, and
there's no need for a nasty single-celled table.

Try as I might, I'm not able to get this exact look:

http://intexx.com/ice/new/

Without using a table.

I tried the ListaMatic examples, but I'm running into two basic conflicts:

1) If I center the TabGroup, unattractive spaces appear between the tabs
2) If I float:left to remove the spaces, I can't center the TabGroup

Do you have any suggestions:

Thanks

 

[Jeff Bowman]

Try as I might, I'm not able to get this exact look:

http://intexx.com/ice/new/

Without using a table.

I guess I tried to bite off more than I could chew with this one. On one hand,
I'd like to learn more about table-less CSS layout--as I mentioned earlier--but
on the other I guess I shouldn't try to do so on a rushed project like this.

Seems there's more to it than I'd expected.

Thanks

 

[Toby Inkster]

http://intexx.com/ice/new/

Rewrite: http://examples.tobyinkster.co.uk/intexx-ice/new/

Using valid, accessible HTML 4.01 Strict with no tables; and valid,
(mostly) accessible CSS 2.0. Tested and works, with no significant
problems in Internet Explorer 5.5+, Opera 5.1+, Mozilla 1.0+ and
Safari 1.2.

 

[Jonathan N. Little]

Jeff Bowman wrote:

/* separator tab */
Span.SeparatorTab
{
border-left: solid 1px #cccc66;
}

-----------------------------------
<p>
<span class="Tabs">
<span class="SelectedTab" style="border-left: solid 1px #999933">
What is it?
</span>
<span class="SeparatorTab"></span>

<snip>

What is the purpose of your 'empty' SeparatorTab spans? Just remove them
and I think you will get what you want in both sets of browsers, try it.

 

[Jeff Bowman]

Rewrite: http://examples.tobyinkster.co.uk/intexx-ice/new/

Hey, WOW! That's great! How'd you do that so fast?

And I learned today that there really IS a reason to include a URI at the top of
the page ;-)

Say, a couple of things:

1) Is there a way to set all the tabs the same width?
2) Is there a way to center vertically the contents of a DIV?

For #1 I've tried the li.width: property, and for #2 I've tried the
div.vertical-align: property, neither with any luck.

Thanks!

 

[Jeff Bowman]

What is the purpose of your 'empty' SeparatorTab spans? Just remove them
and I think you will get what you want in both sets of browsers, try it.

I'm using those to get the white 1-pixel separation between tabs.

It turns out DIVs work better than SPANs, and they support the properties I'm
trying to assign (per Toby's advice in this thread).

Trouble is, though, I'm not able to get the exact effects I want without using
TABLEs. Left/right float DIVs tend to wrap when the browser is resized smaller,
instead of initiating a horizontal scrollbar. Here's the latest version:

http://intexx.com/ice/new/

For the text below the tabs, I need the vertical gray separator to get taller as
the text gets higher, and I need both the text and the image to stay vertically
centered and horizontally aligned when the window is shrunk. The only way I can
find that accomplishes all of this is... well...

I know TABLEs aren't supposed to be used for layout, but doggone it they're so
much easier and they /work/

 

[Toby Inkster]

Hey, WOW! That's great! How'd you do that so fast?

Your code was actually quite nice and clean (though I didn't like the way
you did the bullet list at all!), so it wasn't too much work.

Say, a couple of things:
1) Is there a way to set all the tabs the same width?

The LI elements have been set to "display:inline". Unfortunately, inline
elements can't be assigned a width.

The proper solution would be to use "display:inline-block" which is much
the same as "display:inline", but *can* be assigned a width. However,
"inline-block" is only supported by Opera 7/8. :-(

Another solution would be to manually adjust the padding on each list
item, so that they are roughly the same width.

However, there is a lot to be said in favour of variable widths for those
tabs. As they are, they only just fit a maximised browser on a 640x480
screen. If you had them all the same width, then they would end up
slightly wider in total, so would wrap around on a 640x480 display.

2) Is there a way to center vertically the contents of a DIV?

Yes, but it's a bit of a hack:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html