CODEWITHSUNDEEP
htmlcssinternet-explorer
babbaggeii
babbaggeii

Reputation: 7737

Links disabled in internet explorer

Seems a very strange problem to me, but the links on this site (www.dartsocialmedia.co.uk/bird) are disabled in internet explorer. It seems to work fine on all the other browsers I've tested. The problem seems to be that internet explorer doesn't recognise them as links.

Any ideas what the problem is?

Edit: also, form inputs are not recognised as such.

Here's the HTML header:

<!DOCTYPE html>
<html>
  <head>
    <title>bird</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
    <link href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/style.css" rel="stylesheet">
    <link href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/css/font-awesome.min.css" rel="stylesheet">
    <link href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/css/custom-responsive.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
    <link rel="icon" type="image/ico" href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/img/favicon.ico">
    <meta name='robots' content='noindex,nofollow' />
<link rel='stylesheet' id='admin-bar-css'  href='http://www.dartsocialmedia.co.uk/bird/wp-includes/css/admin-bar.min.css?ver=3.5.2' type='text/css' media='all' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.dartsocialmedia.co.uk/bird/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.dartsocialmedia.co.uk/bird/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 3.5.2" />
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
    html { margin-top: 28px !important; }
    * html body { margin-top: 28px !important; }
</style>
  </head>

Upvotes: 0

Views: 225

Answers (1)

Boris Šuška
Boris Šuška

Reputation: 1794

It seams that z-index: 999 in your css file at line 5 cause the problem.

I suggest you change your CSS bacause body:before overlap the whole window:

1) Implements the border into the body element, add:

body {
    border: 5px solid #dd127b;
    width: auto;
    margin: 10px;
}

2) Use the body:before to place the top border with fixed position to hide overflow when scrolling:

body:before {
    border-bottom: 5px solid #dd127b;
    display: block;
    content: '';
    position: fixed;
    top: 0;
    left: 10px;
    right: 10px;
    background: #111;
    padding-top: 10px;
    z-index: 999; 
}

3) Use the body:after to place the bottom border:

body:after {
    border-top: 5px solid #dd127b;
    display: block;
    content: '';
    position: fixed;
    bottom: 0;
    left: 10px;
    right: 10px;
    background: #111;
    padding-bottom: 10px;
    z-index: 999;
}

Upvotes: 1

Related Questions