CODEWITHSUNDEEP
javascriptcssinternet-explorercross-browser
SilentDev
SilentDev

Reputation: 22747

Javascript / CSS not working for IE 10 but working for IE 8

In my css I have this

#inner div {
    display: inline;
    height: 200px;
    width: 200px;
    margin: 10px;
    background-color: black;
}

and in my html, I have this

<div id="inner">
    <h2> <span class="action">Click</span> on each button to read more about them </h2>
     <br />
     <span id="here"></span>    
</div>

And in my Javascript I have this

var divComposition = "<div id='div" + i + "'><p></p></div>";    
$('#here').after(divComposition);

So I'm placing it after the span, but it is still inside 

#inner

so it is a 

#inner div

. The problem is that in IE 8, it works. The divs are inline with the background color as black. However, in I.E 10, the divs are not inline and the background color is not balck. How come? I was thinking if I move the CSS below the Javascript then it will work but that doesn't work either. Any ideas on how to solve this? the I.E 10 developer tools shows no errors.

Upvotes: 0

Views: 764

Answers (2)

Ryan Willis
Ryan Willis

Reputation: 624

Line breaks will make your div elements align vertically...

Change this line

var divComposition = "<div id='div" + i + "'><p></p></div><br />";

to

var divComposition = "<div id='div" + i + "'><p></p></div>";

Your code works on all versions of IE for me, and I had the JavaScript executing within the body of the HTML. You could throw all of your code in to a function and then call it from the body, if it still doesn't display properly.

Upvotes: 0

circleofconfusion
circleofconfusion

Reputation: 189

Elements styled

display:inline;

will ignore height and width, or should, anyway. Have you tried it with inline-block instead of inline?

Upvotes: 1

Related Questions