|
Posted by Christian Hackl on January 13, 2008, 1:10 pm
Please log in for more thread options
GTalbot wrote:
>
>> You could also use the "overflow" property. Here's the first Google hit
>> for "position:fixed IE6":
>>
>> http://home.tampabay.rr.com/bmerkey/examples/fake-position-fixed.html
>>
>
> This sort of hack is not recommendable.
Hey, you conveniently snipped the rest of my posting, in which I
explained why it's not a nice solution and when it may fail! :)
> It's really time to remind (or invite) Internet Explorer 6 users to
> switch to a better browser or to upgrade and then warn the others that
> the webpage may not render as intended by the author but will degrade
> gracefully.
That's true for NS4 perhaps, or even IE5. But IE6? I think IE6 users
should be allowed to expect that a page "just works" in their browser.
> Position: fixed should degrade as position: absolute for the browsers
> which do not support it: that's per spec.
I must say I didn't know that. Where in the spec does it say so? Looking
at [1] I can't find any hint as to how a conforming UA is allowed to
treat fixed as absolute.
Besides, I am not a big fan of CSS hacks at all. A hack remains a hack,
even if it's not in the markup code. Hacks are bad, temporary, and
unnecessarily complex solutions for problems which cannot be solved in a
clean way due to whatever reason.
Most CSS 2.1 usage these days is a hack. Using "float" or "position"
properties in order to create multi-column layouts is a hack that
creates ugly dependencies and makes code harder to read and maintain.
You have to choose between putting hacks into the markup (by abusing
tables for layout) and putting them into the stylesheet (by abusing
properties for something they were never intended for).
Browser shortcomings are only part of the problem, it's also the
limitations in the current specification and the general thinking that
CSS hacks are cool and clever.
Maybe the situation will be better in 15 years or so, when CSS3 will
have been standardised and fully implemented by each and every graphical
browser in the world :)
[1] http://www.w3.org/TR/CSS21/visuren.html#propdef-position
--
Christian Hackl
|
|
Posted by GTalbot on January 13, 2008, 5:45 pm
Please log in for more thread options
> GTalbot wrote:
>
> >> You could also use the "overflow" property. Here's the first Google hit=
> >> for "position:fixed IE6":
>
> >>http://home.tampabay.rr.com/bmerkey/examples/fake-position-fixed.html
>
> > This sort of hack is not recommendable.
>
> Hey, you conveniently snipped the rest of my posting,
If I did that, it was not intentional or I did not need to quote it,
to reply to it.
> in which I
> explained why it's not a nice solution and when it may fail! :)
Well, then it is not entirely coherent and perfectly consequent to
give a link to a not nice solution that can fail. The solution for
everyone is to switch or to at least (minimum) upgrade. Non-forward-
compatible solution to workaround a bug, a flaw or an absence of
support is *never* a solution. Position: fixed was specified 10 years
ago, you know... Every mainstream browser stable version supports
it... except IE6.
http://www.end6.org/
> > It's really time to remind (or invite) Internet Explorer 6 users to
> > switch to a better browser or to upgrade and then warn the others that
> > the webpage may not render as intended by the author but will degrade
> > gracefully.
>
> That's true for NS4 perhaps, or even IE5. But IE6? I think IE6 users
> should be allowed to expect that a page "just works" in their browser.
That's what I mean. If it's not supported, the whole webpage content
should still remain accessible and the whole navigational system of
the webpage should remain functional. Even with javascript support
disabled or inexistent. Even with CSS support disabled or inexistent.
Even in NS 4 or IE 4 or .... So if a main browser manufacturer with
all its huge financial, huge technical resources still can not provide
a browser version that can support a 10 years old CSS specification,
then it's time to invite users/visitors to switch or to upgrade. Here,
the solution for everyone is now in the user's side, available, free,
etc: Firefox 2 (Firefox 3 will be out next month) or Opera 9.5 or IE 7
or any reasonable/responsible Mac browser (Shiira 2, Icab 4, Safari
3.0.4) or any reasonable Linux browser version (Konqueror 4, Galeon
2.0.2, Epiphany 2.20) is a solution for everyone involved.
In the web and in this web inter-connection logic, browser
manufacturers have a responsibility. Web authors (and content
providers at large) have a responsibility. Users have also a part, a
role, a responsibility as well.
> > Position: fixed should degrade as position: absolute for the browsers
> > which do not support it: that's per spec.
>
> I must say I didn't know that. Where in the spec does it say so? Looking
> at [1] I can't find any hint as to how a conforming UA is allowed to
> treat fixed as absolute.
Fixed positioning is a subcategory of absolute positioning: this is
clearly mentioned in the spec. Abs. and fixed positioned elements are
taken out of normal flow. Even if it was resolved as static, it's not
that really important... as long as [WCAG] whole content is accessible
and links remain functional.
I can't find where it explicitly says that fixed positioning may be
rendered as absolute positioning by non-capable browsers but I clearly
remember the spec saying so.
I'll keep searching...
> Besides, I am not a big fan of CSS hacks at all. A hack remains a hack,
> even if it's not in the markup code. Hacks are bad, temporary, and
> unnecessarily complex solutions for problems which cannot be solved in a
> clean way due to whatever reason.
>
> Most CSS 2.1 usage these days is a hack. Using "float" or "position"
> properties in order to create multi-column layouts is a hack that
> creates ugly dependencies and makes code harder to read and maintain.
I can not agree with you on this: this is not what my experience leads
me to conclude. If the web author follows best coding practices and
design and accessibility guidelines and practices good coding/design
techniques, then the code will not be harder to read and definitely
not harder to maintain.
> You have to choose between putting hacks into the markup (by abusing
> tables for layout) and putting them into the stylesheet (by abusing
> properties for something they were never intended for).
I can not agree with you. You give a general perspective, opinion. No
example, no concrete reference I can examine... which could show,
demonstrate your opinion. Of course, bad coding, senseless divitis,
over-excessive declarations, over-excessive "pixel-perfect"
constraining is bad practice and a misuse of the markup or CSS
language to begin with.
I do not agree with you. A large amount of the best CSS columnar
layout templates out there are good recommendable examples which will
degrade as gracefully as it can be possible in non-conformant or non-
capable user agents.
http://fabiwan.kenobi.free.fr/css/PageLayout.html
http://fabiwan.kenobi.free.fr/css/PageLayout2.html
http://w3csites.com/sites_thumbs.asp
Table-based webpage design versus CSS-based webpage design: resources,
explanations and tutorials
http://www.gtalbot.org/NvuSection/NvuWebDesignTips/TableVsCSSDesign.html
Show me example(s) of abusing properties which are a necessary choice
or logical decision/solution to design a CSS columnar layout template.
Otherwise examine this page and then tell me where I abuse CSS
properties:
http://www.gtalbot.org/NvuSection/GuideUtilisateurNvu/GuideNvuSection1.html
> Browser shortcomings are only part of the problem, it's also the
> limitations in the current specification and the general thinking that
> CSS hacks are cool and clever.
General terms. No concrete example.
Internet Explorer 6 and Internet Explorer 7 are good example of
browser shortcomings which represent a huge part of the headache/
nightmare/problem on the web. That's not the case for the latest
browser version of Firefox 2.0.0.11, Opera 9.50, Safari 3.0.4, Icab 4,
Konqueror 4.
Internet Explorer 6 bugs
http://www.gtalbot.org/BrowserBugsSection/MSIE6Bugs/
Internet Explorer 7 bugs
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Score and results to test suites (HTML 4, CSS 2.1, DOM 1, DOM 2, etc)
are available for IE 6 and IE 7 browsers. Anyone can compare them with
other browsers like Firefox 2, Safari 3, Opera 9.5, Icab 4, Konqueror
4.
> Maybe the situation will be better in 15 years or so, when CSS3 will
> have been standardised and fully implemented by each and every graphical
> browser in the world :)
>
> [1]http://www.w3.org/TR/CSS21/visuren.html#propdef-position
>
> --
> Christian Hackl
I don't agree. Have your visitors download and install Firefox
2.0.0.11 or Opera 9.50 or Safari 3.0.4, Icab 4, Konqueror 4 and start
coding with/from/by learning from the best coding techniques and CSS
columnar layout templates and there will not be major problems. Today.
Not in 15 years or so.
I use color when I need to give a color to a text. I use an image to
display an image, not to render text. I use a table when I need to
present tabular data. Etc. HTML 5 will provide furthermore better
(refined) semantic to HTML elements. I will then use <nl> for a
navigation list of links. I will use a <section> for a page section. I
already use <h1> for my main page heading, not a <div> or a <p> with a
bunch of CSS declarations (font-size, font-weight, line-height,
padding, etc) or nested <big> and/or <b> and/or <br>. I use a <div>
when I need to create a page division: this is what a div was designed
to do. I will use a <footer> when I will need to structure a webpage
to render a page footer in HTML 5. In HTML 4, I use a div because a
page footer correspond to a page division.
Regards, G=E9rard
|
|
Posted by Christian Hackl on January 14, 2008, 2:32 pm
Please log in for more thread options GTalbot wrote:
> So if a main browser manufacturer with all its huge financial, huge
> technical resources still can not provide a browser version that can
> support a 10 years old CSS specification,
To my knowledge, there is no web browser that supports the entire CSS2
specification. Obviously, CSS2 support is much better in Firefox/Opera,
but I'm sure if it was so easy to upgrade CSS support in IE, Microsoft
would have done so already. Don't forget that such descisions are not
ruled by technical considerations alone. Backward compatibility is a
huge issue.
> then it's time to invite users/visitors to switch or to upgrade.
That's not your decision but that of the user.
> In the web and in this web inter-connection logic, browser
> manufacturers have a responsibility. Web authors (and content
> providers at large) have a responsibility. Users have also a part, a
> role, a responsibility as well.
Try to tell that last sentence to a user who's ready to spend money on
your business website. "Sorry, your web browser from 2001 is too old and
sucks. Our pages will look cra... uh, I mean degrade gracefully, but
that's not our fault -- it's yours, because you, dear customer, have
responsibilies as well. Please don't go to our competitor's website,
anyway. Thank you."
> I can not agree with you on this: this is not what my experience leads
> me to conclude. If the web author follows best coding practices
It's hard to tell which coding practices are best, isn't it? What
constitutes a good coding practice? That which is used on most
successful websites such as Amazon and eBay? Table layouts and ugly
inline styles abound on their pages. That tells you something about how
horrible the current situation of web authoring languages really is.
In fact, I've personally been studying and teaching how to use semantic
markup and tableless layouts for about 6 years, and yet I don't see any
progress at all. No professional website used by myself on a daily basis
has even remotely clean HTML code. It seems that if you want to play
safe, you just take a <table> and forget about semantic markup. It's
disappointing, but it's reality, and it frustrates me to a point where I
almost stop caring.
>> You have to choose between putting hacks into the markup (by abusing
>> tables for layout) and putting them into the stylesheet (by abusing
>> properties for something they were never intended for).
>
>
> I can not agree with you. You give a general perspective, opinion. No
> example, no concrete reference I can examine...
Fine, here's an example of a hack for creating a three-colum layout on a
web page:
<div id="content">
...
</div>
<div id="navigation">
...
</div>
<div id="related">
...
</div>
#content { margin-left:20em; margin-right:20em }
#navigation {position:absolute; left:0; top:0; width:20em }
#related {position:absolute; right:0; top:0; width:20em }
It's a hack because the stylesheet abuses the "position" and "margin"
properties for something they have not been intended for. Just take a
look and examine the semantics more closely: #content should have a left
margin of 20em, yet when you look at the page there will be no visible
left margin at all. Stating that you want a margin when you actually
want something else is not that much different from stating that
something is tabular data when it really is not.
But it's getting worse: the code introduces dependencies. The value of
the "margin-left"/"margin-right" properties in one declaration depend
entirely on the values of the "width" properties in other declarations.
If you would like to change the width of the navigation column, you
cannot just say "width:23em", you have to edit other parts of the code
as well.
Here's another example of a CSS hack:
<div id="navigation">
...
</div>
<div id="related">
...
</div>
<div id="content">
...
</div>
#navigation { float:left; width:20% }
#related { float:right; width:20% }
#content { width:50% }
This is a hack because it introduces dependencies between declarations
(see above) and even stronger dependencies between the HTML code and the
stylesheet (possible ways of ordering the columns depend on the order of
the elements in the markup), and because it abuses the "float" property.
Look what the specification says on "float" [1]. The property is clearly
designed to be used for giving designers a way to flow text around some
block, not to create multi-column layouts.
I stand by my opinion that it's impossible to write semantically correct
CSS 2.1 code for creating multi-column layouts. It *will* be possible in
CSS3's Advanced Layout module [2], provided it will ever be finished.
With the properties explained in that draft, it will be possible to
write a stylesheet that actually says "I want a three-column layout with
A on the left, B in the middle, C on the right, and D at the bottom"
without any indirections, clever tricks, or dependencies.
I presume the code would look like this:
body { display: "abc"
".d." }
#navigation { position:a }
#content { position:b }
#related { position:c }
#footer { position:d }
(Something may be wrong with this, I am not really that familiar with
the current draft!)
I trust that you handle CSS pretty well and know how to use it as
efficiently as possible. I'm just arguing that complex CSS layouts are
bound to remain hacks simply because they *cannot* be done otherwise.
If CSS 2.1 was perfectly suited for all design needs of today, there
would be no need for CSS3.
X-Post & Followup to comp.infosystems.www.authoring.stylesheets
[1] http://www.w3.org/TR/CSS21/visuren.html#floats
[2] http://www.w3.org/TR/css3-layout/
--
Christian Hackl
|
|
Posted by GTalbot on January 12, 2008, 6:21 pm
Please log in for more thread options On 10 jan, 21:50, mjes...@iastate.edu wrote:
> I'm writing a web page using Nvu.
Hello,
Nvu 1.0 is now 2.5 years old. You can use instead
KompoZer 0.7.10
http://www.kompozer.net/
which is an unofficial bug fixed of Nvu 1.0
It is clearly improved, better than Nvu 1.0. For instance, it does not
create
valign=3D"undefined"
in its HTML code as Nvu did.
The nice thing is that Charles Cooke who was the author of the
official Nvu User Guide is now also the official KompoZer User Guide.
http://www.charlescooke.me.uk/web/kz-ug-home.htm
http://www.charlescooke.me.uk/web/ugs01.htm
> I have the page such that the
> content is centered, with a column of links and media on the left hand
> side. I want that column on the left to stay fixed, not scroll as the
> user reads text on the right hand side.
>
> How can this be done?
position: fixed;
> how can I get it to work with IE
With IE 7,
position: fixed
will work. It will not work for IE 6 and it is not my recommendation
to try to make it work with IE 6. When Charles Cooke designed his Nvu
User Guide, we had this discussion and we decided to leave things as
they are. Same thing with the W3C with few of their webpages: they
chose and coded
position: fixed
knowing well that IE6 would not support it. Please understand that CSS
2.x specification is now 10 years old: it is up to users to upgrade
their browser.
Alternate Browser Alliance
http://www.alternativebrowseralliance.com/
Browse Happy
http://browsehappy.com/
End 6!
Yes, Internet Explorer 6 was amazing... in 2001.
http://www.end6.org/
Why do we bother with Internet Explorer
http://blog.patspam.com/2007/10/18/why-do-we-bother-with-ie/
Is it OK to stop supporting Internet Explorer 6?
http://www.milienzo.com/2007/08/06/is-it-ok-to-stop-supporting-internet-expl=
orer-6/
Why I switched to Firefox
http://www.scottberkun.com/blog/2005/why-i-switched-to-firefox/
Stop Using Internet Explorer
http://www.shlomifish.org/no-ie/
The world stats on browser usage also show that IE 7 is now more
frequently used in several countries.
Finally,
<embed src=3D"clip_02.wmv" autostart=3D"true" height=3D"180"
width=3D"180">
you can consult
Using Web Standards in your Web Pages:Making your page using web
standards - how to
What if I use <embed> for Flash or for a video?
http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages:M=
aking_your_page_using_web_standards_-_how_to#What_if_I_use_.3Cembed.3E_for_F=
lash_or_for_a_video.3F
to create valid markup code to render your movie.
Regards, G=E9rard
|
| Similar Threads | Posted | | enthralling promotional material | October 9, 2006, 11:45 am |
| How to define a HTML page not allow scroll bars and resize? | July 26, 2006, 3:30 pm |
| Frameset -> Page -> IFrame -> Frameset ...issue with scroll bars (Two issues) | April 4, 2008, 6:45 pm |
| CSS SCroll Box? | January 28, 2005, 7:32 pm |
| and CSS Scroll bar | March 25, 2006, 5:19 pm |
| Horizontal scroll to nowhere---why? | October 23, 2007, 11:38 pm |
| Readonly textbox with scroll | April 25, 2005, 1:40 pm |
| Get rid of scroll bars in IE strict | August 17, 2008, 2:22 am |
| Vertical and Horizontal Frames that Scroll Together | October 7, 2004, 5:35 pm |
| Scroll bar working in IE and Opera but not Firefox? | August 5, 2005, 11:10 pm |
|
XML Sitemap