Jump to content
Sign in to follow this  
tejasamrute

Columns taking full width in bootstrap in IE7 & 8

Recommended Posts

The columns are showing full width in IE7 & 8 even though i have set to 'col-sm-4'.

 

i have used bootstrap files n respond.min.js locally inorder to eliminate probs caused by CDN links..

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    <script src="bootstrap.min.js"></script>        <!--[if lt IE 9]>      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>      <script src="respond.min.js"></script>    <![endif]-->         <title>Untitled Document</title><style type="text/css">.container-fluid {	background-color:pink;}</style></head><body><div class="container-fluid">  <h1>Hello World!</h1>      <div class="row">        <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>        <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>        <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>    </div></div></body>

Share this post


Link to post
Share on other sites

Did you test this on a server or just in your local filesystem? I've found IE8 and under having trouble with bootstrap if you try it on the local filesystem.

Share this post


Link to post
Share on other sites

tried it on server..it is taking full width.... can you please put it on your server n check.....maybe this is server issue or something coz coding seems perfect...

Share this post


Link to post
Share on other sites

No, it's not a server problem.

 

Does your original code have a <!DOCTYPE> and <html> tag?

Share this post


Link to post
Share on other sites
<!DOCTYPE HTML><html lang="en"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    <script src="bootstrap.min.js"></script>     <!--[if lt IE 9]>      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>      <script src="respond.min.js"></script>    <![endif]-->    <title>Untitled Document</title><style type="text/css">.container-fluid {	background-color:pink;}</style></head><body><div class="container-fluid">  <h1>Hello World!</h1>      <div class="row">        <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>        <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>        <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>      </div></div></body></html>

Share this post


Link to post
Share on other sites

I'm testing this in Internet Explorer 8 and it is working fine. Internet Explorer 7 puts the columns side by side as well, except that the third column doesn't fit so it's going below.

 

IE8 and under won't work right on the filesystem, but they work when the page is uploaded to localhost or another server.

Share this post


Link to post
Share on other sites

I don't see a "browser mode" option in the developer tools. The document mode option is the only one I can see here where different versions of IE can be tested.

Share this post


Link to post
Share on other sites

The newer version of Internet Explorer doesn't make a distinction between browser mode and document mode, you probably should change your browser mode to match the document mode when testing and be sure you're testing standards compliant document mode.

 

What's the URL of the page you're testing? Did you check the console for errors?

Share this post


Link to post
Share on other sites

Open the developer tools, change browser mode and document mode to IE8, then open the console tab of the developer tools and reload the page to check for any errors.

 

Make sure you're testing the page on a server, like localhost.

Share this post


Link to post
Share on other sites

I have noticed that if i choose browser mode 8 with document mode 8...it shows perfectly.....but it has to be done manually......is there any way to force this....e.g if a visitor has come from ie8.....his browser mode and document mode would be forced to ie8

post-175359-0-83401400-1420014358_thumb.jpg

post-175359-0-06480800-1420014360_thumb.jpg

Share this post


Link to post
Share on other sites

If they're actually using the real IE8 and not trying to emulate it then they won't encounter the problem. It's just your developer tools that work that way.

Share this post


Link to post
Share on other sites

i managed to solve the issue.....well it was stupid....somehow my respond.js was corrupt even though i downloaded from GitHub..'strange'

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...