Sent by Gunlaug_Sørtun on 2 June 2004 18:06
Karl,
CSS is fun, isn't it?
IMHO: you are right, not all of what you have done make all that much sense
[8-)
- but if it's working than that's alright.
I have a practical approach on these things.
By using a variant of what I call a "throw-left", that is ment to be used
for text for non-CSS browsers only (like Lynx), you have actually removed
the dimensions of <h1> from the screen-space. Now you've got no more
problems with that one.
Setting the padding to zero on <h1> would have achieved the same, and the
<h1> do not make much sense there at all with only hidden content, really.
---
FYI: Opera won't throw anything very far left, only about a 1000px or so, so
it might come back into the screen in some cases, as I've seen it on:
http://www.zeldman.com/
Some of his "throw-left" to get text off screen is showing up in Opera on my
wide screens.
Position: absolute is a better solution if one wants something to go off
screen in all CSS-able browsers.
---
In your case, the link on a hidden image was treated as if it only took up
width, and only line-height, in Opera & Firefox. IE-win are fooling around
as always.
As I wrote earlier: Opera 7.50 and Firefox wouldn't recognise a hidden image
as linkable, so they redused it to a single line within the <h1>.
Now the whole line is gone, so it's anybody's guess what the browsers are
calculating dimensions from - probably zero dimensions left on screen.
It will work no matter how you make a block that wraps the hidden image and
give it some recognisable dimensiones in a standard-compliant browser.
I tried the link as a wrapper but it wasn't cross-browser stable, thus I
introduced an extra <span> with block-definitions in my sugestion.
Depending on what line you follow - the IE-win line or the
standard-compliant line - it makes perfect sense to give that link some real
dimensions to create a link on the way I read the standards on this subject.
Not that the standards are saying much about something like this at all.
Both Opera and Moz/FF reacted mostly the same way, which tells me that they
followed the same line - well in line with my thinking.
Moz/FF could do with a styling on the hidden image or the link (as you've
got now), but Opera wasn't quite happy with that and IE-win chocked on a
block-definition on the image and needed a hack. I wouldn't hack this one,
so the span was the cleanest solution I could find - and it is very stable.
I hope you are testing your final solution well, and I would advice you to
test what Lynx has got to say about it just to be on the safe side.
http://www.delorie.com/web/lynxview.html
(I just did, and it wasn't telling me much about the page, yet)
I guess there will be some more on that page eventually, soo...
Sincerely
Georg
-------------------
Karl Bedingfield karl at bedingfield.org.uk wrote:
>Well I managed to get it working in the end by adding 2 additional styles.
I
>am not 100% sure why it worked but it did :)
....
>These are the 2 additions to my #logo -
>
>#logo h1{
>text-indent: -9999px;
>}
>
>#logo h1 a:link, #logo h1 a:visited, #logo a:hover{
>display: block;
>width: 129px;
>height: 111px;
>margin: 0;
>padding: 0;
>border: 0;
>}
>
>As I said I am not that logical but it did work - now if someone could tell
>me why it worked :)
--------------------
---
Outgoing mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.691 / Virus Database: 452 - Release Date: 26.05.2004
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
