phillystyle123
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
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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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-workarou nd.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.
Marco Gasi - I added ie10-viewport-bug-workarou
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.
ASKER
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
Notice there are no thumbnail captions. Instead, the captions appear in the sidebar when a thumb is moused over.
ASKER
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
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.
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.
ASKER
#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'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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.