Im developing a small web app, but i'm having problems with different browsers.
It seems ok on Chrome, Firefox,
but in IE9 (compatibility mode) the Div menu doesnt position the same way that the other browser,
also in IE9 (normal mode) it position ok the Div menu, but the div below the menu does not appear ok.
the site: http://tinyurl.com/3nmkxjs
Does anyone have an idea?
Thanks in advance!
Joao
Having problems with IE is normal and expected. It's an inept browser.
Remove all the spaces before the doctype to make sure that's not putting IE into quirks mode. I thought that problem was fixed in IE8, though.
Related
I've got a strange display problem in Safari that I can't seem to pinpoint. The container block spacing is ignored, making page content overlap into the footer. But here's the strange thing: when I open the developer tools (working on a PC but have a safari version installed for testing and such) the container block suddenly "registers" and the spacing is correct, as intended.
Here's the URL: http://createwilmington.com
Any ideas? Seems I'm more adapt to debugging and expecting IE issues than Safari.
Clearing. That was the problem. A simple "clear: both" on the footer and "push" classes.
I had this code in my original reset,
[class*="site"]:after{content:'';display:table}
but this was breaking Safari (causing a completely white screen). As a reference for others, here's the question/answer
I am facing a strange problem where the a navbar I have created is displaying differently in Chrome than Firefox. Here is a screenshot of each. Firefox is displaying it correctly:
While the background colors are getting lost in Chrome:
I have created a fiddle here, but the problem is not apparent when viewed on the jsfiddle site using Chrome. In the live Chrome browser, the body declaration over-rides the definition for the navbar, even though z-index is used.. Any ideas on how to solve this strange issue? Im using an old version of Chrome right now (21.0.1180.90), trying to insure backwards compatibility. Thanks for your ideas!
Your code works fine tested in "live Chrome browser" 21.0.1180.89 (couldn't find the 21.0.1180.90) on OS X 10.8.2.
And I think you are missing the point of z-index:
For a positioned box, the 'z-index' property specifies:
The stack level of the box in the current stacking context.
Whether the box establishes a stacking context.
http://www.w3.org/TR/CSS2/visuren.html#z-index
z-index is not used to override any other css declaration.
You're code is working in Chrome version 24 , Firefox and Internet Explorer 10 . Maybe the problem is only in that version of Chrome or you override it somewhere else.
I tested Nvidea css drop down menu on a site with XML Flash rotating banner , it works find on opera but doent work on internet explorer and google chrome, it actually goes behind.
menu from : http://www.lwis.net/free-css-drop-down-menu/
see link here: http://sonymax.co.uk
thx
Seems there is a problem with the menu actually, I removed the banner in IE and the drop-down menu still doesn't show up. Also note, that if you change your compatibility mode from IE7 to IE8 or 9 the menu and banner are way off. You should revise your code a bit.
It works in my Chrome, not sure why it doesn't in yours, only IE has the problem as far as I tested.
I'm coding www.rootologyhealth.com and I cannot figure out why the Nav Bar on the homepage starts so high up in Safari and Firefox but looks perfect in chrome. I've done all the work I can to try to diagnose the problem. I'm certain its a stylesheet issue, but the styles I'm using are relatively simple and shouldn't be causing this problem.
For me, it's broken in Chrome 21 and fine in Firefox 14 on Windows 7.
When messing around with the developer tools in Chrome, if you take div#top-menu out of div.container, it no longer floats up above the viewable portion of the browser. You'll be left with a spacing issue between that and the large advert, but that should be simpler to deal with.
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.