Some days I really hate browsers. Today is one of those days. I have been working on a new theme for my main work website and things were going just peachy until yesterday. I have two rather strange issues that I am convinced are related to how I am employing my CSS.
Test Site URL: http://174.132.88.72/~mbitest/
The first issue is a background image that I have set in CSS works just fine in Firefox but does not show up in IE 7. I have checked to make sure that the CSS is correct because I have read that IE can be finicky when it comes to background images. The following is the code for the container that holds the background image:
div#block-views-teaser_industry-block_1 {background: url(../images/industry.png) no-repeat; margin-top: 10px;} Looks pretty in FF and not so much in IE. Any ideas?
The second issue is the reverse, the Nice Menu I am using in the main navigation bar underneath the header works in IE just fine but in Firefox and Chrome, the menu doesn't allow you to click on anything in a submenu.
Has anyone else encountered this problem? Again, I am pretty sure that the answer lies in the CSS. Hoping that someone crossed swords with this one before.
Comments
This is going to sound weird
This is going to sound weird but I was able to get the missing icons to show up in IE by adding "padding: 5px;" to each container. Not sure why it worked but it did. I realized that there is something seriously wrong with the theme on the test server that I supplied the link for above. There are all sorts of problems on the IE side. The Firefox side displays the site the way its supposed to.
The only problem I have remaining is the Nice Menu drop down issue in Firefox.
Have you modified the Nice
Have you modified the Nice Menu css? Does it work if you load the default? I was not even able to hover over the sub-menu in my current browser (mozilla-based).
On the CSS you showed for IE and the background:
Try one of a few things:
Ryan Price
DrupalEasy Podcast
Have you tried breaking apart
Have you tried breaking apart your background declarations?
background-image:url('../images/industry.png');
background-repeat: no-repeat;
margin-top:10px;
padding:0;
Add padding declaration of some value.
I always quote my bg images URLs.
Have you modified the Nice
Have you modified the Nice Menu css? Does it work if you load the default? Does your modified CSS work if applied on top of a default theme like Garland or Zen? If you look through the issue queue of Nice Menus, they will always ask you to try it in Garland or Zen. Your theme could be screwing it up somehow.
I was not even able to hover over the sub-menu in my current browser (mozilla-based).
On the CSS you showed for IE and the background:
Try one of a few things:
background-image:url("../images/industry.png"); /* or try absolute path..? maybe b/c of aggregated css, could this break? */
background-repeat:no-repeat;
I would also look at your selector - the one you have starts with "div", but it is targeting an ID (#) so there should just be the one thing on that page with the ID. IE is very very picky about the kind and granularity of selectors, but honestly this one looks fine to me.
Ryan Price
DrupalEasy Podcast
Restoring the Nice Menu
Restoring the Nice Menu Default settings fixed the problem. I need to figure out how to get my menu to look the way I need it to and not mess with the default file.
EDIT:
I stand corrected. I was looking at the menu in IE. It did not work in FF. I restored the original nice_menu_default.css file and uploaded it and flushed all the caches. Still no joy. I don't think I made any changes to the main nice_menu.css file but I am going to double check.
Is there anything else I ought to be looking at as a probable culprit?
Initially I had the
Initially I had the background declarations separated but read somewhere online that IE does not cotton to separated declarations. So I simplified them a bit and condensed. Still didn't work . Once I added the padding declaration to it, it showed up in IE. Who knew? Greta_Drupal, any idea why that would work? I am not as familiar with IE's strange behaviors as I would like.
Ryan,
The only real modification to the nice_menu_default.css file I did was to comment out conflicting border declarations. I am going to reset them and see if that restores the functionality.
Well, running the CSS through
Well, running the CSS through a validator (such as W3C's CSS validator) gives good clues. At least certain elements want for companion declarations. Another, example: validators will tell you to have both a 'color:' and 'background-color:' set.
Best Rule of Thumb: When in doubt, give IE -- particularly older versions -- more information, not less. Serve it in easy to digest bites.
Looks like Ryan and I were children of the same mother today, on that reply. Chiming in at same time with same advice.
I am going to try running the
I am going to try running the Nice Menu CSS through the W3 validator. See if that turns anything up.
EDIT:
Ran is through the Validator and it came through clean. Also ran through my css and there was a small hitch on two spots of code:
top-menu ul, #top-menu li Value Error : padding -1.0 negative values are not allowed : 0 0 0 -1em 0 0 0 -1em
div#footer-content li Value Error : padding -1.0 negative values are not allowed : 0 0 0 -1em 0 0 0 -1em
But those I am using to remove the images from list items as well as line them up to the left without that inherent padding that gets thrown in. Neither of these are being used in the main menu.
The container that holds the
The container that holds the menu itself has the following CSS applied to it. The Z-Index is there to make sure that the container is over the other elements on the page. I had a problem earlier with the submenus falling behind the other elements beneath the navigation bar.
#navigation {height: 21px; z-index: 1000;}Try adding something along
Try adding something along these lines:
#navigation UL LI a {height: 21px; z-index: 1000;}Perhaps it is only the links themselves that are being hidden.
Also, try adding a high z-index to the UL and LI containers, too. Just literally all containers of the menu, but making the links the highest z-index, with the LI next highest.
If that works, then you can remove the z-indexes where not needed.
I use Nice Menus and use no z-inded at all -- and the menus do spill over content. See http://opcofamerica.org for example.
I'm trying to put out 2 client fires today, but will be happy to revist your questions in awhile today if you still have issue.
In the meantime, can you attach your nice menus CSS file.
Eureka! I was looking over
Eureka!
I was looking over the link you sent and wondering what I had done to screw up how the nice menus worked. I realized that it might not be in the CSS at all but something I did to my page.tpl.php.
Lo and behold I noticed where I had added a spacer beneath the navigation bar in order to force the content slightly lower on the page. I realized that I have copied the div tag for the navigation bar and deleted the php print call for the navigation region but I left "id=navigation" in the copied tag. I removed the duplicate ID attribute and viola! the submenus are now working.
All that time playing with the CSS and an errant ID attribute was the culprit. At least I learned more about browser issues and CSS in general. Thanks guys for taking the time to assist me.
Sometimes it just takes a
Sometimes it just takes a fresh pair of eyes and some outsiders forcing your own in some other direction.
For me, it takes asking, too. I hate to have to ask for help, and do so only after much troubleshooting. So, as soon as I am humbled by the asking, I usually figure out the problem. :-) ...When I would get stuck on some Web issue, I use to ask my (then) boyfriend to take a "look". He knew absolutely nothing about Web development. But, as I talked out the problem to him, I'd often figure it out.
Glad you got that solved. I know how exhausting the pesky drawn out issues can be.
I started to ask you (even
I started to ask you (even typed it out) if #navigation was really your div for nice-menus -- usually it would be primary links. That might have sent you looking in that direction sooner. Darn. But, all's well that ends well.