Hi there, I'm developing a site http://canterburycoffee.ambr.ca/ and have been doing testing in Internet Explorer 11. When I hover over the main navigation (and also the mail icon in the top left corner), everything shuffles into its final resting spot. I can't seem to figure out why it's doing this.. It doesn't shift back after I've hovered over all the items. They shift to where they're supposed to be.. Any ideas on why this is happening would be greatly appreciated!
Well, first thing to try and find are the invalid characters, then probably drag the markup kicking and screaming into at LEAST being valid -- sad part is it's HTML 5, meaning the validation rules are ridiculously loosened and it's still buggy as all hell. https://validator.w3.org/nu/?doc=http://canterburycoffee.ambr.ca/ Really though that's one of the WORST steaming piles of developer ineptitude I've ever seen -- the natural result of turdpress and bootcrap slapped together... in that traditional "If you don't know what's wrong with this..." <body class="home page page-id-1553 page-template page-template-front-page page-template-front-page-php group-blog"> <div id="page" class="hfeed site"> <header id="primary-header"> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid navbar-wrapper"> <!-- Brand and toggle get grouped for better mobile display --> <div class="row"> <div class="col-sm-5 col-xs-12"> <div class="navbar-header"> <a href="http://canterburycoffee.ambr.ca"><img id="logo" src="http://canterburycoffee.ambr.ca/wp-content/themes/canterbury-coffee/img/logo.png" alt="Canterbury Coffee"></a> Code (markup): or this: <div class="collapse navbar-collapse navbar-ex1-collapse"> <div class="collapse navbar-collapse in"><ul id="primary-menu" class="nav navbar-nav navbar-right"><li id="menu-item-1774" class="menu-item menu-item-type-taxonomy menu-item-object-product_category menu-item-has-children menu-item-1774 dropdown"><a href="http://canterburycoffee.ambr.ca/products/coffee/" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">PRODUCTS & EQUIPMENT <span class="caret"></span></a> <ul role="menu" class=" dropdown-menu"> Code (markup): or even this: <div class="container-fluid"> <div id="carousel-home-page" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-home-page" data-slide-to="0" class="active"></li> <li data-target="#carousel-home-page" data-slide-to="1"></li> <li data-target="#carousel-home-page" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <!-- carousel item one --> <div class="item active"> <div class="page-banner"> <div class="row"> <div class="col-sm-12"> <div class="featured-banner-image"> Code (markup): "... maybe you shouldn't be working on websites yet" kind of way. Endless pointless DIV for nothing, endless pointless classes for nothing, endless pointless annoying scriptardery, static scripting in the markup, static style in the markup, absolute URI's for no reason other than to waste bandwidth, scripttardery doing CSS' job, pointless aria role garbage much of it on tags that don't even HAVE aria roles, invalid control characters (that's a weird one, how/why did you end up with U+0003's in there?), that stupid x-ua garbage that if you have to use there's something horrifyingly wrong with your code, invalid/nonexistant values in the robots meta, pointless meta not one single UA gives a flying purple fish about, utter and complete gibberish use of numbered headings... etc, etc. That it even functions in any browser is nothing short of a miracle, as evidenced by the 38k of markup delivering 1.3k of plaintext and nothing I'd even consider to be a content image (meaning there is literally nothing on the page that IMHO should even be in a IMG tag). That's EASILY as much as FOUR TIMES the code that should be present on such a simple page. Like most disasters slapped together any-old-way with turdpress and bootcrap, my advice would be to toss that entire mess in the bin and start over -- you'll be playing whack-a-mole with rendering bugs cross-browser for YEARS with that.
Something is extremely screwy with your template and the jquery that it's using. It locked my IE 11 twice (meaning I had to force restart my laptop twice). You'll have to look into this otherwise you will scare people off if it keeps locking their browsers.
I'll look into it if you tell me where did you find such css expresions: #primary-header nav.navbar ul.navbar-nav li > a, #primary-header nav.navbar ul.navbar-right li > a, #primary-header nav.navbar-default ul.navbar-nav li > a, #primary-header nav.navbar-default ul.navbar-right li > a Dude, make your life easier.
The only advice I can give you for a load of crap like that, is sit down with a warm drink, and pick up the want ads to look for a job. The code belongs in the garbage can. It will never be a successful site with the load of trash you have stuffed in that page it loads too slow, it is a usability disaster, and as FAR as SEO, it will probably make Google's crawler puke. You need to either hire a professional to do the site, or invest a little time to learn how to code. If you use WP and bootcrap, then you will never learn enough to produce anything like a useful page, and you will just have one of the millions of sites that no one visits or cares about.