Trouble with Sliding Doors

[rhino]

I'm having some problems with Sliding Doors, as described in an article in A
List Apart (http://www.alistapart.com/articles/slidingdoors/) and as
detailed in the CSS Tab Designer v2.0 program.

My tabs look fine as long as I am using medium and small fonts but as soon
as I set the browser to use bigger fonts, they start to break on me. You can
see this best at http://sfl.london.on.ca/meetingsite.shtml. If you go to
this page with IE7 and your text size set to "medium", you'll see that I
have a nice row of 9 horizontal tabs. If you click on each one, you'll see
that everything works fine: all the tabs stay on one row, all nicely nestled
beside one another.

However, if you set the text size to "larger" or "largest" , you'll see that
the row of tabs wraps so that the last few items appear on a second line.
Now, I wouldn't have a problem with that if the lower row of tabs were
nicely aligned to the left of the lower row. Unfortunately, they are _not_
aligned to the left. Worse, if you start at the leftmost tab on the upper
row and work your way to the right, you can see that the positioning of the
lower row of tabs keeps changing and moving further to the right.

I've looked at the CSS and I'm at a loss to understand why this is
happening. Can someone with a clearer understanding of how this works please
help me figure out how to make those tabs behave better?

--

Rhino

[David Stone]

In article <ff**********@news.datemas.de>,
"rhino" <No***********************@anonymous.comwrote:

I'm having some problems with Sliding Doors, as described in an article in A
List Apart (http://www.alistapart.com/articles/slidingdoors/) and as
detailed in the CSS Tab Designer v2.0 program.

My tabs look fine as long as I am using medium and small fonts but as soon
as I set the browser to use bigger fonts, they start to break on me. You can
see this best at http://sfl.london.on.ca/meetingsite.shtml. If you go to
this page with IE7 and your text size set to "medium", you'll see that I
have a nice row of 9 horizontal tabs. If you click on each one, you'll see
that everything works fine: all the tabs stay on one row, all nicely nestled
beside one another.

I don't need to change the default text size in my browser to see the
effect, since I increased the default font size in the user style sheet
several eye prescriptions ago!

Simply resizing the window causes the same problem, too, so you may
want to look at setting a reasonable min-width value somewhere. The only
way I can get all your tabs lined up in a horizontal row, is to make the
text size too small to be legible.

I think part of your problem may lie here:

#content-col {
position: relative;
top: 0;
left: 12em;
padding-left: 35px;
float: left;
width: 87.5%;
}

If you set the width in em units to something that keeps all your tabs
in a row, does that work?

[Ben C]

On 2007-10-24, rhino <No***********************@anonymous.comwrote:

I'm having some problems with Sliding Doors, as described in an article in A
List Apart (http://www.alistapart.com/articles/slidingdoors/) and as
detailed in the CSS Tab Designer v2.0 program.

My tabs look fine as long as I am using medium and small fonts but as soon
as I set the browser to use bigger fonts, they start to break on me. You can
see this best at http://sfl.london.on.ca/meetingsite.shtml. If you go to
this page with IE7 and your text size set to "medium", you'll see that I
have a nice row of 9 horizontal tabs. If you click on each one, you'll see
that everything works fine: all the tabs stay on one row, all nicely nestled
beside one another.

However, if you set the text size to "larger" or "largest" , you'll see that
the row of tabs wraps so that the last few items appear on a second line.
Now, I wouldn't have a problem with that if the lower row of tabs were
nicely aligned to the left of the lower row. Unfortunately, they are _not_
aligned to the left. Worse, if you start at the leftmost tab on the upper
row and work your way to the right, you can see that the positioning of the
lower row of tabs keeps changing and moving further to the right.

I've looked at the CSS and I'm at a loss to understand why this is
happening. Can someone with a clearer understanding of how this works please
help me figure out how to make those tabs behave better?

Your first float ("Time and Location") is a tiny bit taller than the
others. So when other floats fall down, and float towards the left, they
sort of snag on it and get stuck there before they reach the left of the
container.

This is the defined behaviour.

It looks like you're setting its padding-bottom to 5px, but it's 4px on
most of the others. I think it's the #overview a rule
(meetingsite.shtml: 22) that's the problem. Remove the padding-bottom:
5px from there and it should be OK.

[Bergamot]

David Stone wrote:

In article <ff**********@news.datemas.de>,
"rhino" <No***********************@anonymous.comwrote:

>9 horizontal tabs.

If you set the width in em units to something that keeps all your tabs
in a row, does that work?

That's not a good idea. Those of us who use larger type will need a
really wide window to get it all to fit or end up with excessive
horizontal scrolling. That can be way worse.

--
Berg

[rhino]

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

David Stone wrote:

>In article <ff**********@news.datemas.de>,
"rhino" <No***********************@anonymous.comwrote:

>>9 horizontal tabs.

If you set the width in em units to something that keeps all your tabs
in a row, does that work?

That's not a good idea. Those of us who use larger type will need a
really wide window to get it all to fit or end up with excessive
horizontal scrolling. That can be way worse.

Agreed! Having fixed widths in ems is what I'm trying to get AWAY from! I'm
keeping them in the index column so things degrade properly but otherwise
I'd try not to have them at all.

--

Rhino

[rhino]

"Ben C" <sp******@spam.eggswrote in message
news:sl*********************@bowser.marioworld...

On 2007-10-24, rhino <No***********************@anonymous.comwrote:

>I'm having some problems with Sliding Doors, as described in an article
in A
List Apart (http://www.alistapart.com/articles/slidingdoors/) and as
detailed in the CSS Tab Designer v2.0 program.

My tabs look fine as long as I am using medium and small fonts but as
soon
as I set the browser to use bigger fonts, they start to break on me. You
can
see this best at http://sfl.london.on.ca/meetingsite.shtml. If you go to
this page with IE7 and your text size set to "medium", you'll see that I
have a nice row of 9 horizontal tabs. If you click on each one, you'll
see
that everything works fine: all the tabs stay on one row, all nicely
nestled
beside one another.

However, if you set the text size to "larger" or "largest" , you'll see
that
the row of tabs wraps so that the last few items appear on a second line.
Now, I wouldn't have a problem with that if the lower row of tabs were
nicely aligned to the left of the lower row. Unfortunately, they are
_not_
aligned to the left. Worse, if you start at the leftmost tab on the upper
row and work your way to the right, you can see that the positioning of
the
lower row of tabs keeps changing and moving further to the right.

I've looked at the CSS and I'm at a loss to understand why this is
happening. Can someone with a clearer understanding of how this works
please
help me figure out how to make those tabs behave better?

Your first float ("Time and Location") is a tiny bit taller than the
others. So when other floats fall down, and float towards the left, they
sort of snag on it and get stuck there before they reach the left of the
container.

This is the defined behaviour.

It looks like you're setting its padding-bottom to 5px, but it's 4px on
most of the others. I think it's the #overview a rule
(meetingsite.shtml: 22) that's the problem. Remove the padding-bottom:
5px from there and it should be OK.

You are mostly right. I _did_ have 5px padding-bottom on most of the tabs
but forgot it entirely on some of the tabs. As soon as I removed it from all
of the tabs, the tabs lined up nicely.

Thanks for responding!

--

Rhino

[John Hosking]

rhino wrote:

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

>You could find these things yourself with the Web Developer extension
for Firefox/mozilla.

I'd never heard of the Web Developer plugin but quickly found it with a
Google search and installed it. (I had hoped there would be a way to list
available plugins from the browser itself but couldn't find anything like
that.)

(At least my version of) Firefox has two places where links take you to
a list of extensions (a.k.a. plug-ins or add-ons).

The default bookmarks include a folder called "Firefox and Mozilla
Links", under which is a link to "Themes and Extensions". Go see.

Or you can go to the Menu item Tools, then Extensions, which brings up a
little dialog listing all your currently installed extensions. At the
bottom is a link "Get More Extensions". Go to that page and "Browse
Extensions by Category".

These two links go to slightly different places but you can see the
available add-ons for FF this way.

--

Rhino

If you add a trailing space to the two dashes above, you will have a
working sig separator, meaning that your sig will automatically be
trimmed when being replied to using good newsreaders, and many
newsreaders will show the sig in a different fontface or style, setting
it apart from the message. (OE isn't one of these.)
--
John
Pondering the value of the UIP: http://improve-usenet.org/

[Blinky the Shark]

rhino wrote:

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

>rhino wrote:

>>>
http://sfl.london.on.ca/meetingsite.shtml. If you go to
this page with IE7 and your text size set to "medium", you'll see that I
have a nice row of 9 horizontal tabs.

You must be using a larger browser window than I. I see 3 rows, plus I
get horizontal scrolling. :(

My screen resolution is 1280 x 1024 and I am running IE7 with text size set
to "medium". That translates to one row of tabs for me ;-)

My screen size is 1440 x 1050. I'm getting two rows of tabs and a H
scroll bar.
--
Blinky RLU 297263
Killing all posts from Google Groups
The Usenet Improvement Project - http://improve-usenet.org

[Bergamot]

rhino wrote:

>
I completely forgot about the padding because it is not in the main CSS;
instead, it is in the individual shtml file.

I suggest putting it in the external CSS file. There's no reason to put
some styles in the HTML unless it's unique to just that page. If it's
something unique to one section of the site, it makes more sense to have
a second external CSS file. Then all the CSS is still in one place, plus
it will be cached by the browser.

--
Berg

[David Stone]

In article <ff**********@news.datemas.de>,
"rhino" <No***********************@anonymous.comwrote:

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

David Stone wrote:

In article <ff**********@news.datemas.de>,
"rhino" <No***********************@anonymous.comwrote:

9 horizontal tabs.

If you set the width in em units to something that keeps all your tabs
in a row, does that work?

That's not a good idea. Those of us who use larger type will need a
really wide window to get it all to fit or end up with excessive
horizontal scrolling. That can be way worse.

Agreed! Having fixed widths in ems is what I'm trying to get AWAY from! I'm
keeping them in the index column so things degrade properly but otherwise
I'd try not to have them at all.

My mistake - I thought you _wanted_ them to all stay on one line.

One thing you might still want to look at is the initial heading
and paragraphs in your content-main div ("Meeting Time and Location")

In FF 2.0.0.8 (on my Mac), the actual text of ALL the paragraphs
disappears behind the vertical scroll bar of the window, even with the
window maximised on my 1152 x 720 display. As I mentioned earlier,
the ONLY way I can get the text to by fully visible is by reducing the
text size to the smallest possible size, at which point I can no longer
read the characters. FWIW, I have the default font sizes in FF for both
serif and san-serif fonts set at '16' (whatever that actually means!)

You might want to either make the width a smaller percentage, or
apply a padding-right to allow for the width of the scroll bar?

[rhino]

"John Hosking" <Jo**@DELETE.Hosking.name.INVALIDwrote in message
news:47**********@news.bluewin.ch...

rhino wrote:

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

>>You could find these things yourself with the Web Developer extension
for Firefox/mozilla.

I'd never heard of the Web Developer plugin but quickly found it with a
Google search and installed it. (I had hoped there would be a way to list
available plugins from the browser itself but couldn't find anything like
that.)

(At least my version of) Firefox has two places where links take you to a
list of extensions (a.k.a. plug-ins or add-ons).

The default bookmarks include a folder called "Firefox and Mozilla Links",
under which is a link to "Themes and Extensions". Go see.

I'm on Firefox 2.0.0.8 and I found it under Bookmarks/Mozilla
Firefox/Customize Firefox.

I doubt I would ever have stumbled on that on my own so thanks for pointing
that out.

Or you can go to the Menu item Tools, then Extensions, which brings up a
little dialog listing all your currently installed extensions. At the
bottom is a link "Get More Extensions". Go to that page and "Browse
Extensions by Category".

On my copy of Firefox, I have Tools/Add-ons. I found this before my original
post. Unfortunately, it does _not_ have a "Get More Extensions" option,
just a "Find Updates" button which only finds updates for extensions you
already have.

These two links go to slightly different places but you can see the
available add-ons for FF this way.

Apparently, the Firefox developers decided that it was too easy to find
extensions in the past and decided to make it harder. Seriously, I don't
think I ever would have looked in the Bookmarks/Mozilla Firefox to see if
there was anything to do with finding extensions there.

>--

Rhino

If you add a trailing space to the two dashes above, you will have a
working sig separator, meaning that your sig will automatically be trimmed
when being replied to using good newsreaders, and many newsreaders will
show the sig in a different fontface or style, setting it apart from the
message. (OE isn't one of these.)

I would have thought the two consecutive dashes on a line by itself was
already plenty but you need to add a trailing space AND an empty line....
And even then it doesn't work on a popular newsreader like OE. Hardly seems
worth the bother....

--

Rhino

[rhino]

"rhino" <No***********************@anonymous.comwrote in message
news:ff**********@news.datemas.de...

>
"John Hosking" <Jo**@DELETE.Hosking.name.INVALIDwrote in message
news:47**********@news.bluewin.ch...

>rhino wrote:

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

>>>You could find these things yourself with the Web Developer extension
for Firefox/mozilla.
I'd never heard of the Web Developer plugin but quickly found it with a
Google search and installed it. (I had hoped there would be a way to
list available plugins from the browser itself but couldn't find
anything like that.)

(At least my version of) Firefox has two places where links take you to a
list of extensions (a.k.a. plug-ins or add-ons).

The default bookmarks include a folder called "Firefox and Mozilla
Links", under which is a link to "Themes and Extensions". Go see.

I'm on Firefox 2.0.0.8 and I found it under Bookmarks/Mozilla
Firefox/Customize Firefox.

I doubt I would ever have stumbled on that on my own so thanks for
pointing that out.

>Or you can go to the Menu item Tools, then Extensions, which brings up a
little dialog listing all your currently installed extensions. At the
bottom is a link "Get More Extensions". Go to that page and "Browse
Extensions by Category".

On my copy of Firefox, I have Tools/Add-ons. I found this before my
original post. Unfortunately, it does _not_ have a "Get More Extensions"
option, just a "Find Updates" button which only finds updates for
extensions you already have.

>These two links go to slightly different places but you can see the
available add-ons for FF this way.

Apparently, the Firefox developers decided that it was too easy to find
extensions in the past and decided to make it harder. Seriously, I don't
think I ever would have looked in the Bookmarks/Mozilla Firefox to see if
there was anything to do with finding extensions there.

Oops! I missed a link called "Get Extensions" on the Tools/Add-ins dialog. I
take back my snarky remark about Firefox foolishly removing a link from the
logical place. My mistake!

>>--

Rhino

If you add a trailing space to the two dashes above, you will have a
working sig separator, meaning that your sig will automatically be
trimmed when being replied to using good newsreaders, and many
newsreaders will show the sig in a different fontface or style, setting
it apart from the message. (OE isn't one of these.)

I would have thought the two consecutive dashes on a line by itself was
already plenty but you need to add a trailing space AND an empty line....
And even then it doesn't work on a popular newsreader like OE. Hardly
seems worth the bother....

--

Rhino

[Rik Wasmus]

On Sat, 27 Oct 2007 20:12:24 +0200, rhino
<No***********************@anonymous.comwrote:

>If you add a trailing space to the two dashes above, you will have a
working sig separator, meaning that your sig will automatically be
trimmed
when being replied to using good newsreaders, and many newsreaders will
show the sig in a different fontface or style, setting it apart from the
message. (OE isn't one of these.)

I would have thought the two consecutive dashes on a line by itself was
already plenty but you need to add a trailing space AND an empty line....

Nope, not an empty line, a newline character...

And even then it doesn't work on a popular newsreader like OE.

Which is why a lot of people use OE Quotefix for it, which does make it
recognize it.

Hardly seems
worth the bother....

Well, almost every other newsreader automatically recognizes a signature,
so what is the bother to make a correct seperator _once_ and keeping it? 2
seconds of your time to prevent irritation of potentially dozens or
hundreds of readers seems quite a good investment of time IMHO.||

(Oh: and for people claiming my sig seperator is broken: that's a known
Thunderbird/SeaMonkey bug...)
--
Rik Wasmus