claudia
claudia

Reputation: 23

CSS issues in IE8

Im having 2 Div's , one Div should appear beside another Div, and its working the same way as expected in all the browsers but in IE8, the right div is appearing below left div, the same is working fine in IE9, But the issue is with only IE8,how to overcome this as i dont have much experience on working with Css

 .leftcontent {
background: none repeat scroll 0 0 #;
float: left;
height: 500px;
width:25%;
 }


.rightcontent {
background: none repeat scroll 0 0 #;
float: left;
height: 500px;
width:80%;
 }

Upvotes: 0

Views: 659

Answers (2)

hvgeertruy
hvgeertruy

Reputation: 190

Mind your width: 25% + 80% = 105%.. that's not right..

A known IE 8 bug is that it parses widths differently from other browsers. It parses 20% + 80% + [something else] > 100%.. (see comments: might be related to inline-block as suggested by avrahamcool)

A common (and the easiest) way to fix this is to slightly lower the widths ex:

 .left_content {
background: none repeat scroll 0 0 #;
float: left;
height: 500px;
width:19%;
 }


.cal_content {
background: none repeat scroll 0 0 #;
float: left;
height: 500px;
width:79%;
 }

19% + 79% = 98% and IE will behave.

Upvotes: 0

Charles HETIER
Charles HETIER

Reputation: 2066

you can also make an overload with a specific css for IE thanks to IE conditional comments

<!--[if IE 8]> pour IE 8.0 <![endif]-->

There are several ways to use them, 2 examples:

  • in the header to add a specific css

  • and / or to initialize a body with an ie8 class, so that in your css you can define:

_

.yourCssClass{
   /*common css attributes*/
}

.ie8 .yourCssClass{
  /*ie8 specific css attributes*/
}

Upvotes: 1

Related Questions