|Box Model And IE 7 |
Behaviours are different in IE 6 and IE 7
| 12:51 pm on Nov 23, 2006 (gmt 0)|
I work in an important owned-state company in Spain (I am spanish, in fact, so I am sorry if my English is not very well...). The thing is that I am working in the enterprise's website. It's made with HTML and CSS and after some months we managed that Internet Explorer 6 showed just the same as Firefox. We used a hack which consists in redefine widths for IE6 by adding "_". For example...
width: 85%; (This would be OK in both of them)
_width: 90%; (This would only be interpreted by IE)
We will launch our new website next month, more or less and now we have just attended to the appearing of IE7, which is supposed to solve some of the known bugs in 6. This is OK, but this morning we tried our new website in Internet Explorer 7 and we observed that it really solve some bugs (one, at least), because it interpreted the widths correctly... correctly except for a detail... It also "reads" the redefinitions for IE 6... I think it will be more understandable if I show you an example:
width: 85%; (Correct width)
_width: 90%; (Redefinition in order to IE 6 shows the same as Firefox)
Internet Explorer 7 is able to interpret correctly the first one (85%), so the bug wouldn't exists. The problem is that It is also capable of reading the hack used for IE 6. What happens then? By now, if the website is shown by IE6 or Firefox, it is OK. On the contrary, if we see it in IE7, the contents are untidy due to the fact that the widths are interpreted correctly but it finally "reads" the hack.
I would be grateful if some of you could help me with this. I mean, I wonder if it is possible to "order" IE 7 to interprete the same widths as Firefox. I guess that another way to solve it would be to create a CSS only for IE7 and link it the last one but... ¿Is that possible?
Thank you very much.
| 2:32 pm on Nov 23, 2006 (gmt 0)|
Good english by the way. I personally, and many I talk to try to steer clear of hacks, although many have become the norm, I use seperate style sheets to deal with browser (especially IE) rencering problems, as with me I have a seperate style sheet that I use to make adjustments to IE6 and another for adjustments in IE7 this is done by:
<!--[if IE6]><link rel="stylesheet" type="text/css" media="screen" href="ie6.css" /><![endif]-->
<!--[if lte IE7]><link rel="stylesheet" type="text/css" media="screen" href="ie7.css" /><![endif]-->
then i create a style sheet for each, as named above and make adjustments so that specific browser picks up the change.
hope this helps.
| 2:46 pm on Nov 23, 2006 (gmt 0)|
Thank you very much!
I found your reply very useful and I am going to try it right now. After reading all this morning I finally found this solution... I think it is called conditionals comments, isn't it? Nor do we like using hacks. We think it is much more sofisticated and clear other methods, just like this. Anyway, I found the hack and, in case it could be useful for someone I show it, although I am sure you may be know it. As I explained before (in my first comment), we used _width in order to IE6 interpreted things properly. This is not valid for IE7, but if you don't write _width, but *width, the hack will be correct in both IE6 and IE7. The problem is that it won't validate. I have not tried it yet, but I prefer conditionals. I think it can be much more tidy and if one day we have to change something, it will be easier to find what we want to change.
Again, thank you very much for your help!
[edited by: SuzyUK at 5:40 pm (utc) on Mar. 15, 2007]
[edit reason] Please no URL's, thanks. See TOS #13 [WebmasterWorld.com] [/edit]
| 2:56 pm on Nov 23, 2006 (gmt 0)|
Welcome to WebmasterWorld apazpoz!
Perhaps the most important question is: why are you experiencing problems with widths in IE6? You may be using the wrong doctype which is pushing IE6 into quirks mode rather than standards-compliance mode, either because you have an incomplete HTML doctype or because you have an XML prolog before an XHTML doctype.
See FAQ: Choosing the best doctype for your site [webmasterworld.com] for more information.
| 3:03 pm on Nov 23, 2006 (gmt 0)|
Hy, and thank you!
Well, I think that the doctype is correct because we have a group of people in charge of accesibility, who told us we had been using the wrong doctype and gave as a document with the correct one. Our document is HTML. In fact, our doctype is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Anyway, thank you for your reply and I will tell my boss about your answer.
| 4:18 pm on Nov 23, 2006 (gmt 0)|
It's also important to make sure that's you've got nothing apart from white-space above your DOCTYPE, as a comment or XML statement (or anything really) will put IE6 into quirksmode.
| 4:52 pm on Nov 23, 2006 (gmt 0)|
There is absolute nothing above my doctype, not even white space. It is at the top of the document. Is that relevant?I mean, should have be a line above my doctype as a white space?
| 5:23 pm on Nov 23, 2006 (gmt 0)|
It sounds like you have things set up correctly with the right doctype and no white-space. In that case, I'm surprised that IE6 is having problems with declared widths, as most such problems are fixed by using standards-compliance mode.
Have you got a short example that you could post here (no links please, just the relevant HTML and CSS) so we can understand the underlying issue?
| 5:59 pm on Nov 23, 2006 (gmt 0)|
apazpoz, great question. I've had this exact issue myself.
Great answers everyone, I've learned something new today.
|Paul Roberts UK|
| 9:46 am on Nov 24, 2006 (gmt 0)|
just a note on the conditional comments, I have been using these for quite a while now, but found something odd happening yesterday...(syntax related)..
when writing the conditional comment, there must be a space in between IE and the version number...
<link rel="stylesheet" type="text/css" href="/css/index_ie.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/css/index_ie.css" />
i found yesterday that IE6 did not call the different stylesheet using the above example, yet when changed to the below it all started working.
as a separate pointer, make sure your main stylesheet is the first one that is loaded (Firefox), then followed by the above conditional comments for the IE stylesheet. as the last stylesheet loaded is the one used, and Firefox doesn't understand conditional comments...this is the only way to make it work properly.
| 10:24 am on Nov 24, 2006 (gmt 0)|
I haven't still tried conditionals because my boss asked me to use the solution with the *_, mainly because at first is faster and we could develope the new stylesheet for IE in these days, so I have been working in other things.
About posting a short example of my code... I think it would be difficult to understand, because it contents around 700 lines in HTML's file and almost 1200 in CSS's. What part of this code do you think you need?
Apart from that, Thank you very much everyone. I find this forum very useful, you are very proffesional and it is clear that you know what you are talking about (the last one is an Spanish expression, I am not sure that you know what I mean! hehe)
About the need of a white space between IE and the number in conditionals, thank you very much, it is very important to know these things...
I keep on working on it!
| 1:23 pm on Nov 24, 2006 (gmt 0)|
I've tried the conditionals. Actually, I first tried "*", bur it didn't work, so I decided try conditionals. In order to verify that It worked I created a new stylesheet where I wrote all the "redefinitions" I had used in the general stylesheet. I named the new sheet as ie6.css and I used the conditional. I erased the "redefinitions" from the first stylesheet and... voilà! It works... It is wonderful! In addition, some problems in IE7 have been solved, but there are still several things to revolve... I think that what I should do now is creating a new stylesheet (ie7.css) and pasting in it all my code. Then I will link with the conditional (if IE 7) and I will modificate values untill the view is correct in all browsers... (what an utopy!)
Now I have another problem... If I have IE7 installed on my PC, I can't see how the page is shown by IE6, so I have been looking for a way to have both of them installed. I found something and now I have succeded in having them installed in a PC but I work with MAC OSX and I can't work because I can't install IE and, even if I could install it, IE versions for MAC are different from versions for PC. I guess that the solution is installing an emulator but I'm not sure if it would be the same...
Thanks a lot!