Results 1 to 9 of 9
  1. #1
    Join Date
    Sep 2006
    Posts
    265

    Unanswered: Transitional vs Strict

    We are an art gallery with a web site currently using deprecated tags like:

    Code:
    <BODY><Table class="TableLeft" align="left" width="81%" border="0"><tr>
    <td width="40%" height="50%" align="center" valign="top">
    Having deployed classes throughout in readiness to go to Strict using the div model. We have found like everyone else, the disparity and inconsistancies between browsers. At least with the deprecated tags; the use of percentages re-sizes to the screen. When using classes it would appear that Firefox calculates the percentages against the document height rather than screen. We have over 16500 images and the majority of 35,000 pages contain images. I have had to express dimensions explicitly in css. Then the idea was to rearrange the images according to the screen dimensions. Along the lines of:

    If the screen.height is less than 1000 display 2 rows with 3 images
    The Div element being 270 wide and 300 high

    If the screen.height greater 1000+ display 3 rows with 2 images
    The Div element being 400 wide and 300 high

    if the screen.width is 1400 + display 2 rows with 3 images
    The Div element being 400 wide and 500 high

    I have tried Creating Cookies - successful but needs a Refresh
    I have tried using Form input - Firefox needs one input type to be displayed

    I wrote this script to create a Session Variable but it doesn't parse the ScrHeight and ScrWidth values to use in the IF statement :

    Code:
    <script language="vbscript">
    
        dim ScrHeight
        dim ScrWidth
    
        ScrHeight = screen.height
        ScrWidth = screen.width
        
        if ScrHeight = "" then
            Session("Screen") = "Null"
        elseif ScrHeight => 1000 then
            Session("Screen")  = "High"
       elseif ScrWidth => 1400 then
            Session("Screen") = "Wide"
       else
             Session("Screen")= "Normal"
    </script>
    Once you have have the Session Variable then you can do something intelligent with it. Having looked at the pre-production (new) version, under the class model all the pages are scrunched up at the top of the page and it just looks better to spread the images in proportion to the screen.

    Simon

  2. #2
    Join Date
    Jan 2007
    Location
    UK
    Posts
    11,434
    Provided Answers: 10
    See if this helps: http://www.dbforums.com/showthread.php?t=1626804

    I think you'd be better off being very general; just specify the max-width and max-height css attributes and the use the float attribute (perhaps with use of margins too) to have the page rearrange itself based on screen size. Benefit of this is that even if a user changes their window sieze, the page will do so too.

    Hope this helps
    George
    Home | Blog

  3. #3
    Join Date
    Sep 2006
    Posts
    265
    Georgev,

    Thanks for replying.

    I originally wrote www.flowerseast.com using deprecated attributes because I knew the result on large screens. The problem I have encountered is with classes measuring percentages to the document.heightrather than the screen.height. So anything with less or more than the screen.availheight using percentages for the navigation on the right hand side moves according to the document.height. I want this area to be still.

    I totally agree with you the generality of deprecated attributes, is a much simpler way of handling varying screen sizes. Unfortunately, the web world is moving to the Strict documents and classes, this is where browser inconsistancies come to the fore!

    Even things like floating elements don't work properly and in both major browsers I've had to shag around with the stylesheets because the where the far-car-wee browsers.

    Its almost there other than looking crap.

    If you go to this link on a 1400 x 1050 screen you may need to do a refresh:

    http://www.flowerseast.com/Galleries_5.asp

    and click on the fox top left you can see what I mean.

    Simon

  4. #4
    Join Date
    Apr 2002
    Location
    Toronto, Canada
    Posts
    20,002
    this definitely calls for FLOAT

    do not mess around with trying to suss the user's browser window inner width or anything remotely like that

    that way lies madness


    and by the way, strict html is drop-dead simple, i've been writing strict for about 8 years

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL

  5. #5
    Join Date
    Jan 2007
    Location
    UK
    Posts
    11,434
    Provided Answers: 10
    Seriously mate, use float along with max-width and max-height. I believe that the latter two attributes allow percentages too!

    No promises, but when I get back home to my development PC I'll see if I can dig up an example for you
    George
    Home | Blog

  6. #6
    Join Date
    Jan 2007
    Location
    UK
    Posts
    11,434
    Provided Answers: 10
    Actually, I found this in my inbox from a while back
    Code:
    <html>
    
    <head>
    <title>Layout Sample</title>
    
    <style type="text/css">
    
    #container
    {
      width: 800px;
      border: 3px solid red;
    }
    
    .section
    {
      border: 3px solid blue;
      float: left;
      margin: 5px;
      width:250px;
    }
    
    .img
    {
      float: left;
    }
    
    </style>
    
    
    </head>
    
    <body>
    
    <div id="container">
    
      <div class="section">
    
        <img src="http://www.google.co.uk/images/firefox/tshirt.png" class="img">
        <p>Header 1</p>
    
      </div>
      
      <div class="section">
    
        <img src="http://www.google.co.uk/images/firefox/tshirt.png" class="img">
        <p>Header 2</p>
    
      </div>
      
      <div class="section">
    
        <img src="http://www.google.co.uk/images/firefox/tshirt.png" class="img">
        <p>Header 3</p>
    
      </div>
      
      <div class="section">
    
        <img src="http://www.google.co.uk/images/firefox/tshirt.png" class="img">
        <p>Header 4</p>
    
      </div>
    
    </div>
    
    </body>
    
    </html>
    George
    Home | Blog

  7. #7
    Join Date
    Sep 2006
    Posts
    265
    Thanks for your replies.

    I'm fine with the float lefts and rights, in some cases, a clear right to get the correct positioning.

    I do agree that this a a daff, I won't even have bothered with this shaggy around if I had acheived the same results the deprecated attributes. I still have an issue with the classes. With the deprecated attributes, aspects using percentages - proportionally spread out onto the screen, but classes they do not.

    I have seen divs compact according to content and percentages in classes using the documnent height so if a have a long text file the navagation uses the depth of the elongated page.

    Strict is not that simple when you try to migrate from transitional. Sure replacing some attributes, is dead easy but others wholesale changes to gain little. Strict has four reverse gears and only one forward.

    What also becomes apparent the inconsistancies between browsers particularly the handling of floated elements and the white space around links.

    So really what gets on my goat is trying to fix the position of the navigation to the right of the images and the fact that that you have be to literal in your sizing.

    Simon

  8. #8
    Join Date
    Jan 2007
    Location
    UK
    Posts
    11,434
    Provided Answers: 10
    Agreed. Strict is where most cross-brower issues starting coming out of the works!

    Remember, CSS is used to handle the presentation/layout of the page
    George
    Home | Blog

  9. #9
    Join Date
    Sep 2006
    Posts
    265
    Georgev,

    Many thanks for your advice.

    There are some things about DIVs and classes that are great.

    Sometimes, you need someone else to put you back on the Strict and narrow!

    Simon

Posting Permissions

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