bootstrap 3 - page rendering oddly in ie11/windows 8

Here's the link:  http://ikonltd.com/current/index-bs-test.cfm

Check it in IE11 on desktop/laptop at full width (i'm running windows 8 but guessing that doesn't make a difference in this case).

Notice when you start to make the browser window smaller the responsive css kicks in and everything works as expected. Only at it's largest width does it look this bad. And only in IE  - haven't checked earlier versions of IE.
ie11-screengrab.jpg
ff-screengrab.png
phillystyle123Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Bob LearnedCommented:
When the page works, it doesn't have any text.  I noticed that in the IE11 on Windows 8, that it renders text.  It looks like IE11 is having a problem with the HTML5 <aside> element.  is there supposed to be a display:none on the aside?
Marco GasiFreelancerCommented:
First, I see you don't link the ie10-viewport-bug-workaround.js as usually bootstrap 3 suggests to do
Second, but this doesn't matter for the actual issue, I see you're using jquery-latest.min.js: be careful doing this because the latest version could break your other code which worked properly with the previous jquery version. I suggest to find a version all you core works fine with and use that.
phillystyle123Author Commented:
Bob Learned (TheLearnedOne) - I need the carousel aside {display:none;} that said I tried a version of the page without aside (using div instead) and I also got rid of the carousel aside {display:none;} to test, nothing changed -formatting still broken i ie11.

Marco Gasi - I added ie10-viewport-bug-workaround.js to my header, then when that didn't work, to my footer. My formatting is still broken in ie11. Thanks for the point about the latest version of jquery -really good point -I run into that a lot with WordPress.

So, I'm still stuck. Notice that my media queries are working in ie11 -so if you drag the window smaller, the formatting works. It's just in desktop/ie11.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

phillystyle123Author Commented:
Just checked in windows safari (last available version) and the formatting is the same as it is in IE11-I know bootstrap doesn't support windows safari but perhaps there's a connection here
RobOwner (Aidellio)Commented:
Line 263 (custom.css): .images > div:nth-child(odd){clear:left;}

this is still being applied at the lg width.  Disabling it, fixes it for me
phillystyle123Author Commented:
Rob Jurd -that changes the css formatting a bit, although still not correct (see http://ikonltd.com/current/ in firefox or chrome on your desktop.

Notice there are no thumbnail captions. Instead, the captions appear in the sidebar when a thumb is moused over.
RobOwner (Aidellio)Commented:
This is what you need to add to your custom.css

@media screen and (min-width: 1200px) {
    .caption {
        display: none; 
    }
    .images * {
        clear: none;
    }
}

Open in new window

screenshot:

Capture.JPG
phillystyle123Author Commented:
damn, i wish that was the solution! It's still looking the same though. 2 columns, captions underneath stretched out thumbnails. Your screengrab isn't actually what it should look like. check out http://ikonltd.com/current/ in firefox or chrome (the page formatting is also messed up in windows safari - exactly the same way as in ie11).  Or take a look at the screen grab.  Also, see what happens when you mouseover a thumb in ff or chrome -the caption appears in the left column. That isn't happening in ie11. I've messed around with removing different css and js, but it still looks and functions the same.
ie11-screengrab.jpg
RobOwner (Aidellio)Commented:
Help me shortcut this :) What is the JavaScript you're using to hide / show the captions? Just bootstrap or another library?
RobOwner (Aidellio)Commented:
The panel tabledescription is missing because of the way your styles are cascading.

You've set it to not display, see line 263 in custom.css:

#coolmenu{display:none;}

seems it's those styles from line 174 onwards.
phillystyle123Author Commented:
#coolmenu is set to display:none; on for mobile breakpoints. the #coolmenu -which is triggered on mouseover, is set to work on desktop. It already works as expected in every width in firefox, chrome, safari ios. it seems to me that ie and safari windows aren't recognizing something. a media query?  Again, If you lessen the width of the page in ie or safari windows, the page displays correctly -the media queries kick in.

Here's the script you requested, but, it already worked before bootstrap was used on the site.

Here it is, but it worked in IE before I applied the bootstrap framework:


<!--tool tip js for artist landing page descriptive text painting text rollover-->
<script type="text/javascript">

var baseopacity=100

function showtext(thetext){
if (!document.getElementById)
return
textcontainerobj=document.getElementById("tabledescription")
browserdetect=textcontainerobj.filters? "ie" : typeof textcontainerobj.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
document.getElementById("tabledescription").innerHTML=thetext
highlighting=setInterval("gradualfade(textcontainerobj)",50)
}

function hidetext(){
cleartimer()
instantset(baseopacity)
}

function instantset(degree){
if (browserdetect=="mozilla")
textcontainerobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
textcontainerobj.filters.alpha.opacity=degree
else if (document.getElementById && baseopacity==0)
document.getElementById("tabledescription").innerHTML=""
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.2, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=20
else if (window.highlighting)
clearInterval(highlighting)
}
</script>

Open in new window

phillystyle123Author Commented:
Ha! Well, as is often the case, it was an over site on my part.

One of my media queries was missing a closing bracket!!!!!

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
phillystyle123Author Commented:
I marked my own as the best solution but gave Rob and Marco points for trying to help me solve what turned out to be a an oversight on my part.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.