5 posts tagged “internet explorer”
Actually its not fixed yet. What i mean to say is:
- My entire system is a single page layout and hence the logical way of designing this is to layout my elements with position: fixed, i.e. fixed to the points on the screen and not the containing element (position: absolute).
- Actually *hehe* I set them to be position: absolute at first, but thats only because positioning them relative to the containing element gives the same effect as positioning relative to the screen.
- Alright, so turns out that IE7 behaves wierd when I use position: absolute (I can no longer remember why or how), so I changed them to position: fixed.
- But hohoho IE6 doesnt support position: fixed. So I had to change them to position: absolute. This is where the fun begins: In setting position:absolute, you cant set all four top, left, right, and bottom corner offsets. Only a pair (e.g. top, left) is allowed and then you have to set height and width.
- So now for IE6, I have to hack my way to make them display correctly with a combination of unmentionable paddings, margins, and my most poweful tool: position: relative (which can offset from top, left, right and bottom -- but its presence affects sibling elements unlike position: absolute or position: fixed)
Arrggh... Ive spent the past four hours fixing my standards-compliant layout to fit to IE6's needs. And from this ridiculous layout:
All I have now is just:
In other words, the top part is done. Im fixing the CSS by setting display: none to all major containers and then work my way down the DOM tree; slowly fixing each <div> one at a time.
Onwards!
So ive been trying to get hold of some working IE 5.5+ to test my system but lo and behold, despite many web statistics out there, everyone i know seems to be using IE 7. I can get access to IE6, but I will have to travel to the school library for that: work there, debug there, etc.
Anyway, I scoured the net for some way to run both side-by-side and found an msn article (can't remember where) that says that the best way is to run Ms Virtual PC 2007. So I did. Managed to install the free program, and ho ho ho. I have no idea why I assumed it came with Windows inside it. Anyway, so I had to reinstall windows XP SP2. That took ages to do. And then even after it started running, my installation ran like steamed rice (not engine). It took an hour or two just to load windows. And dunn get me started on trying to run IE. I even had to activate windows and that took very long as well. Not sure what I did wrong. Im running it on my Dell Inspiron 6000, so it shouldnt be that much of a problem. I noticed that Virtual PC 2007 didnt take that much memory, but the hd accesses are a lot and my CPU is always stuck at 90% to 100%.
Thats when I descovered Multiple IE *yay*
It installs fast, works almost great (I think). I ran IE6 and it opens the msn start page and shows some errors on the page. That can't be right, can it?
So Im trying to make my system (that works perfectly in Firefox and is almost perfect in Safari) to work for Internet Explorer (7 first and then Im going to tackle version 6).
And im facing with this wierd shrinking problem. I have some divs that are positioned absolute and restricted only by a top, left, right, bottom and min-width CSS properties. The thing is, sometimes, e.g. when I change the display/visibility property of some other div, the other divs decide to shrink to min-width. Huh???
So Im preparing my arsenal of books to refer to. The internet hasnt been very helpful cuz I probably cant really pinpoint the exact problem. I tried isolating just an absolute div and another that I hide/show and the problem is not reproduced.
Alright, one from my arsenal of CSS resources should have the answer:
I hope.
Update: Turns out that the fix was simple. I have been using "absolute" instead of "fixed". A fixed position made more sense because thats what I wanted in the first place. No idea why i used "absolute". Anyway, something else I didnt know when using an absolute position (from this book):
You should specify only a left or right offset and a top or bottom offset. If you specify both left and right or both top and bottom, one must be the absolute negative of the other (for example, top:3px; bottom:3px;). If you have top and bottom or left and right that do not have absolute negative values of each other, the right or bottom offset will be ignored.
Honestly, I think the next time I do anything in javascript, ill start by writing a class. Scoping is very important. Since goodness knows when, Ive always started writing programs in javascript as functions and them any variable is defined outside of it. And thats how it was for my mockup. So one year of that, and what I have is 4000 lines of hacking and global variables. Im actually quite surprised how I managed to make things still work. Lucky? Probably not. Maybe Im reallly careful in using my variables. Then again, I owe many things to the great debugging tools that i have (for Firefox).
Anyway, lesson of the day: to declare a local variable in a function in javascript, don't forget to precede the variable name with: var
Update: Apparently, Internet Explorer not only bugs out, it actually throws a seemingly unrelated runtime error saying that the Object doesn't support this property or method whenever I forget to include the 'var' keyword, e.g.:
Obviously, I thought the error meant that my object (node) doesn't support the getElementsByTagName method, which is ridiculous. I have no idea how I managed to think to see what happens if I added the 'var' keyword. Maybe I'm missing something here...tabs = document.getElementById('tabs').getElementsByTagName("li");