Forums
View unanswered posts | View active topics It is currently Wed Oct 22, 2014 5:05 pm



Reply to topic  [ 11 posts ]  Go to page 1, 2  Next
 no background on li:hover ul, background only partially 
Author Message

Joined: Tue Dec 21, 2010 12:42 pm
Posts: 7
Post no background on li:hover ul, background only partially
I have a contact form with a form and included fieldset. IE7 moves the css3pie elements on to a position about 50px too high. In IE8 there is the border of the fieldset not "cut out" under the legend. The site validates completely and in both IEs the results without PIE are the way they have to be.

On the same page I have a horizontal navbar with a dropdown menu consisting of the usual nested ul/li. If I hover over the main li the subnav pops out but the background-color of the sub ul disappears after a few moments/when I do not hover over the sub ul but the sub li. Sometimes when I put the mouse away from one sub li to the next main tab and his ul the former ul rests empty (without text/li on it) in its position.

If the site search is used without asearch string or if there are no results you get an error message. This message is in IE7 without PIE and in IE8 positioned like expected. In IE7 the p element is positioned some pixels too high.

I read the known issues and I think that I tried every suggested solution, but without success. PIE is working on some other elements on that page so that it cant be a path problem.You can see the problems live at: www.skiwiese-bad-nauheim.de/test/buergerinitiative/kontakt.html.

Any helpful suggestions are appreciated.

Even if CSS3PIE does not (yet ?) work as expected in this case I have to thank Jason for this great piece of software. I am no fan of slicing in photoshop but there are websites where rounded corners and shadows are necessary (certainly also in IE7/8).


Attachments:
screenshot_ie7_bigger-problems.jpg [83.13 KiB]
Downloaded 593 times
Tue Dec 21, 2010 12:57 pm
Profile

Joined: Tue Dec 21, 2010 12:42 pm
Posts: 7
Post Re: no background on li:hover ul, background only partially
I want to bring this up again. After two weeks of trying my only solution is to remove PIE from the faulty elements (ul/li and form/fieldset), and let it only on the elements which are working as expected. This is not a really solution and I am still looking for a better way to solve this.
Also I would like to know if this is a unability of PIE with certain conditions or if I could easily change something in my CSS to make PIE work.
Anybodys help is much appreciated.


Fri Jan 07, 2011 4:15 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: no background on li:hover ul, background only partially
Without the code in question it's hard to give advice. But this does look similar to an issue another user was having recently, so I figured I'd give the workaround we found there:

For some reason in certain circumstances, IE (particularly IE < 8) mis-reports the position of the target element's positioning container (the nearest ancestor element with position:non-static), causing PIE to think it is somewhere other than it actually is on the screen. A workaround that seemed to get around that IE bug in this particular case was to force hasLayout on that positioning container, e.g. by adding zoom:1 to its style.

Maybe that will help.


Fri Jan 07, 2011 1:00 pm
Profile

Joined: Tue Dec 21, 2010 12:42 pm
Posts: 7
Post Re: no background on li:hover ul, background only partially
Hi Jason,

no luck :( . I added zoom:1 and position:relative to div.kontaktform (the div surrounding form/fieldset). But no change.
Without PIE everything looks like expected. When I add behavior:url(PIE.htc) everything messes up ...
Also the drop down navigation does not work (disappearing background).

Both problems are live to investigate at http://www.skiwiese-bad-nauheim.de/test/buergerinitiative/kontakt.html. This way you have sourcecode and css in one place.

I hope that it is possible to find a solution for those problems. At the moment the site is live under the same address without /test/ and with PIE removed from the critical objects. In every other browser I tested and on different OS everything works fine ...


Fri Jan 07, 2011 5:21 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: no background on li:hover ul, background only partially
I see, it's a fieldset. That doesn't surprise me, it's a known issue (probably not documented) that fieldsets don't work right, they're treated in a weirdly special way by IE so I need to work through that as a special case. In the meantime I think you'll either have to use a different element type for the styling, or use a non-PIE approach on it.

The top menu issue looks like a PIE bug, I'll pull down your source code later as a testcase and see if I can track down the cause.


Fri Jan 07, 2011 5:39 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: no background on li:hover ul, background only partially
Also, I should have mentioned, when I load your test page I don't see nearly as many issues as in your screenshot. The left-hand menu seems correct, and the height of the form/fieldset backgrounds are correct, just the fieldset's background is shifted down by 20px or so (or rather, the fieldset's contents are shifted *up* 20px or so, so that the legend is cut off on the top. That really sounds like a hasLayout issue.


Fri Jan 07, 2011 5:42 pm
Profile

Joined: Tue Dec 21, 2010 12:42 pm
Posts: 7
Post Re: no background on li:hover ul, background only partially
You are right. The left menu is correct. I am not 100% sure what I changed in the CSS, but it can be that I added position:relative after reading through the forums.After the change PIE works on most of the elements and hence I use PIE on those elements on the live site. But every suggested solution from the forums did not work on the horizontal menu and the form/fieldset. As I understand things I gave hasLayout to form/fieldset. If I am wrong with this I would be glad to get a hint on which element has not but should have hasLayout and how to add it.


Sat Jan 08, 2011 1:01 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: no background on li:hover ul, background only partially
Try this: remove the margin-top:1.5em from the fieldset, and add padding-top:1.5em to the .yform form element. That will prevent the fieldset's margin from collapsing outside the form element.


Sat Jan 08, 2011 1:20 pm
Profile

Joined: Tue Dec 21, 2010 12:42 pm
Posts: 7
Post Re: no background on li:hover ul, background only partially
Result is nearly perfect. Now only the legend has no background and the border of the fieldset is visible in the legend in IE7/8. I see it as there is still hope to get a fully functional solution with PIE :).


Attachments:
screenshot form-fieldset.jpg [33.4 KiB]
Downloaded 474 times
Sat Jan 08, 2011 2:13 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: no background on li:hover ul, background only partially
Yeah, that border-through-the-legend issue is what I was referring to earlier when I said fieldsets are a special case and don't work right in PIE. No fix for that yet unfortunately. Giving your legend a background should get it closer but still not quite the same.


Sat Jan 08, 2011 6:57 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 11 posts ]  Go to page 1, 2  Next

Who is online

Users browsing this forum: Exabot [Bot], Google [Bot], Yahoo [Bot] and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.