Internet Explorer not recognising width property?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Internet Explorer not recognising width property?

Post by jayshields »

Helloooo.

In Firefox it looks fine, but in IE the left column isn't wide enough. I think it's shrinking to the width of the longest line, even though I have a width set in pixels (to 150px).

You can see the website here http://www.jay-designs.co.uk/iss

I've tried placing a 150px x 1px image in the navblocks (navBlock) and it stretches the column out properly but my h3's don't stretch with it (even when set to 100% width). When the 150px x 1px image is placed in the navLeft div it doesn't have any effect on the block widths.

Is there a workaround for this? Or am I missing something?

Thanks.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

Internet Explorer doesn't understand the min-width command.
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post by jayshields »

I'm not using min-width, but if it's related to that, is there any way I can make it appear the same in both browsers?
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

I've just checked with IE too and it looks almost the same as with Firefox.
I thought the cell you were talking about was the one where the text says:

Welcome to the new International Satellite Supplies website!

Please browse our products by using the navigation bar on the left.


Am I right or not?

Anyway, check out this: viewtopic.php?t=51270#280100
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post by jayshields »

I'm talking about the 2 boxes on the left hand side. The gap between them and the main (content) box changes between IE and FF.

In FF it is the correct size (width 150px), whereas in IE it's too thin, and I don't know why it's doing that.

I'm not using min-width, just width.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

A few errors:

Code: Select all

.navLeft {
	clear: left;
	float: left;
	left: 20px;
	width: 150px;
}
.navBlock {
	width: 150px;
	border: 1px solid #CCCCCC;
	background-color: white;
	padding: 10px;
	margin: 0px 0px 16px 0px;
}
Those figures don't add up. navLeft is 150px. .navBlock is 150+1+1+10+10px .navBlock can never fit in .navLeft.

Also, what's left:20px doing in .navLeft?

I would remove the width from navBlock. See what that does. Or give .navleft an appropriate width (150+padding)
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

Oh, after reading matthijs's post and re-checking the site with IE and Firefox I finally see what you were talking about :P
matthijs is right, you see, for Firefox:

Code: Select all

.navBlock {
   width: 150px;
   border: 1px solid #CCCCCC;
   background-color: white;
   padding: 10px;
   margin: 0px 0px 16px 0px;
}
Means a box with a total width of 172px (150px width + 1px for left border + 1px for right border + 10px for left padding + 10px for right padding) - which is how it should be, but IE understands it as: a 150px box and therefore, it makes the box like this:
128px box + 1px for left border + 1px for right border + 10px for left padding + 10px for right padding - which gives you a 150px box.

IE is doing it the wrong way instead of how it should be done. I'm almost sure this had been fixed in IE7.

Edit: For more information about this: http://www.webcredible.co.uk/user-frien ... orer.shtml
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

One way to make sure you don't run into box-model trouble is NOT to declare everything related to it on each box. So don't apply width, padding and border to each box. Instead, add width to the container box and margin and border to the elements inside it. In your case navBlock doesn't need a width, because the width is already defined by the parent element. Navblock will expand to 100% of it's parent anyway.
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post by jayshields »

Thanks alot guys, the solution was this:

Code: Select all

.navLeft {
	clear: left;
	float: left;
	left: 20px;
	width: 172px;
}

.navBlock {
	border: 1px solid #CCCCCC;
	background-color: white;
	padding: 10px;
	margin: 0px 0px 16px 0px;
}
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

I suggest you to change this:

Code: Select all

.navBlock {
	border: 1px solid #CCCCCC;
	background-color: white;
	padding: 10px;
	margin: 0px 0px 16px 0px;
}
Into this:

Code: Select all

.navBlock {
	border: 1px solid #CCCCCC;
	background: #fff;
	padding: 10px;
	margin: 0px 0px 16px 0px;
}
What I've done:

1. Changed 'background-color' to 'background' - Saves a few bits in the size of the CSS file, and still gives the same result as 'background-color'.
2. Got rid from 'white' - Some poor/old/{I don't know what else} browsers may not understand what it means and therefore ignore it.
3. Used '#fff' and not '#ffffff' - Again, saves few bits and yet gives us the same result.

So 'background-color: white' (23 characters) becomes 'background: #fff' (16 characters), we save: 7 characters, or 56 bits in file size.
56 bits here, 56 bits there... That way, we end up with a much smaller file size, and in return we get a site which loads much faster :wink:

P.S To those of you who don't know: #def actually means #ddeeff.
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post by jayshields »

Thanks for the tips, although I don't agree with shorthand RGB codes :)
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

jayshields wrote:Thanks for the tips, although I don't agree with shorthand RGB codes :)
Reason?
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post by jayshields »

lol, just preference really

Taking 3 characters out of a conventionally 6 character string seems overkill if you're just doing it to strip 3 bits from a filesize. Althought if you look at it another way: you've got over a thousand colours defined in RGB which could be cut to 3 chars instead of 6, it makes a small loading difference.

Besides, using #fff is probably as likely to cause problems in old/crap browsers as using white is. Although I have no evidence :(
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

I don't agree with you, but it's up to you... It's your choice.
Post Reply