[thelist] All CSS Layout and Browser Compatability [long]

Mark Gallagher mark at cyberfuddle.com
Fri Jul 26 20:32:14 CDT 2002


Boris Mann wrote:
 > Is it possible to do an entire site using only DIV tags and CSS
 > layout?

I hope you mean using only DIV tags and CSS for layout, and not that you
won't be using things like <h1> and <p> :-)

 > 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...
 >
 > 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...

Ahhh, the upgrade campaign has some useful information for designers,
and even (some) users.  But you don't want to go referencing it for your
own site - too many people get offended (with good reason) when websites
tell them "your browser sucks, get a new one".

 > 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)?

Yes.  Have, say:

<div id="menu">
   <ul>
     <li><a href="http://www.foo.com/">J. Random Menu Item</a>
   </ul>
</div>
<div id="content">
   <p>
     Content goes here, laddy!
   </p>
</div>

Then in your CSS:
#content {
   margin: 1em 15em 1em 1em;
}
#menu {
   position: relative;
   float: right;
   width: 12em;
   margin: 1em;
}

This should do the trick - it's been a while since I used it, but from
memory it's correct.  It *does* pose problems, though - #menu *must*
appear above #content in your HTML, otherwise there's a blank space
15ems in size next to #content, and below that is #menu floated right
with a blank space where #content was.

If you use absolute positioning, the positioning in the browser window
is completely irrelevant to the position within your HTML.

 > 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?

Using:
<style type="text/css">
   @import "foo.css";
</style>

Will prevent NN4, IE4, and IE3 from downloading your stylesheet.  If
you'd like to test how it looks in your copy of IE6 (or whatever - why
don't you have NN4 for testing purposes, anyway?), simply remove all
references to your stylesheet from the HTML and reload the page
(remember to put them back afterwards :-)).  If you've written your page
correctly, it should still be readable, accessable, and all that even
without the stylesheet.

<snip />

I probably still owe a tip or two, but here's one to tide you over 'till
I can think of more :o)

<tip type="don't forget about HTML" author="Mark Gallagher">
   It's possible to completely forgo standard HTML tags and create a
   document that still looks okay (in modern visual browsers) using <DIV>
   and <SPAN> and classes, which are then defined in CSS.

   So, instead of <H1> we get <SPAN CLASS="heading1"> and instead of <P>
   we get <DIV CLASS="paragraph">.

   However, when people view such shenanigans in browsers that don't
   support CSS (like Dillo, or Netscape 3), they're shown a page full of
   plain text, without any ability to differentiate paragraphs from
   headers from... you get the idea.

   Where there's existing markup to define what you're trying to say with
   meaningless <DIV>s or <SPAN>s, use that instead.
</tip>


--
Mark Gallagher
fuddlitidy - http://cyberfuddle.com/
blog - http://cyberfuddle.com/infinitebabble/





More information about the thelist mailing list