My bootstrap site looks a mess in internet explorer but okay in chrome and firefox browsers
Hi all,
I've been trying to build the front end of a website using bootstap. So far the site seems to look okay in Chrome and Firefox, but not on Internet Explorer.
The site is here - http://www.orangojapan.com/
the
The image shows how the page looks in explorer (left) against how it looks in Chrome/Firefox (right). The second row is all squashed and isn't running across all 12 columns as I specified. Also the Bootstrap cards are not displaying properly (too much empty white space at the bottom of the cards).
The code for the initial part of the site with the row not displaying properly is displayed below:
I'm using a header file where I call the version of bootstrap. The code is below:
Do I need some sort of script or command added to the header file so the site looks okay in internet explorer? I had hoped that using bootstap would help me with the browser compatibility issues, but it seems I'm mistaken with this.
Any advice would be greatly appreciated.
Many thanks
adam
I've been trying to build the front end of a website using bootstap. So far the site seems to look okay in Chrome and Firefox, but not on Internet Explorer.
The site is here - http://www.orangojapan.com/
the
The image shows how the page looks in explorer (left) against how it looks in Chrome/Firefox (right). The second row is all squashed and isn't running across all 12 columns as I specified. Also the Bootstrap cards are not displaying properly (too much empty white space at the bottom of the cards).
The code for the initial part of the site with the row not displaying properly is displayed below:
<!-- HEADER1 -->
<section id="header1"><!-- header starts - this has all the information relating to the header-->
<div class="container"><!-- section starts -->
<div class="row"><!-- row starts -->
<div class="col-sm-4 header-right float-right">
<form>
<h4>Find a teacher</h4>
<div class="form-group">
<label for="exampleSelect1">Study Language:... </label>
<select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<label for="exampleSelect1">Prefecture:... </label>
<select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<label class="checkbox-inline">
<input type="checkbox" value="photo" checked > with photo
</label>
<label class="checkbox-inline">
<input type="checkbox" value="video"> with video
</label>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<p><a href="detailed_search.php"><font color="#FF8000">Detailed Search</font></a></p>
</div> <!-- div class col-md-3 ends-->
</div><!-- row ends-->
<div class="row">
<div class="col-sm-12 header-bottom"><!-- div class col-md-6 starts - THIS IS THE LEFT HALF 6/12 -->
<h2><font color="#FF8000">Orangutan Japan</font> - Teach English in Japan</h2>
<div align="justify">Then teach private man to man language lessons to private language students here in Japan. Sign up today and let potential students contact you directly for lessons. You decide your rates and your teaching methods. Starting teaching today.</p></div>
</div> <!-- div class col-md-12 ends-->
</div>
</div><!-- row ends-->
</div><!-- container ends-->
</section> <!-- section ends --> I'm using a header file where I call the version of bootstrap. The code is below:
<!DOCTYPE html><!-- Orangutan Japan - Japanese Site -->
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap VERSION 4.0.0 BETA** CSS __ these are needed to get the bootstrap framework to appear-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:400,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/OJ_styles.css"><!-- My setup CSS -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.css"><!-- Font Awesome CSS - Needs to be in the 'font awesome' folder and allows you to add font awesome classes and images -->
<link rel="stylesheet" href="css/animate.min.css"><!-- Animate CSS ---need to be in CSS folder to allow you to add animation -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"><!-- For the favicon-->
<link rel="icon" href="/favicon.ico" type="image/x-icon"><!-- For the favicon -->
</head>
<body>
Do I need some sort of script or command added to the header file so the site looks okay in internet explorer? I had hoped that using bootstap would help me with the browser compatibility issues, but it seems I'm mistaken with this.
Any advice would be greatly appreciated.
Many thanks
adam
ASKER
Still a problem. It seems to be a bootstrap v4 (beta) compatibility issue with IE (I'm using IEv11)..
ASKER
Maybe what is happening is that in IE it is still providing the space (height) of the original image - the width perhaps being fixed by the column it is in? I'll try reducing the size of the source image to the maximum size it would appear on any viewport. I'll try this and feed back.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
This was an acceptable way for me.
Open in new window
or get it from here
https://popper.js.org/index.html