Hi might be a simple one for someone.
I have finished working on this website and in ie9 there is a lot of line height issues - i don't even know if line height is the right word - spacing seems to imply letter spacing.
The easiest way to explain my issue is with screen shots.
Why is the 3rd one (ie9) so out?
url for the website is http://www.geckowebsolutions.co.uk
Could it be the font .eot is rending differently to the otf?
If so how can I work around this?
DanSiop
Change your headers to tell IE9 to follow the modern norms :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Do the 3 changes : the doctype, the html element and the meta.
I am not sure why it's happening (trouble shooting in IE sucks) but it's your.breadcrumbs CSS that is being affected. Quick and dirty solution is to add an IE conditional.
<!--[if IE]>
<style>
.breadcrumbs{top:11px;}
</style>
<![endif]-->
Related
Been trying to debug this for a couple of hours. I've been asked to fix a "responsive" website that is really buggy. I can't share the actual code b/c it's all on localhost on a secured network. Hoping you might see something have a light bulb go off from my description here.
Problem, we have #media (max-width:800px) and it stops affecting page elements around 600px wide.
Another example, i set html{ max-width:1200px} but to make the browser actually fit my 1200 pixel browser window I had to set it to 2250px.
My question is, does this ring any bells for anyone? I'm going through all the CSS and don't see any thing that immediately looks like the issue. These guys really broke responsive design.. bleh
Thanks..
EDIT
here's the meta tags that apply
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
... bunch of junk...
<meta name="viewport" content="width=device-width, initial-scale=1"> (again)
With some help, I was able to resolve the issue.
Issue was related to pixel-ratio declaration but not in CSS, in minified Javascript...
Eliminating this unnecessary js made the page load as expected.
Core lesson: use javascript for functionality and CSS for design and layout.
I have no idea why IE9 is giving such a different rendering to any other browser, IE10 works great as well as all other modern browsers.
My site is based on bootstrap 3.
I'm not sure where to start looking as the dev tools within IE9 are terrible.
Anyone have any ideas on where to start or what it could be:
http://www.house-mixes.com
Paul
Try setting your DOCTYPE to
<!DOCTYPE html>
and add this meta element
<meta http-equiv="X-UA-Compatible" content="IE=edge">
[solved - issue was related to web tools provided by ucoz]
Your webpage lacks a doctype.
<!DOCTYPE html> should be the first thing in the HTML.
Then use the HTML validator provided by the W3C to fix up your HTML http://validator.w3.org.
You should invest in a reset stylesheet to normalize the elements across browsers. Try plugging this into your header:
<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
I've spent most of today trying to work out why the css on my site isn't working correctly in IE7. You can see the site at http://www.ecocamel.com
When you land on the product scroller page with the shower heads. .. everything is a mess, with mouseover popups partly showing without any mouseover, and products flowing out of the container to the right..
I tried adding overflow:hidden, and position:relative, which did fix quite a lot of it.. but it then caused the website to chop off part of the left / right arrows on other browsers...
SO I've removed everything for now. Just infuriating that it works perfectly on every other browser. How can I work out the best way of fixing it without impacting other browsers? I guess I can add the overflow:hidden / postion:relative stuff with a conditional IE7 statement so it doesn't impact other browsers.. but that still doesn't resolve things properly.
A good method is to use conditional comments.
You could use:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
In this cases extra classes are put on the html tag for you to style explicit for IE6/7/8
Like:
div {color:#ff00ff}
.ie7 div {color:#00ff00;}
In the case of using conditional IE7 statements, while it seems a crap way to do it, if that is the only alternative without re-writing your CSS then that is the best solution.
As GordonM has mentioned, it's hard for us to know what's going on without seeing the code. But as you're using position:relative, I may suggest trying to use z-index so that the popup's display on top of everything (like they should do).
As well as this, have you followed the CSS box model correctly? What I tend to do is write these basic statements when I create a div or p tag:
div {
float:left;
width:100%;
margin:10px;
}
This is cross browser compliant, as I used to work for an agency who wanted their websites to use just one CSS file for all browsers. It is possible to build a web page with HTML and CSS and make it work on every single browser (excluding IE6) without the use of conditional statements. But as I think you've come/coming to the end of development, you aren't in a position to re-write your CSS completely. So try the z-index idea first, then try applying the above code to any affected div.
Google "conditional css for IE" and you'll find a plethora of tutorials showing you how to create conditional CSS for only IE version x+ or specifically ie7.. even all browsers but IE. Most websites require some, if not a ton of IE tweaking. Also, look in to a reset.css to set all margins and paddings to 0 to help with consistency.
If you check out the site below in Safari 5/OSX or IE7/Win, the right bottom column starting with "Stay Updated" (#secondary) is super-narrow.
In the CSS it's set to the same width as the "column" directly above it, #socialsidebar. Instead of being 31.6667% of the total width of the page I think it might be rendering as 31.6667% of #socialsidebar.
http://216.172.167.18/~julia/books/
The width is correct in every other modern browser. Any ideas why this would be happening for Safari 5/OSX and IE7/Win and how to fix it?
Thank you for your help!
Using the IE developer toolbar and setting a width of 100% to #secondary seems to fix this. I would recommend setting up a seperate IE7 stylesheet the same way you setup custom classes on your <html> tag:
<!--[if IE 7 ]>
<link rel="stylesheet" type="text/css" media="all" href="ie7.css">
<![endif]-->
or
<!--[if IE 7 ]>
<script type="text/css>
enter code here
</script>
<![endif]-->
As to why exactly it's happening, IE7 has some weird display quirks to it. I rarely dig deep enough to figure out what's exactly going on, as I prefer to spend as little time with it as possible.
A possible resource: http://www.satzansatz.de/cssd/onhavinglayout.html
I was missing a close-div for the #socialsidebar div. D'OH. Thanks to everyone else who got sucked into my web of stupidity and took the time to look at this. :)