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.
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'm building a pretty heavy J.Query website and, as always, it looks great in the modern browsers - but I am coming across all types of alignment issues in IE 6 & 7. More severely in IE 6. I'm working on building a conditional IE Style sheet for those browsers and am wondering - is there a way to align all divs with CSS? Can I permanently position everything to be, and stay center throughout all browsers and window sizes?
Ultimately; any suggestions on fixing margin issues that occur in older IE's? Stuff that looks great in modern browsers and pushed off to the right and top in IE 6 & 7. ..If the conditional is the inevitable route, what's a good way to start defining the parameters within?
are we talking horizontally or vertically?
Horizontally, the "margin:0px auto" should always center the div horizontally along the screen, so long as the width is set. This works for all browsers IE6+ i believe.
There's a pretty good forum here : http://www.webmasterworld.com/forum83/8003.htm
It sounds to me like your problem is that you have poorly written CSS. Certainly, IE6 has plenty of issues, but if you're seeing problems in other modern browsers, then your problems are with your CSS, not standards conformance.
If I were you, i'd just ignore IE6. It's down to less than 5% of the market (some surveys say as little as 2%). Just let it die.
As RCNeil says, using margin centering works with everything. If it's not working, then you have something else causing your problem and we can't possibly guess without seeing your page.
NOTE: in older versions of IE, if your document is being rendered in quirks mode, then you will have problems with auto margin. Make sure your document renders in standards mode.
A lot of my floats are showing up on a separate line when viewing in IE7 ... in Ffox, chrome, IE8 etc they look fine.
The site in question is:
http://208.43.52.30
The places where the float is not working are the location for "events near me", "Show" for the show month buttons ..
I'll attach some screenshots
IE 8:
IE 7:
I personally can't see the difference (the closest thing I have to IE7 is compatibility view in IE8), but based on your screenshots it looks like the "Upcoming Events" font-size is much bigger in the IE7 screenshot.
Did you define font-size for your h1 tag? Different browsers sometimes handle the size and margins of header tags different, so if you put h1{font-size:14px;} in your stylesheet maybe it'll fix it.
The Upcoming Events problem is being causes by IE7 pushing the float:right to the next line instead of keeping it in line with the h1, despite no clear I can't figure out a way to get that to stop. An alternative I came up with was to float the h1 left instead and give the default text-alignment:right; This will cause the same layout, and IE7 is happy.
http://jsfiddle.net/znRxq/
Same solution for the show button.
IE7 might be making your input larger (from experience), you should set a different width for IE7.
First off, 'float' is pretty well supported, even on IE. When validating the HTML on you website, I am getting 43 errors (wont really be that many). Correct those and see if it fixes the problem. Earlier versions of IE (<= 7) are not as friendly to slightly invalid markup as IE8, chrome, firefox, etc...
Second, if you are really just trying to display block elements inline, 'display:inline-block' is the easiest way. Contrary to popular belief, this is supported on IE7 & 8. Here is the css for cross browser support:
.inline-element {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
I have this website, http://www.escuelita.info. Now I tried many times to make it work on IE 7 (possibly IE6 too didn't check) but for some reason the middle frame on the right doesn't show content.
If you compare it to Firefox or Chrome (or even IE8) it works ok.
I need to fix this but I'm not sure what's causing the problem..
Note
I checked with IE7 and the pages don't show content
(the main content DIV content_outer)..
The content shows below the sidebar. Either IE7 enters quirks mode or you trigger some sort of bug that causes IE7 to misbehave.
Double check your doctype, tags and most importantly, get rid of those nested tables. Nested tables are EVIL and I'd bet they're your culprit. Use CSS grids (here's one that's really good: http://www.1kbgrid.com/) instead.
Dunno if this solves your problem, hopefully so.
I am pulling my hair trying to find a fix for this problem. If you go to this site you will see that (under IE) the slider and the menu on the top is broken. Works fine under all modern browsers.
Any idea how to fix this? Thanks.
Edit: Want to add that the original site design works fine under IE. I did a massive amount of editing under the hood and somewhere along the line this one was broken that I can't seem to find a fix for. Since I did a lot of customization, I think it seems unfair to ask the original author for a fix (and he is not very responsive either).
The document invalid. In particular, there is a <style> element before the Doctype. This triggers Quirks mode and causes browsers to become very inconsistent (e.g. IE emulates a log of bugs from IE 5.5).
Always work in standards mode and perform basic automated QA.
I can't check it for you, since I've not got access to IE right now, but I've often found that adding position:relative to misbehaving elements is something of an IE magic bullet.
No fix but a lead: the issue with the menu bar is one of IE's mysterious float positioning bugs, as can be demonstrated by putting <div style="clear: both">xxx</div> after the navbar ul. (Note that it won't work if the div has no content!)
stuff about box model deleted: as David Dorward mentions this is caused by quirks mode, and moving the style down past the doctype causes the slider to behave sensibly.