IE 6 and CSS question

impr0v · 05-01-2005 11:37PM #1

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 · 06-01-2005 12:06AM

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 · 06-01-2005 01:01AM

Yes, do that.

stepheno · 06-01-2005 01:20AM

impr0v wrote:

this URL

Finally a nice County Council website (or division thereof)

Great work.

impr0v · 06-01-2005 10:05AM

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 · 06-01-2005 11:51AM

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 · 06-01-2005 01:22PM

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 · 06-01-2005 05:02PM

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 · 06-01-2005 05:24PM

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 · 06-01-2005 05:33PM

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

impr0v · 02-03-2005 01:52PM

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 · 02-03-2005 01:59PM

any chance of a screenshot?

impr0v · 02-03-2005 02:16PM

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

exactiv · 02-03-2005 02:35PM

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

impr0v · 02-03-2005 02:39PM

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

Eoin · 02-03-2005 03:25PM

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 · 02-03-2005 03:28PM

I'm not bringing it up! I swear!

I think the two can be used alongside each other.

Ph3n0m · 02-03-2005 03:29PM

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 · 02-03-2005 03:44PM

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

Eoin · 02-03-2005 03:48PM

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 · 02-03-2005 04:00PM

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

impr0v · 03-03-2005 09:58AM

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 · 03-03-2005 10:25AM

well I meant a fix that would resolve the problem

impr0v · 04-03-2005 10:43AM

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

IE 6 and CSS question

Comments