I am building a photo portfolio website using wordpress and editing an existing theme. I worked on it in firefox and checked a few times throughout at the styling in IE and it was always fine. But having basically finished I looked at it today and it in IE and it is totally messed up. None of the boxes on the main page are lined up right.
I tried using the code in the header to have IE render it as IE7 and that generally worked but it made some other little problems. I am not sure if the problem is my doctype. I don't really know what it should be, or if I changed something along the way that messed it up.
The site works perfectly in all other browsers that I have tried
Here is the site. http://theshalomimaginative.com/blog/
Thanks.
Youre <h3> tags aren't closed. One of the few instances where IE is actually rendering things correctly ;) Other browsers will allow us to make mistakes like this, but IE is more strict.
Never forget the value of validating your code!
Related
I am running Thesis 1.8.5 on Wordpress and here is my site www.texashomeloanpro.com . Because I am kind of new to this whole web-design thing, it just occurred to me to check my site in both Internet Explorer and Safari browsers. Unfortunately, my site looks horrible in both of these. More specifically, my homepage fonts are showing up too large, my homepage sidebars aren't positions correctly, and some of my rounded edges aren't showing up.
I know this is quite a laundry-list of CSS issues but if someone could just give me some general direction I would really appreciate it.
Not sure if you've tried this already, but a CSS reset script usually does the trick for me.
It might break your webpage on the browser you are using, but the goal is to make the webpage look consistent across all browsers.
I created a simple page with a series of divs. In all of the modern browsers, it appears fine, but in Internet Explorer 6, it falls apart. I have no idea what is causing it to happen.
You can view the page here: IE 6 Test Page
If you have IE6 installed, I included the Firebug Lite JS file on the page, so just click the firebug icon in the bottom right corner to inspect an element.
Here's a screenshot using Browserlab to view the page in Firefox and IE6: Comparison Screenshot
The 3rd div named 'content'(With the Manager Email field) moves everything to the right forcing the next div to the next line. Also, none of the row div's reach all the way across as they should(see Comparison Screenshot)
I did some research and have found that there is some problems in IE6 using floats which I use here, but I'm not sure how to fix it.
Why does my page not display correctly in Internet Explorer 6? And better yet, how can I fix it? :)
It looks like the third div isn't clearing the float properly. Perhaps give each of the row divs the style clear: both
Do you really need to support IE6? Even Microsoft is fighting it nowadays and the market share is starting to be irrelevant except for China.
There's a difference between "not working in IE6" and "not looking perfect in IE6".
As has already been said, IE6's market share is low and continuing to fall -- it's below 2% in most of the developed world (see http://gs.statcounter.com/ for country-by-country stats).
Given those stats, I would say that if the page is usable in IE6 then your work is done. IE6 users are by now used to web pages looking bad. Many popular sites don't work at all in their browser, so one with a few layout glitches won't phase them at all. They'll still use the site.
If it is actually broken to the point of not being usable then it's a different story; in that case, you'd need to consider how important those few IE6 users are to you vs the time it'll take to do the work, and fix it accordingly, but that doesn't seen to be case here: the page seems to work. It looks a bit naff, but it works.
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'm having a problem with CSS not displaying correctly between IE and Firefox... The big problem is that we have a ridiculous number of CSS files (and this isn't something that is currently scoped to fix), and I can't seem to find what style is being applied.
Any way, here's what I'm looking at: On the shopping cart page for our site, we have a table (yes, I know) where each row is an item in the cart. On IE, Chrome, Opera and Safari, this table renders fine - everything looks good, borders are all hidden, it looks great. On Firefox, however, while the outer border on the table remains hidden, lines separating columns/rows inside the table are displayed.
I don't have direct links to show the problem, but if you go to
https://store.petango.com/Roc-P6986.aspx
and click the "Add to cart" button, it brings you to the cart page (where you can see the lines showing in FFox, but not in IE).
For what it's worth, this is a third party E-Commerce package that we purchased, and on top of that we hired out our web design to a DIFFERENT third party web developer. Hence the jumbled mass of CSS files/confusion. Trying to look at the CSS for specific TD elements (in Firebug) is basically impossible to read it's so long, but I can't see anything obvious in there either.
I would be thrilled if this is just something stupid I'm missing, and there's a well known mistake that has been made in our CSS that lets it render fine in every browser but Firefox - any help would be greatly appreciated.
A bit of poking around in Firebug reveals that removing the border-collapse:collapse style from the ctl00_wpm_Basket_ctl04_BasketGrid table removes the borders. I'm not even going to try to explain this - the style should be completely unnecessary, as like many of the other applicable styles it's set and reset multiple times at multiple levels... I suspect you're encountering some subtle difference between how styles are applied in Gecko and other browsers; it's probably a bug, but I would encourage you to slim down the test case if you decide to report it...
this isn't something that is currently scoped to fix
It probably should be... Otherwise, you'd better get comfortable using Firebug.
"We fully recognize that IE is behind the game today in CSS support."
ieblog
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.