Previous Message
Next Message

Infernal overlapping border in IE

Sent by IChao on 31 October 2004 21:09


Mehran Khalili wrote:
> 
> The problem is the one pixel of dark blue to the bottom left of the
> 'S' in the logo at http://scandal.org/wp/index-cssd.php in IE. 
> 


Mehran,

I would like to change your code to illustrate the problem

..logo{

     border-right: 1px solid  yellow /*#B6C7CF*/;
     border-top: 1px solid silver /*#B6C7CF*/;
     border-left: 1px solid black /*#B6C7CF*/;
     border-bottom: 1px solid red  /*#13284F*/;
....
     }

Compare the four corners in IE, Gecko, Opera. The question is whether a 
corner is part of the vertical or the horizontal line. The "one pixel" 
is just the first pixel in the bottom border in IE.


(A while ago, I posted a workaround, not a fix, like this one:

make border-right thicker, but darker:

..logo{
     border-right: 2px solid  #849196 /*#B6C7CF*/;
     border-top: 1px solid #B6C7CF;
     border-left: 1px solid #B6C7CF;
     border-bottom: 1px solid #13284F;
....
     }

Now the left-bottom corner is part of the border-left, but this does not 
fix the problem for Opera.)


Fix: In your situation, I would suggest to erase the bottom line, since 
you have already shifted the logo by top: 1px:

..logo{
     border-right: 1px solid  #B6C7CF;
     border-top: 1px solid #B6C7CF;
     border-left: 1px solid #B6C7CF;
     border-bottom: none;
....
     }

Ingo

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: