[css-d] public websites with faulty CSS-s
Hey, I'm currently doing some research on which are the most common sources of incompatibilities for CSS (different browsers understanding things differently). Does anyone know if there is some list of public pages with erroneous CSS somewhere? (I mean publicly available websites that look significantly different with different modern browsers (i.e. IE6+, Opera9+, Firefox3+, ..). Even some single examples would help getting started with my research. Thanks in advance! : ) Sander __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Synchronized paragraphs in adjacent columns
Hello, At http://www.maireadnesbitt.com/press/press8a.html I have an article in French and my English translation, in adjacent columns. Corresponding paragraphs of the original and the translation begin on the same line, although the paragraphs are usually of different lengths. This was done in 2002 -- brace yourselves now -- using tables. I now have more translations to display. I am not far enough along to figure out how to do this with CSS. It doesn't appear to me that any sort of list will do the trick. I can, of course, be wrong. I hope that someone will have a suggestion for me. Bruce __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Synchronized paragraphs in adjacent columns
On Mon, 1 Feb 2010, bruce.som...@web.de wrote:
Hello,
At http://www.maireadnesbitt.com/press/press8a.html I have an article in
French and my English translation, in adjacent columns.
Corresponding paragraphs of the original and the translation begin on the
same line, although the paragraphs are usually of different lengths. This was
done in 2002 -- brace yourselves now -- using tables.
I now have more translations to display. I am not far enough along to figure
out how to do this with CSS. It doesn't appear to me that any sort of list
will do the trick. I can, of course, be wrong.
Try something like this:
p.eng {
clear: both;
width: 35%; /* adjust to taste */
float: left;
}
p.fr {
margin-left: 37%;
}
And fix the character encoding; you are serving the page as UTF-8, but the
character encoding is something else (ISO-8859-1?):
http://cfaj.freeshell.org/testing/nesbitt.jpg
--
Chris F.A. Johnson http://cfajohnson.com
===
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Synchronized paragraphs in adjacent columns
In this case, using a table is justified. There is a relationship between
the English paragraph and it's French translation, therefore putting them in
a table row is semantically correct.
On Mon, Feb 1, 2010 at 8:33 PM, Chris F.A. Johnson ch...@cfajohnson.comwrote:
On Mon, 1 Feb 2010, bruce.som...@web.de wrote:
Hello,
At http://www.maireadnesbitt.com/press/press8a.html I have an article in
French and my English translation, in adjacent columns.
Corresponding paragraphs of the original and the translation begin on the
same line, although the paragraphs are usually of different lengths. This
was done in 2002 -- brace yourselves now -- using tables.
I now have more translations to display. I am not far enough along to
figure out how to do this with CSS. It doesn't appear to me that any sort of
list will do the trick. I can, of course, be wrong.
Try something like this:
p.eng {
clear: both;
width: 35%; /* adjust to taste */
float: left;
}
p.fr {
margin-left: 37%;
}
And fix the character encoding; you are serving the page as UTF-8, but
the character encoding is something else (ISO-8859-1?):
http://cfaj.freeshell.org/testing/nesbitt.jpg
--
Chris F.A. Johnson http://cfajohnson.com
===
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Synchronized paragraphs in adjacent columns
I hope that someone will have a suggestion for me.
Brace yourself...
I actually think that this could be argued to be a legitimate use of tables to
display tabular data. It's certainly not tabular data in the tradition
spreadsheet sense, but it is data that corresponds to other data arranged
logically in columns and rows.
But, it is pretty easy to do this with CSS.
Styled something like:
p[lang=en_US] {
clear: both;
float: left;
width: 49%;
}
p[lang=fr] {
float: right;
width: 49%;
}
---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Synchronized paragraphs in adjacent columns
Climis, Tim wrote:
I hope that someone will have a suggestion for me.
Brace yourself...
I actually think that this could be argued to be a legitimate use of tables
to display tabular data. It's certainly not tabular data in the tradition
spreadsheet sense, but it is data that corresponds to other data arranged
logically in columns and rows.
But, it is pretty easy to do this with CSS.
Styled something like:
p[lang=en_US] {
clear: both;
float: left;
width: 49%;
}
p[lang=fr] {
float: right;
width: 49%;
}
---Tim
And ditch the rivers.
~d
--
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] public websites with faulty CSS-s
2010/2/1 Sander Sõnajalg san...@zeroturnaround.com: Hey, I'm currently doing some research on which are the most common sources of incompatibilities for CSS (different browsers understanding things differently). Does anyone know if there is some list of public pages with erroneous CSS somewhere? (I mean publicly available websites that look significantly different with different modern browsers (i.e. IE6+, Opera9+, Firefox3+, ..). Even some single examples would help getting started with my research. Invalid HTML is much more widespread and a much worse problem. -- Ed Seedhouse __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Picture spacing problem if padding is used for frame what is used for space from text
http://www.habitatfairfield.org/test/index2.php page address left image near bottom in order to get the padding and the border for the frame effect I used this style=float: left; padding: 10px; border: 1px solid #015395; I also wanted the text to space away from the frame and had to use this hspace=15 But hspace of course doesn't parse. Any ideas what I can use to get the same effect. Have tried dozens of things already and they all failed. Thanks, Carol __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] public websites with faulty CSS-s
2010/2/1 Sander Sõnajalg san...@zeroturnaround.com hmm.. browsers do quite much to compensate for the more simple/common mistakes in html like br or hr or pfont color=redbabuhhh/pfont, interpreting it in the way that makes most sense, i guess..? but yes, eventually i plan to do the same sort of reseach also for XHTML, and build a database of common-spread errors and the ones with the heaviest impact on page's functionality/usability (as you know there are hundreds of ways to write invalid stuff that browsers compensate for themselves and nobody will ever even notice) but really, please, if anybody knows if there is some sort of a list of faulty public real-world pages, i'd appreciate really if you let me know... i've googled unsuccessfully for quite some time now. i just need something to get me started with : ) in the end of the day i'll try to use browser-shots etc. to find the incompatible sites automatically, but this really takes some programming and i need some indication that i'm going in the right direction before undertaking anything like that.. so, any ideas? : )) thanks cheers, sander __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Picture spacing problem if padding is used for frame what is used for space from text
Did you try adding a margin to the image? Which would create distance between it and any elements around it. On Mon, Feb 1, 2010 at 1:26 PM, Carol Swinehart c...@ckfswebservices.com wrote: http://www.habitatfairfield.org/test/index2.php page address left image near bottom in order to get the padding and the border for the frame effect I used this style=float: left; padding: 10px; border: 1px solid #015395; I also wanted the text to space away from the frame and had to use this hspace=15 But hspace of course doesn't parse. Any ideas what I can use to get the same effect. Have tried dozens of things already and they all failed. Thanks, Carol __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Picture spacing problem if padding is used for frame what is used for space from text
From: Carol Swinehart c...@ckfswebservices.com http://www.habitatfairfield.org/test/index2.php page address left image near bottom in order to get the padding and the border for the frame effect I used this style=float: left; padding: 10px; border: 1px solid #015395; I also wanted the text to space away from the frame and had to use this hspace=15 But hspace of course doesn't parse. Any ideas what I can use to get the same effect. Margin is - more-or-less - the modern equivalent of hspace/vspace. Try margin-right: 15px; - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] public websites with faulty CSS-s
Sander Sõnajalg wrote: but really, please, if anybody knows if there is some sort of a list of faulty public real-world pages, i'd appreciate really if you let me know... i've googled unsuccessfully for quite some time now. i just need something to get me started with Hi Sander, I don't know of any list, but for XHTML, just hit a few random websites. I'd bet that a good 30% would be invalid. As for CSS, even the w3c site index page is invalid: http://jigsaw.w3.org/css-validator/validator?profile=css21warning=0uri=http%3A%2F%2Fwww.w3.org%2F (It uses some Mozilla-only styles, I think, and some hacks to make sure the page renders properly in IE6). Cheers Peter __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] public websites with faulty CSS-s
There's always the Acid 2 test. It looks the same in all the major browsers now, but in IE6 and 7 it's a pretty stellar disaster. The other thing to check is if MS makes the Compatibility View list public. If it does, that would give you a list of sites that look good in IE7 that don't look good in IE8. And generally, if it doesn't look good in IE8, it probably doesn't look good in anything else either. Once MS fixed their box-model and margin-doubling bugs though, things got pretty uniform. Another thing to keep in mind when doing this though, is that the public facing site may be fine, but only through the use of conditional comments and/or CSS hacks. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Synchronized paragraphs in adjacent columns
Von: Climis, Tim tcli...@indiana.edu
I hope that someone will have a suggestion for me.
Brace yourself...
I actually think that this could be argued to be a legitimate use of tables
to display tabular data. It's certainly not tabular data in the tradition
spreadsheet sense, but it is data that corresponds to other data arranged
logically in columns and rows.
But, it is pretty easy to do this with CSS.
Styled something like:
p[lang=en_US] {
clear: both;
float: left;
width: 49%;
}
p[lang=fr] {
float: right;
width: 49%;
}
---Tim
Ah well, tabular is scarcely limited to spreadsheets, except perhaps in the
PC-world.
Thanks for the several hints on displaying two adjacent columns, which I have
digested.
I haven't recognized at any rate, an idea on how to make corresponding
paragraphs begin on the same line.
Bruce
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Synchronized paragraphs in adjacent columns
bruce.som...@web.de wrote: And ditch the rivers. ~d Sorry. I don't understand rivers. Bruce re: http://www.maireadnesbitt.com/press/press8a.html Typography: rivers and lakes are the gaps that run down the text-block. If you do not see them, view your entire page from top to bottom at +4 or +5. The correction for the Web is not to justify the type. In other words, set it flush left/scatter right. CSS text-align: left; -- desktop http://chelseacreekstudio.com/ mobile http://chelseacreekstudio.mobi/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] public websites with faulty CSS-s
The other thing to check is if MS makes the Compatibility View list public. If it does, that would give you a list of sites that look good in IE7 that don't look good in IE8. And generally, if it doesn't look good in IE8, it probably doesn't look good in anything else either. Thanks a lot, Tim, the compatibility view list is indeed a great resource for what i need to do!! It's publicly available at http://www.microsoft.com/downloads/en/confirmation.aspx?familyId=b885e621-91b7-432d-8175-a745b87d2588displayLang=en. And i'll sure check all the other references :) Thank you all for your replies! Sander __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Synchronized paragraphs in adjacent columns
Von: Climis, Tim tcli...@indiana.edu
I hope that someone will have a suggestion for me.
Brace yourself...
I actually think that this could be argued to be a legitimate use
of tables to display tabular data. It's certainly not tabular data
in the tradition spreadsheet sense, but it is data that corresponds
to other data arranged logically in columns and rows.
But, it is pretty easy to do this with CSS.
Styled something like:
p[lang=en_US] {
clear: both;
float: left;
width: 49%;
}
p[lang=fr] {
float: right;
width: 49%;
}
---Tim
Ah well, tabular is scarcely limited to spreadsheets, except
perhaps in the PC-world.
Thanks for the several hints on displaying two adjacent columns,
which I have digested.
I haven't recognized at any rate, an idea on how to make
corresponding paragraphs begin on the same line.
Bruce
This may be a crazy suggestion, but in my mind a definition list (dl,
dt, dd) wouldn't be out of the question since there is a relationship
between the texts (one translates into the other). A little float:
left action, set width for dt and dd, and some clearing would allow
you to both columnize and get the paragraphs to line up.
http://www.maxdesign.com.au/articles/definition/
One downside is that block elements aren't allowed in the dt element,
according to the standard. You'd either have to avoid paragraph tags,
etc, or damn the standards.
Jesse
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Synchronized paragraphs in adjacent columns
bruce.som...@web.de wrote:
Von: Climis, Tim tcli...@indiana.edu
I hope that someone will have a suggestion for me.
Brace yourself...
I actually think that this could be argued to be a legitimate use of tables
to display tabular data. It's certainly not tabular data in the tradition
spreadsheet sense, but it is data that corresponds to other data arranged
logically in columns and rows.
But, it is pretty easy to do this with CSS.
Styled something like:
p[lang=en_US] {
clear: both;
float: left;
width: 49%;
}
p[lang=fr] {
float: right;
width: 49%;
}
---Tim
Ah well, tabular is scarcely limited to spreadsheets, except perhaps in the
PC-world.
Thanks for the several hints on displaying two adjacent columns, which I have
digested.
I haven't recognized at any rate, an idea on how to make corresponding
paragraphs begin on the same line.
Bruce
You asked the same question about the same site around a year ago, and
received an appropriate answer from Georg Sortun on how to make
corresponding paragraphs begin on the same line.
Check the list archives.
~d
--
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Synchronized paragraphs in adjacent columns
This may be a crazy suggestion, but in my mind a definition list (dl, dt, dd) wouldn't be out of the question You'd either have to avoid paragraph tags, etc, or damn the standards. I had the same thought, but decided not to damn the standards. So I suggested the paragraph solution instead. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
