View unanswered posts | View active topics It is currently Wed Dec 11, 2019 12:30 am

Reply to topic  [ 3 posts ] 
 Additional border added in IE7 
Author Message

Joined: Mon Aug 02, 2010 1:56 am
Posts: 2
Post Additional border added in IE7

Having a slightly strange problem with creating curved corners for a set of list items using PIE and IE7. You'll see the navigation elements at You'll notice the first and last items in the navigation bar have a 1px white border around them in addition to the rounded corners. The actually size of these elements has also been reduced by 1px. The CSS used to generate the bar is as follows:

#menuBar { clear: both; margin: 0 0 25px 0; height: 46px; }
#menuBar, #menuBar ul { padding: 0; margin: 0; list-style: none; line-height: 45px; }
#menuBar a { display: block; color: #fff; font-size: 1.3em; font-weight: bold; }
#menuBar li { float: left; width: 153px; text-align: center; background: transparent url(/images/nav-button-off.png) no-repeat top center; }
#menuBar li ul { position: absolute; background: orange; width: 10em; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ }
#menuBar li ul li { background: orange; }
#menuBar li ul ul { margin: -1em 0 0 10em; }
#menuBar li:hover ul ul, #menuBar li:hover ul ul ul, #menuBar li.sfhover ul ul, #menuBar li.sfhover ul ul ul { left: -999em; }
#menuBar li:hover ul, #menuBar li li:hover ul, #menuBar li li li:hover ul, #menuBar li.sfhover ul, #menuBar li li.sfhover ul, #menuBar li li li.sfhover ul { /* lists nested under hovered list items */ left: auto; }

#menuBar ul li.first { -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; border-radius: 5px 0px 0px 5px; behavior: url(/compat/PIE.php); position: relative; }
#menuBar ul li.last { -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; behavior: url(/compat/PIE.php); position: relative; }

Trying me slightly potty this one. I can find an alternative solution using different background images but as PIE is used/going to be used in other elements it would be nice to use that here as well.

Any pointers would be gratefully received.


Mon Aug 02, 2010 2:01 am

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1452
Post Re: Additional border added in IE7
I actually don't see any problem in IE7. I do see something a little strange in IE8's IE7 mode (looks like the bottom pixel of the elements is getting clipped) but in true IE7 it renders just fine. Unless I'm misunderstanding the problem.

Mon Aug 02, 2010 8:32 am

Joined: Mon Aug 02, 2010 1:56 am
Posts: 2
Post Re: Additional border added in IE7
Hi Jason,

That'll teach me for being slack and only checking it through in IE8 Compat mode. ;)

You are of course correct and the issue only appears in IE8 Compat mode and not IE7 normal. Think I'll just disable compat mode for the site.



Mon Aug 02, 2010 8:39 am
Display posts from previous:  Sort by  
Reply to topic   [ 3 posts ] 

Who is online

Users browsing this forum: No registered users and 7 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:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.