When looking at this site in IE7, the header banners and nav menu seem to randomly appear and disappear. Have look at several posts regarding this, but have not been able to solve it. I am hopeful someone could help pinpoint the issue, as the page appears correct at times, and not at most others.
Thanks.
You are using two separate style sheets.
http://steamsaunadepot.com/media/css/cb5ec47641853ec8a1ca38b845e6e92e.css is for FF and
http://steamsaunadepot.com/media/css/36fe96c008dc78bed45bceb2c9cde999.css is for IE7
Specifically, the styles for top and left on .header-notice and .header-banner are wrong in IE7. If they were just set the same as they are in FF, the header and footer generates correctly.
Related
i have spent 3 days trying to figure out this issue and cannot come up with a viable solution.
ive even tried using javascript to load stylesheets tailored to each browser, but even that didnt work.
my problem is my horizontal menu (http://mydomainsample.com/fire_rebuild) is displaying perfectly fine i n chrome, but when i load in safari or firefox, the child menu is way out of position. oddly enough IE(9) is closer to being correct than the other two, but even thats not quite correct.
i have played with the stylesheet trying to figure it out, but when i get it right in fff, safari, or ie its screwed up in chrome.
i cant seem to find a solution that works in all browsers.
can someone please help me find a solution to this?
ive tried using a different menu but this one looks the best and any vertical drops ive used give me z-index problems between the menu and the slideshow that i cant seem to fix.
I do not think src is an optional attribute for link tags. Replace it with hrefs like the first two. When I look at the page in firefox, I do not see two files above being imported.
The order of the files in those link tags are very important as well.
href="stylesheets/reset.css"
href="stylesheets/coda-slider-2.0.css"
I do not know if you already have them but firefox and chrome has the firebug and web developer plugins that makes life easier.
jQuery has been updated to v1.7.2; I would update all your plugins & see if that helps.
First of all, remove all the javascript you applied to match for different browsers.
Then Remove the width:750px; and left: 548px; on style.css line 83 (ul#nav li:hover > ul)
Hope this will solve your problem
Also your page width is 1220px. Stick with the 960px width in order to compatible with small screen sizes.
I'm working on building a website, and everything is pretty much done, but I'm running into issues that, from what I've read here, are a result of webkit in firefox and ie.
Here is one of the pages that is having problems:
http://prdesignstudio.com/Seattle.html
When you load it in Chrome or safari it works fine, the images are reflected at the bottom, and there are no images on a lower row. When you open it in Firefox or ie, on the other hand, there are no reflections, and the last image in the set is on a lower row. Another thing that's odd is that the problem doesn't occur on every page, and it also doesn't seem to be based on the number of images in the gallery. (The different pages can be found by clicking on portfolio)
Anyone know how to fix this? Also, if fixing it requires me to remove the webkit portions of the .css, does anyone know of something else I can do to get the reflections? They're not necessary, but I like them XD
All the page's code can be found here: http://jsfiddle.net/2DvSP/
Thanks in advance for any help.
As for the images appearing on a lower row and the occurance of this on not all but some pages, you have inline styles set
div calss="container" style="width: 2080px;"
If you increase the width, this problems does not happen in FF4.01 and IE9.
I have been told that on these pages, the last 2 links are not clickable in IE7. I can't seem to see the problem, and not sure how to fix it. Is it a hasLayout problem?
http://www.thamesvalleypartnership.org/somethingbrilliant/ideas/visual
http://www.thamesvalleypartnership.org/somethingbrilliant/evidence
Any help, or point in the right direction to how to fix would be really appreciated.
Add margin-bottom:100px to div with id random and remove div with class push (it is in random div. I have not tested it with other browsers and other versions of IE.
You can see my issue here:
http://pmind.com/staging/123.html
I've tested this in Chrome, Safari, Firefox and Opera so I know it's not just an Internet Explorer wonky bug.
In the top right of the content, there are two text links, that are being hidden under the graphic. The <div> that contains the text links comes further down in the page, and my understanding was that that alone would make the z-index of the links such that they would be on top. But because that didn't do it, I set the z-index of the <div> containing the text links manually, which still didn't fix the problem.
One partial solution I found was to set the z-index of everything on the page but the <div> to -1. This however broke the roll-over functionality of the navigation items. I hate to ask something like this, and then it be some extremely simple issue I've just overlooked, but I'm at my wit's end.
Adding "position: relative;" to #top_links brings them to the front in Firefox. I haven't tested this in other browsers.
If you look at the menu for this site: http://writershore.com/ltlaw/
The menu looks great in Firefox, Chrome, etc, but in IE7 the menu drop downs don't break through the nested DIVs.
Is this an overflow issue? A z-index issue? I've tried variations of both and doesn't fix the result in IE.
Thanks for any ideas!
The HTML code is broken. For starters you have two <html> tags. This will make the page render in quirks mode, which makes a dramatic difference for IE.
Fix the obvious errors in the html, then validate the page to see if there are any more problems in the code.
IF form elements or boxes are showing over top of the DIVs such as calendar popups it's not a bug in the javascript - it's a bug/feature of browsers. See this explanation