CSS Alternative for Display:Box for Ie and Opera

CSS alternative for display:box for IE and Opera?

Flexie implements support for this in browsers that do not natively support display: box;.

IE CSS display:box alternative using Flexie not displaying correctly

this is the improved code for ie10 thanks to @David Storey

.wraper-top {
width:100%;
height:95px;
margin:0 auto;
position:relative;
display: -moz-box;
display: -webkit-box;
display: box;
display: -ms-flexbox;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
-ms-flex-wrap: wrap;
box-align: start;

}

#header-left {
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
background-color: #000000;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
height:48px;
margin:25px 18px 0px 0px;
-ms-flex:1;
}

.header {
position:relative;
z-index:1001;
padding:25px 0px 20px 0px;
width:1138px;
display:block;
-ms-flex:938px;
}

#header-right {
background-color:#000000;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-ms-flex:1;
height:48px;
margin:25px 0px 0px 18px;

}

Which browsers support WebKit CSS?

Wikipedia has a summary of what browsers use WebKit as their HTML rendering engine. The WebKit Project itself has even an more complete list.

Narrow down contained elements if they are to wide to fit in a container

It is possible with pure CSS3 using the flexbox module. Finding adequate browser support for it is another matter unfortunately.

See it in action (if you are on FF/Chrome/Safari).

How do I keep two divs on the same line?

You can make two divs inline this way:

display:inline;
float:left;

display: run-in dropped in Chrome?

I'm not aware of any change to Chrome's support of display:run-in but the setting has always seemed unloved.

Hixie has been consistently opposed to <di> and I kind of understand why. HTML is a semantic language and the semantics are fully defined by dl/dt/dd. The only practical problems are presentational, and that makes it a CSS problem, not an HTML one.

Unfortunately, then current state of CSS doesn't seem up to the job. For dl/dt/dd, and for many similar problems, we really need a mechanism for wrapping groups of elements in a pseudo element which could then perform the role of the <di>.

Obviously, there is no current setting that does what display:run-in is supposed to do. Having said that, in your specific test case, you could achieve the same effect with this CSS:

dt {
  font-weight: bold;
  display: inline;
}
dt:after {
  content: ": ";
}
dd {
  display: inline;
  margin:0;
}
dd:after {
  content:'\0A';
  white-space:pre;
} 

Display:table-cell not working in IE9?

I found the answer from an old thread, where @thirtydot wrote

I applied float: left to stuff. It kinda works.

How can I make "display: block" work on a <td> in IE?

As he said, it kinda works... IE9 stops rendering stuff all crazy, but there's still som aligning to do to make it look good.
But that answer is good enough, I can fix the rest myself...

---

Related Topics