position: fixed -- IE7 -- sometimes works, sometimes doesn't

  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

I have two unrelated pages where I use "position: fixed" popups. Testing it in IE7, for one of these pages the "fixed" div does not work (which, according to all reports, fixed divs do not work in IE7, so that's what I expect).

But with the other page it works. In the same browser. I'm totally baffled. Both divs are hidden and declared right after the body tag with no content. Here's the css:
Code: [ Select ]
#popup { background-color: #000000; border: medium solid #ff8800; visibility: hidden;
    position: fixed; top: 20%; left: 20%; width: 60%; z-index:2;}

#SScountr { position: fixed; z-index: 2; left: 0%; width: auto; top: 0%; background: #000000;
    color: #aaaaaa; border: thin solid #aaaaaa; visibility: hidden; }
  1. #popup { background-color: #000000; border: medium solid #ff8800; visibility: hidden;
  2.     position: fixed; top: 20%; left: 20%; width: 60%; z-index:2;}
  3. #SScountr { position: fixed; z-index: 2; left: 0%; width: auto; top: 0%; background: #000000;
  4.     color: #aaaaaa; border: thin solid #aaaaaa; visibility: hidden; }

The first one works, the second one doesn't. I've tried tweaking the parameters to make them identical (as if they weren't close enough), same story.

I have an alternate event worked out for IE, so I'm just trying to decide whether to use it or not for both of them. Also: can anyone say anything about the fixed div support in IE8? I only have one windows install and I like to keep IE7 there for testing, so I can't install 8 as well, AFAIK.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • RockmanTV
  • Proficient
  • Proficient
  • RockmanTV
  • Posts: 348

Post 3+ Months Ago

Can you provide a link to the code you provided? I don't really know what you're trying to do, both of those divs are hidden so its hard to tell what's broken about the second one in IE7. What exactly are you trying to do on an event?

As for multiple installs of IE, there are standalone versions of Internet Explorer you can download or you can setup a virtual machine with the free VMWare Player that would allow you to have different versions of internet explorer in VMs all on the same box. Very handy for testing like this.
  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

RockmanTV wrote:
Can you provide a link to the code you provided? I don't really know what you're trying to do, both of those divs are hidden so its hard to tell


The reason they are initially hidden is that they pop up via onclick.

In any case, that is all of the css code. "fixed position" is a css trait. What else could possibly make a difference?

But here's the links. With the first one (an openGL tutorial), an IE work-around is in effect (even tho this is the one that worked :D -- but it's up for peer content review right now and I have to leave that in), so you'll have to use something else to see the "fixed div" version.

http://206.251.36.107/programming/vbointro.mhtml

The pop-up is for footnotes; the first one is in the first line after pictures ("Click on an image to view the source code").

The next one is a little more complicated, but this is the one that does not work. It involves the page links from a small scale search engine hit list. Here's the site-search engine page:

http://stallman.org/site-search/index.html

You'll have to do a search. From the list of pages returned, click thru to one. This does not return the actual page; instead, it returns a cgi version with anchors and highlighting added for the hits (there is a pop-up explaining this, and it's in development; it will make the page source very irritating to examine, nb). Close that gray pop-up and a yellow on black counter should appear upper right like in the screenshot below. IE screws this up in a number of ways, besides the fact that it is not fixed: it is not located correctly at 0, 0, and it uses the entire width of the page rather than just fitting the text (width: auto did not solve this, so if anyone knows a way to staighten that out, great).
Attachments:
ss2.jpg
  • RockmanTV
  • Proficient
  • Proficient
  • RockmanTV
  • Posts: 348

Post 3+ Months Ago

mk27 wrote:
The reason they are initially hidden is that they pop up via onclick.

In any case, that is all of the css code. "fixed position" is a css trait. What else could possibly make a difference?


I realize that you had some form of event making the divs visible and that position:fixed is a css trait, the problem is when I recreated your situation on the little code you provided I couldn't get anything that looked "broken". In the future, providing all relevant information helps solve problems faster!

And the doctype you're using is definitely relevant and definitely not something you included. Your doctype is set to
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">


When I recreated the div in notepad using the XHTML 1.0 Transitional doctype:
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#SScountr { position: fixed; z-index: 2; left: 0%; width: auto; top: 0%; background: #000000; color: #aaaaaa; border: thin solid #aaaaaa; visibility: hidden; }
.SScntr {
color:#FFFF00;
font-style:italic;
margin:2px;
}
</style>
</head>

<body>
<div id="SScountr" style="visibility: visible;">
<p class="SScntr">0/10</p>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. #SScountr { position: fixed; z-index: 2; left: 0%; width: auto; top: 0%; background: #000000; color: #aaaaaa; border: thin solid #aaaaaa; visibility: hidden; }
  8. .SScntr {
  9. color:#FFFF00;
  10. font-style:italic;
  11. margin:2px;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <div id="SScountr" style="visibility: visible;">
  17. <p class="SScntr">0/10</p>
  18. </div>
  19. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  20. </body>
  21. </html>


I got the results you were looking for.

Since you're using HTML I'd use the html 4.01 doctype. Simply change the first part of your page:
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
to
Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


Now I will warn you though, changing the doctype can affect other page elements, but if you use the code I put in notepad as a basis you'll see that that does indeed fix your problem. For future projects, if you're serious about web design, you should look into validating your web pages against web standards so that you have a better shot at a identical look cross browser.

Hopefully that helps.
  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

Bingo, man, thanks. I always use XHTML 1.0 which is why the first one worked.

The second one is not my site, I just did the search engine. But I can probably spoof the header for the marked up hits page, it will not matter if the page itself is uncompliant.

I think...actually it probably is 4.01 trans compliant.

Thanks again.
  • RockmanTV
  • Proficient
  • Proficient
  • RockmanTV
  • Posts: 348

Post 3+ Months Ago

No problem! Glad that fixed everything.
  • ArtphotoasiA
  • Graduate
  • Graduate
  • User avatar
  • Posts: 204
  • Loc: Italy

Post 3+ Months Ago

To me position: fixed works in Ie7 and Ie8 but forget with Ie6.. no problem with firefox opera crome etc
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

btw, great free program for testing in IE6, IE7, and IE8 is IETester.

http://www.my-debugbar.com/wiki/IETester/HomePage

Use that and you can still install IE8 on your computer if you want to. Even works with conditional comments and recreates all the rediculous bugs of IE6 and IE7. Pretty shnazzy proggy.
  • ArtphotoasiA
  • Graduate
  • Graduate
  • User avatar
  • Posts: 204
  • Loc: Italy

Post 3+ Months Ago

mindfullsilence wrote:
btw, great free program for testing in IE6, IE7, and IE8 is IETester.


Use that and you can still install IE8 on your computer if you want to. Even works with conditional comments and recreates all the rediculous bugs of IE6 and IE7. Pretty shnazzy proggy.



I use IETester also.............
very nice tool! I checked also with tredosoft the result are like IETester
  • tsgx
  • Born
  • Born
  • tsgx
  • Posts: 2

Post 3+ Months Ago

guys i got a question with regards to CSS and IE7.


With this set of codes:
//start of codes

<html>
<head>

<style type="text/css">
.center
{
position:fixed;
top:100px;
left:100px;
}
</style>
</head>

<body>
<div class="center">Center-aligned heading</div>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>


//end of codes

the question is, why does this not work in IE7? If you try the codes in IE7, it will not work. When I pasted it in FF, it works. But according to so many sources, it says that IE7 works with CSS. So what is the way to solve this problem? To make it work with IE7?
  • natas
  • PHP Ninja
  • Proficient
  • natas
  • Posts: 308
  • Loc: AFK

Post 3+ Months Ago

Did you read the above posts? Try to change your DOCTYPE to "transitional" as stated above. See if that fixes things. If not, reply here and I'll try to look into it.
  • tsgx
  • Born
  • Born
  • tsgx
  • Posts: 2

Post 3+ Months Ago

Yep read it. None of the DOCTYPE method i tried on the web worked with the above set of codes. If you use the compiler in w3schools, and you open the compiler in 2 different type of browsers, IE and FF, it will work on FF but not on IE.

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 83 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.