What the #@$@%... Can someone tell me what's wrong with my link Card on www.eragra.gr (news/time machine)??? It should pop up a pic (it does in FF and IE) but not in Opera Here's the css: .thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 0; } .thumbnail span{ position: absolute; padding: 0px; left: -1000px; border: 0px; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ border-width: 0; padding: 2px; } .thumbnail:hover span{ visibility: visible; top: -205px; left: 0px; }
Get rid of the XML prolog, kicks browsers into quirks mode which can cause many problems since it tells browsers to do whatever the fuck they want and not conform to the "standard" way (Why are you not looking at it in the most popular browser -- MSIE6 ?)
Uhm, Opera accepts the full XML just fine - so that's not it. Only IE has it's head up it's backside about the XML prolog. I'm not seeing any difference here between Opera 9.23, firefox or opera - though I have NO idea what you mean by a 'link card'.... oh wait, I see it now. Hmm... Well, I'd guess the problem to be the classic 'absolute positioning relative to an inline' which RARELY works cross browser. You might be shit out of luck as far as Opera is concerned unless you change that anchor to type block. A LOT of other 'problems' in there though - separate image swaps that aren't going to cache making the page look bad in IE, LOTS of code that isn't going to work in IE6 worth a damn, div's with classes where headers should be used, contents of iframes not having a valid doctype so those are in quirks mode while the outer document is not... and I'm not even certain I want to know what the ****: <div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr"> Is supposed to accomplish.
Well I have vista so that would be kinda difficult for the IE6. The thing is that the xml actually helps the page to be alligned in IE since if I remove it the page will align left, without even looking at the stylesheet. Also the xml is for the index page but the news.html is opened in an iframe so it does not have an xml. My problem is why the hell the pic is pooped up not popped up if you know what I mean. It pops up well but Opera seems to slice and dice it
Yes I'm sure there are lots of mistakes since I'm not very good at it but I have seen the page on other pcs and it looks just fine... The divs are images wich form the boxes (t=top b=bottom tl=top left etc) It's definitely not your style I guaranteeheee! LOL BTW is there a way to put them in one div? here's the css reference: .t {background: url(../images/dot.gif) 0 0 repeat-x; width: 100%} .b {background: url(../images/dot4.gif) 0 100% repeat-x} .l {background: url(../images/dot2.gif) 0 0 repeat-y} .r {background: url(../images/dot3.gif) 100% 0 repeat-y} .bl {background: url(../images/bl.gif) 0 100% no-repeat} .br {background: url(../images/br.gif) 100% 100% no-repeat} .tl {background: url(../images/tl.gif) 0 0 no-repeat} .tr {background: url(../images/tr.gif) 100% 0 no-repeat; padding:4px}
LOL if you click the card link and drag it it will finally show you the pic whole! 'Tis wicked by god!!!
Just like shadow said (Thanx man) I converted it to a block. But is there a way to align the images to the links (so that the images would popup over the link). I tried position relative but it would popup the image insinde the text... Here's the code: a span {display: none;} a:hover span {display: block; position: absolute; top: auto; z-index: 100;}