|
|
Posted by Daniel Smedegaard Buus on 09/19/07 15:49
On Sep 19, 4:34 pm, John Hosking <J...@DELETE.Hosking.name.INVALID>
wrote:
> Daniel Smedegaard Buus wrote:
> > Hey you guys!
>
> "We're gonna turn on the power..."
>
> Oh, you're not Rita Moreno. ;-)
> (http://en.wikipedia.org/wiki/The_Electric_Company)
>
>
>
> > I'm having this weird issue with IE7 and some DIVs that contain
> > links...
>
> Wait a minute, is it divs that contain links, or links that "contain"
> divs, as in your post's subject line?
>
> If you try to put a <div> inside an <a>, you *should* get weird issues,
> because the code is invalid. (Or maybe it's not so weird after all.)
>
Oh yeah, I get that, and I can see that I've thrown myself into the
ring for a bashing, but that's quite (all)right, I know this isn't
exactly kosher coding :) But, when you're told what to do, and left
only with hacking it out to make it work on the browsers that exist,
well, I do just that ;) And this is where I got with what worked on
the browsers I could test at the time. I simply cannot find any other
way to get transparency working in this scenario with IE6. So yeah, I
guess "weird" would apply to the browsers in which it actually does
work, as opposed to IE7, where it doesn't.
> > It's a customized WordPress theme, using transparent PNGs for
> > some buttons. Because they're transparent, to get them to show right
> > in IE6 I had to implement them as backgrounds for DIVs with one of the
> > "filters" that IE6 can use. Like this (the site in question is
> >http://mortengoll.orgby the way):
>
> > === Begin HTML for the buttons ===
>
> You gave us the URL (kudos), so we don't need this much pasted code.
>
Nope, but it helps for commenting, even if it's just to say you didn't
need the PHP ;)
> > <div id="navigation_bar">
> > <div class="buttons_wrap">
> > <ul class="buttons_list">
> > <!--<?php
>
> Seeing your PHP code doesn't help us any.
>
> > [snipped]; ?>-->
> > <!--<?php [snipped]; ?>-->
> > <li class="works">
> > <a href="/?cat=1" title="View all articles filed under Works" >
> > <div class="link">
>
> Give your URL tohttp://validator.w3.org/and see the syntactical
> mistakes you're making in your markup. Validate your CSS athttp://jigsaw.w3.org/css-validator/
>
Yup, you're right.
> > ...etc...
>
> > === Begin CSS for the buttons ===
>
> Also available via URL.
> ...
>
>
>
> > #navigation_bar .buttons_wrap .buttons_list .works a div,
> > #navigation_bar .buttons_wrap .buttons_list .works a:link div,
> > #navigation_bar .buttons_wrap .buttons_list .works a:visited .link {
> > background: transparent url(images/button_works.png) top no-repeat;
> > width: 240px;
> > height: 120px;
> > }
> > #navigation_bar .buttons_wrap .buttons_list .works a:hover .link {
>
> Suspiciously complicated (or just unnecessarily specific) selectors.
>
You could say that, I'd say making sure there's no funky collisions
later on and it makes reading the CSS easier since ".works
a:visited .link" is not as describing as
"#navigation_bar .buttons_wrap .buttons_list .works a:visited .link",
which clearly shows that it's something in the navigation bar,
actually something inside a buttons list, etc. Either way, it's not an
error ;)
> ...
>
> > * html #navigation_bar .buttons_wrap .buttons_list .works a div, *
> > html #navigation_bar .buttons_wrap .buttons_list .works a:link div, *
> > html #navigation_bar .buttons_wrap .buttons_list .works
> > a:visited .link {
> > background-image: none;
> > filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/wp-
> > content/themes/mortengoll/images/button_works.png");
> > }
>
> Do you know that IE7 treats the * HTML Filter differntly than previous
> IE versions?http://msdn2.microsoft.com/en-us/library/bb250496.aspx
>
Nope, hadn't read that, thanks for the link. Luckily, it seems the
behavior here is the same as expected for IE6, that is to say, it's
only IE6 or lower that uses it.
>
>
> > They work in IE6, although everything is extremely slow. They also
> > work fine in Safari, Firefox, Konqueror, and Opera.
>
> Amazing that anything works. Depends on the value of "work", I guess.
>
LOL :) Well, it works as it's supposed to IRL, that's what I meant by
work.
> I will say that I did not detect any tranparency in FF,
Interesting. Which version is that?
> so your page
> looks like it could just use colored backgrounds on hover/non-hover.
> That would save the delay in getting some single-color, non-transparent
> image, which is what I see. (I didn't need to see all that wood grain
> anyway. ;-) )
>
Well, yeah, that would be my fallback; to use just a coloured
background plus gifs for those browsers that won't show the PNGs
correctly (without side-effects). And that's actually what I hoped to
hear by writing this post, some idea to making it "work" (as in "work
IRL", not as in making it properly) even if it means hacking even
more.
>
>
> > Does anyone know how to fix this?
>
> Rework the page, more simply, using valid code. Seriously.
>
Seriously, I'd like that, but I'm out of ideas as to get this to work
on IE6 and all others using valid code. Any ideas?
> HTH. GL.
>
> P.S. Don't do this: body {font-size: 13px;}
>
Why not?
Cheers,
Daniel :)
> --
> John
> Pondering the value of the UIP:http://improve-usenet.org/
Navigation:
[Reply to this message]
|