Hi all,
I am trying to jump into the world of tableless design, but I am having a problem. The code is short and sweet, and supposedly cross browser compatable (which is why we are supposed to use the div/css combo right?) but in Netscape 4.7 it blows up all over the place.
The URL is <!-- m --><a class="postlink" href="http://www.direct-o-ry.com">http://www.direct-o-ry.com</a><!-- m -->
The CSS is <!-- m --><a class="postlink" href="http://www.direct-o-ry.com/includes/direct.css">http://www.direct-o-ry.com/includes/direct.css</a><!-- m -->
It looks great on most browsers and validates for XML and CSS according to w3c. Any ideas on why it doesn't look perfect on old browsers too?Netscape 4.7 is REALLY old and badly supports CSS 1, just hide your CSS from it and try and make sure your page renders in an understandable way for no-styles browsers.<style type="text/css">/*<![CDATA[*/
@include "includes/direct.css"; /* Will hide the CSS from NN4 and IE4 and older. */
/*]]>*/</style>bummer... it seems the only way to acheive this with this particular design is with tables, since it relies on 2 left aligned graphics next to each other with an expandable 3rd graphic all side by side.
If this is the case, then I don't understand why some developers are so adamant about never using tables for layout. I understand the arguments and agree with all the points, but if seems you can't use divs and CSS effectively in some designs that tables work better for.Netscape 4.7x is not even a base browser anymore unless you have a signification percentage of visitors with that user-agent forget supporting that browser and use CSS-P.
<!-- m --><a class="postlink" href="http://www.xhtmlcoder.com/beck/">http://www.xhtmlcoder.com/beck/</a><!-- m --> is CSS-P and probably doesn't get too mangled by Netscape 4.7x and does not hide the CSS.Originally posted by MCP Media
I understand the arguments and agree with all the points, but if seems you can't use divs and CSS effectively in some designs that tables work better for. What good are tables??? They don't even work in IE or NN 1!!!
The point is that those browsers are sooo old that virtually no-one uses them anymore. Last month 690066 hits were logged by thecounter.com (<!-- m --><a class="postlink" href="http://www.thecounter.com/stats/2004/May/browser.php">http://www.thecounter.com/stats/2004/May/browser.php</a><!-- m -->) as using using Netscape 4.7x, that's nothing when you consider how many sites thecounter is used on.
You should rely on the semantic value and default rendering of the tags on your page when styles are not supported, like I've done with this (<!-- m --><a class="postlink" href="http://www.fsg-uk.com/rjsystems/index.php?a=1">http://www.fsg-uk.com/rjsystems/index.php?a=1</a><!-- m -->) page.I agree it is almost silly to develop for netscape 4.7. However, I have been able to do it successfully with tables and CSS (my site for example). I want to make the most universally accessable site possible, but I want it to have a little graphical spunk to it too. I'm sure I could make a simple box design work for all browsers, but I am attempting to challenge myself to design something that looks at least a little bit modern but uses all of the most highly recommended techniques as well.It's an old browser and tables are an old way of laying things out. Check out this (<!-- m --><a class="postlink" href="http://www11.brinkster.com/hackus/">http://www11.brinkster.com/hackus/</a><!-- m -->) page in Netscape 4.7x.
It's perfectly accessible to users of Netscape 4.7x (although the code code still use some work here and there).
It uses headings and lists where they should be used so that the page transforms gracefully and the content can be read without any hassle.Hey Lavalamp, do you have NS 4.7 installed? The two sites you showed me as examples don't render well in that browser at all.
I guess a better question would be which browser then should I use as my base? I have FF, Operah, NS7, NS4.7, Lynx, and a few versions of I.E. to check compatability, but I don't have a PDA, Conqeror, IE on a mac, or Safari to test with.
I want all encompassing usability for cell phones, PDAs, fancy browsers, crappy browsers, etc. This is why I write XHTML, and only write javascript (sparingly) that is in the DOM, and use CSS. I check my sites on text based browsers and since I use well formed text (h1,h2,p,hr) properly I have no problems in both text based browsers and graphical ones. I just want to challenge myself to bring a graphical design layout to all browsers possible, and I figured NS4.7 is a good one to try to develop for since it is basically a crap browser anyway.Of course I have Netscape 4.7x installed, version 4.79 to be exact, and here's what I'm seeing (attached), if I were using Netscape 4.79 and I came accross these pages I could read every word and the order that the content is in makes sense.
That's what accessible means, you have to let go of this "it has to look the same in everything" attitude because it's just not possible. You can't create a complex layout that works in everything because the fact is that some browsers don't support the styles.
You'll just have to hide your styles from these browsers while making sure that your content is delivered in an understandable manner accross as many mediums as possible.Vladdy's sig
"Working site" is not the one that looks the same in a few graphical browsers, but the one that adequately delivers its content regardless of the device accessing it.Previewed and lost attachment, here it is:I think you are missing my point.Originally posted by MCP Media
I just want to challenge myself to bring a graphical design layout to all browsers possible, and I figured NS4.7 is a good one to try to develop for since it is basically a crap browser anyway. As a designer, I don't think trying to make a good looking design that displays properly in all browsers is a bad attitude to have. As a developer, wanting everything to be well fomed and accessible is a must.
I am trying to challenge myself to deliver both.Originally posted by MCP Media
I am trying to challenge myself to deliver both.Good luck with that. But Netscape is dead and 4.7x is deader, they even skipped a version because they made version 6 that much better.haha, that rhymed.
I hear what you are saying tho. This task may by next to impossible.
Check this out... <!-- m --><a class="postlink" href="http://www.direct-o-ry.com/">http://www.direct-o-ry.com/</a><!-- m --> looks great in all current browsers, but my friend looked at it on his hiptop and said that the 2nd image was placed oddly. Most sites render well for him on it.
Anybody have any ideas on how to make my layout look like it does now but not blow up in some of the newer devices?
Thanks!You open & close your "mastback" div without any content. Then you put images below it, not in any containing div. Why for?mastback is a div that is sized appropriately to show the background (the repeating -O- graphic) and the images below it are absolutely positioned to appear inside that div.
When I placed the code for the images inside the div, if a user resized their browser the static positioning of the 2nd image was lost and it appeared below the original image (current IE only).
I am trying to jump into the world of tableless design, but I am having a problem. The code is short and sweet, and supposedly cross browser compatable (which is why we are supposed to use the div/css combo right?) but in Netscape 4.7 it blows up all over the place.
The URL is <!-- m --><a class="postlink" href="http://www.direct-o-ry.com">http://www.direct-o-ry.com</a><!-- m -->
The CSS is <!-- m --><a class="postlink" href="http://www.direct-o-ry.com/includes/direct.css">http://www.direct-o-ry.com/includes/direct.css</a><!-- m -->
It looks great on most browsers and validates for XML and CSS according to w3c. Any ideas on why it doesn't look perfect on old browsers too?Netscape 4.7 is REALLY old and badly supports CSS 1, just hide your CSS from it and try and make sure your page renders in an understandable way for no-styles browsers.<style type="text/css">/*<![CDATA[*/
@include "includes/direct.css"; /* Will hide the CSS from NN4 and IE4 and older. */
/*]]>*/</style>bummer... it seems the only way to acheive this with this particular design is with tables, since it relies on 2 left aligned graphics next to each other with an expandable 3rd graphic all side by side.
If this is the case, then I don't understand why some developers are so adamant about never using tables for layout. I understand the arguments and agree with all the points, but if seems you can't use divs and CSS effectively in some designs that tables work better for.Netscape 4.7x is not even a base browser anymore unless you have a signification percentage of visitors with that user-agent forget supporting that browser and use CSS-P.
<!-- m --><a class="postlink" href="http://www.xhtmlcoder.com/beck/">http://www.xhtmlcoder.com/beck/</a><!-- m --> is CSS-P and probably doesn't get too mangled by Netscape 4.7x and does not hide the CSS.Originally posted by MCP Media
I understand the arguments and agree with all the points, but if seems you can't use divs and CSS effectively in some designs that tables work better for. What good are tables??? They don't even work in IE or NN 1!!!
The point is that those browsers are sooo old that virtually no-one uses them anymore. Last month 690066 hits were logged by thecounter.com (<!-- m --><a class="postlink" href="http://www.thecounter.com/stats/2004/May/browser.php">http://www.thecounter.com/stats/2004/May/browser.php</a><!-- m -->) as using using Netscape 4.7x, that's nothing when you consider how many sites thecounter is used on.
You should rely on the semantic value and default rendering of the tags on your page when styles are not supported, like I've done with this (<!-- m --><a class="postlink" href="http://www.fsg-uk.com/rjsystems/index.php?a=1">http://www.fsg-uk.com/rjsystems/index.php?a=1</a><!-- m -->) page.I agree it is almost silly to develop for netscape 4.7. However, I have been able to do it successfully with tables and CSS (my site for example). I want to make the most universally accessable site possible, but I want it to have a little graphical spunk to it too. I'm sure I could make a simple box design work for all browsers, but I am attempting to challenge myself to design something that looks at least a little bit modern but uses all of the most highly recommended techniques as well.It's an old browser and tables are an old way of laying things out. Check out this (<!-- m --><a class="postlink" href="http://www11.brinkster.com/hackus/">http://www11.brinkster.com/hackus/</a><!-- m -->) page in Netscape 4.7x.
It's perfectly accessible to users of Netscape 4.7x (although the code code still use some work here and there).
It uses headings and lists where they should be used so that the page transforms gracefully and the content can be read without any hassle.Hey Lavalamp, do you have NS 4.7 installed? The two sites you showed me as examples don't render well in that browser at all.
I guess a better question would be which browser then should I use as my base? I have FF, Operah, NS7, NS4.7, Lynx, and a few versions of I.E. to check compatability, but I don't have a PDA, Conqeror, IE on a mac, or Safari to test with.
I want all encompassing usability for cell phones, PDAs, fancy browsers, crappy browsers, etc. This is why I write XHTML, and only write javascript (sparingly) that is in the DOM, and use CSS. I check my sites on text based browsers and since I use well formed text (h1,h2,p,hr) properly I have no problems in both text based browsers and graphical ones. I just want to challenge myself to bring a graphical design layout to all browsers possible, and I figured NS4.7 is a good one to try to develop for since it is basically a crap browser anyway.Of course I have Netscape 4.7x installed, version 4.79 to be exact, and here's what I'm seeing (attached), if I were using Netscape 4.79 and I came accross these pages I could read every word and the order that the content is in makes sense.
That's what accessible means, you have to let go of this "it has to look the same in everything" attitude because it's just not possible. You can't create a complex layout that works in everything because the fact is that some browsers don't support the styles.
You'll just have to hide your styles from these browsers while making sure that your content is delivered in an understandable manner accross as many mediums as possible.Vladdy's sig
"Working site" is not the one that looks the same in a few graphical browsers, but the one that adequately delivers its content regardless of the device accessing it.Previewed and lost attachment, here it is:I think you are missing my point.Originally posted by MCP Media
I just want to challenge myself to bring a graphical design layout to all browsers possible, and I figured NS4.7 is a good one to try to develop for since it is basically a crap browser anyway. As a designer, I don't think trying to make a good looking design that displays properly in all browsers is a bad attitude to have. As a developer, wanting everything to be well fomed and accessible is a must.
I am trying to challenge myself to deliver both.Originally posted by MCP Media
I am trying to challenge myself to deliver both.Good luck with that. But Netscape is dead and 4.7x is deader, they even skipped a version because they made version 6 that much better.haha, that rhymed.
I hear what you are saying tho. This task may by next to impossible.
Check this out... <!-- m --><a class="postlink" href="http://www.direct-o-ry.com/">http://www.direct-o-ry.com/</a><!-- m --> looks great in all current browsers, but my friend looked at it on his hiptop and said that the 2nd image was placed oddly. Most sites render well for him on it.
Anybody have any ideas on how to make my layout look like it does now but not blow up in some of the newer devices?
Thanks!You open & close your "mastback" div without any content. Then you put images below it, not in any containing div. Why for?mastback is a div that is sized appropriately to show the background (the repeating -O- graphic) and the images below it are absolutely positioned to appear inside that div.
When I placed the code for the images inside the div, if a user resized their browser the static positioning of the 2nd image was lost and it appeared below the original image (current IE only).