New IE7 Broke CSS Width.
Technology, posted: 9-Nov-2006 07:38
This is rather interesting, while some web developers have welcomed IE7 with most of its effort stepping up its CSS 2.1 supports, however it did so along the way by breaking CSS's width property.
How so you asked? Well if you have IE7 and know a bit of HTML/CSS, try this:
With any HTML element, or just try DIV, then apply "width:100%;" as its CSS style and see the result.
What happened is that, when width:100%; is present, IE7 will "shrink" the box size down to its content size. Not exactly 100% wide is it?
How to fix it? Well, simplest is use width:auto; (depending on your design too, however it is safe for majority of the design/usage).
If you found yourself that you need width:100% (for example when using with float:left/right together with width:100% on Opera*, you can always use the "highly recommended" conditional comment which fortunately only IE will recognise.
Other related posts:
Telecom XT Pricing Plans Announced
Vista virtualisation ban lifted
64-bit Windows support in Boot Camp
How so you asked? Well if you have IE7 and know a bit of HTML/CSS, try this:
With any HTML element, or just try DIV, then apply "width:100%;" as its CSS style and see the result.
What happened is that, when width:100%; is present, IE7 will "shrink" the box size down to its content size. Not exactly 100% wide is it?
How to fix it? Well, simplest is use width:auto; (depending on your design too, however it is safe for majority of the design/usage).
If you found yourself that you need width:100% (for example when using with float:left/right together with width:100% on Opera*, you can always use the "highly recommended" conditional comment which fortunately only IE will recognise.
Tag(s):
Other related posts:
Telecom XT Pricing Plans Announced
Vista virtualisation ban lifted
64-bit Windows support in Boot Camp
Comment by Scott Cleland, on 24-Nov-2011 09:30 , user id: )
I had this problem on a site I was working on where the client wasnt able to upgrade from IE7. I had to set "left:0;" in order for it to work.
Add a comment
Please note: comments that are inappropriate or promotional in nature will be deleted.
E-mail addresses are not displayed, but you must enter a valid e-mail address to confirm your comments.
Are you a registered Geekzone user? Login to have the fields below automatically filled in for you and to enable links in comments.
If you have (or qualify to have) a Geekzone Blog then your comment will be automatically confirmed and shown in this blog post.
Comment by Kory Hoopes, on 10-Nov-2006 17:53 , user id: )
Why can't they just get it right? Must they have something wrong to prove they don't have to bend to the established standards? IE7 is better than IE6, but I'll stick with my Firefox.