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.
Related
I currently have a WordPress theme online and appears to work fine but one of my clients noted that the blog page layout is broken in Google Chrome. The sidebar appears right underneath the page content. So I checked his website and my demo and it does indeed look broken. So I have spoken to another programmer and he says it's not broken and he uses the latest version of Chrome too. I have never encountered such an issue, it works for some but not for others.
EDIT: The issue has been fixed with thanks to Joseph Erickson.
Looks like it has to do with the width of the #sidebar. If you shrink it just a little bit, it'll fit properly.
Why is this happening? Who knows. These little pixel shifts with floats can be hard to track down. I would recommend not trying to fit everything so snug together and allow some wiggle room when putting two fixed-width floating elements inside the same element.
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!
I'm working on adding basic print functionality to a web map application I recently built, and I can't seem to make the printing work properly when using Internet Explorer 8 in standards mode. I was hoping that someone with more CSS experience might be able to help.
I've created a basic example on jsbin that demonstrates what I'm seeing: http://jsbin.com/osepov/16. This example prints properly in most browsers. In Internet Explorer 8 in standards mode, however, the map's tile images run off of the first page and onto a second page when printing. I've tried a bunch of different CSS combinations, and have browsed the web for hours looking for hacks that might solve the problem. I've obviously had no luck thus far.
Being that the print functionality works well in most browsers, I am willing to compromise on a few things, if needed, to get this working in Internet Explorer 8 standards mode:
The map doesn't have to fill the entire page, minus the header. It can have a fixed height.
The header is nice to have, but I'm willing to do without it.
I know it is possible to build a PDF on the server, but I really want to do this with a simple print stylesheet.
Note: Yes, I do have to support IE 8 standards mode. I had a solution that kicked IE8 users to IE7 mode, but this was not acceptable to my client.
UPDATE 2: I was able to resolve the issue by bumping IE8 down to IE7 standards mode. The map is printing correctly now.
UPDATE: Nope, this didn't solve the problem. I'm still seeing the same issue. This seemed to work, but I'm still seeing the problem.
ORIGINAL POST: I think I figured this out. Basically, it seems like the "top" div was causing the entire page to get bumped down and run over to a second page when printing in Internet Explorer 8 standards mode. I'm not sure why this was just happening in IE8 and not in other browsers, but there are all sorts of strange IE-only bugs that I don't understand.
The final fix:
#wrapper {height:100%;left:0px;position:absolute;top:0px;width:100%;}
#top {height:70px;position:relative;width:100%;}
#main {height:785px;overflow:hidden;position:absolute;top:70px;width:100%;}
So positioning the "top" div relatively and assigning a pixel height and "overflow:hidden" to the "main" div seemed to solve the problem.
This isn't a perfect solution, but it meets my current requirements.
Here's the updated solution: http://jsbin.com/osepov/19.
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'm trying to learn CSS. I've taken great pains to get everything right. My pages all validate and they look correct on Firefox and mostly correct on Chrome. However IE is all over the place. In relation to Firefox, the following is wrong in IE (in order of importance):
the main body box is pushed below where the left boxes end
the upper-right drop-down stuff (mouse over "Settings") is totally off in the weeds (it's off in Chrome also but in a different way)
"Recipes" tab is supposed to have no visible bottom border
search button is askew in relation to search box
logged out version: the upper-right login elements are askew
Logged in,
Logged out,
CSS,
Links, functionality, etc. are not guaranteed to work on these pages. It's just static snapshots to show layout.
Can anyone point me in the right direction for whatever I'm doing wrong?
You need to Reset your CSS (Dean, above recommends Eric Meyer's Reset CSS). I prefer Yui Reset CSS (I actually like their own Reset / Fonts / Grids CSS). As part of doing this you also need to use Standards Mode.
Finally, you need to be aware that some things will differ in browsers no matter what. So if you run into this situation, it's either work around it, or live with it.
What version of IE are you running? Sounds like most of your issues may be caused by the IE Box Model Bug.
I never start a new website design in css without putting Eric Meyer's Reset CSS in first.
It resets all the differences in all the browsers, so that you've got a even playing field to start from.
From there-out, everything should be the same in all browsers.