Page 1 of 1
Internet Explorer not recognising width property?
Posted: Mon Jul 31, 2006 12:12 pm
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.
Posted: Mon Jul 31, 2006 12:37 pm
by Oren
Internet Explorer doesn't understand the min-width command.
Posted: Mon Jul 31, 2006 12:42 pm
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?
Posted: Mon Jul 31, 2006 1:04 pm
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
Posted: Mon Jul 31, 2006 3:23 pm
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.
Posted: Mon Jul 31, 2006 3:57 pm
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)
Posted: Mon Jul 31, 2006 4:19 pm
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
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
Posted: Mon Jul 31, 2006 4:44 pm
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.
Posted: Tue Aug 01, 2006 7:41 am
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;
}
Posted: Tue Aug 01, 2006 8:40 am
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
P.S To those of you who don't know:
#def actually means
#ddeeff.
Posted: Wed Aug 02, 2006 10:35 am
by jayshields
Thanks for the tips, although I don't agree with shorthand RGB codes

Posted: Wed Aug 02, 2006 11:00 am
by Oren
jayshields wrote:Thanks for the tips, although I don't agree with shorthand RGB codes

Reason?
Posted: Wed Aug 02, 2006 11:43 am
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

Posted: Wed Aug 02, 2006 11:48 am
by Oren
I don't agree with you, but it's up to you... It's your choice.