I'm putting a ul list in a div which is below a second div. The vertical gap in chrome, ff etc is a little long. So, I'm puting a 10px negative margin on the ul div. Looks great except in IE. With the negative margin, the list is almost overlapping the title text
I have done a lot of reading re inline: block; zoom: 1; position: relative etc, but can't seem to get the page to display right in IE. Bit of a newb on css so specific directions on what has to be applied to what div would be appreciated..
simple for the experts I expect
THANKS
Randall
You should use the [if lte IE(?)] conditional comments to make adjustments to IE only.
A conditional comment link looks like this:
<!--[if lte IE 7]>
<link type="text/css" rel="stylesheet" href="ie7.css" media="screen" />
<![endif]-->
and your link should go in <head>, with all your other css links.
Note
if you are overriding standing css rules in your IE style sheet you may need to use !important etc.
Edit
The lte in the conditional comment means less than or equal to. You can remove it completely to target only one IE version.
Related
Is it possible to use different css selector for IE(any version of ie) and chrome? Its a normal top property which appears differently in both browser and needs to explicitly adjusted according to the browser
You cannot do this in CSS alone. You need what are called "conditional comments" like the following:
<!--[if IE 8]>
<p>This is IE 8</p>
<![endif]-->
These are added to your HTML and can be used in many ways. Two primary ways that I have used them are:
To link to a wholly different CSS style sheet
To change the class on the <html> or some other parent tag and use CSS rules to select any children of it
I realize that second description may sound a bit complex but it's actually pretty simple so here's an example:
<!DOCTYPE HTML>
<!--[if IE 8]>
<html lang="en-US" class="ie8">
<![endif]-->
<![if !IE]>
<html lang="en-US">
<![endif]>
...
<body>
<div class="someClass"></div>
</body>
...
Then, in your CSS, use a selector like: .ie8 .someClass
Welcome to the club! Anyways, although you can try to set browser specific css on elements, actually you cannot guarantee that it'll work exactly like you aimed. Because it depends on how those browsers handles these css classes, and there is nothing you can do about that. You may try to set different css classes for IE like this:
<!--[if lt IE 9]>
<html class="ie">
<![endif]-->
<!--[if (!IE) | (IE 9)]><!-->
<html>
<!--<![endif]-->
Notice that these are actually comment lines, but ie reads these lines and set the user-defined css class "ie" to html element (you may notice that Chrome and Firefox ignores these statements). you can then use this css, for example;
html.ie div{
top: 0;
}
It's really annoying to deal with these cross-browser ie bs, I know. hope this helps
What you want to achieve?
If you want to compensate browsers all differences you can use for eg. modernizr
If you want to add special css file for IE you can use Conditional comments They look like this:
< !--[if IE 9]>
< link rel="stylesheet" type="text/css" th:href="ie9.csss"/>
< ![endif]-->"
If you want to fix something in css selector you can use hack(HACK! means not recommended, avoid but if you really have to and you have gun next to your head etc...) which will make properties or css class understandable only for specific browser (google this there is to many of them) eg. http://code.tutsplus.com/tutorials/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters--net-10575
And last option learn CSS and find where you made mistake because probably some element is diffrent size and that caused 1-2 px difference with position top
I have a gallery in which i'm using the figure and figcaption tags. This displays fine in all modern browsers but in IE8 it breaks the CSS for the figure and figcaption tags because the browser doesn't support them. Just including the html5shiv library doesn't fix it. Is there a method within that I would have to call?
the problem was that the figure element did not automatically size to the picture it contained so it needed to be specifically set in the CSS
I ran into this same issue and found that it stemmed from specifying max-width: 100% for img elements. If I remove this declaration, IE8 renders the images at the appropriate sizes. Unfortunately, it means they won't responsively size on smaller screens.
The best solution I know of is to specify max-width: none using a conditional comment that's applied only in IE8 and earlier:
<!--[if lt IE 9]>
<style rel="stylesheet">
img {max-width: none;}
</style>
<![endif]-->
My page is at http://jerswebempire.com/ovrtur/index.php
The page displays nearly perfectly in all browsers except IE8. In IE8, floated divs have incorrect margins. For example, you'll see the search bar at the top is sitting underneath the nav. However, if you open the page in Chrome or Firefox or IE9, it's displaying in the correct spot.
What am I doing wrong?! I can't seem to find a fix.
Also, the box for Latest Video is in two columns in all browsers but IE8. It's similar to the above problem where there is a left margin added that shouldn't be there.
The page was built with Bootstrap.
Any help would be appreciated.
Use ie conditionals between your index
<html> </html>
add a class to for the 'ie 8 only' margins like the html boilerplate does.
Load a custom ie 8 only stylesheet and play with the margin problem there like this:
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie8-only.css" /> <![endif]-->
Or load a class where you need it.
<!--[if IE 8]><html class="ie8 lt-ie9"> <![endif]-->
Apply the ie conditional class to whatever you need.
<div class="floatedDiv ie8"
CSS
.ie8 { margin:0px; }
I can't debug on ie8 but I searched and found that there is in fact a negative margin bug on ie7/8.
They recommend using
zoom:1, position: relative
as a workaround.
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.
I know this is not an uncommon problem, but my layout that works in all other browsers blows up completely in IE (8 and 9).
I don't know if protocol is to post all the code here or just a link...
it is: www.megadyne.com/safezone/index.php
I think the relevant part is that I have a container div which is position:relative and then a bunch of divs inside that are position:absolute and the inner divs are being pushed out in IE.
There are lots of other problems with the layout—only in IE, but hopefully they are related?
Thanks in advance!
Brian
Take a look at the css for http://html5boilerplate.com/ it does a pretty good job standardizing all the css for browsers before you put in your code. Try using their css and putting #inline your css into their css where it asks for your custom css, and see if that fixes the issue.
if that doesn't work you can have a separate css file for IE with the HTML5 code
//If browser is IE version 8 or greater
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
Turns out there was something wrong with my declaration. Fixed that and all is right with the world again.