IE 6 and CSS question

impr0v

This is annoying the hell out of me, as anything concerning CSS and IE tends to.

Have a look at this URL in IE 6 (it's a mock-up only, none of the links work) and you'll notice that there is a border missing under the 'Recent News' heading when you compare it to Firefox or NN 7. The error could be present in earlier versions of IE but I haven't got past 6 yet.

I've tried everything I can think of but the damned thing won't display, and I can't find any reference to it via google. Has anyone encountered this before?

evilhomer

have you tried

border-bottom: solid #CCCCCC 1px;

all in the one style?
shouldn't make any difference, but than again its a microsoft product

JustHalf

Yes, do that.

stepheno

impr0v wrote:

this URL

Finally a nice County Council website (or division thereof)

Great work.

impr0v

evilhomer wrote:

have you tried

border-bottom: solid #CCCCCC 1px;

I originally had all the properties declared under the one declaration but had separated them all to see if that made a difference. I have them back under the one now and as you can see it doesn't change things.

stepheno wrote:

Finally a nice County Council website (or division thereof)

Great work.

Thanks, but it's far from finished yet.

Eoin

I didn't have a chance to check the code, but one thing to keep in mind is that IE6 treats class names in css with case sensitivity.

i.e. if your stylesheet declares a class called .Main, then referencing it like this will not work

<font class="[B]main[/B]">asd</font>.

This is new to IE since version 6, and it took me some time to figure out.

Eoin.

Buttmunchy

My browser is Opera - the border works fine for me. I can see it. Go to www.webmonkey.com incae you still aren't sure.

impr0v

eoin_s wrote:

I didn't have a chance to check the code, but one thing to keep in mind is that IE6 treats class names in css with case sensitivity.

i.e. if your stylesheet declares a class called .Main, then referencing it like this will not work

<font class="[B]main[/B]">asd</font>.

This is new to IE since version 6, and it took me some time to figure out.

Eoin.

I didn't know that, and it will surely be of help in the future, but i've checked and it doesn't solve this particular situation.

Ph3n0m

I stripped out most of the styling, etc and found the problem is directly related to the following css

#overallBox { 
	width: 580px;
	background-color: #FFF; 
	position: relative;   
	border-left: #FFF solid 8px;
	border-top: #FFF solid 8px;
	border-right: #FFF solid 8px;
	border-bottom: #FFF solid 8px;
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 0px;
	text-align: left;
}

Specifically

position: relative;

When I removed that from the stylesheet, it worked perfectly

impr0v

Cheers Ph3n0m for taking the time to do that, that does indeed seem to be the problem.

impr0v

I've more problems with this same site (it's been on the back burner for a while) and IE6.

Have a look at the site in IE 6 and you'll notice that the middle column of text is indented until it clears the left column, at which point it jumps back out a few pixels. This problem doesn't manifest in FF and i can't seem to find the solution. It would seem to be a simple case of the divs overlapping, but i can increase the margin between them to a huge amount and the text remains indented, so it seems to be a bug. Any ideas?

Ph3n0m

any chance of a screenshot?

impr0v

Attached. You can see where it jumps out a few pixels at the word 'Kilcock', 8 lines into the second paragraph.

exactiv

Why did you decide to use div instead of tables on top? just curious.

impr0v

The site is entirely laid out with CSS rather than tables, so that it can all be redesigned via the stylesheet.

Eoin

exactiv wrote:

Why did you decide to use div instead of tables on top? just curious.

Oh God - let's not open that can of worms again (CSS vs Tables)!

exactiv

I'm not bringing it up! I swear!

I think the two can be used alongside each other.

Ph3n0m

I dont have time to post a fix, but the problem is in your CSS file, specifically a problem between

#links {
  	float: left;
	clear: both;
 	width: 120px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
	

#links ul {
	margin: 0px 0px 0px 0px; 
	padding: 0px 0px 0px 0px;
}

#links li {
	list-style-type: none;
	font-size: 12px; 
	line-height: 15px;
	font-weight: normal; 
	text-align: left; 
	margin: 0px 10px 0px 0px; 
	padding: 0px 0px 3px 10px;
	}

The above is causing a conflict and forcing the text to indent slightly


* Any more Tables vs CSS discussion will be deleted, its happened way to often and always turns into a slagging match*

exactiv

I'm looking at it atm and will post a fix asap.

Eoin

Ph3n0m wrote:

* Any more Tables vs CSS discussion will be deleted, its happened way to often and always turns into a slagging match*

Thank God for nipping that in the bud - good work Ph3n0m!

exactiv

I ran out of time. Sorry. If I get a chance I'll have a look at it tonight.

impr0v

When you and Ph3nom say 'a fix' do you mean juggling the css a bit until the indent disappears, or do you mean a hack to get around it?

Ph3n0m

well I meant a fix that would resolve the problem

impr0v

Finally sorted the %$&!ing thing. Turns out it was an IE bug called the 'Three Pixel Jog', and the fix is to apply a width to the content after the float.

Source