« The Long Road to a Cheap iPod Knockoff
Things that are great: video and audio. »

position:absolute;

i know supposedly that’s poor form, but check out my latest attempt at the same design i’ve been using but this time with:

  • super clean everything
  • the background only loading once (rather than three times)
  • correct source order
  • quite a bit more solid and flexible
  • super-easy for redesigning
  • completely valid HTML
  • only one empty div tag
  • only two absolute positionings of an element

that’s right bros. now, why shouldn’t i use that single absolute element?

This entry was posted on Thursday, April 20th, 2006 at 7:02 pm by eric and is filed under web design. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

2 Responses to “position:absolute;”

  1. carl Says:

    April 20th, 2006 at 11:38 pm

    Nice. I can’t seem to break it in Firefox. It needs an XHTML 1.0 DOCTYPE. Oh, and it’s very broken in IE6.

    Here’s my attempt. Still has the empty div, but gets rid of the nasty proliferation of redundant pkg divs, and other stuff that doesn’t seem necessary. Works in Firefox as far as I can tell, still broken in IE but slightly less so (thanks to some ugly IE hacks in the CSS).

    A little research says that having a height set on any containing element is doomed to failure in IE. Which makes me wonder how you get eric.meyerbros.org to work in IE (but I’m too lazy to look and find out).

    For blog.meyerbros.org, I’d be ready to go with something that’s so simple layout-wise that it doesn’t need quite so much CSS-hacking.

  2. eric Says:

    April 21st, 2006 at 1:10 am

    eric.meyerbros.org has height settings on three divs, but none of them contain anything else. of course, it still isn’t structuraly sound on IE. Here’s my thought:

    i haven’t looked close at how you eliminated the .pkg class divs, but it obviously worked. changing the alpha float from left to right eliminates the need for absolute positioning, so well done on that front as well.

    the HTML here is the cleanest it can be. correct in every way, now that you’ve eliminated the extra divs (and really that banner div can be useful in other layouts). so my thought is we go with it, develop a simple solid browser-friendly CSS, and either do a PHP browser check or simply use alternate styles to give multiple options - some IE friendly, some w3c correct. all good-looking and well coded.

    yeah?