Note that there are some explanatory texts on larger screens.

plurals
  1. PODisplay:block not working
    primarykey
    data
    text
    <p>I am trying to set up navigation links (using a list) that are entirely clickable. However, right now only the text and images are clickable. Display block doesn't seem to be working.</p> <p>Here is the final result: <a href="http://rec.wordpress.uconn.edu" rel="nofollow">http://rec.wordpress.uconn.edu</a></p> <pre><code>#program-buttons { display:block; width:100%; height:65px; background-color:#cccccc; } .program-button { display:block; float: left; font-size: 14px; height: 45px; line-height: 17px; list-style-type: none; margin:0; padding: 10px; width: 208px; vertical-align:middle; border-left: solid 1px #ffffff; border-right: solid 1px #8C8C8C; transition: background 0.4s ease; -webkit-transition: background 0.4s ease; -o-transition: background 0.4s ease; -moz-transition: background 0.4s ease; } .program-button:hover { background-color:#202631; } #program-buttons .program-button a { display:block; color:#fff; font-weight:bold; } #program-butt ons .program-button a:hover { text-decoration:none; } #program-buttons img { background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; border-bottom-color: rgb(255, 255, 255); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(255, 255, 255); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(255, 255, 255); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(255, 255, 255); border-top-style: solid; border-top-width: 1px; box-shadow: rgba(0, 0, 0, 0.199219) 1px 2px 2px 0px; color: rgb(46, 44, 42); cursor: auto; display: block; float: left; height: 45px; list-style-type: none; margin-right: 10px; margin-top: 0px; text-align: -webkit-auto; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.296875) 0px 1px 0px; width: 60px; } &lt;ul id="program-buttons" class="clearfix"&gt; &lt;li class="program-button"&gt;&lt;a href="#"&gt;&lt;img src="http://www.recsports.ufl.edu/images/uploads/KanJam_thumbnail_1.jpg" width="60" height="45" alt="Title"&gt; &lt;span&gt;Intramural&lt;br&gt; Sports&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="program-button"&gt;&lt;a href="#"&gt;&lt;img src="/images/uploads/KanJam_thumbnail_1.jpg" width="60" height="45" alt="Title"&gt; &lt;span&gt;BodyWise&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="program-button"&gt;&lt;a href="#"&gt;&lt;img src="/images/uploads/KanJam_thumbnail_1.jpg" width="60" height="45" alt="Title"&gt; &lt;span&gt;UConn&lt;br&gt; Outdoors&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="program-button"&gt;&lt;a href="#"&gt;&lt;img src="/images/uploads/KanJam_thumbnail_1.jpg" width="60" height="45" alt="Title"&gt; &lt;span&gt;Drop-In&lt;br&gt; Rec&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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