|
|
| Author |
Message |
| t121anf |
This post is not being displayed .
|
t121anf
World Chat Champion
Joined: 23 Feb 2007
Karma :  
|
 Posted: 15:22 - 05 Oct 2016  Post subject: Help with CSS in Internet Explorer |
 |
|
I have some code which was given to me by our helpful but busy web department.
For some reason it doesn't display correctly in Internet Explorer, fine in Chrome, Firefox and Safari (will check Edge and report back)
Can anyone tell me why IE hates this code?
HMTL
| Code: |
<link href="site.css" rel="stylesheet" type="text/css" />
<div id="footer">
<div class="header_footer_inner">
<div class="menu_section">
<nav>
<h1>Popular activities</h1>
<ul>
<li><a href="https://www.google.co.uk">1</a></li>
<li><a href="http://www.google.co.uk">2</a></li>
<li><a href="https://www.google.co.uk/">3</a></li>
<li><a href="https://www.google.co.uk">4</a></li>
<li><a href="http://www.google.co.uk">5</a></li>
<li><a href="https://www.google.co.uk">6</a></li>
<li><a href="https://www.google.co.uk">7</a></li>
</ul>
</nav>
</div>
<div class="address_section">
<section>
<h1>Find us</h1>
<p><strong>1</strong></p>
<p><a href="http://www.google.co.uk/">A</a></p><br />
<p><strong>2</strong></p>
<p><a href="http://www.google.co.uk/">B</a></p><br />
<p><strong>3</strong></p>
<p><a href="http://www.google.co.uk/">C</a></p>
</section>
</div>
<div class="contact_section">
<section>
<h1>Contact us</h1>
<p>Telephone: <a href="tel:+123456789">+123456789</a></p>
<p><a href="http://www.google.co.uk/">1</a></p>
<br />
<ul>
<li><a href="http://www.google.co.uk/">1</a></li>
<li><a href="http://www.google.co.uk">2</a></li>
<li><a href="http://www.google.co.uk/">3</a></li>
<li><a href="http://www.google.co.uk">4</a></li>
</ul>
</section>
</div>
<div class="section_social">
<section>
<h1>Social links</h1>
<a href="https://www.facebook.com/" target="_blank"><img src="images/social_facebook.png" alt="facebook icon link to our facebook"></a>
<a href="https://twitter.com/" target="_blank"><img src="images/social_twitter.png" alt="Twitter icon link to our twitter"></a>
<a href="http://www.youtube.com" target="_blank"><img src="images/social_youtube.png" alt="Youtube icon link to our Youtube"></a>
</section>
</div>
</div>
</div>
|
CSS
| Code: |
body {
min-height: 100%;
width: 100%;
margin: 0
}
html {
font-family: "Open Sans", sans-serif;
font-weight: 300;
font-size: 16px;
font-size: 1em;
line-height: 1.45;
overflow-y: scroll;
min-height: 100%;
color: #191919;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: transparent;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
.header_footer_inner {
padding: 0 16px
}
.header_footer_inner,
.inner,
.text_inner {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 100%;
-ms-word-wrap: break-word;
word-wrap: break-word
}
.header_footer_inner:before,
.header_footer_inner:after,
.inner:before,
.inner:after,
.text_inner:before,
.text_inner:after {
display: table;
content: ""
}
.header_footer_inner:after,
.inner:after,
.text_inner:after {
clear: both
}
img {
height: auto;
max-width: 100%;
-ms-interpolation-mode: bicubic;
border: 0;
vertical-align: text-bottom;
vertical-align: bottom
}
b,
strong {
font-weight: 400 !important
}
a {
text-decoration: none;
background-color: transparent;
color: #6b1014;
-webkit-transition: color, .1s, ease-in-out;
-moz-transition: color, .1s, ease-in-out;
-ms-transition: color, .1s, ease-in-out;
-o-transition: color, .1s, ease-in-out;
transition: color, .1s, ease-in-out;
outline: none;
text-decoration: none
}
a:active {
outline: 0
}
a:hover {
color: #560d10;
outline: 0
}
a:focus {
color: #560d10;
outline: -webkit-focus-ring-color auto 5px;
outline-color: #560d10;
z-index: 100000
}
#footer {
word-wrap: break-word;
padding-top: 30px;
margin-top: 30px
}
#footer h1 {
font-size: 18px;
font-size: 1.125em;
font-weight: 700;
margin: 0 0 15px 0
}
#footer ul,
#footer ol,
#footer p,
#footer li {
margin: 0;
padding: 0
}
#footer li {
display: block
}
#footer a {
color: #191919
}
#footer a:hover {
color: #6b1014
}
#footer a:focus {
color: #560d10
}
#footer address {
float: left
}
#footer address a {
display: block
}
#footer .copyright {
float: left;
width: 100%;
margin: 0 0 104px
}
#footer .copyright p.made_by {
margin-top: 30px;
cursor: vertical-text
}
#footer [class*="_section"] {
width: 100%;
float: left;
margin-bottom: 30px
}
#footer .section_social {
width: 100%;
float: right;
margin: 0 0 30px 0
}
#footer .section_social a {
display: inline-block;
max-width: 40px;
margin: 0 5px
}
@media screen and (min-width: 35.9375em) {
#footer {
padding-top: 35px;
margin-top: 35px
}
#footer h1 {
margin: 0 0 20px 0
}
}
@media screen and (min-width: 35.9375em) {
#footer [class*="_section"] {
margin-bottom: 35px
}
#footer .menu_section {
margin-right: 1.2%
}
#footer .contact_section {
float: right
}
#footer .menu_section,
#footer .address_section,
#footer .contact_section {
width: 49.4%
}
#footer .section_social {
margin: 0 0 35px 0
}
#footer .section_social a {
display: inline-block;
max-width: 55px;
margin: 0 10px 0 0
}
}
@media screen and (min-width: 44.375em) {
#footer .address_section {
margin-right: 1.2%
}
#footer .contact_section {
float: left
}
#footer .menu_section,
#footer .address_section,
#footer .contact_section {
width: 32.5333333333%
}
#footer .section_social {
width: 66.2666666667%
}
}
@media screen and (min-width: 44.375em) and (min-width: 87.5em) {
#footer .section_social {
float: right;
width: 32.5333333333%
}
}
@media screen and (min-width: 72em) {
html {
line-height: 1.58
}
}
@media screen and (min-width: 72em) {
.header_footer_inner {
max-width: 1325px;
padding: 0 30px
}
}
@media screen and (min-width: 72em) {
#footer {
padding-top: 40px;
margin-top: 40px
}
#footer h1 {
margin: 0 0 25px 0
}
#footer [class*="_section"] {
margin-bottom: 40px
}
#footer .section_social {
margin: 0 0 40px 0
}
}
#footer ul li {
font-size: 18px
}
#footer section p {
font-size: 18px
}
#footer {
background-color: #2b95a5;
color: #fff
}
#footer a {
color: #fff;
font-style: normal
}
|
I won't bother uploading the images, they are simple icons from Facebook, Twitter and Youtube.
Hope someone can help as it's doing my head in. |
|
| Back to top |
  |
You must be logged in to rate posts |
|
 |
| t121anf |
This post is not being displayed .
|
t121anf
World Chat Champion
Joined: 23 Feb 2007
Karma :
|
|
| Back to top |
| |
You must be logged in to rate posts |
|
|
| t121anf |
This post is not being displayed .
|
t121anf
World Chat Champion
Joined: 23 Feb 2007
Karma :
|
|
| Back to top |
| |
You must be logged in to rate posts |
|
|
| Derivative |
This post is not being displayed .
|
Derivative
World Chat Champion
Joined: 03 Aug 2010
Karma :  
|
| Posted: 15:43 - 05 Oct 2016 Post subject: |
|
|
What specifically doesn't work?
On the assumption that there's some property IE11 doesn't support, I would try commenting out random bits of it to attempt to get Chrome to look the same as IE11.
If it's a matter of both browsers interpreting the same CSS differently you'll have to basically go back and forth between the two.
I would focus on the @media and the custom -webkit/-ms/ etc stuff first.
Potentially interesting SO post (@media screen vs @media all):
https://stackoverflow.com/questions/26059414/media-queries-not-working-in-internet-explorer-11#26059469
Last edited by Derivative on 15:52 - 05 Oct 2016; edited 2 times in total |
|
| Back to top |
| |
You must be logged in to rate posts |
|
|
| CaNsA |
This post is not being displayed .
|
CaNsA
Super Spammer
Joined: 02 Jan 2008
Karma : 
|
|
| Back to top |
| |
You must be logged in to rate posts |
|
|
| t121anf |
This post is not being displayed .
|
t121anf
World Chat Champion
Joined: 23 Feb 2007
Karma :
|
|
| Back to top |
| |
You must be logged in to rate posts |
|
|
| t121anf |
This post is not being displayed .
|
t121anf
World Chat Champion
Joined: 23 Feb 2007
Karma :
|
| Posted: 15:49 - 05 Oct 2016 Post subject: Re: Help with CSS in Internet Explorer |
|
|
With good reason, unfortunately some of our customers still do. |
|
| Back to top |
| |
You must be logged in to rate posts |
|
|
| CaNsA |
This post is not being displayed .
|
CaNsA
Super Spammer
Joined: 02 Jan 2008
Karma :
|
|
| Back to top |
| |
You must be logged in to rate posts |
|
|
| Rogerborg |
This post is not being displayed .
|
Rogerborg
nimbA
Joined: 26 Oct 2010
Karma : 
|
|
| Back to top |
| |
You must be logged in to rate posts |
|
|
| noobRider |
This post is not being displayed .
|
noobRider
World Chat Champion
Joined: 23 Sep 2012
Karma :
|
| Posted: 18:07 - 05 Oct 2016 Post subject: |
|
|
On Win 8.1 it looks the same in IE 11 & Firefox 42 & Chrome 51.0.2704.84. Three columns, social links move to column 2 if the width reduces and everything moves left on narrow windows.
It looks the same on IE 11 under Windows 7 for me
____________________
Licence: Nov 2012, Bikes: Suzuki GN125, Moto Guzzi Strada 750, Triumph Sprint ST 955i x 2
AnPhonEh: I need plans, I need contingency plans also, I need back up contingency plans |
|
| Back to top |
| |
You must be logged in to rate posts |
|
|
| t121anf |
This post is not being displayed .
|
t121anf
World Chat Champion
Joined: 23 Feb 2007
Karma :
|
|
| Back to top |
| |
You must be logged in to rate posts |
|
|
| t121anf |
This post is not being displayed .
|
t121anf
World Chat Champion
Joined: 23 Feb 2007
Karma :
|
|
| Back to top |
| |
You must be logged in to rate posts |
|
|
| Jayy |
This post is not being displayed .
|
Jayy
Mr. Ponzi
Joined: 08 Jun 2009
Karma : 
|
|
| Back to top |
| |
You must be logged in to rate posts |
|
 |
Old Thread Alert!
The last post was made 9 years, 100 days ago. Instead of replying here, would creating a new thread be more useful? |
 |
|
|
Help & FAQs
Search BCF
Members
Groups
Events Calendar
rating
rating