IE Bug number 12524234345: Borders?

[CoDe-ReD]

Hi ppl,

I've got a problem with CSS again. As usual, FF renders it fine (not the other way around, I try to produce W3C code as much as possible and FF always renders that fine).

The problem is in borders...

Relevant CSS:


p
{
margin: 0px;
padding: 0px
}

#rightbar
{
width: 224px;
float: right;
padding-right: 30px;
padding-left: 30px;
padding-top: 18px;
padding-bottom: 18px
}

.header
{
font-size: 12px;
font-weight: bold
}

#rightbar p
{
margin-bottom: 18px;
line-height: 14px;
float: left
}


#rightbar .image
{
border: 2px #4471A6 solid;
margin: 0px;
padding: 0px
}


See the problem is that the border makes the image wider in IE. In FF it renders fine.

What do I do to solve this?

Edit: Ok never mind found it... simple mistake :blush:

[noTime]

Actually, nobody knows how many bugs there are in IE. It's like counting stars. :)

[CoDe-ReD]

True and I just stumbled upon 2 new problems.

Again, all renders fine in FF and IE is evil like satan again.

Problem is as follows: IE renders the white line between the topbars and the content/rightbar wrong (2 pixels below where it should be)...

Also the "Lees verder >>" in the rightbar doesn't move to the right side (in both browsers). I've used text-align: right and it works on the "Lees verder >>" text in the content div but not in the rightbar div.

CSS:


#whiteline
{
margin-left: 30px;
padding: 0px;
width: 770px;
height: 1px;
background: #FFFFFF;
overflow: hidden
}

#content
{
width: 455px;
float: left;
padding-right: 30px;
padding-top: 18px;
padding-bottom: 18px
}

#rightbar
{
width: 224px;
float: right;
padding-right: 30px;
padding-left: 30px;
padding-top: 18px;
padding-bottom: 18px
}

#rightbaritem .link
{
text-align: right;
width: 224px
}


Full CSS file (http://www.dommelweb.nl/testomgeving/scripts/dommelweb.css)

Example (http://www.dommelweb.nl/testomgeving)

[simplistik]

for your less verder thing...


#rightbar .link a { float: right; } then you need to clear the float.

or


#righbar .link { text-align: right; }

I don't see the white line problem...

[CoDe-ReD]

for your less verder thing...


#rightbar .link a { float: right; } then you need to clear the float.

or


#righbar .link { text-align: right; }

I don't see the white line problem...

I've tried it and that doesn't work. I'm currently using this:



#rightbar .link a { float: right; }

#rightbaritem .link
{
width: 224px;
text-align: right
}


Last version (http://www.dommelweb.nl/testomgeving)

Also the problem with these clear classes is that they add an extra "textline" in IE. If I add a clear div it moves everything under that clearing div a little bit down (like 10 pixels or something). Even if I give it a height of 1px.

The white line problem is one hard to spot. It's right underneath the contactinfo and topphoto divs. It renders fine in FF and it did render fine in IE till recently, I have not touched that class I'm sure of it. I must have done something wrong in a difference class but I can't find it. It moves the line just 2 pixels down.
It's clearly visable when you select everything from the rightbar to the top bars. There is a clear 2 pixel gap, those 2 pixels should not be rendered and still they are in IE. The 1 pixel whiteline div starts directly underneath it leaving the background I had in my wrapper to not function properly (you can see 2 pixels of the wrapper background and then there is a 1 pixel white line and after that the wrapper background just runs down to the bottom). It's kind of hard to explain.

[CoDe-ReD]

Here is a screenshot to point out the problem.

BTW there is no solution for the "extra line" of the clear div?

[CoDe-ReD]

** Bump **

Anyone knows?

[simplistik]

shouldn't have a gap... i never have one... at least not to my knowledge but I'm easily capable of butting anything up to eachother. Not sure where you got that clear code but BLEH to that. I use



.clear { height: 1%; padding: 0; margin: 0; clear: both; }

works fine each and every time... i also apply my to br's just by preference and they work fine.

[CoDe-ReD]

shouldn't have a gap... i never have one... at least not to my knowledge but I'm easily capable of butting anything up to eachother. Not sure where you got that clear code but BLEH to that. I use



.clear { height: 1%; padding: 0; margin: 0; clear: both; }

works fine each and every time... i also apply my to br's just by preference and they work fine.

Ok the problem with the 2 px is solved, I had to use display:block on the image to get it to display properly.

The align right problem is solved too, I was using a id in HTML and a class in CSS. Stupid and easily missed bug. Anyway thnx for the feedback!

I'll have a go @ your clearing class simplistik, maybe I just missed some stupid line of code. I'll post the progress over here. Fhanks for the help so far, I really appreciate it!

[CoDe-ReD]

Ok so I ended up using this class, and it works fine in both IE and FF:



div.clear
{
height: 0px;
padding: 0px;
margin: 0px;
clear: both;
visibility: hidden;
overflow: hidden
}


Thnx for all the help guys! :thumb: :te: