I have a website here that works terrific and displays fine in IE 10 and IE 11 but anything below that takes the whole display and forces it to the far left of the screen instead of centering the content area. I can't seem to find where to adjust this in CSS. Can you please tell me a good way to fix this in IE 8 without "breaking" newer versions?
The main thing that catches my eye is that the should always be the very first line of your html. If you move this line:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
to the very top... that should help with many of the errors.
You might also consider trying simply
<!DOCTYPE html>
Since I don't have anything that still uses IE8 on it, I can't say for sure if that will fix everything, but it's a good start. For what it's worth, I checked your site on Safari and Firefox, and it appears to work okay. So I'm guessing IE8 has issues with the doctype not being in the correct spot.
One more thing... there are three lines at the top of your page - title, and two meta tags. Those belong inside the <head>, not at the top.
Related
I have extra style sheets to try and fix loathsome IE, however there are a few images I cannot get to budge. The little icon images on this page http://www.sporttours.net/news/ next to the news items show up over the sidebar art "Sport Tours". I can affect the images by adding red borders, hiding them totally and a few other things. However, I can't affect margin or padding to try and move them over. Anyone have any suggestions? And yes, they want it to work perfectly in IE too (HA!) so I can't just let it be.
First validate your HTML - as you can see its ridden with errors.
Validation shows you're missing a doctype - add one!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
I am getting lots of trouble with IE. The whole page is disarranged even though I have reset applied to all the tags initially. Mozilla and Chrome displays it correctly but IE is giving lots of tension. If anyone could help I would be very thankful.
Jquery is also not working fine. and div are disarranged
First see it in mozilla to get a look of what I have designed. then open it in IE to see the troubles.
See it here http://www.crawller.com/opal/
Thanks to everyone.
I solved the problem by including this line at starting before
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
This solved the problem and CSS and jquery codes are responding well in IE now.
You can check the modified version at
http://www.crawller.com/opal/new/
The old one is also available at http://www.crawller.com/opal/
For starters, it appears there are some incorrectly spelled attributes in your css, several references to 'bloc' where I assume you mean 'block'.
Make sure that your html and css validate.
You have a lot of Markup validation errors in your document. First try to fix those errors.
Check your site for w3c Markup Validation
I have a problem with css rendered differently in browsers, in IE to be specific, thought I could ask here for help, hopefully you can help me out with this : ))
my website is www.artisticworksllc.com if you go to the link, on homepage, below the slideshow there are five images linking to different categories of website.
I tested in Firefox & safari and they look ok, in Internet Explorer they are not aligned, fifth image comes down in IE. When I tested it with IE with compatibility view turned on, the images are aligned but other parts of website are messed up (image galleries for example)
Can anyone help me with this please? what to do? I dont know if this is padding or what is causing it. I know I have to implement some kind of IE hack but I dont know what and how : (
help is much appreciated : ))
Thank you
Before going down the crazy path of writing custom CSS per browser (and potentially version): get rid of the XHTML 1.0 Transitional doctype and move to one of the strict types. Preferably html 4.01 strict.
This alone will fix the vast majority of your boxing issues.
Some more info on Doctypes:
Read both pages of the following site. Great links on page 2.
http://www.communitymx.com/content/article.cfm?cid=85fee
http://www.alistapart.com/articles/doctype/
And, for "light" reading: http://hsivonen.iki.fi/doctype/
Basically, all browsers have various degrees of "standards" compliance. Anything that kicks off "quirks" mode or is "transitional" should be viewed with suspicion. However, once you understand what a doctype is and your choices around them, then you'll completely understand what's going on for any display differences you do run across.
For me, one of the best ways to learn was to create a simple floating div layout controlled by CSS. Some div's held images, others had extra long text, all of them had a border so I could see where things were breaking. I then tried various doctypes and viewed the page in the major browsers. Sometimes the differences were minor like slighly different default padding or margins; sometimes they were outrageous such as one browser allowing styles to be inherited that another didn't.
We have a decent sized web app (200+ pages) with fairly complicated layout requirements and the ONLY "hack" I've had to implement was to force the image tag (img) to be display:block; it looks pixel perfect identical in every browser and we are not using conditional style sheets or performing any type of browser sniffing.
After your link to pull in the CSS, put this:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
Make a second style sheet called ie.css and just change the parts that need to for IE.
You also have the ability to add versions:
<!--[if IE 7]>
for example.
you need to target versions of ie with conditional comments; using them you can set specific styles for any and all versions of ie to make them look how they should.
Check you padding and margin attributes for the list elements. Perhaps your size arrangements are right, but since every browser renders styles differently, IE is responding differently.
I'm having some trouble with a site, and the hover state of the menu on the homepage with ie7 and ie8.
For some reason despite the z-index it hides behind the object flash box.
Can anyone take a look at my URL and see if you can suggest a fix. It's really got me puzzled. Only happens on the homepage because the menu seems to hide behind the flash video object.
url: http://yellowtulipcomms.com
Try adding the following to the flash embedding code:
<param name="wmode" value="transparent"/>
My first suggestion would be to use full doctype declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
IE is very sensitive when it comes to calculating positions and dimensions without a proper doctype. This is something I have learned the hard way.
Addendum:
Also try using zoom:1 value in css rules. I can't test it on your site but I remember it helped with positioning in IE.
This is a follow-on question from this thread:
CSS Semi-fixed Element?
I implemented kelso's solution and it works perfectly on Firefox and Chrome. However, IE 8 is not playing ball.
I have rolled the code out so that you can see the problem I am having on a live website:
Gran Via hotels
IE is listening for scroll events but is not moving the div as the user scrolls down the page. It seems as though the following line is not doing anything in IE:
d.css({ position: "fixed", top: "0px" });
The first line is also evaluating to -2 in IE whereas in Firefox it's 377.
var scrollerTopMargin = $("#scroll-container").offset().top;
I am no CSS expert and have been pulling my hair out on this. There must be a simple solution! Please help!
Thanks
Ben
IE does not like your doctype and is running with quirks mode activated. this is why it does not work.
Try this one and see if it works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
To run IE8 in standard mode you need to choose a strict doctype, not a a transitional one
http://en.wikipedia.org/wiki/Quirks_mode