Note that there are some explanatory texts on larger screens.

plurals
  1. POCan't define <a> clickeable area height
    text
    copied!<p>I can't set the height of the clickeable areas of <code>&lt;a&gt;</code> elements. I've already written <code>display: block;</code> in the CSS sheet, but it doesn't work.</p> <p>HTML sheet:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt; &lt;link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="dprenav"&gt; &lt;p id="prenav"&gt;Olive&lt;/p&gt; &lt;div&gt; &lt;a id="fblogo" href="http://www.facebook.com" target="_blank"&gt;&lt;img id="imgfblogo" src="f_logo.png"&gt;&lt;/a&gt; &lt;/div&gt; &lt;div&gt; &lt;a id="right-corner" href="http://www.youtube.com" target="_blank"&gt;&lt;img src="corner_banner.png"&gt;&lt;/a&gt; &lt;/div&gt; &lt;div&gt; &lt;a href="https://twitter.com/JuliDAlessandro" id="twitter-follow-button" target="_blank" &gt;&lt;img src="bird_gray_48.png"&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>CSS sheet:</p> <pre><code>body { background-color: olive; } h1 { font-family: 'Cedarville Cursive', cursive; font-size: 230px; text-align: center; padding: 0px; } a { display: block; text-align: center; font-family: 'Cedarville Cursive', cursive; color: white; font-size: 100px; padding: 0px; text-decoration: none; } #prenav { font-family: 'Cedarville Cursive', cursive !important; font-size: 25px !important; color: white !important; } #dprenav { background-color: #97BB55; height: 50px; width: 3000px; margin: -7px; padding-left: 5px; position: relative; } #right-corner { position: fixed; cursor: pointer; top: 0px; right: 0px; z-index: 99999; } #twitter-follow-button { display: block; position: absolute; top: -85px; left: 80px; display: block; height: 0px; width: 0px; } #fblogo { position: absolute; top: -80px; left: 145px; display: block; height: 0px; width: 0px; } #imgfblogo { height: 40px; } </code></pre> <p>The width of the clickeable areas o the <code>&lt;a&gt;</code> elements is alright, but i cannot set the height, it's to big and I can set it in a small size.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload