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
Related
So here is where the page is hosted: see comment
The problem is in the bottom content box titled 'Mortgage Recent News', you'll notice how the borders of the div are misaligned in ie9. However, they are perfectly aligned in FF and Chrome.
I realize that this code isn't ideal to begin with, but it's what I have to work with. I cannot include the images in any part of the ul as it's generated by a backend script that we do not have access to.
I'm just looking for a way to fix the current code so that it looks the same on ie9 as it does on FF and Chrome right now.
Any help is greatly appreciated.
Fixed the problem. Basically I needed to specify both the padding and height of each li in the css instead of letting the browser default. Works now.
Please have a look at http://bestofyoutube.com. Anyone who knows what I am doing wrong here?
Seems like the IE (version 7+8) put the menu a lot further down then what Safari/Chrome/Firefox do. The little pic I have to the right when people log is also completely thrown out of the normal standard in Internet Explorer (The others worked fine).
Screen shot on IE:
Appreciate any help I can get. Thanks!
Interesting bug in IE. To be quickly fixed you need to add in your stylesheet.css this code:
body {
margin-top:0;
padding-top:8px;
}
In good to iterate over the options with top padding, removing it from the body.
I think IE tries to draw invisible borders for your menu table.
Try to disable borders for this table.
And don't forget about table cells padding/margin.
Can you check this page and let me know why the menu doesn't work on IE7? It shows up all the way on the right, almost out of view.
The page works okay in other browsers (including IE8 and IE9). Thanks.
Change postition:absolute; to position:relative; in your #top-nav css ID. That will fix the position for you. After that remove position:absolute; from #top-nav li p and it will display correct.
I suggest you to download Developer Tools for IE. It helps you alot with HTML/CSS related problems when using IE.
Because you have ul#top-nav set to display:none ?
If not that, try playing with position:absolute, you have there all over the place... IE may have issues concerning that.
Im having some issues with my layout in IE6 (corporate business, ideally id tell them to shove ie6 :P)
Link to the site is http://www.clickcommercial.co.uk
Ive just applied the twinhelix png fix method and that "appears" to have worked ok - but I was under the impression it should fix the issue with repeat backgrounds?
As you can see, the site works great in IE7+, firefox, safari etc :)
Any help on this is appreciated! :)
To fix position of right navigation add this to your code:
#homebox-right { overflow:hidden }
Regarding other issues, I'd reccomend you to install IE Tester where you can preview stuff on IE6 quite easily. You must play a little with margins for IE6.
Plus, I'd recomment to add: img { border:none; } to remove ugly borders from link-images.
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.