http://blog.helpcurenow.org
I'm working on the development of this blog and it seems ie7 and ie8 both are displaying the content so that the container seems to be ignoring the "margin:0px auto;" rule.
It could be something else I'm just not getting, but either way the effect is that the content (as well as the navigational links) are floating to the left for some reason.
The strange thing is that a) it is not occuring at all in Firefox or Safari - OK, is that really so strange?? and b) it is not isolated to ie7, it seems ie8 is also doing this.
I HAVE NO CLUE WHY - ANY IDEAS??
Thank you!!
Your page is rendering in Quirks Mode in IE because you have a comment:
<!--HOSTURL:blog.helpcurenow.org--><!--HOSTURL:blog.helpcurenow.org-->
before the <!DOCTYPE ...>. The DOCTYPE needs to be the first thing in the document, or IE will ignore it.
If you remove that comment, or move it after the DOCTYPE, it works perfectly.
Get rid of the "<!--HOSTURL:blog.helpcurenow.org--><!--HOSTURL:blog.helpcurenow.org-->" comment at the top. The doctype needs to be the first thing after the HTTP headers, or IE goes into quirks mode (and doesn't understand the "margin: auto" jazz).
RichieHindle - Thanks so much ! I was adding a static home page to my site and made the mistake of linking to my custom stylesheet before the get_header() call ! This obviously caused exactly the problem you described. Spent 2 or 3 hours on this before I saw your post.
Thanks again !
While the above is obviously the ideal answer, for some older and more obscure browsers the only fix is to use a text-align center reset. For example if you want to position a 960px container in the center of the window you can put text-align center on your 100% width wrapper and then text-align left on the 960px container.
Related
I'm a real CSS beginner, so please forgive my ignorance. I've been searching around without success regarding something which must be obvious to experienced CSS folks.
Basically the CSS below displays as expected in FF/Chrome/IE8, but not in IE6 (and who knows about other IE versions). In IE6 a friggin horizontal scrollbar keeps being displayed since some elements are overflowing the browser window. My reading seems to indicate this has something to do with padding, 100% width being a problem with IE6, or something... I've added bg colours to better visualise the problem.
I only really want the #ch/div ("head") to fill the browser window horizontally. I suppose it boils down to: why are the div's for bs_ext and cd extending beyond the right-hand browser window, causing the horizontal scrollbar to be displayed?
<head>
<style>
<!--
body{margin:0px 0px 0px 0px}
#ch,#cs{position:relative;width:100%}
#ch{margin-top:0px;height:90px;background-color:#edeff4;border-bottom:1px solid
#dddddd}
#cs{height:55px;width:1024px;border-bottom:1px solid #dddddd}
#cb{width:1024px}
#ci{float:left;width:200px;background-color:#efefef}
#cr{float:left;width:530px;background-color:#cccccc}
#cd{float:left;width:294px;background-color:#dddddd}
#bs{position:relative;float:left;top:18px;left:15px;width:185px;background-
color:#cccccc}
#bs_ext{position:relative;float:left;top:18px;left:15px;width:824px;background-
color:#dddddd}
-->
</style>
</head>
<body>
<div id=ch>head</div>
<div id=cs>
<div id=bs><span>sssssss</span></div>
<div id=bs_ext><span>ppppppp</span></div>
</div>
<div id=cb>
<div id=ci>111<br>111<br>111<br></div>
<div id=cr>222<br>222<br>222<br></div>
<div id=cd>333<br>333<br>333<br></div>
</div>
</body>
I would appreciate any pointers on how to make this work in IE6.
Also, I'd like the bottom border of #cs to be 100% of the browser at all times (it's currently 1024px). But, if I use "100%", then when resizing the browser moves "ppppppp" down - I'd like it to be fixed so that resizing the browser does not change the content position.
Thank you so much for any pointers/assistance
I would not try to make my website compatible with IE6.
IE6 is over 10 years old, you should use your time checking your code with newer browsers.
If you insist to make it IE6 compliant, you should look into using different stylesheets for different browsers.
Check this link out: http://www.thesitewizard.com/css/excludecss.shtml
Short answer:
bs_ext is 824px wide, so any browser (not just IE6) will display a scrollbar if browser size goes below that
cd is positioned 200+530px from the left and is 294px wide, meaning it extends to 1024px which is too wide (any browser uses about 16 pixels of the window's width to be used for a vertical scrollbar)
Also:
Go with bvd's suggestion; don't try to optimize for IE6 too much
Try to build the site in IE6 first and modern browsers later.
Solutions:
The following CSS will remove any scrollbars on the html/body of your page. A terrible fix, as you're destroying the user's tools to navigate your site:
html, body { overflow: hidden }
Also, if you want a footer that sticks to the bottom of the page (I'm not sure if you do but it looks that way), try to follow this tutorial:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Lastly, if you want more help, I suggest you post a picture or design of what you're trying to achieve. A lot is possible in IE6, if you know how to work around CSS imperfections that browser has.
A final tip is modernizr: http://www.modernizr.com/
Modernizr solves a lot of IE6 issues, but not all. Also, you'll have a JavaScript dependency in your website which will affect at least IE6 and 7 users.
Good luck!
To remove the scrollbar you could give this property to #CS {overflow: visible;} it may fix the IE6 Scrollbar issue.
As mentioned by BVD you shouldn't be checking for compatibility in IE6, you should install the latest versions of IE i.e., IE9. IE9 provides a Developer Tool which allows you to check the html page for compatibility in IE7, IE8 and IE9. You should ignore IE6 and focus on compatibilty from IE7 version onwards. To get an idea of which browsers are popular check NetMarketShare
The naming conventions you've used for the Div's are not right, check this article it may help you understand what I'm talking about css naming conventions.
I have a problem with our website at www.eat.vn. The site is fine in Firefox, Chrome, IE8 & IE9 and Safari, but in IE6 and IE7 we have a problem with a main design element.
Please see the attached image and you will understand that the stacking effect on the tabs is not what I wanted. I have tried to work around this bug, but can't manage to find a solution which does not mess up anything in the other browsers. Any help would be much appreciated!
I don't have IE6 or IE7 to hand to test this, so I'm shooting in the dark somewhat.
My guess is that the issue is related to the container element for the tabs (<div id="steps">). This has a style of float:left;, which I don't believe is necessary; it doesn't need to be floated since it doesn't have any other elements next to it.
However this float may be causing the IE6/7 bug; it looks as if this element has decided that it should only be as wide as one of the tabs inside it, which is then causing the tabs to wrap beneath each other.
I would therefore suggest taking the float:left away from this container element, and see if that helps.
(The tab elements inside it should still be floated, of course)
The page I am working on can be found here.
In IE7, everything in the main content area is being pushed to the left...
Can someone check it out and let me know what's up?
Here is a screenshot:
I don't have IE7 on this computer, but it looks like you have float:left applied to your main div
#body_container {
float: left; // try removing this
}
EDIT
Had another look at the source and the page appears to be rendering in quirks mode in IE7.
Here are few ways to fix that:
make sure all your code is valid
make sure you are using the right doctype
Details here: Forcing IE7 into standards rendering mode (not quirks)
If this is a problem only in IE7, you might wanna try IE7 compatibility mode
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.
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.