1st Liquid Css Layout

The layout is pretty good. I have no comments on that - pretty standard actually.

Something weird happens in Mozilla, though. When I resize the window, making it narrower (to the minumum possible width), the margin size for the text "Conxion Liquid Design" increases proportionally. Then when I widen the window again, the margin size for the text reduces, but from the left most point where the text was scrunched up to already. So the text ends up moving out of sight into the negative realms beyond the browser window.

You might want to think about correcting (?) that, as I, and probably many other users, often resize windows to very small sizes when working with 101 open browser windows.

I hope that made some sense...

The layout is good in IE5 but has problems in Opera6 as opera6
here is a screen shot
This is on 800x600 screen

Busy - Strange because Opera 6 is one of the ones i tested it on and it showed up fine. Hmm.. Maybe I forgot to change Opera to "identify as Opera". I check and see.

Abhishek - How small are we talking? Cuz css layouts usually don't work well when the browser is very small.

Thanks for your suggestions guys. I will work on them.

dk01 I just noticed I had javascript turned off, with javascript turned on it looks same as IE5 - sorry if I confused you lol.
I often surf with it off, saves a lot of headaches.

I notice you're using a bit of javascript to control your layout, you should offer a noscript option as well, as a lot of people surf with javascript turned off to aviod pop ups and banners and other annoying stuff

In opera I can get it down to 447 before it destorts, scrol bar starts at 562 (in opera, click on prefences/windows/show window size)

yeah, like what Abhishek said, your layout is quite standard, but one thing though, try increasing your padding, it looks a bit too close to the edges,

I'm talking minumum possible width that the window can be resized to. It happens at widths near that too, not only at minimum width. The threshold is the point at which the text can't be wrapped any further.

Renegade - Thanks for the suggestion however with three columns of content I do not want to have huge margins or blanks in my page. I know it may look better on some resolutions to have it more spaced out but then on smaller resolutions it will look too distorted. I am trying to make it accesible from all version 5 and up browsers.

Abhishek - Would you suggest using the min-width to control that? I am not sure what browsers support it but I think it would do what you are talking about. Also is there anything that you think I could solve using the [urhttp://www.w3schools.com/css/pr_pos_overflow.asp]overflow[/url] css property? Thanks.

I am still trying to work on the workings of the design before I go about making it unique and pretty. For now I know its boring but I would rather leave it like that until it is working in most browsers without problems.

Thanks everyone.
-dk

Whoops... just checked and min-width isn't supported yet by any browsers.
-dk

Isn't it supported by Mozilla? And Opera 7 it should be too. Or maybe it's just max-width that is supported? I'm pretty sure I did a test on that and it worked in mozilla at least.

The layout works fine in Opera 7. Feels rather boxy but I'm sure you'll be working on that later.

Yeah you are right about the min-width being supported by opera 7 and mozilla. Unfortunately such a small percentage of users actually use those browsers that I don't think I will rely too heavily on it. I decided to use overflow:hidden for the site layers so that the main content is visible no matter how small the browser goes.

I know the design is boxy but I am going to add graphics with more curve so that it balances out. Unfourtunately that is the price to pay for going for valid code and targeting all of the major browser. Hopefully as browsers come around to more fully support css2 and css3 it will become easier to design in this way without being so boring. I have just decided that if webdesigners don't start designing to standards then the browsers will never change to support them. Guess that's my contribution to the future of webdesign

In the mean time, I have uploaded an updated version. It can be found here (make sure you reload):
http://laboratory.conxiondesigns.com/css/liquid/index.html

I have changed:
1) The colors
2) The header
3) Put overflow: hidden in the two side columns small browsers windows.
4) Added column header graphics.
5) Added a NS/Mozilla browser window resize fix. (This should solve the problem Abhishek was talking about - May not be perfect but its better)

Well that is all. Let me know what you think of the updates and what you would change.
Thanks,
-dk

Quote: Originally posted by dk01
I know the design is boxy but I am going to add graphics with more curve so that it balances out. Unfourtunately that is the price to pay for going for valid code and targeting all of the major browser. Hopefully as browsers come around to more fully support css2 and css3 it will become easier to design in this way without being so boring. I have just decided that if webdesigners don't start designing to standards then the browsers will never change to support them.

I think it's possible to do a standards-compliant layout without it looking too boxy. If you look at sites like A List Apart and Opera.com, they've used some graphics very strategically to add some different shapes and make things more interesting. You could always take some inspiration from there. (see the "Graphic-less sites: Yay or Nay" thread for more)

min-width should work in O6+, NS6+ and Mozilla. In fact, it should work in any CSS2 browser.

Though, I think the problem lies with the margins. When the window width is reduced, the left-margin of the title image increases (the image moves away from the left edge) - I don't think that should be happening. Do you have a fixed or a relative/percentage margin-left value?

The problem doesn't occur in IE6, O6. Moz1.2 and N6 have trouble with it.

Yes its due to the layout using relative layers (from alistapart.com). The top image layer actually is a negative percentage. Maybe you could post a screenshot. Sorry, its just that I have tested in Mozilla, Ns6, Ie5, Ie6, and opera 6. All seem to be working fine now. Could you have an old moz version?

I have been reading up on min-width and although it is css2, it is only supported by a few browsers, which does not include ie6, ns6 (some versions) and some opera6 versions. Its too bad but I have decided against using it anyways.

I will see what I can do about the boxy-ness. I am working on graphics for this right now. Thanks.
-dk

IMO layouts like this should be done with tables, tables and even the old font tag are still valid XHTML transitional (only strict doesnt support the font tag).
Using or rather keeping to the basics is so much easier and browser friendly since CSS doesn't have enough full support yet, heck HTML isn't even fully supported yet. But browsers like opera6 having dom issues, ie6 have all types of issues etc sometimes using all CSS just isn't worth the headaches.

just my 2cents

True.. but like I said. If webmasters don't start to move over then browsers aren't going to support standards and instead you get niche designers who only design for their browser. I know people think a layout like mine might be better in tables, but easier?? Not from my experience! Layout may be a bit more work but for formatting its great. And since NS4 has problems with nested tables anyhow, I don't really see the reason of using tables for it. If I had to go through and find each instance of #ffffff and change it to #000000 I would go crazy. Also, although tables are valid in xhtml 1.0 they are only supposed to be used for tabular data. Now, I don't think its wrong to do this (I do it myself if the site calls for it). I just have decided for myself however that I will try to make a site that will conform to the specs laid out by the w3c. I know the w3c is not always the best and some decisions they make are not always very practical but at least they try to make it easier for webmasters in the future. Dunno.. my 2cents.

Anyways thanks for the imput. I am going to look at the opera site and see if I can work my code or modify it so that it still works in all browsers, is more interesting, and doesn't need JS to be turned on. Thanks.
-dk

I didn't mean don't use any CSS, CSS has fairly good support for thing slike color, backgrounds, font stuff ... even NS4.7 handles it but its layout it doesnt have the full support for yet.

And NS4.7 doesn't have problems with nested tables, unless your talking 6+ deep which should never be done anyways

Well "I" still think that a padding of 10px; should be used, because for me I don't like to see the site content so close the the borders but it's up to you i'm just suggesting...

Yes I know. What I meant was that I am not going to code for ns4 except for to have my code fail nicely for them.

Also I have a design which I was testing that used only tables. Just basic html 4.0 and had 3 table inside on another. In NS4.7 the design worked fine until I placed a form in the 3rd table and then it just distorted like crazy (undocumented bug?). I guess I am just tired of coding for NS4. A site that fails nicely for them and works fine in all the rest of the browsers is not bad because it does not push people away from the site but still pressures them to upgrade their browser. Does anyone have the link to an official browser poll? I havent seen one for a long time and would like to see which browsers are in the lead
-dk

-dk

I like your methods - at least make it fail nicely. Thanks on behalf of all the NS4.* fans

All those browser polls are biased, what you need to look at is your own log files and work towards your vistors needs.
I noticed in my logs that I've had at least two visits in the last months from people using IE3 on one of my sites, would hate to see what they saw

Lol. My grandma likes to see my work and she only has ns4 so I have to!

Well I forgot about my new host which has several logs. Good idea busy. I am so suprised to see that people have acutally used WebTv and NS3 to visit my site! Guess I will have to find someone with webtv to help me see what it looks like.

-dk

Screenshots:

Window at normal maximised state
Window being resized
Window when maximised again

Two things to mention:

It doesn't just happen at minimum width any more; the title moves upon any resize.

Also, for some reason, everytime I resize the window, the page reloads (which didn't happen earlier). That's why you see an active status bar in the second shot. Upon reload at whatever width the window is, the widths are recalibrated and the title appears in the right position. Odd... :\

I'm using Mozilla 1.2.1, which is quite recent. Downloaded it less than a month ago.

BTW, Busy, if you like N4, you should like Moz - reminds me very much of the ol' Communicator.

Yeah Abhishek that reloading of the page is to fix a mozilla bug. It was the only way to have it work for the time being. It was happening in NS6 also so I just decided that rather than have the problem with the widths I'd just have it reload. I know it is not practical because if someone is filling out a form then they will loose everything but for now I am just working things out.

-dk

Ah!

Personally, I'd prefer half a title than a whole reload. It takes an agonising eternity to refresh the page on a 56k.

Anyway, good luck with the site.

Hehe sorry. In the next version hopefully that won't be an issue. I bet the is a better way to just use the DOM to rewrite the html for that layer. Ok last q for this post. Anyone know a site describing the problems NS4 has with layers and css. I know it would be hard to document them all but anything would be helpful.
Thanks,
-dk

Abhi, mozilla is my default, opera6 was but it crashed to much. NS4.7 is still my favorite thou

links you say? hmmm, ok here is a few
http://developer.netscape.com/docs/manuals/communicator/dynhtml/index.htm
http://developer.netscape.com/evangelism/docs/articles/img-table/
http://www.macedition.com/cb/nn4crashers/
http://www.mark.ac/writing/cssnn4.php
http://www.littlegreenfootballs.com/weblog/weblog.php
http://www.mako4css.com/Issues.htm
http://www.bobsawyer.com/nn4css.html - http://www.bobsawyer.com/index.html?view=message&mid=152
http://webmail.nic.fi/~tapio1/Teaching/Netscape.php3
http://www.evolt.org/article/Assigning_browser_specific_styles/17/14732/inde
http://www.thenoodleincident.com/tutorials/box_lesson/index.html
http://webmail.nic.fi/~tapio1/Teaching/Virheet.php3
http://www.mozilla.org/docs/web-developer/bugspecs/REC-CSS1.html
http://css.nu/faq/ciwas-mFAQ.html
http://www.utoronto.ca/ian/books/xhtml2/exerpt/css-4a.html
http://www.richinstyle.com/bugs/table.html
http://css.nu/pointers/bugs.html
http://www.xs4all.nl/~ppk/css2tests/
http://www.people.fas.harvard.edu/~dbaron/css/
http://pixels.pixelpark.com/~koch/hide_css_from_browsers/
http://style.cleverchimp.com/font_size/css/
http://www.meyerweb.com/eric/articles/webrev/199905.html
http://css.nu/pointers/point-tip.html

http://www.meyerweb.com/eric/articles/webrev/199912b.html
http://www.evolt.org/article/Assigning_browser_specific_styles/17/14732/inde
http://www.utoronto.ca/ian/books/xhtml2/exerpt/css-4a.html
http://www.jegsworks.com/webfonts/
http://wsupsy.psy.twsu.edu/surl/usabilitynews/2S/font.htm
http://style.cleverchimp.com/font_size_intervals/altintervals.html
http://home.earthlink.net/~bobbau/platforms/text-size/

http://allmyfaqs.com/cgi-bin/wiki.pl?CSS_FAQs
http://www.blooberry.com/indexdot/css/
http://www.littlegreenfootballs.com/weblog/weblog.php
http://www.westciv.com/style_master/academy/links.html
http://vzone.virgin.net/sizzling.jalfrezi/styles.htm#links

http://www.westciv.com/style_master/academy/browser_support/index.html
http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp?frame=true
http://www.webreview.com/style/css1/charts/mastergrid.shtml
http://pixels.pixelpark.com/~koch/hide_css_from_browsers/summary/
http://www.w3.org/TR/REC-CSS2/generate.html#propdef-list-style-type

lol, i think that's enough Busy well i still have a friend that uses ie 3 , in fact i just went over to his house to upgrade it not too long ago he was pissed of at the crap he saw... go figure...

That's so wrong! lol I just can't imagine. The only explaination might be is that it is a win95 machine without cdrom and a 28.8 connection.
-dk

About 2 years ago I was still using an old Pent with win95 and 14.4 modem I did have IE5 thou - I miss the old girl