Link to home
Start Free TrialLog in
Avatar of phillystyle123
phillystyle123Flag for United States of America

asked on

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
Avatar of Bob Learned
Bob Learned
Flag of United States of America image

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?
SOLUTION
Avatar of Marco Gasi
Marco Gasi
Flag of Spain image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of phillystyle123

ASKER

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.
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
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
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:

User generated image
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
Help me shortcut this :) What is the JavaScript you're using to hide / show the captions? Just bootstrap or another library?
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.
#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

ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.