Internet Explorer not recognising width property?
Moderator: General Moderators
- jayshields
- DevNet Resident
- Posts: 1912
- Joined: Mon Aug 22, 2005 12:11 pm
- Location: Leeds/Manchester, England
Internet Explorer not recognising width property?
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.
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.
- jayshields
- DevNet Resident
- Posts: 1912
- Joined: Mon Aug 22, 2005 12:11 pm
- Location: Leeds/Manchester, England
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
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
- jayshields
- DevNet Resident
- Posts: 1912
- Joined: Mon Aug 22, 2005 12:11 pm
- Location: Leeds/Manchester, England
A few errors:
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)
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;
}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)
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:
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 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;
}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
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.
- jayshields
- DevNet Resident
- Posts: 1912
- Joined: Mon Aug 22, 2005 12:11 pm
- Location: Leeds/Manchester, England
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;
}
I suggest you to change this:
Into this:
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.
Code: Select all
.navBlock {
border: 1px solid #CCCCCC;
background-color: white;
padding: 10px;
margin: 0px 0px 16px 0px;
}Code: Select all
.navBlock {
border: 1px solid #CCCCCC;
background: #fff;
padding: 10px;
margin: 0px 0px 16px 0px;
}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.
- jayshields
- DevNet Resident
- Posts: 1912
- Joined: Mon Aug 22, 2005 12:11 pm
- Location: Leeds/Manchester, England
- jayshields
- DevNet Resident
- Posts: 1912
- Joined: Mon Aug 22, 2005 12:11 pm
- Location: Leeds/Manchester, England
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
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