General Question

klaas4's avatar

Absolute/Fixed div's in IE6?

Asked by klaas4 (2186points) May 9th, 2008

Hello,

I’m busy with a site and that works, except for the part that some people using IE6 are also going to use the site, but then the absolute and fixed divs don’t work.
Screenshot (via browsershots)

Can someone explain how you can position divs absolute, but also in IE6. I found, I tried, nothing worked.

For source: rightclick and then view source.
Link to CSS: http://ole.daveyyzermans.nl/css/style.css

Thanks, Davey.

Observing members: 0 Composing members: 0

19 Answers

xyzzy's avatar

position ‘fixed’ is not supported at all in IE6. Here is a javascript library that will fake it without any work on your part.

http://dean.edwards.name/IE7/

absolute positioning works in IE6 as far as I know. Maybe someone else will have some insight.

Update: It appears the project has moved to here: http://code.google.com/p/ie7-js/

(see http://dean.edwards.name/weblog/2008/01/ie7–2/ )

robmandu's avatar

When you’re done with this problem, you can have fun checking out the Homer Simpson CSS.

From the original author:

It is not an image in the normal sense, it was instead painstakingly created using CSS. CSS (cascade style sheets) is a language to define a website visual representation, but it is not intended to create images. [The face] was created by placing hundreds of characters (numbers/letters/symbols) of different sizes and colors in specific positions on the page. Too easily see this, click somewhere in the middle of his face and slowly drag your mouse outward. You should see your mouse highlight some of the text!

Since this is an unusual and rather avant-garde method for displaying images, there are no tools and the process is hard, slow and complex to make it work well in different browsers.

klaas4's avatar

Yay! It worked. It is kinda sluggish, but hey, they should update their browser!

That Homer Simpson CSS is indeed cool. It must have been a pain in the *ss making that.

robmandu's avatar

@klaas, now you just gotta get your div to sit properly in Safari.

Hmmm, actually, it looks the same for me in both IE7 and Safari… the line of the div is at the bottom of the window, but the text contained isn’t visible (looks like it’s fallen off below the window frame).

klaas4's avatar

Yeah maybe you saw me making some modifications, because this isn’t compatible with Bernie’s Better Animator Class, which I use to animate some things on the page. I had to use PHP code to hide some functions of the site to IE6-users, so maybe you saw that. :)

It’s all okay now, thanks to you all.

If anyone would like give a review on the design, please do! But make sure you’re using IE < 6, Safari, Firefox or Opera.

klaas4's avatar

@rob, What exactly do you mean?

jrpowell's avatar

@klaas4
This is in Firefox on OS X. Notice the footer and the lack of scroll bar.
http://www.indielyrics.info/klass4.png

edit.. You have to hover to see it.

klaas4's avatar

There shouldn’t be a scrollbar, because that’s all the content there is. Go to the info-page and you will see a scrollbar.

The footer slides out when you hover over it.

klaas4's avatar

Can you maybe say which error was found by Firefox?

jrpowell's avatar

Now it isn’t giving an error. Are you playing with it right now?

And that is the Firebug extension.

klaas4's avatar

Oh, the function StartClock is only on 1 page, not in the index, but I have onload=“StartClock24()” in all my pages.

It should be gone now…

jrpowell's avatar

The error is gone now.

klaas4's avatar

Is there some plugin like that for Safari too?

jrpowell's avatar

Not that I know of. Firebug is awesome and one of the only reasons I continue to use Firefox. If Firebug and Google Browser Sync worked in Safari I would switch.

klaas4's avatar

Hmmm, I found this: http://www.hicksdesign.co.uk/journal/web-development-with-safari.
“defaults write com.apple.Safari WebKitDeveloperExtras -bool true” in terminal and then you have some tools…

richardhenry's avatar

@klass4: Don’t do that, the article no longer applies. Click on “Safari” in the menu bar, then “Preferences”, then “Advanced”, and check “Show develop menu in menu bar”. Good luck.

klaas4's avatar

Thanks, that comes in handy!

richardhenry's avatar

Also, right click on a page element and choose “Inspect Element” while the develop menu is active. Brings up a neat console with a box model description, a list of applied styles, a network console and more. Very useful.

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther