ansaurus

Question

CSS Differences Between IE and Firefox: display

Answer 1

+1 A:

I use the following code which works in all browsers.

The HTML

<div class="field clearfix">
    <label for="firstName" id="firstNameLabel">First Name</label>
    <input name="firstName" type="text" id="firstName" />
</div>

The CSS

.field {
    margin: 0 0 10px;
}
.field label {
  font-size: 13px;
  padding: 8px 0;
  margin: 0 18px 0 0;
  display: block;
  float: left;
  width: 90px;
}
.field input,
.field textarea {
  width: 220px;
  font-size: 11px;
  line-height: 11px;
  padding: 6px 10px;
  color: #666;
  background: #fff;
  border: 1px solid #c4c6c7;
  display: block;
  float: left;
}

And the all too famous clearfix hack (prevents you from having to add clearing elements. Just set on the parent div that contains floated elements and it works like a charm.

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    font-size:0;
    clear: both;
    visibility:hidden;
}
   .clearfix{display: inline-block;}
  * html .clearfix {height: 1%;}
  .clearfix {display:block;}

You can fiddle around with the widths to achieve your effect, and also you can set a width on the "field" element as well, if you don't want it to fill up the whole space available.

Good luck.

Marko 2010-08-03 19:33:32

Answer 2

A:

As of this writing, there's no (x)html sample in your question, so I can only offer you methods -rather than specific solutions- to address your problem, but the techniques can be adapted easily enough.

You've got two obvious ways of targeting different browsers (though it's using IE conditional comments, so it's basically targetting IE and non-IE, which might not be as useful as you need), either use a conditional comment to import styles specifically for Internet Explorer:

<head>
    <link rel="stylesheet" type="text/css" href="path/to/general/stylesheet.css" />

    <!--[if ie]>
        <link rel="stylesheet" type="text/css href="path/to/ie/stylesheet.css" />
    <![endif]-->
</head>

The downside of this approach is that you've got two separate stylesheets to maintain.

Or you can use conditional comments to alter the specificity of your selectors:

<body>
    <!--[if ie]>
        <div id="ieOnly">
    <![endif]-->

    <div id="somethingToStyle">
        ...content...
    </div>

    <!--[if ie]>
        </div>
    <![endif]-->
</body>

This approach lets you target IE differently than for proper browsers, without using hacks in your CSS:

body > div#somethingToStyle { /* for non-IE */ }

body > div#ieOnly > div#somethingToStyle { /* IE only */}

The downside of this method is that you've got all the styles in one stylesheet, which can make it rather unwieldy to maintain long-term.

Also, it's worth mentioning that using a CSS reset stylesheet, and a valid doctype, will likely reduce the impact of major browser differences (though not all, obviously).

David Thomas 2010-08-03 19:34:40

Why use hacks for something that can be achieved with one piece of code for all browsers?

Marko 2010-08-03 19:40:01

@Marko, which part in particular is a 'hack'? The first approach simply targets a different stylesheet for IE, which is pretty non-hacky. The second makes the (x)html a little messier, but still allows one to target styles specifically to a particular browser.

David Thomas 2010-08-03 20:22:58

Answer 3

+1 A:

inline-block doesnt properly work in IE, http://work.arounds.org/using-inline-block-ie7-and-ie6/

You have to re-declare display:inline; on the block level elements that are given inline-block to IE. Meaning you have to redeclare the rule for the div you gave inline-block in a separate rule.

<!--[if lt IE 8]>
<style>
.editor-label { display:inline; zoom:1; }
</style>
<![endif]-->

This will most likely solve your issue. If not, please post a demo.

meder 2010-08-03 19:53:27

ansaurus

tags:

views:

answers:

CSS Differences Between IE and Firefox: display

related questions