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