css selecting text "inside" elements

[Richard Wilson]

I'm working on a site that uses a sliding door style tab menu
(www.phatbloke.com) I've got it working quite well but there's a
niggle I'd like to try and solve.


I've set the z-index of the "tab base" to 1, so it's higher than the
menu. This helps in cross browser compatibility (slight positioning
problems) and text resizing as the tabs can "disappear" behind it.
However, in Firefox and Safari, when resizing to very large, the text
also "disappears" behind the base. I'm aware that I could add an extra
span tag to the mark-up and set an appropriate z-index and that would
solve the problem. Trouble is I'm working with Joomla and I don't know
how to add this mark-up. Even if I did, it's not an elegant solution.

I'm aware that in the DOM model (with javascript) it's possible to
target the text inside an element as opposed to the element itself.
(can't remember how) So I'm wondering, is the same possible with css or
with a combination of javascript and css?

Just to clarify, the goal is to get the tabs to "disappear" behind the
"base" but have the text inside the tabs appear on top. Hope that all
makes sense.

Cheers

Rich

 

[Harlan Messinger]

I'm working on a site that uses a sliding door style tab menu
(www.phatbloke.com) I've got it working quite well but there's a
niggle I'd like to try and solve.


I've set the z-index of the "tab base" to 1, so it's higher than the
menu. This helps in cross browser compatibility (slight positioning
problems) and text resizing as the tabs can "disappear" behind it.
However, in Firefox and Safari, when resizing to very large, the text
also "disappears" behind the base. I'm aware that I could add an extra
span tag to the mark-up and set an appropriate z-index and that would
solve the problem. Trouble is I'm working with Joomla and I don't know
how to add this mark-up. Even if I did, it's not an elegant solution.

I'm aware that in the DOM model (with javascript) it's possible to
target the text inside an element as opposed to the element itself.
(can't remember how) So I'm wondering, is the same possible with css or
with a combination of javascript and css?

No, unless you're using Javascript to *create* tags around the text that
you have in mind.

 

[Beauregard T. Shagnasty]

I'm working on a site that uses a sliding door style tab menu
(www.phatbloke.com) I've got it working quite well but there's a
niggle I'd like to try and solve.

I'd love to help you with your problem, but I can't read your site.

body {
width: 980px;
text-align:center;
font-size:76%; <-----
....

That's only three-quarters of my preferred size, and then it is low
contrast white-on-grey. I had to bump it up about 125% before I could
read it. Not everyone has fighter-pilot's eyes.

http://tekrider.net/html/fontsize.php

If 100% looks too large on your monitor, adjust your own preferred
default size.

.. However, in Firefox and Safari, when resizing to very large,

...so be sure to make it readable before you venture further into your
tab problem.

See also:
http://tekrider.net/pages/faq.php?q=trans
http://tekrider.net/pages/faq.php?q=flex

 

[dorayme]

I'm working on a site that uses a sliding door style tab menu
(www.phatbloke.com) I've got it working quite well but there's a
niggle I'd like to try and solve.


I've set the z-index of the "tab base" to 1, so it's higher than the
menu. This helps in cross browser compatibility (slight positioning
problems) and text resizing as the tabs can "disappear" behind it.
However, in Firefox and Safari, when resizing to very large, the text
also "disappears" behind the base. I'm aware that I could add an extra

....


First, it looks nice, well done on that. But you can achieve the general
look without such complications. Best not to add anything but to take
away stuff and simplify.

It looks like a high wire act that is too fragile. It is quite
irritating not to be able to see in a 800 wide window without having to
scroll. You should not be having such small font for body. And simply,
in general, it all breaks on user text resizing. Why not consider less
pixel specifications and more em one?

 

[Richard Wilson]

I'd love to help you with your problem, but I can't read your site.

body {
width: 980px;
text-align:center;
font-size:76%; <-----
...

That's only three-quarters of my preferred size, and then it is low
contrast white-on-grey. I had to bump it up about 125% before I could
read it. Not everyone has fighter-pilot's eyes.

Yep, the content text is a bit on the small size. It look fine on my
desktop screen but on my laptop it's just short of comfortable. I will
be addressing this.

http://tekrider.net/html/fontsize.php

If 100% looks too large on your monitor, adjust your own preferred
default size.


..so be sure to make it readable before you venture further into your
tab problem.

I think I got a little carried away with being a perfectionist just
prior to my original posting and the tab problem is not that big a deal,
but it's still kinda interesting and something to learn. Anyway, thanks.


Rich

 

[Richard Wilson]

First, it looks nice, well done on that. But you can achieve the general
look without such complications. Best not to add anything but to take
away stuff and simplify.

Thanks. The tab problem is not that big a deal and I'll probably let it
go.

It looks like a high wire act that is too fragile. It is quite
irritating not to be able to see in a 800 wide window without having to
scroll. You should not be having such small font for body. And simply,
in general, it all breaks on user text resizing. Why not consider less
pixel specifications and more em one?

When I started this site I wondered if it's worth designing for 800 wide
as I don't like the wasted space, so I made it "elastic" but it gave me
too many problems so I gave up on it. I decided not to worry about 800
wide as most monitors these days and certainly into the future are
capable of much more.

<rant>
It seems to me that the poor ol' web designers always have to cater for
the lowest common denominator. If someone can't afford a better screen
then they can't afford an exotic pet, let alone look after one, stuff 'em!!!
</rant>

Now I've got that off my chest I'll probably put a button on there to
change it to 800 wide to cater for the little screen mob.

Totally take on board your comment about the font size, I'll be
changing that.

I know what you mean by it breaking on text resizing, but it appears to
me a lot of (good looking) sites do that. I don't mind a bit of
breakage as long as it is still readable. I feel it's often a
compromise between aesthetics and readability.

I think all my fonts are in ems, but I had not considered stuff like div
heights etc would make a difference, I'll try that, thanks.



Rich

 

[dorayme]

Thanks. The tab problem is not that big a deal and I'll probably let it
go.


When I started this site I wondered if it's worth designing for 800 wide
as I don't like the wasted space, so I made it "elastic" but it gave me
too many problems so I gave up on it. I decided not to worry about 800
wide as most monitors these days and certainly into the future are
capable of much more.

<rant>
It seems to me that the poor ol' web designers always have to cater for
the lowest common denominator. If someone can't afford a better screen
then they can't afford an exotic pet, let alone look after one, stuff 'em!!!
</rant>

<g>

Except there is something you are simply not taking into account. Take
me for example: I have as impressive a set of screens on my desk as most
anyone would want, width and resolution and fabulous everything. Yet
still I don't want my browser window always bigger than 800. I can have
it stretch feet literally if I want. But I don't want and I prefer not
to scroll horizontally.

So, you are not catering to the lowest common denominator at all by
providing for me. You would be catering to one of the most handsome,
tall, dark, wise, charismatic beings on the earth today. So feel better
about it.

Now I've got that off my chest I'll probably put a button on there to
change it to 800 wide to cater for the little screen mob.

Totally take on board your comment about the font size, I'll be
changing that.

I know what you mean by it breaking on text resizing, but it appears to
me a lot of (good looking) sites do that. I don't mind a bit of
breakage as long as it is still readable. I feel it's often a
compromise between aesthetics and readability.

I think all my fonts are in ems, but I had not considered stuff like div
heights etc would make a difference, I'll try that, thanks.

Try as hard as you can to let heights find themselves without being
forced.

 

[Jonathan N. Little]

<rant>
It seems to me that the poor ol' web designers always have to cater for
the lowest common denominator. If someone can't afford a better screen
then they can't afford an exotic pet, let alone look after one, stuff
'em!!!
</rant>

Somethings that you are not considering as poor ol' web designer, I have
a marks larger screen, but my browser is not the only window open. I
rarely have it maximized. I do not lament the DOS days, I multitask and
many of your visitors will as well. Another trend to consider, more and
more people are surfing without a computer. Hard to get 800px wide an
still fit in the palm of your hand. In the 90's we could cater to the
most prevalent computer monitor being use, today it may not be a computer!

 

[Beauregard T. Shagnasty]

I know what you mean by it breaking on text resizing, but it appears to
me a lot of (good looking) sites do that.

...and if those designers had stopped by here first, we wudda told 'em
about it! ;-)

...and in your other reply you said,

Yep, the content text is a bit on the small size. It look fine on my
desktop screen but on my laptop it's just short of comfortable.

Try setting your site to 100%, then adjusting your browser's default
size to what is comfortable for you. Then it will be comfortable for me
as well, me without the fighter-pilot eyes.

 

[Richard Wilson]

<g>

Except there is something you are simply not taking into account. Take
me for example: I have as impressive a set of screens on my desk as most
anyone would want, width and resolution and fabulous everything. Yet
still I don't want my browser window always bigger than 800. I can have
it stretch feet literally if I want. But I don't want and I prefer not
to scroll horizontally.

So, you are not catering to the lowest common denominator at all by
providing for me. You would be catering to one of the most handsome,
tall, dark, wise, charismatic beings on the earth today. So feel better
about it.

LOL, I do already

 

[Richard Wilson]

Somethings that you are not considering as poor ol' web designer, I have
a marks larger screen, but my browser is not the only window open. I
rarely have it maximized. I do not lament the DOS days, I multitask and
many of your visitors will as well. Another trend to consider, more and
more people are surfing without a computer. Hard to get 800px wide an
still fit in the palm of your hand. In the 90's we could cater to the
most prevalent computer monitor being use, today it may not be a computer!

I consider myself corrected, thankyou. Next time I wanna rant I'll try
aiming at IE6...... just don't get me started!!

 

[Richard Wilson]

Try setting your site to 100%, then adjusting your browser's default
size to what is comfortable for you. Then it will be comfortable for me
as well, me without the fighter-pilot eyes.

That 76% is there for a reason although I can't remember it in detail.
It's something to do with cross browser font-size consistency. The idea
is to set that font size and then adjust to em for the rest. I got this
from a book on Joomla in a chapter about templates. But, as they say,
don't always believe everything you read in a book. I'll try what you said.

Thanks

Rich

 

[Jonathan N. Little]

I consider myself corrected, thankyou. Next time I wanna rant I'll try
aiming at IE6...... just don't get me started!!

IE browsers are the bane of web design, but I am afraid you are not
correct with respect to the nature of web page layout.

 

[Bergamot]

That 76% is there for a reason although I can't remember it in detail.
It's something to do with cross browser font-size consistency.

So what makes font-size:76% more consistent across browsers than
font-size:100%? Or font-size:82.5%? Or font-size:25%?

This has nothing to do with cross-browser consistency and everything to
do with dee-ziners' desire to use something more aesthetically pleasing
(to them) than 100% while maintaining the illusion they're complying
with accessibility guidelines. Readability isn't part of that equation.
Low vision users certainly aren't.

The idea
is to set that font size and then adjust to em for the rest. I got this
from a book on Joomla in a chapter about templates.

Sounds like the infamous clagnut method to me. It's an insane,
convoluted font sizing method and should *never* be used. I wrote about
it not long ago.
http://bergamotus.ws/misc/sensible-css-text-sizing.html

But, as they say,
don't always believe everything you read in a book.

Fer shure

I'll try what you said.

Please do.

 

[Jonathan N. Little]

That 76% is there for a reason although I can't remember it in detail.
It's something to do with cross browser font-size consistency. The idea
is to set that font size and then adjust to em for the rest. I got this
from a book on Joomla in a chapter about templates. But, as they say,
don't always believe everything you read in a book. I'll try what you said.

Well you probably should learn why you do something before you do it.
With a bit of research you should find that the result of

body { font-size: 76%; }

is fewer repeat visitors. A lot of bad ideas still propagate though web
design and seen in "authoritative" books, like using XHMTL over HTML and
use of HTML comments within STYLE ans SCRIPT elements...

 

[dorayme]

A lot of bad ideas still propagate though web
design and seen in "authoritative" books, like ...
use of HTML comments within STYLE ans SCRIPT elements...

Are these harmful ideas?

 

[Jonathan N. Little]

Are these harmful ideas?

<style type="text/css">
<--
-->
</style>

<script type="text/javascript">
<--
-->
</script>

You do not see the error?

 

[GTalbot]

That 76% is there for a reason although I can't remember it in detail.

Richard,

We are aware of that reason. Nevertheless, your website (reality) is
still small, difficult to read, etc. for visitors visiting your
webpage.

"
Top Ten Web Design Mistakes of 2005
(...)
For this year's list of worst design mistakes, I decided to try
something new: I asked readers of my newsletter to nominate the
usability problems they found the most irritating.

1. Legibility Problems
Bad fonts won the vote by a landslide, getting almost twice as many
votes as the #2 mistake. About two-thirds of the voters complained
about small font sizes or frozen font sizes;
"

We are inviting you and suggesting to you that you change that 76%.
Now, it's all up to you.
http://www.useit.com/alertbox/designmistakes.html

"
As a base font size for a document, 1em (or 100%) is equivalent to
setting the font size to the user's preference. Use this as a basis
for your font sizes, and avoid setting a smaller base font size
Avoid sizes in em smaller than 1em for text body
"

W3C Quality Assurance tips for webmasters
Care with font-size
http://www.w3.org/QA/Tips/font-size

It's something to do with cross browser font-size consistency.

Please use font-size: 100%;
which is 100% of the user's preferred font-size.

The idea

is to set that font size and then adjust to em for the rest. I got this
from a book on Joomla in a chapter about templates. But, as they say,
don't always believe everything you read in a book. I'll try what you said..

Thanks

Rich

Richard, Microsoft will fix that bug in IE 8. I can almost guarantee
this.
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/#bug38
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug79
I've filed it at connect IE feedback and the IE dev. team did not
close it so far.
I'm 99.9% sure that they want to fix it too... because it's been
lingering on and on and on for years.

Gérard

 

[dorayme]

You do not see the error?

You were saying that a lot of bad ideas still propagate though web
design and seen in "authoritative" books, like using XHMTL over HTML and
use of HTML comments within STYLE ans SCRIPT elements...

And that therefore:

<style type="text/css" media="all">
<!--

-->
</style>

is bad?

And I was wondering if it was actually harmful.

I use:

<style type="text/css" media="all">

</style>

So it is not a personal request for help. I was not talking about any
particular errors. I have no doubt that there is no need to comment out
style blocks. I just thought it was unnecessary not harmful. But you
said it was harmful. I was seeking some further info from you.

Is there anything in this that you do not understand (I understand that
you are having difficulty understanding me. See your other insulting
post.)?

 

[dorayme]

Not harmful. You would think they would be syntax errors in CSS, but
they are allowed specially for this purpose.

That's what I wanted to know. Whether there was something that was more
than merely out of date, not needed.

(You would be surprised how much I need to know this. Now and then
drunks pass down my street very late at night on the weekends and I want
to be prepared to give them an accurate answer to the shouted out
question, "Oy, you there... would it actually cause trouble to enclose
style blocks in the head in comment quotes?"

I have had trouble in the past with them if I get the slightest thing
wrong. I have had to shoot three of them so far. And I got a severe
beating by one big one when I failed to raise my eyebrow when I asked
him a polite question. He accused me of a verbal grammatical mistake and
socked me good and proper. We have since become friends. I liked his
style. The drunks around here are very sophisticated but can be vicious.)

CSS 2.1:
CSS also allows the SGML comment delimiters ("<!--" and "-->") in
certain places defined by the grammar, but they do not delimit CSS
comments. They are permitted so that style rules appearing in an HTML
source document (in the STYLE element) may be hidden from pre-HTML
3.2 user agents. See the HTML 4 specification ([HTML4]) for more
information.

But it would be slightly harmful for a recent book or tutorial to still
be telling people they should do it.

Perhaps in the sense that they are using up their reader's memory
capacity unnecessarily. Did I tell you about the old zoology professor
who complained that every year when he had to remember a fresher's (new
student) name, he forgot the name of a species of animal?

(Note to all those who do not understand anything I say lately: the idea
here is that the memory bank of an old human professor can be full due
to the vast number of zoological facts he has acquired. And any new
memory must displace one already there. Get it? It is a joke. A light
hearted comment. I am perfectly sober, undrugged, I have just swam and
walked and am being called to dinner... OK?)

I'm not sure you should use media="all" unless your rules are really
suitable for everything, including teletypes, braille devices and
readers, or unless you use @media in the stylesheets to distinguish.

The chances are very little of that stuff actually works though so it
probably doesn't matter much.

OK, I better check on this. Thank you for drawing this to my attention.

I grabbed this from a command on my text editor. I have often used simply

<style type="text/css">

but mostly I just link to an outside sheet.

But it is probably time to study this further...