ie border display error?

very strange

[kumarsena]

hey,

i got a <div> based layout which looks like this..

----------
aa¦ccc¦dd¦
aa¦ccc¦dd¦
--¦ccc¦dd¦
bb¦ccc¦dd¦
bb¦ccc¦dd¦
----------

everything is positioned using abosolute positioning so it works very well, have tested both in firfox and ie6,
but in ie6 i have a little problem, i ahve fixed it but i still would like to know why its there and if there are other ways around it.

<div> c has a left border set, so that a and b are seperated from c. this displays properly in ff, but in ie6 i get a white line/border in b on the inside, next to the border of c. now the color of this seems to be the bgcolor of the whole page. i can fix it by locating c 1px to the left coming on top of thsi white border
but when using ff, it can be seen when clicking on the links in b that 1 px is underneat layer c.

it works as intended but as i said i still would like to know hwat is going on. is it something to do with borders not being properly diaplyed in ie6..?

thanks

kuamr

[kumarsena]

this is the css i use

a is the picdiv
b is the main menu
c is the main content
d is the rightcolumn

body, html {

background-color:#404040;
font-family: "Arial", "Tahoma", "Verdana", "Geneva", "Helvetica";
color: #999999;
margin-top:5px;
margin-left:0px;
background-image:url(#);
background-position:0 186;
background-repeat:no-repeat;
text-align: center;
font-size: 12px;
text-decoration: none;
vertical-align:center;
height:100%;
}

#maindiv {

position:relative;
height:95%;
width:650px;
padding:0px;
border-collapse:collapse;
border:1px solid #000000;
margin-top:0px;
margin-left:auto;
margin-right:auto;
background-color:#19314d;
float:none;
overflow:hidden;
}

#picdiv {
position: absolute;
left:0px;
top:97px;
padding:0px;
background-image:url('wolfback.jpg');
background-position: 0 0 ;
background-repeat:no-repeat;
width: 100px;
height: 189px;

}

#mainmenu {

position:absolute;
left:0px;
top:286px;
border-right:1px solid #00000;
padding: 0 0 0 0;
margin-bottom: 0em;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
font-size: 10px;
text-align: right;
background-color: #19314d;
width: 101px;
height:100%;

}

#maincontent {

position:absolute;
left:100px;
top:97px;
background-color: #19314d;
border-collapse:collapse;
border-left:1px solid #000000;
padding:15px;
margin-right:0px;
margin-top:0px;
width:385px;
vertical-align:top;
text-align:left;
height:100%;
}

#rightcolumn {

position: absolute;
right:0px;
top:97px;
width:135px;
height: 95%;
background-color: #19314d;
border-left:1px solid #000;
}

[chal990]

okay, i'm new to forums so forgive me!
this might work
#mainmenu {

position:absolute;
left:0px;
top:286px;
border-right:1px solid #00000;
padding: 0 0 0 0;
margin-bottom: 0em;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
font-size: 10px;
text-align: right;
background-color: #19314d;
width: 101px;
height:100%;
}

i notice u have left out one numeral in the html color attributes,
border-right:1px solid #00000;
it should be border-right:1px solid #000000;an extra 0, for black
also, have the border-right set to 0px instead of 1px,
should work,
hope i helped,
James

[createErrorMsg]

#000000;

Shorthand allows you to truncate this to #000;. Anytime one of the RGB pairs is two of the same number/letter, you can shorten it by typing just one.

So #FFFFFF becomes #FFF, and #CCBBCC becomes #CBC.

[chal990]

Riiight, i must be behind a little, i haven't heard of shorthand, thanks!

[Hester]

padding: 0 0 0 0;

That can also be shortened to this:

padding: 0;

[chal990]

and i thought i knew css, anyway, has the fellow who started this whatchamacallit sorted his problem?
we'd like to know!

[kumarsena]

hey

sorry abt not replying, work has kept me very busy,,,

well, i sorted it out, i had to compromise the design a bit due to some other issues as well and the problme was not applicable anymore. the new design did come out better than the first tough..:) thanks for the input guys!

[chal990]

das kl,
gd gd