SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Location
    Denver, CO
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Tableless floated DIV layout

    Here is what I started with: A dynamically created page pulling info from a database. To display the results I was using a table, though the data in not necessarily tabular data (it is thumbnails and captions). Two problems with this are a) is it semantically correct (I think not), b) the number of table columns are hard coded even though the table is created dynamically which means it is too big for some displays and has excessive vertical scrolling on other displays without using the full width of the display. Also some items get displayed with an additional "new" icon (positioned relatively - this has some problems in and of it's own). Here is a sample page of what I'm starting with (you may click on some of the other links on that page to see how each page is done differently): percocomarble.com/stock/marble.php

    My solutions was to use a tableless layout. Each result is contained within a div. Each div is floated left. Each div has a position of relative (with no offset specified) so I can then have the child "new" image positioned "absolutely w/respect to the parent element. Also I ended up specifing a height because long captions would wrap and then the floats would hang up. The results in FF and Safari are as expected. IE7.0 however, not so good. It seems that IE is now using a position of "fixed" on my floated elemnets and they are overflowing the containing "content" div and not scrolling with content div. For an example please see percocomarble.com/stock/test.php you may also use the following parameters on the test page ?color=Black, ?color=Blue, ?color=Brown, ?color=Green, ?color=Gold, ?color=Red, and ?color=White

    The css files used is at percocomarble.com/styles.css and percocomarble.com/layout.css

    Any help on understanding WHY IE does not handle this the same as FF would be appreciated. ONE thing to note (that I don't THINK should have any affect) is that I do use Content Negotiation so that browsers that will accept application/xhtml+xml mime-type receive XHTML 1.1 and other browsers (for example IE) only receive HTML 4.01. The CSS file is the same, it really is a difference of a) headers, b) /> vs > closing tags and the use of xml PIs.
    Mike Michaelson
    Percoco Marble & Tile
    http://www.percocomarble.com

  2. #2
    SitePoint Addict
    Join Date
    Apr 2006
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Odd, it looks fine in my IE7 - perhaps you fixed it?

  3. #3
    SitePoint Member
    Join Date
    Jul 2008
    Location
    Denver, CO
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    The test page (/stock/test.php) did? It is still not right on my IE (7.0.5730.11) on WinXP SP2? I have not done anything (that I can recall) since my post.
    Mike Michaelson
    Percoco Marble & Tile
    http://www.percocomarble.com

  4. #4
    SitePoint Member
    Join Date
    Jul 2008
    Location
    Denver, CO
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adwatson View Post
    Odd, it looks fine in my IE7 - perhaps you fixed it?
    Here are screenshots of "IE8beta emulating IE7" (same in "IE7" as "IE8beta emulating IE7") IE8 beta (without emulating), almost gets it right except is doesn't give you the inner scroll bar that you need... I believe that is a bug (in IE8beta) and have reported it.
    Attached Images Attached Images
    Mike Michaelson
    Percoco Marble & Tile
    http://www.percocomarble.com


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •