Jump to content

IE Not Displaying Menu Background Correctly


username132

Recommended Posts

In order to prevent the footer on my website from crashing into the submenu on the left hand side, I had to change to float positioning (and clear: both) instead of absolute positioning. Although that works fine in firefox, in IE the submenus stop changing their background colour when selected, even though they still change the text colour. This leads to text on the same colour background which is of course undesirable.Compare the functional http://www.dur.ac.uk/stephenson.jcr (no float and therefore the footer crashes into the menus) with the slightly-less-functional http://username132.tasminslair.com/website3/pages/ (with float so crashing footer problem avoided) in Internet Explorer. Both versions appear fine in Firefox, with respect to this particular issue.When a menu item is selected, the CSS at http://dur.ac.uk/stephenson.jcr/public_htm...esheets/all.css (and http://dur.ac.uk/stephenson.jcr/public_htm...iespecific.css) vs http://username132.tasminslair.com/website...esheets/all.css (and http://username132.tasminslair.com/website...iespecific.css) is responsible for changing the colours of a few features of a the selected menu item. This CSS is located at the end of the "all.css" files. The iespecific.css files just detail some minor alterations in the positioning since IE positions things slighlty differently.Remember: the two versions of the website differ only in the values of some of the attributes under the #secondary_nav and #tertiary_nav. Something about changing to float has messed things up.Any help would be appreciated (I'm so close to "finishing")!Post edited to correct URLs

Link to comment
Share on other sites

I don't have time to look at your code as it is now, but I thought I should tell you one thing. I see you're against IE as a browser, and I fully support you, but, if you are making a website for a university, I don't think you should have a banner for StopIE on there. I don't know, it just seems a bit unprofessional. A university shouldn't involve in what could be seen as petty arguing over browsers. A button like that would be more in place on a private website...Oh, and maybe go for a little more subtle validation buttons, as I feel your current buttons are crashing a bit with your attempted design. One could go so far as to call them tacky. I never liked the official w3 buttons...http://w3schools.invisionzone.com/index.ph...findpost&p=1122Try one of those, like the red ones. That would look good...

Link to comment
Share on other sites

I don't have time to look at your code as it is now, but I thought I should tell you one thing. I see you're against IE as a browser, and I fully support you, but, if you are making a website for a university, I don't think you should have a banner for StopIE on there. I don't know, it just seems a bit unprofessional. A university shouldn't involve in what could be seen as petty arguing over browsers. A button like that would be more in place on a private website...
I understand what you're saying. I figured it was a good way to inform people who ordinarily wouldn't think about it (I don't have a personal website). Technically, it's only a JCR website. A small part of the university that's soley made up of the constituent students of one college. Do you think, if I just used a smaller banner, would that be okay?
Oh, and maybe go for a little more subtle validation buttons, as I feel your current buttons are crashing a bit with your attempted design. One could go so far as to call them tacky. I never liked the official w3 buttons...http://w3schools.invisionzone.com/index.ph...findpost&p=1122Try one of those, like the red ones. That would look good...

Yeah, I like http://www.colpidimouse.it/public/ico_xhtml.gif - is there a CSS analogue? My only concern is the value of the client uploading the banner each time from the W3C servers - doesn't the W3C want information from this for some reason?
Link to comment
Share on other sites

I understand what you're saying. I figured it was a good way to inform people who ordinarily wouldn't think about it (I don't have a personal website). Technically, it's only a JCR website. A small part of the university that's soley made up of the constituent students of one college. Do you think, if I just used a smaller banner, would that be okay?
I suppose that would work... How about the one of the 80x15 ones?http://www.stopie.com/button/
Yeah, I like http://www.colpidimouse.it/public/ico_xhtml.gif - is there a CSS analogue? My only concern is the value of the client uploading the banner each time from the W3C servers - doesn't the W3C want information from this for some reason?

As far as I see, there's no css button. But how about the set I posted as images? The red ones? Or, you could use photoshop or GIMP, and change the color values on any of the other ones. Just host the image on your own ftp server, so you don't steal bandwidth from those other sites...xhtml10.pngcss.png
Link to comment
Share on other sites

Could you post a screenshot of both versions of the site?
I can post a screenshot of the second, but not the first. I can't access the first, as it requires a password...Screenshot
Link to comment
Share on other sites

Damn. This is ridiculous! How am I supposed to position things properly if every browser interprets my instructions differently?! It looks fine in firefox, but in opera the submenus are positioned higher than I specified :)Judging by the differences between opera and firefox, the problem has something to do with;firefox receives the "clear: both" command and moves the footer DOWN out of the way of the submenus;opera receives the "clear: both" command and moves the submenus UP out of the way of the footer.It'd be enough to drive me insane, if I wasn't already!Thanks for your help.

Link to comment
Share on other sites

One way would be to make images in a program like Photoshop or GIMP, with transparent background, and use <img> and <map>. That would lock it in place...

Link to comment
Share on other sites

One way would be to make images in a program like Photoshop or GIMP, with transparent background, and use <img> and <map>. That would lock it in place...

Yeah I think you're right.Have you any idea what I need to do to resolve the IE menu background issue though? I've uploaded the stephenson.jcr version to another location so you can access the site and css via;http://username.tasminslair.com/website/pages/jcr.php&http://username.tasminslair.com/website/stylesheets/all.css&http://username.tasminslair.com/website/st.../iespecific.css
Link to comment
Share on other sites

There's also this script I've used earlier which works nice...

<!-- put script in external file, or the w3 html validator will detect <link> in the script tags, and it's not allowed there -->var useragent = navigator.userAgent;var bName = (useragent.indexOf('Opera') > -1) ? 'Opera' : navigator.appName;if (bName == "Opera") {document.write("<link type=\"text\/css\" rel=\"stylesheet\" href=\"opera.css\" \/>")}else if (bName == "Netscape") {document.write("<link type=\"text\/css\" rel=\"stylesheet\" href=\"netscape.css\" \/>")}else {document.write("<link type=\"text\/css\" rel=\"stylesheet\" href=\"microsoft.css\" \/>")}

So, if you have one stylesheet for Opera, one for NN/FF, one for Microsoft IE, that would work nicely. And then whatever css works for the individual browser in the correct stylesheet...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...