Bootsrap grid in ie

HTML & CSS
,
1

Hi everyone! does anyone using bootstrap and experience a problem with grid in all IE versions like this?

IE version

1096×199 64.8 KB

Chrome and other browsers

1155×162 58.7 KB

as you can see the last image always go down at the end of the container

I am testing it now in xampp, here’s the code snippet:

<footer>
<div class="container">
	<div class="row">
		<div class="col-md-4 footer-link">
			<ul>
				<li><a href="">Shop Now</a></li>
				<li><a href="">Luxxe White</a></li>
				<li><a href="">Luxxe Protect</a></li>
				<li><a href="">Luxxe Slim</a></li>
				<li><a href="">Luxxe Renew</a></li>
				<li><a href="">Contact Us</a></li>
			</ul>
		</div>
		<div class="col-md-8 acredited">
			<ul>
				<li><img src="http://www.skinwhitening101-intl.com/wp-content/uploads/2015/02/AIEFNLB.png" alt="frontrow international"/></li>
				<li><img src="http://www.skinwhitening101-intl.com/wp-content/uploads/2015/02/best-brand.png" alt="frontrow international"/></li>
				<li><img src="http://www.skinwhitening101-intl.com/wp-content/uploads/2015/02/bestseller.png" alt="frontrow international"/></li>
				<li><img src="http://www.skinwhitening101-intl.com/wp-content/uploads/2015/02/fda.png" alt="frontrow international"/></li>
				<li><img src="http://www.skinwhitening101-intl.com/wp-content/uploads/2015/02/sealofexcellence.png" alt="frontrow international"/></li>
				<li><img src="http://www.skinwhitening101-intl.com/wp-content/uploads/2015/02/fdausa.png" alt="frontrow international"/></li>
				<li><img src="http://www.skinwhitening101-intl.com/wp-content/uploads/2015/02/gmp.png" alt="frontrow international"/></li>
				<li><img src="http://www.skinwhitening101-intl.com/wp-content/uploads/2015/02/halal.png" alt="frontrow international"/></li>
				<li><img src="http://www.skinwhitening101-intl.com/wp-content/uploads/2015/02/madeinusa.png" alt="frontrow international"/></li>
				<li><img src="http://www.skinwhitening101-intl.com/wp-content/uploads/2015/02/globalbrand.png" alt="frontrow international"/></div></li>
			</ul>
		</div>
	</div>
</div>

and the css code in footer:

    /* footer */
    footer{
	width: 100%;
	background-color: #db0254;
	padding: 15px 0;
	border-top: 4px solid #fc8bb6;
	color: #fff;
}

.footer-link ul li a{
	color: #fff;
	font-size: 20px!important;
}
.acredited ul li{
	float: left;
	list-style:none;
	padding:0;
	margin: 0;
}
.copyright {
	background-color: #be0137;
	text-align: center;
	color: #fff;
	font-family: 'Damion', cursive;
	font-weight: 400; 
	padding: 5px 0;
}
2

That’s just a float drop because there isn’t enough room. Not entirely unexpected.

Give the following rules to your stylesheet. Note that the float:none can be the same as you just removing it from your stylesheet.

.acredited ul{display:table;}
.acaredited ul li{float:none;display:table-cell;}

3

It worked! Thank you so much for your fast response. :smile:
By the way do you have any tips or some coding about bootstrap framework compatible in ie 6 to 7?

4

Are you being forced to cater for these browsers? Or do you just not realize that between these two browsers, the usage percentage is probably less than 1%?

You’ll have to figure out each issue individually. A few members here still remember IE6/7 bugs and fixes so we can be of help if you want to go that route.

5

Unfortunately yes, our site must be compatible with ie9 and lower. I don’t know why, but we were told most of our viewers uses old IE browsers. :disappointed_relieved:

6

They probably are just in compatibility mode which false reports. Do your pages have the IE emulate edge meta tag?

7

this one?

<meta http-equiv="X-UA-Compatible" content="IE=edge">

If that’s the one. yes I have it in all of my pages. so far I just had a little 1% difference with my css in ie 8 an lower compare to modern browsers. hmm. Right now i’ll be posting a new questions regarding jquery I’m coding with.

8

Is it the first tag in <head>?

9

yes the very first tag in the head. some styles are being followed by ie 7 or 6. but I can’t check it at the same time. My ie tester crashes when I load ie 7 tab to view my site locally.

10

That’s odd that you are seeing many IE7 users.

If you give us specific problems we can give you IE7 fixes.

11

sure, let me review my code first. :smile:

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.