font-sized divs and hidden images

[Charles Banas]

i've got two very quick and simple questions, but i didn't want to
bother posting in separate messages. seems easier to me for myself and
anyone reading to just have one post to deal with. especially since the
post has to do with the same site.

i'm working on a default stylesheet for a site, so i've decided to work
the site in such a way that it will only require a simple stylesheet
change to customize the appearance for the site's visitors. as such,
i've been doing a lot of tweaking to get things identical to the
original (and messy) table-based layout.

one of the things incorporated in the default layout is a large logo
image (it's actually 800px wide and rather tall, IMO, but it's not my
fault, i swear). so this is my first question: i'm considering using
the background-image property of the container div to set the logo image
so it can be easily changed for new stylesheets. since i expect the
majority of the stylesheets to use the intained image, would it be safe
to simply hide the image when not needed? for example:

div#logo img { visible: hidden; }
div#logo { background-image: url(images/newlogo.png); }

would the common UAs be intelligent enough to not bother downloading the
hidden image? or would it still incur the download time?

my second question: below, i've used a container div to keep three
other divs in line. one of the divs contains a great deal of text:

div#contenttop { position: relative; height: 16em; }
div#contenttop div#headlines { position: absolute; height: 15.5em;
width: 248px; overflow: auto; }
div#contenttop div#overview { position: absolute; height: 15.5em;
width: 282px; left: 250px; overflow: auto; }
div#contenttop div#affiliates { position: absolute; height: 15.5em;
width: 228px; left: 544px; overflow: auto; }

and the (simplified for clarity) HTML:

<div id="contenttop">
<div id="headlines">some headlines</div>
<div id="overview">about 15 lines of text at the default font size;
more with larger font sizes.</div>
<div id="affiliates">some pretty pictures.</div>
</div>
<div id="content">more content down here, but not positioned at all.</div>

now the problem i've run into, is that #overview is not always going to
be 15 lines or less. if the user resizes text, then the typical UA will
render it with a scrollbar. that isn't so bad, but i'm curious if
there's another way. i'd like all the divs in #contenttop (including
#contenttop itself) to resize reasonably without causing the overflow in
#overview. is there a sane way to do this without changing the flow of
#content?

if i'm unclear, i apologize. here's the test page i'm working on:
http://greyfade.org/otakulist.com/
have fun resizing the text to see what i'm talking about.

keep in mind this is a work in progress, and i try to maintain
validation with all my CSS and HTML, so i /expect/ it to break in half
the browsers out there. but i have tested with Opera 7, Mozilla Firefox
0.8, and versions of IE after 3. (i must say i'm surprised how good it
looks in 4, 5, and 5.5 despite the problems those versions have.) so
unless you have a Mac, i don't want to hear how bad it looks.

thanks for looking.

 

[Spartanicus]

div#logo img { visible: hidden; }
div#logo { background-image: url(images/newlogo.png); }

would the common UAs be intelligent enough to not bother downloading the
hidden image?

Setting the visible property to hidden has no effect on downloading
(remember that the image still occupies it's space, thus it must be
downloaded), if you switch it's display off via the display property
then the image should not download.

now the problem i've run into, is that #overview is not always going to
be 15 lines or less. if the user resizes text, then the typical UA will
render it with a scrollbar. that isn't so bad, but i'm curious if
there's another way. i'd like all the divs in #contenttop (including
#contenttop itself) to resize reasonably without causing the overflow in
#overview. is there a sane way to do this without changing the flow of
#content?

Omit the height property from the container div(s).

 

[brucie]

in post: <

i'm considering using the background-image property of the container
div to set the logo image so it can be easily changed for new
stylesheets.

sounds good

since i expect the majority of the stylesheets to use the intained
image, would it be safe to simply hide the image when not needed?

why would you need to? as the image is a background its referenced to in
the css, when a different css file is used the different image file is
also used (or none at all if thats what the css says).

would the common UAs be intelligent enough to not bother downloading the
hidden image?

i remember some browsers don't download hidden/none content until needed
but i cant remember which ones. i think maybe moz and opera.

div#contenttop { position:
div#contenttop div#headlines { position:
div#contenttop div#overview { position:
div#contenttop div#affiliates { position:

you're using waaay too much positioning which will only cause problems.
use the natural flow as much as possible with margins/padding etc used
to adjust it.

<div id="contenttop">
<div id="headlines">
<div id="overview">

you're using waaay to many <div>s in your markup. they're not necessary.
apply the style to the appropriate element not contain everything inside
<div>s.

e.g: <div id="overview"> should be a <p id="overview">, your headings
should be <hx>s etc etc.

 

[Spartanicus]

http://greyfade.org/otakulist.com/

Btw, microfonts:
http://www.spartanicus.utvinternet.ie/test/otakulist.png

 

[brucie]

in post:
<

Btw, microfonts:
http://www.spartanicus.utvinternet.ie/test/otakulist.png

that doesn't happen with the MMP - microsoft microscope plugin V2 (V1
was buggy and made everything look further away)

 

[Charles Banas]

Btw, microfonts:
http://www.spartanicus.utvinternet.ie/test/otakulist.png

what platform is that? on all the Windows browsers i've tested, x-small
corresponds to about 8.5pt, and a friend of mine (a web developer by
trade) uses x-small with no problems on macs.

but once again, this is very much a work in progress.

 

[Charles Banas]

Setting the visible property to hidden has no effect on downloading
(remember that the image still occupies it's space, thus it must be
downloaded), if you switch it's display off via the display property
then the image should not download.

ok, then i'll consider it a no-no and just use a background-image.

Omit the height property from the container div(s).

i had thought that was an IE bug i'd run into before. i guess i hadn't
actually tried it. that does give the effect i was looking for, though,
so thank you for waking me up.

 

[brucie]

in post: <

what platform is that?

my win IE6 shows the same as above (and a scroll bar at fullscreen
800x600) http://moreshit.bruciesusenetshit.info/screencap9384.jpg [64k]

on all the Windows browsers i've tested, x-small corresponds to about
8.5pt, and a friend of mine (a web developer by trade) uses x-small
with no problems on macs.

don't use keywords for font sizes. they're not implemented consistently
across browsers and some browsers are buggy. use ems or % with 1em/100%
being the minimum.

also:

Why you should avoid the Verdana font
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

 

[Charles Banas]

in post: <


sounds good

i thought it would.

why would you need to? as the image is a background its referenced to in
the css, when a different css file is used the different image file is
also used (or none at all if thats what the css says).

my reasoning would be to keep the image there for less supportive
browsers or in the absence of CSS. not really all that much of an issue
worth considering, it was just a thought.

i remember some browsers don't download hidden/none content until needed
but i cant remember which ones. i think maybe moz and opera.

ok. i just wanted clarification anyway. no biggie. i'm not going to
do it anyway

you're using waaay too much positioning which will only cause problems.
use the natural flow as much as possible with margins/padding etc used
to adjust it.

which, i've tried to do throughout the rest of the document as a whole.
i don't like using positioning at all. in fact, i /was/ using "float:
left;" for these particular divs, but it introduced problems that i
found difficult to resolve.

since i added #contenttop, though, it might make the floats sit easier.

you're using waaay to many <div>s in your markup. they're not necessary.
apply the style to the appropriate element not contain everything inside
<div>s.

e.g: <div id="overview"> should be a <p id="overview">, your headings
should be <hx>s etc etc.

i don't follow you here. aside from the fact that a <p> element has a
default markup (which i'll end up overriding anyway), i honestly don't
understand what difference it makes semantically. call me ignorant, but
i've always looked at <div> and <p> as being the same thing.

as for using <hx>, i haven't gotten that far yet. i'm preparing to
replace a number of the images with plain text (yay!), which i plan to
use the heading tags for. i just haven't found a descriptive need for
them yet in this project.

 

[brucie]

in post: <

i don't follow you here. aside from the fact that a <p> element has a
default markup (which i'll end up overriding anyway), i honestly don't
understand what difference it makes semantically.

semantically the text is a paragraph so mark it up as such

i've always looked at <div> and <p> as being the same thing.

"The P element represents a paragraph."
http://www.w3.org/TR/html401/struct/text.html#edef-P

"The DIV and SPAN elements, in conjunction with the id and class
attributes, offer a generic mechanism for adding structure to documents
[...] but impose no other presentational idioms on the content."
http://www.w3.org/TR/html401/struct/global.html#edef-DIV

 

[Spartanicus]

what platform is that? on all the Windows browsers i've tested

It has nothing to do with the OS or browser used. It's caused by your
font specifications clashing with mine. I've specified Verdana 13px as
my preferred font in my browser config, I'm guessing that you have
tested with a browser that uses the default font setting (typically
something like TNR at approx 16px). Because you specified verdana to be
used, and because you didn't like the way it was sized locally, you've
specified the font size to be smaller, but this is calculated relative
to *your* specified font. My specified font is smaller to begin with, so
the size reduction you specified now ends up way to small.

 

[Charles Banas]

don't use keywords for font sizes. they're not implemented consistently
across browsers and some browsers are buggy. use ems or % with 1em/100%
being the minimum.

i wasn't aware of this.

also:

Why you should avoid the Verdana font
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

to me, the arguments presented there aren't very strong.

but anyway, i use Verdana because it's more aesthetically pleasing to
me. i'd use a different (probably smaller font) if i could find a font
in the same family that didn't lok as tacky as Arial.

it's mostly an isue of taste to me, and i've never liked Arial in the
least. any suggestions? i'm quite open to them.

 

[Charles Banas]

It has nothing to do with the OS or browser used. It's caused by your
font specifications clashing with mine. I've specified Verdana 13px as
my preferred font in my browser config, I'm guessing that you have
tested with a browser that uses the default font setting (typically
something like TNR at approx 16px). Because you specified verdana to be
used, and because you didn't like the way it was sized locally, you've
specified the font size to be smaller, but this is calculated relative
to *your* specified font. My specified font is smaller to begin with, so
the size reduction you specified now ends up way to small.

see, i assume a general audience that will probably leave their text
settings alone. IE isn't exactly the easiest browser to customize, IMO,
and so i make that assumption.

if you've got a better idea, then speak up. telling me i have a problem
without suggesting anything honestly isn't very helpful.

 

[Charles Banas]

in post: <


semantically the text is a paragraph so mark it up as such

but the image (which i plan to change to text) is not part of the
paragraph, so would i bve better to keep the heading outside the <p> or
put it inside?

 

[Nik Coughin]

i wasn't aware of this.


to me, the arguments presented there aren't very strong.

but anyway, i use Verdana because it's more aesthetically pleasing to
me. i'd use a different (probably smaller font) if i could find a
font in the same family that didn't lok as tacky as Arial.

it's mostly an isue of taste to me, and i've never liked Arial in the
least. any suggestions? i'm quite open to them.

Tahoma

 

[Charles Banas]

Tahoma

is that as widely available as Verdana?

 

[Karl Groves]

but anyway, i use Verdana because it's more aesthetically pleasing to
me.

Right on. Who gives a shit about the face that there's actually a person who
has to use the site as long as it fits what YOU want?

-Karl

 

[brucie]

in post: <

to me, the arguments presented there aren't very strong.

you don't see the text becoming unreadable for some visitors a problem?

but anyway, i use Verdana because it's more aesthetically pleasing to
me.

your visitors don't even know you why would they care what you like or
that their likes are the same as yours.

any suggestions?

just specify a generic family for your fonts. you get to keep the look
you want and the visitor gets to use their preferred font for that
family

 

[brucie]

in post: <

but the image (which i plan to change to text) is not part of the
paragraph, so would i bve better to keep the heading outside the <p> or
put it inside?

outside in a <hx>, a <hx> in a <p> isn't valid. also if you kept it as
an image it should still be in a <hx>

 

[Charles Banas]

i had thought that was an IE bug i'd run into before. i guess i hadn't
actually tried it. that does give the effect i was looking for, though,
so thank you for waking me up.

looking at it fresh today, i'm finding that the container div's height
was the only thing pushing #contentbody down, out from under the
headers. this is exactly the problem i was trying to avoid by having
the height there to begin with.