[thelist] All CSS Layout and Browser Compatability

[Jackson Yee]

----- Original Message -----
From: "Boris Mann" <boris at bmannconsulting.com>
To: <thelist at lists.evolt.org>
Sent: Thursday, July 25, 2002 00:13
Subject: [thelist] All CSS Layout and Browser Compatability


> Is it possible to do an entire site using only DIV tags and CSS layout?
> I love the kind of simplicity implied by the designs at BlueRobot
> <http://www.bluerobot.com/web/layouts/> but am worried about stranding
> x% of viewers with "other" browsers...

It's definitely possible, but it depends on how you want to design your site.
It might take a lot of work reconfiguring CSS for both Netscape 4.x and the
newer browsers, and you'll find that some things are still much easier done
with tables, but there are a lot of hacks - err, tricks which you can use for
CSS.  One of the biggest issues among designers for the web has always been
that unlike print media, you'll never be able to totally assert the appearance
of your work for every single person out there because although you can give
everyone the same piece of paper, not everyone will have the same browser or
operating system.  Once you accept that, then things become much simpler for
you.

> What browsers break? Will NN 4.x be the only one to go really crazy? I
> look at Web Standards "browser upgrade" campaign
> <http://webstandards.org/act/campaign/buc/> and it seems I am going to
> be SOL for anything less than a 5.x browser...

As much as I would love for everyone to use Mozilla, I do have sympathy for
those poorer schools where the only computers there are donated 486's running
Netscape 4.x or for people in other countries who are just beginning to
understand what the Internet is.  There's a huge difference between having a
page break on older browsers and having a page degrade nicely for older
browsers.  As long as you can accomplish the latter, your audience will be
fine.

> And for another totally newbee question, can you get two DIVs
> side-by-side without resorting to absolute positioning? Or even just an
> image to the left or right of a DIV  (again without absolute
> positioning)?

Someone else *must* have a better way than this, but the following worked for
me:

--------------- CSS ---------------------
.Container
{
  width: 98%;
  height: 4.5em;
  min-height: 62px;
}

.Left
{
 text-align: left;
 width: 60%;
}

.Right
{
 text-align: right;
 width: 39%;
}

--------------- XHTML ---------------------

<div class="Container">
  <div class="Left">
    Left div
  </div>
  <div class="Right">
    Right div
  </div>
</div>

Adjust min-height and height as appropiate, since I've found out that the
Gecko engine doesn't size containing div's to their contents when they contain
only floating elements.

And if you're wondering why the width's don't add up to 100%... yes, it's the
old IE box model bug.  Floating elements are particular succeptible to slight
differences in margins, borders, and padding.

> While I'm asking stupid questions, I may as well ask about the @import
> stuff mentioned on this list with regards to "hiding CSS from broken
> browsers). Can someone give me an example, and/or explain what the
> broken browsers will be left looking at?

Johannes Koch has the most comprehensive page which I know of detailing the
@import bug and other bugs:

http://pixels.pixelpark.com/~koch/hide_css_from_browsers/

> Pondering when I can ditch cluttering up my content with gratuitous
> <table> tags used for layout purposes...

As I said, some things are still easier done with tables, but with CSS, the
time is now.  If you're looking for a nice introductory tutorial, Mako has a
great one at

http://www.mako4css.com/index.htm

and there are plenty of others like it.

Regards,
Jackson Yee
jyee at vt.edu
http://www.jacksonyee.com/