Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > css bug in IE: circumvention, anybody?

Reply
Thread Tools

css bug in IE: circumvention, anybody?

 
 
Els
Guest
Posts: n/a
 
      06-25-2005
Greg N. wrote:

> Els wrote:
>
>> Greg N. wrote:
>>
>>>Els wrote:
>>>
>>>
>>>>>>>>have a look at my test case at http://coolhaus.de/misc/csstest.htm .
>>>>>
>>>>>Yup, leave it as is, but add this line to the top of your file:
>>>>>
>>>>><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
>>>>> "http://www.w3.org/TR/html4/strict.dtd">
>>>>>
>>>>>Makes IE try to follow the same standards as the other browsers
>>>>
>>>>Eh.. addition: background isn't a valid attribute in Strict, so
>>>>instead, add the style to your styleblock:
>>>>td{background-image:url(ttp://coolhaus.de/misc/smily.gif);}
>>>
>>>Hmm, that will open up another bag of worms for me.
>>>
>>>The sample code is my way of showing some extra-wide images. By making
>>>them a cell background, only as much as the table width allows is shown,
>>>no horizontal scrollbars are used. I want that effect.
>>>
>>>I have dozens of such tables on my pages, each showing a different
>>>image. I don't think I'd like to manage that through CSS. What should I
>>>do?

>>
>> Give each table a class (<table class="foo"> and <table class="bar">
>> for instance) and then in CSS:
>> table.foo td{background-image:url(....);}
>> table.bar td{background-image:url(....);}
>> etc

>
> I have just learned that one should do the content in basic HTML, and do
> all formatting through CSS. Fine.
>
> What you're proposing would, in my case, put my content into CSS?


If the image is content, it shouldn't be a background-image at all.
People on text browsers wouldn't see it, nor see an alternative
description throught alt text. So, if it really is content, and not
decoration, you'll have to make it an <img src="..." alt="...">. But
the fact that you're okay with clipping the right side of the image,
my guess is that it is indeed decoration, and as such, not content.

> In my case, there are too many different images to make this viable.


For that, there is the style attribute:
<td style="background-image:url(...);">&nbsp;</td>

> By the way, though "background isn't a valid attribute in Strict", it
> seems to work. What negative effects would I risk if I go on using
> background (apart from making the purists cringe ?


Just that, I think <g>

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
 
Reply With Quote
 
 
 
 
Els
Guest
Posts: n/a
 
      06-25-2005
Greg N. wrote:

> Els wrote:
>
>> btw - if the table has no other function than provide a frame for that
>> background image, you can just use a div instead.
>> div.foo{
>> height:[height of your image];
>> background-image:url(...);
>> }

>
> Well, as I said, I use the table to make the right edge of the image
> invisible, and avoid horizontal scroll bars. Can a div do that?


Sure. You think the background of a div will extend beyond the border
of that div? Impossible

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
 
Reply With Quote
 
 
 
 
Lauri Raittila
Guest
Posts: n/a
 
      06-25-2005
in alt.html, Els wrote:
> [Greg:]
> > What you're proposing would, in my case, put my content into CSS?

>
> If the image is content, it shouldn't be a background-image at all.
> People on text browsers wouldn't see it, nor see an alternative
> description throught alt text. So, if it really is content, and not
> decoration, you'll have to make it an <img src="..." alt="...">. But
> the fact that you're okay with clipping the right side of the image,
> my guess is that it is indeed decoration, and as such, not content.


Yes. but if it is content, you can easily clip it:

div {width:100%;overflow:hidden;min-width:Npx;}

<div><img alt="foo" src="bar"></div>

But I still have no clue what Greg wants to get... If it is to have
image, and style it so that it will be repeted to width of element, then
I would use

<div style="background:url(foo.png)"><image alt=foo src=foo.png></div>


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Support me, buy Opera:
https://secure.bmtmicro.com/opera/bu...tml?AID=882173
 
Reply With Quote
 
Greg N.
Guest
Posts: n/a
 
      06-26-2005
Lauri Raittila wrote:

> But I still have no clue what Greg wants to get... If it is to have
> image, and style it so that it will be repeted to width of element, then
> I would use
>
> <div style="background:url(foo.png)"><image alt=foo src=foo.png></div>


Here is an example of what I'm working on:

http://hothaus.de/greg-tour-2004/ionia.htm

The wide images are cetrtainly content, not decoration, although I feel
it does not matter if part of those images get clipped off the right.

There is another case, too, where I'm using the the same code to display
repetitive images:

http://hothaus.de/greg-tour-2004/meteora.htm (near the bottom of the
page).

Don't look at the source, please <g>. The current solution is all table
based, which I want to convert to CSS as far as possible. I started
this here thread as I already stumbled in my attempt to get rid of the
outermost table and replace it wih a div.

But I've got a few very valuable hints here which I'm in the process of
implementing. Thanks, folks.


Greg


 
Reply With Quote
 
Greg N.
Guest
Posts: n/a
 
      06-26-2005
Greg N. wrote:

> Lauri Raittila wrote:
>
>> But I still have no clue what Greg wants to get... If it is to have
>> image, and style it so that it will be repeted to width of element,
>> then I would use
>> <div style="background:url(foo.png)"><image alt=foo src=foo.png></div>

>
>

By the way, there is another need I have: Those clipped, extra wide or
repetitive images should also serve as links, see this example:

http://hothaus.de/greg-tour-2004/serbien.htm


 
Reply With Quote
 
Lauri Raittila
Guest
Posts: n/a
 
      06-26-2005
in alt.html, Greg N. wrote:
> Lauri Raittila wrote:


> Here is an example of what I'm working on:


So you need both of my code examples... Should be enough. If you want
repeated image to be link, use a {width:100%}.

When there is several ways to do things with CSS (and there usually is),
choosing right one depends on what you want, not on whjat was best
possible with tables.
A) it is quite possible that it is possible to make better way using CSS
B) it is quite possible that the way it works with tables won't be as
well supported as the better CSS way.

> http://hothaus.de/greg-tour-2004/ionia.htm
>
> The wide images are cetrtainly content, not decoration, although I feel
> it does not matter if part of those images get clipped off the right.


That is totally in pieces in Opera 8.01, and you are trickering quirks
mode, which means it is pointless to do anything before getting rid of
it. (google.)

> I started
> this here thread as I already stumbled in my attempt to get rid of the
> outermost table and replace it wih a div.


Codesnippets I gave should be enough to get it working (unless you run
some IE bug I don't know.). Hint: when converting table layout to CSS,
first get rid of *all* tables, unless you really know what you are doing.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Kohtuuhintainen yksi/huone haussa Oulusta syyskuusta eteenpin.
Searching places to sleep on axis Bonn - Tsech - Poland - baltic sea in
july
 
Reply With Quote
 
Greg N.
Guest
Posts: n/a
 
      06-26-2005
Els wrote:

> If the image is content, it shouldn't be a background-image
> at all. People on text browsers wouldn't see it...


It's sortof a photoalbum application, so I don't care much for those who
don't care for pictures.

> So, if it really is content, and not decoration,
> you'll have to make it an <img src="..." alt="...">.


I'm willing to use semantically correct markup where possible, in other
cases I'll use just about any markup that works for me the way I want. <g>

> But the fact that you're okay with clipping the
> right side of the image, my guess is that it is
> indeed decoration, and as such, not content.


It's certainly content. As I said, it's a photoalbum app. I have a
number of panoramic images that I have built such that the more relevant
part is in the left half of the image, hence, I don't mind a certain
amount getting clipped off the right.

> For that, there is the style attribute:
> <td style="background-image:url(...);">&nbsp;</td>


I thought about this, but how about browsers that don't understand CSS
at all?
 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      06-26-2005
Greg N. wrote:

>> For that, there is the style attribute:
>> <td style="background-image:url(...);">&nbsp;</td>

>
> I thought about this, but how about browsers that don't understand CSS
> at all?


Like which?

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Rod Stewart - Maggie May
 
Reply With Quote
 
Greg N.
Guest
Posts: n/a
 
      06-26-2005
Els wrote:

> Greg N. wrote:
>> but how about browsers that don't understand CSS
>>at all?

>
> Like which?
>

like, say, netscape v4? Are you telling me those have become so rare I
should no longer bother? I'd like that.
 
Reply With Quote
 
Lauri Raittila
Guest
Posts: n/a
 
      06-26-2005
in alt.html, Greg N. wrote:
> Els wrote:
>
> > If the image is content, it shouldn't be a background-image
> > at all. People on text browsers wouldn't see it...

>
> It's sortof a photoalbum application, so I don't care much for those who
> don't care for pictures.


I surely would look your image gallery, even using lynx with external
viewer, if nothing else was available... those images are good.

> It's certainly content. As I said, it's a photoalbum app.


And very nice indeed. Is it application, in sence that you have some
program that you use to output it? I would be really interested...

> I have a
> number of panoramic images that I have built such that the more relevant
> part is in the left half of the image, hence, I don't mind a certain
> amount getting clipped off the right.


Of course, you could do it so that snipping happens from both ends, if
the most important part is in the middle, using CSS.

I think your idea of autocropping *thumbnails* is very good idea (of
course, not many people have over 800px wide thumbnails). I hope I can
find time to read the texts (my german is way too rusty to cope without
dictionary...)

I need to get around to make similar for my forthcoming trip (but with
bicycle...

> I thought about this, but how about browsers that don't understand CSS
> at all?


CSS:
..block {display: block;border:2px solid #d9e8b9;
width:100%;overflow:hidden;}
..block:visited {border-color:#ccc;} /* to make difference */
..block:hover {border:2px double #494}
/* guessed #494 for olivedrap, propably not same... */

HTML:

<a class="block" TITLE="hier klicken zum Vergr&ouml;ssern des Bildes"
href=http://coolhaus.de/iv/v4.php?width=1706&height=520&h1=Griechenland+[
3]:+Meteora&img=img/040610/XL-M1915.jpg><img src="img/040610/M1915.jpg"
alt"mahtava panoraama">
</a>

<a style="background:url(http://hothaus.de/greg-tour-
2004/img/040611/M1943.jpg)"
TITLE="hier klicken zum Vergr&ouml;ssern des Bildes" class="block"
href=http://coolhaus.de/iv/v4.php?width=750&height=562&h1=Griechenland+[3
]:+Meteora&img=img/040611/XL-M1943.jpg>
<img src="img/040611/M1943.jpg" alt="ikoneja"></a>

(get rid of all tables for layout. Replace alt text with something in
german.)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Kohtuuhintainen yksi/huone haussa Oulusta syyskuusta eteenpin.
Searching places to sleep on axis Bonn - Tsech - Poland - baltic sea in
july
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
*bug* *bug* *bug* David Raleigh Arnold Firefox 12 04-02-2007 03:13 AM
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM
Set CSS property equal to another CSS property? Noozer HTML 10 10-13-2004 09:20 PM
Is there a way to set the a CSS property to be explicitly the same as another CSS property? Joshua Beall HTML 1 12-10-2003 07:21 PM
print.css and screen.css tom watson HTML 1 09-09-2003 02:48 PM



Advertisments