Solved

sticky layer not working in IE

Posted on 2006-11-20
34
277 Views
Last Modified: 2008-02-01
im developing a website for a family member and in FF it all works fine, but in IE7 (dont have IE6)  my menu moves if you scroller down/up.  i want it to stay in same place like it does in FF... p.s NS is fine too....

http://www.lisafinlaymakeupartist.com/
0
Comment
Question by:ellandrd
  • 19
  • 12
  • 2
  • +1
34 Comments
 
LVL 30

Expert Comment

by:Steggs
ID: 17982949
Greetings ellandrd,

link doesnt work

Regards
0
 
LVL 30

Expert Comment

by:Steggs
ID: 17982982
O yes it does. Is there a script for no right click running on your site?

Are you using position:fixed?
0
 
LVL 19

Expert Comment

by:billmercer
ID: 17983447
Yeah, the whole disabling right-click thing is very 1990s. It's impossible to protect your source code from crooks this way, all it does is annoy legitimate users.
I also noticed that this site is sending sniffing the browser agent and sending different content depending on what the user agent string says. That might have something to do with your problem.

Try looking at the source code in  /user/htdocs/classes/browser.class.php, somewhere around line 34, I suspect that's where the browser detection is.
 





0
 
LVL 3

Expert Comment

by:dragoncc
ID: 17984365
Try adding these to your css script under the menu:
 position: absolute; left: 0px; top: 0px;
and add another property:
div > div#menu { position: fixed; }
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17985631
>>Is there a script for no right click running on your site?

yes, lisa has requested no right.  i have told her the in's and out's, good points and bad points and she still wants it.  basically she dont want people right clicking on here images and doing a "save as" and there is other reasons too...

>>Are you using position:fixed?

no.  can you not view source code from toolbar - view > page source... ;-0


>>Yeah, the whole disabling right-click thing is very 1990s. It's impossible to protect your source code from crooks this way, all it does is annoy legitimate users.

OK guys, please the ignore the right-click thing for a minute.  i know its annoying but im not actually worried about it at the moment - im just trying to get my menu to stay in same place in a IE browser...

>>I also noticed that this site is sending sniffing the browser agent and sending different content depending on what the user agent string says. That might have something to do with your problem.

why do you think this?  it shouldnt have any cause to the issue.  the browser class is just some PHP to detect browser agent and load the correct style sheet :

firefox/netscape - mozilla.css
ie6 - ie6.css
ie7 - ie7.css

this script works very well and has never caused any issues before in any of my sites which is totaling around 24 now that use that PHP class...

>>dragoncc

i will give it a try

Ellandrd
0
 
LVL 19

Expert Comment

by:billmercer
ID: 17988000
> why do you think this?  it shouldnt have any cause to the issue.  the browser class is just some
> PHP to detect browser agent and load the correct style sheet

Because if you try looking at the site in the Opera browser, or changing your user agent string to include the word Opera anywhere in it, the entire site is utterly broken. If, however, you view the site in Opera, but change the user agent string to something else, the site renders just fine. That indicates your browser sniffer is probably ancient and out of date.

Have you tried viewing the site in IE7 using the other style sheets?



0
 
LVL 16

Author Comment

by:ellandrd
ID: 17988075
if i try view the site in opera the user will get a Opera isnt supported HTML page.

and so far the PHP script has never failed for me.

>>site in ie7...

no not yet.  1 step at a time - i code to FF first, then IE browsers. and last opera....

0
 
LVL 19

Expert Comment

by:billmercer
ID: 17988240
>if i try view the site in opera the user will get a Opera isnt supported HTML page.
No, they get a 404 error, because there is no Opera.htm file located in each directory.

Opera renders the page just fine as it is. You don't NEED to make a special page for it. Your browser sniffer doesn't even try to detect a version, but simply excludes ALL agents with the word Opera anywhere in the string. Many years ago, Opera didn't support CSS. But that was last century.

>no not yet.  1 step at a time - i code to FF first, then IE browsers. and last opera...

Instead of coding specific to separate web browsers, why not just aim for W3C standards? If you do that, your page will probably render just fine in ANY mainstream browser, and be legible even in ancient browsers.
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17989699
ok since we have gone off topic, the menu still isnt fixed to top left in IE.

i have removed the no right click so you can view my source code...
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17997629
so nobody wants to help then as my site isnt coded for opera is that it?
0
 
LVL 19

Assisted Solution

by:billmercer
billmercer earned 500 total points
ID: 17998546
> so nobody wants to help then as my site isnt coded for opera is that it?

Nobody said anything like that.

The reason I tried viewing your site with Opera was so I could quickly and easily change
the browser agent string to see what effect it had on the page rendering. And I found that
it had a significant effect, which means your site is sending out different content depending
on what browser it detects. You confirmed that yourself, since you say your PHP returns
different css depending on the browser.

That's why I asked if you have tried viewing the site in IE7, but using one of your other style sheets instead of your IE7 specific one. Did you give that a try? Did you try dragoncc's suggestion?

BTW, my suggestion about starting to design pages aimed at W3C standards rather than browser-specific content  is also the recommendation of IE7's developers.
 http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/cols/dnexpie/ie7_css_compat.asp
IE7




0
 
LVL 19

Accepted Solution

by:
billmercer earned 500 total points
ID: 17998563
Here's an article on creating fixed-position elements in IE that might be helpful
  http://www.howtocreate.co.uk/fixedPosition.html
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17998671
>>which means your site is sending out different content depending
on what browser it detects.

i only got 1 version of each page and ive got 2 version of CSS now:

mozilla.css is used for both FF and NS
msie.css is used all versions of IE

at the moment, opera isnt supported - maybe later in the week i will create another CSS file for opera...

i have also tried all the suggestion made by other experts and still the menu moves when you scroll.

all my pages including the 2 CSS files all validate as w3c.  check for your self...

i will give that site a read over, but in the mean time can you take another look at my site please...
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17998712
just reading over document and ive tried fixed, static and absolute and still my mneu moves...

also the site quotes this statement:

Note that IE 7 from beta 2 upwards does support position: fixed;
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17998750
ok ive viewed that site in IE7 and the layer stay fixed in the examples, but i cant manage to apply the same CSS to my divs and be successfull...

can you help me please.
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17998808
would having my CSS in a external file be causing an issue?
0
 
LVL 19

Expert Comment

by:billmercer
ID: 18013222
I've been on vacation. Were you finally able to resolve your problem, or are you still having issues?

> msie.css is used all versions of IE
This could be part of the problem. Some CSS tricks and workarounds designed for IE6 do not work with IE7.
That's why I suggested trying using the mozilla.css file with IE7, to see if that works.

>ok ive viewed that site in IE7 and the layer stay fixed in the examples, but i cant manage to apply the same
>CSS to my divs and be successfull...

>would having my CSS in a external file be causing an issue?
Not that by itself. But if your PHP is telling the browser to use the WRONG CSS file, that could cause problems.

0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 16

Author Comment

by:ellandrd
ID: 18013829
>>I've been on vacation. Were you finally able to resolve your problem, or are you still having issues?

still having issues...

look at the site and you'll see that the menu still moves - i was about to give up and getting it working on IE... but if you can still help me, please do.  i will open another question for more as a token of thank you for providing more help...  
0
 
LVL 19

Expert Comment

by:billmercer
ID: 18030606
Try changing your doctype to HTML 4.01 Strict, and see what happens.
0
 
LVL 19

Expert Comment

by:billmercer
ID: 18031205
OK, your current page's doctype does not include the DTD, and I think that's causing your problem. I tried adding in the appropriate dtd to a local copy of your file, and the menu stayed still when scrolling in IE7. Strict versus transitional doesn't seem to matter, as long as a DTD is specified, it works.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

I also noticed that you've specified the namespace as xhtml, not sure if that's correct, since you're not using really using XHTML, but I don't think it is contributing to this specific problem.

You might want to try running TIDY on your pages, and see what else it complains about.
http://tidy.sourceforge.net/



0
 
LVL 16

Author Comment

by:ellandrd
ID: 18037692
>>your current page's doctype does not include the DTD


the doctype i use is this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

does this not include the DTD?

>>I also noticed that you've specified the namespace as xhtml, not sure if that's correct, since you're not using really using XHTML, but I don't think it is contributing to this specific problem.

what do you mean your not sure if this is correct?  i got this doctype from w3.org site.  how can you tell im not using XHTML?
0
 
LVL 16

Author Comment

by:ellandrd
ID: 18037703
>>You might want to try running TIDY on your pages, and see what else it complains about.

all my pages are XHTML strict validate and i have validated all my CSS too....
0
 
LVL 16

Author Comment

by:ellandrd
ID: 18037712
0
 
LVL 19

Expert Comment

by:billmercer
ID: 18045284
>the doctype i use is this:
>
><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" >"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Hmm, I'm looking at your source from last week, and it showed this:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Did you make changes since you originally posted?


0
 
LVL 16

Author Comment

by:ellandrd
ID: 18045402
from last week?  what date as the doctype hasnt changed since to my knowledge!!
0
 
LVL 16

Author Comment

by:ellandrd
ID: 18045421
sorry hit enter by mistake.  since your last post i have changed the doctype to :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

as you siad it worked, but it still dont work for me... in IE - FF is still fine when using this doctype...
0
 
LVL 16

Author Comment

by:ellandrd
ID: 18045975
ok something else in my page must be causing issues.  i created a dummy page with the doctype transitional.. and set the menu to fix top left and have content scroll and it worked in both IE 6 & 7, FF & NS.... and it was the same CSS i used from the actual live site...

im going to rewrite the page again and see what is causing the menu to scroller when i contains data...
0
 
LVL 19

Expert Comment

by:billmercer
ID: 18046179
You might be seeing the new page with an old cached copy of the CSS file.
Try clearing your IE cache and history, and you may want to change your IE cache settings to check for a new version every time you visit the site.
0
 
LVL 16

Author Comment

by:ellandrd
ID: 18046234
Mmmm ok.. will do this before i start again...
0
 
LVL 16

Author Comment

by:ellandrd
ID: 18046246
nope! - cleared the complete lot and still moves when i scroll....
0
 
LVL 16

Author Comment

by:ellandrd
ID: 18046709
fixed it - you wont believe this, but when i removed my comments:

designed and developed by sean delaney...

it worked!  i cannot believe this was the cause of all my stress ands anger over the last few days... because i use the same idea on another site with same doctype and it worked but didnt have the comments...

thanks for all the help over the weeks...

sean
0
 
LVL 19

Expert Comment

by:billmercer
ID: 18049218
Interesting, my guess is the browser saw your comment block with a URL in it and tried to interpret it as some sort of weird doctype or something.

I found a couple of references that say XHTML requires the doctype to be the first element, but I couldn't find anything to corroborate this in the W3C spec. I did find that the W3C specifically mentions that it's ok for a comment to appear before the DOCTYPE declaration in HTML 4.
  http://www.w3.org/TR/html4/struct/global.html

So since IE doesn't handle that correctly, it sounds like a bug in IE. Any way, if you just move your comment block down below the doctype, it should work.


0
 
LVL 16

Author Comment

by:ellandrd
ID: 18051976
thank you once again for your help.
0
 
LVL 19

Expert Comment

by:billmercer
ID: 18055464
Good luck with the site!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now