Major sites and CSS.

 > For those who believe that tables are the way to lay out pages and that
 > there isn't a move among major websites towards css/div page layouts...
 >
 > <a style='text-decoration: underline;' href="http://www.wired.com/" target="_blank">http://www.wired.com/</a> (XHTML)
 > <a style='text-decoration: underline;' href="http://msn.espn.go.com/" target="_blank">http://msn.espn.go.com/</a> (HTML)
 >
 > Both use div layouts with css for presentation... just goes to show.
 >
 > Still a lot of work to be done though. Wired.com has about 25 errors
 > with XHTML Transitional, and ESPN.com has over 400 on latest count with
 > HTML 4.01 Transitional. Still, that's good for an MSN site.
 >
 > So to the future with css... my 2c have been deposited.


I've been playing around a lot with CSS and absolute positioning and find it
is a lot easier to get the "look" I'm after, the only problem is things
aren't always as "absolute" as they're supposed to be.

In the <a style='text-decoration: underline;' href="http://msn.espn.go.com/" target="_blank">http://msn.espn.go.com/</a> page if you change your font size to "large"
or "very large" in the browser the link beginning with "Clarett jerseys:
Tough sales job" disappears completely even though the site has the CSS
commands. This is exactly the problem I have encountered.

I think the problem has to do with spacing between lines and tables which
causes this but I'm not sure. On my own web pages I don't have a single
"font size" command and yet pictures that are positioned absolutely (a arrow
for example that is supposed to indicate an area of another picture) get
pushed around just enough to make things not work the way they were
intended.

If you know of solutions that work then please tell by all means.<!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Major sites and CSS. 

Farlo <hall.j.m DeleteThis @att.net> wrote in news:Xns93DFBE7369CB7halljmattnet@
68.12.19.6:

 > David Venn-Brown <davidvb DeleteThis @ozemail.com.au> wrote:
 >
  >> <a style='text-decoration: underline;' href="http://www.wired.com/" target="_blank">http://www.wired.com/</a> (XHTML)
  >> <a style='text-decoration: underline;' href="http://msn.espn.go.com/" target="_blank">http://msn.espn.go.com/</a> (HTML)
  >>
  >> Both use div layouts with css for presentation... just goes to show.
 >
 > From the error-filled "Wired" site:
 > <table cellspacing="0" class="mkt">
 > <tr>
 > <th class="name">Sym</th>
 > <th>Last</th>
 > </tr>
 >
 > They use Tables and CSS. Badly. It's an ugly site.
 >

Can't say I ever saw the aesthetic appeal to Wired, either print or web.

Still, it was an interesting read through the source code, since I'm still
a die-hard tables user for layout

(Of course, of the very few websites done solely by me, no one has ever
accused my sites of being 'pretty' - which is probably why I'm always part
of the back-end team

--
Marc Bissonnette
Perl CGI. MySQL Databases. Dynamic Web Content Control.
<a style='text-decoration: underline;' href="http://www.internalysis.com" target="_blank">http://www.internalysis.com</a>
Looking for a new ISP? <a style='text-decoration: underline;' href="http://www.canadianisp.com" target="_blank">http://www.canadianisp.com</a><!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Major sites and CSS. 

Bobby wrote:
  > > For those who believe that tables are the way to lay out pages and that
  > > there isn't a move among major websites towards css/div page layouts...
  > >
  > > <a style='text-decoration: underline;' href="http://www.wired.com/" target="_blank">http://www.wired.com/</a> (XHTML)
  > > <a style='text-decoration: underline;' href="http://msn.espn.go.com/" target="_blank">http://msn.espn.go.com/</a> (HTML)
  > >
  > > Both use div layouts with css for presentation... just goes to show.
  > >
  > > Still a lot of work to be done though. Wired.com has about 25 errors
  > > with XHTML Transitional, and ESPN.com has over 400 on latest count with
  > > HTML 4.01 Transitional. Still, that's good for an MSN site.
  > >
  > > So to the future with css... my 2c have been deposited.
 >
 >
 > I've been playing around a lot with CSS and absolute positioning and find it
 > is a lot easier to get the "look" I'm after, the only problem is things
 > aren't always as "absolute" as they're supposed to be.
 >
 > In the <a style='text-decoration: underline;' href="http://msn.espn.go.com/" target="_blank">http://msn.espn.go.com/</a> page if you change your font size to "large"
 > or "very large" in the browser the link beginning with "Clarett jerseys:
 > Tough sales job" disappears completely even though the site has the CSS
 > commands. This is exactly the problem I have encountered.
 >
 > I think the problem has to do with spacing between lines and tables which
 > causes this but I'm not sure. On my own web pages I don't have a single
 > "font size" command and yet pictures that are positioned absolutely (a arrow
 > for example that is supposed to indicate an area of another picture) get
 > pushed around just enough to make things not work the way they were
 > intended.
 >
 > If you know of solutions that work then please tell by all means.
 >

an approach I find useful is to look at what I call
"degrees of freedom"...where a page element can expand
and contract...and where it can move to if entirely
pushed out of the way...rather than trying to control the
element itself I try to control the overflows and shifts

for instance...if I have a menu on the left hand side
then what I'm looking at as a first priority is how do I
deal with the situation where the text in the menu gets
large enough to push the content out of the way...only
after I've hot that sorted to my satisfaction do I
attempt to make the menu itself look nice and sit where I
want

it's generally a matter of getting the right combination
of floats, clears and div margins

using % for all header and small print specifications,
and then em for all layout that doesn't relate to
graphics, also helps

--
eric
<a style='text-decoration: underline;' href="http://www.ericjarvis.co.uk" target="_blank">www.ericjarvis.co.uk</a>
"Hey Lord don't ask me questions
There ain't no answer in me"<!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Major sites and CSS. 

On Sat, 23 Aug 2003 08:03:33 +0200, Bobby <bobby DeleteThis @goldnet.it> wrote:

  >> For those who believe that tables are the way to lay out pages and that
  >> there isn't a move among major websites towards css/div page layouts...
  >>
  >> <a style='text-decoration: underline;' href="http://www.wired.com/" target="_blank">http://www.wired.com/</a> (XHTML)
  >> <a style='text-decoration: underline;' href="http://msn.espn.go.com/" target="_blank">http://msn.espn.go.com/</a> (HTML)
  >>
  >> Both use div layouts with css for presentation... just goes to show.
  >>
  >> Still a lot of work to be done though. Wired.com has about 25 errors
  >> with XHTML Transitional, and ESPN.com has over 400 on latest count with
  >> HTML 4.01 Transitional. Still, that's good for an MSN site.
  >>
  >> So to the future with css... my 2c have been deposited.
 >
 >
 > I've been playing around a lot with CSS and absolute positioning and find
 > it
 > is a lot easier to get the "look" I'm after, the only problem is things
 > aren't always as "absolute" as they're supposed to be.
 >
 > In the <a style='text-decoration: underline;' href="http://msn.espn.go.com/" target="_blank">http://msn.espn.go.com/</a> page if you change your font size to
 > "large"
 > or "very large" in the browser the link beginning with "Clarett jerseys:
 > Tough sales job" disappears completely even though the site has the CSS
 > commands. This is exactly the problem I have encountered.
 >
 > I think the problem has to do with spacing between lines and tables which
 > causes this but I'm not sure. On my own web pages I don't have a single
 > "font size" command and yet pictures that are positioned absolutely (a
 > arrow
 > for example that is supposed to indicate an area of another picture) get
 > pushed around just enough to make things not work the way they were
 > intended.
 >
 > If you know of solutions that work then please tell by all means.

There are a couple of recognized solutions. What you are referring to is
an image (an inline object) being given extra space underneath for
"descenders" in normal text like j or y. Apparently, this is what we must
pay for having to exactly follow the W3C spec for inline objects.

One way to fix it, is to apply the style "vertical-align:top;" or
"vertical-align:bottom;" to the images which aren't appearing correctly.
This won't work in all cases, and in some cases, top will work, where
bottom doesn't (and vice-versa).

The other way to fix it is to set the global style:

img {display:block;}

....and start thinking of images as *actual* blocks, and positioning them as
such. This attention to inline detail might make for img to be block by
default in the future.

Grey

--
The technical axiom that nothing is impossible sinisterly implies the
pitfall corollory that nothing is ridiculous.
- <a style='text-decoration: underline;' href="http://www.greywyvern.com" target="_blank">http://www.greywyvern.com</a> - ORCA - Camouflaged PHP Web Scripts.<!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Major sites and CSS. 

Farlo wrote:

 > David Venn-Brown <davidvb RemoveThis @ozemail.com.au> wrote:
 >
 >
  >>http://www.wired.com/ (XHTML)
  >>http://msn.espn.go.com/ (HTML)
  >>
  >>Both use div layouts with css for presentation... just goes to show.
 >
 >
 > From the error-filled "Wired" site:
 > <table cellspacing="0" class="mkt">
 > <tr>
 > <th class="name">Sym</th>
 > <th>Last</th>
 > </tr>

Mate, that's tabular data (he's referring to the market watch section in
the left-hand column).

That's exactly what tables are supposed to be used for, jeez.

 > They use Tables and CSS. Badly. It's an ugly site.

I agree that it's busy and the colour scheme leaves a fair bit to be
desired, but from a technical point of view the design is quite interesting.<!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Major sites and CSS. 

Bobby wrote:

  >>For those who believe that tables are the way to lay out pages and that
  >>there isn't a move among major websites towards css/div page layouts...
  >>
  >>http://www.wired.com/ (XHTML)
  >>http://msn.espn.go.com/ (HTML)
  >>
  >>Both use div layouts with css for presentation... just goes to show.
  >>
  >>Still a lot of work to be done though. Wired.com has about 25 errors
  >>with XHTML Transitional, and ESPN.com has over 400 on latest count with
  >>HTML 4.01 Transitional. Still, that's good for an MSN site.
  >>
  >>So to the future with css... my 2c have been deposited.
 >
 >
 >
 > I've been playing around a lot with CSS and absolute positioning and find it
 > is a lot easier to get the "look" I'm after, the only problem is things
 > aren't always as "absolute" as they're supposed to be.
 >
 > In the <a style='text-decoration: underline;' href="http://msn.espn.go.com/" target="_blank">http://msn.espn.go.com/</a> page if you change your font size to "large"
 > or "very large" in the browser the link beginning with "Clarett jerseys:
 > Tough sales job" disappears completely even though the site has the CSS
 > commands. This is exactly the problem I have encountered.
 >
 > I think the problem has to do with spacing between lines and tables which
 > causes this but I'm not sure. On my own web pages I don't have a single
 > "font size" command and yet pictures that are positioned absolutely (a arrow
 > for example that is supposed to indicate an area of another picture) get
 > pushed around just enough to make things not work the way they were
 > intended.
 >
 > If you know of solutions that work then please tell by all means.

Yep, I see the problem you are referring to. I suggest that what they
have done is used absolute positioning for height, as you say, when of
course the content above it can vary in height.

With full access to the code, I could probably fix this fairly easily
and retain the same look. As Eric sort of suggested, it could be fixed
with a combination of floats and clears.

If you have an example of the same problem (url and/or code), post it
here and someone will help ya out.<!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Major sites and CSS. 

Marc Bissonnette <dragnet DeleteThis @internalysis.com> wrote:

 > Still, it was an interesting read through the source code, since I'm
 > still a die-hard tables user for layout

I totally approve of using Tables for some layout. I use both CSS and
Tables, but my stuff validates.

--
Farlo, the Urban Fey Dragon

The difference between the average man and the average chimpanzee is about
30 IQ points and some DNA. Are you blurring the line?<!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Major sites and CSS. 

"GreyWyvern" <sp_bhuisman.RemoveThis@greywyvern.com_am> ha scritto nel messaggio
news:oprucz9x0zgk3m3d@news.ican.net...
 > On Sat, 23 Aug 2003 08:03:33 +0200, Bobby <bobby.RemoveThis@goldnet.it> wrote:
 >
   > >> For those who believe that tables are the way to lay out pages and that
   > >> there isn't a move among major websites towards css/div page layouts...
   > >>
   > >> <a style='text-decoration: underline;' href="http://www.wired.com/" target="_blank">http://www.wired.com/</a> (XHTML)
   > >> <a style='text-decoration: underline;' href="http://msn.espn.go.com/" target="_blank">http://msn.espn.go.com/</a> (HTML)
   > >>
   > >> Both use div layouts with css for presentation... just goes to show.
   > >>
   > >> Still a lot of work to be done though. Wired.com has about 25 errors
   > >> with XHTML Transitional, and ESPN.com has over 400 on latest count with
   > >> HTML 4.01 Transitional. Still, that's good for an MSN site.
   > >>
   > >> So to the future with css... my 2c have been deposited.
  > >
  > >
  > > I've been playing around a lot with CSS and absolute positioning and
find
  > > it
  > > is a lot easier to get the "look" I'm after, the only problem is things
  > > aren't always as "absolute" as they're supposed to be.
  > >
  > > In the <a style='text-decoration: underline;' href="http://msn.espn.go.com/" target="_blank">http://msn.espn.go.com/</a> page if you change your font size to
  > > "large"
  > > or "very large" in the browser the link beginning with "Clarett jerseys:
  > > Tough sales job" disappears completely even though the site has the CSS
  > > commands. This is exactly the problem I have encountered.
  > >
  > > I think the problem has to do with spacing between lines and tables
which
  > > causes this but I'm not sure. On my own web pages I don't have a single
  > > "font size" command and yet pictures that are positioned absolutely (a
  > > arrow
  > > for example that is supposed to indicate an area of another picture) get
  > > pushed around just enough to make things not work the way they were
  > > intended.
  > >
  > > If you know of solutions that work then please tell by all means.
 >
 > There are a couple of recognized solutions. What you are referring to is
 > an image (an inline object) being given extra space underneath for
 > "descenders" in normal text like j or y. Apparently, this is what we must
 > pay for having to exactly follow the W3C spec for inline objects.
 >
 > One way to fix it, is to apply the style "vertical-align:top;" or
 > "vertical-align:bottom;" to the images which aren't appearing correctly.
 > This won't work in all cases, and in some cases, top will work, where
 > bottom doesn't (and vice-versa).
 >
 > The other way to fix it is to set the global style:
 >
 > img {display:block;}
 >
 > ...and start thinking of images as *actual* blocks, and positioning them
as
 > such. This attention to inline detail might make for img to be block by
 > default in the future.
 >
 > Grey


Well, I have found the solution to my problem (I jumped up out of my seat
when I figured it out!), although I suspect the above mentioned sites have a
series of additional problems to resolve.
In my case, the editor I use automatically places space commands ( ) in
"td" and "p" commands, all I had to do was write the font size into the
style sheet for those 2 commands.<!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Major sites and CSS. 

Bobby wrote:
 > ...
 > In my case, the editor I use automatically places space commands
 > ( ) in "td" and "p" commands, all I had to do was ...

There comes a time when every page builder must let go the apron strings,
fly the nest and markup their own pages without the help of a nanny
wysinwig - good luck.

--
William Tasso - <a style='text-decoration: underline;' href="http://WilliamTasso.com" target="_blank">http://WilliamTasso.com</a><!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Major sites and CSS.