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
Related
Here is the link to the website I am talking about.
My problem is that when you navigate between the different pages in the main navigation, the main wrapper does not align on the different pages I have used. So if you are on the home page and you click on "WMH" in the main navigation bar the whole page jumps to the left by about 8px.
This creates a jitter between pages that my client really doesn't like. I used some padding-left and padding-right in css to align it correctly. Unfortunately when I get it pixel perfect in Firefox, it is wrong in Chrome and Safari. If I get it pixel perfect in chrome, it jitters in Firefox. This is very irritating. I don't want to have to write separate styles for Chrome, Firefox, IE, Safari unless it really is the only solution.
Thanks for your feedback.
Archie.
The browser scrollbar looks to be causing this. You can force a scrollbar to always appear which would solve the issue. Add this to your CSS:
html {overflow-y: scroll;}
You would also probably need to remove the padding that you tried to fix the problem with originally once the above style is in your CSS.
I have a menu that is dropping behind other elements - I have tried z-indexing on what I thought were the relevent parts, but to no avail -
Can anyone tell me what I need to do to make this dropdown be on top of other elements in IExplorer? Looks fine in FF, Chrome, Safari - thank you for your help
Beta testing site: http://bit.ly/Hb0RJz
Has to do with the stacking context of the elements. Since the two elements have different stacking contexts, z-index won't work. Take a look at this page.
Also answered here: IE7 dropdown menu appears behind image and CSS Dropdown menu hidden behind content IE7
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.
I am developing a page based on HTML5 Bolierplate. However, I have a problem. IE does not scroll the page correctly; this issue is most apparent in the display of my div content.
My CSS : http://pastebin.com/kmU7rSLd
And my html: http://pastebin.com/6D47Fwkg
Any ideas on what may be causing the problem? I have tried to fix it for several hours now, but to no avail.
Don't have IE available, but I give it a shot anyway :)
You have invalid html:
</span class="companyRolls">
And that might cause IE to act weird.
can someone look at this site for me I have a serious problem with the sub pages content div going over to the right bar this issue the site renders fine in all other browsers except safari firefox and iphone
www.firstavenuedesign.co.uk/demo
http://www.firstavenuedesign.co.uk/demo/offers.aspx
if u look at the above page in ie it will display fine and chrome any ideas anyone
It looks as though the problem you are having relates to your parent DIV 'collapsing' on your floated child elements.
The following article explains how to resolve this issue (in the Collapsing section) a long with other approaches for laying out floating elements:
http://www.alistapart.com/articles/css-floats-101/
Validate your html and css for those lists of significant errors. Then get this working in a modern browser before seeing how IE screws things up. The other browsers are showing what you wrote. IE makes things up as it goes along. Never, ever trust IE to do anything right.
Also, you have space before the doctype. Some versions of IE go into quirks mode in that situation.