I have the following problem: I have ul and in each li there is a link with display block and height and width defined. I called the three links of #a1 , #a2 and #a3 (actually, the styles are applied with the pseudo-element nth-child . I put those id's just to make the distinction easier.)
Anyway, the problem is that #a2 (the green frame on the left) is working, but #a1 and #a3 have a strange behavior: only a part of your area is clickable. At first I thought the links were out of position, but the background color shows that not. Does anyone know what's causing this?
Follow the code:
/*--------------RESEST------------------------------*/
html, body, div, span, applet, object, iframe, input, h1, h2, h3, h4, h5, h6, p,
blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q,
s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article,
aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav,
output, ruby, section, summary,time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,q:before, q:after {
content: '';
content: none;
}
table { border-collapse: collapse; border-spacing: 0;}
/*-------FIM DO RESET-----------------------------------------------------*/
.clear { clear:both; }
body { background-color:#cfcfcf; font-family:Verdana, Arial, Helvetica, sans-serif; overflow:hidden;}
#header {
position:relative;
left:546px;
width:380px;
height:487px;
padding-top:15px;
padding-left:125px;
background-size:cover;
}
#logotipo { display:block; margin-left:18px; background:#993366; width:340px; height:66px; }
#header ul { position:absolute; margin-left:20px; }
#header li { margin:20px 0; }
#header li:nth-child(1) { margin-left:2px; }
#header li:nth-child(2) { margin-left:50px; }
#header li:nth-child(3) { margin-left:100px; }
#header li:nth-child(4) { margin-left:150px; }
#header a {text-decoration:none; color:#404040; font-size:27px; }
#footer { width:100%; height:18px; padding-top:2px; background-color:#000000; color:#FFFFFF; font-size:14px; position:fixed; bottom:0px; }
#footer span { display:block; width:228px; margin:0 auto; }
#content {
float:left;
overflow:hidden;
width:1113px;
height:785px;
margin-left:-165px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#content ul li { float:left; }
#content a { display:block; width:399px; height:392px; }
#content ul li:nth-child(1) {
margin-left:300px;
background:#009999;
border:1px solid #CC3300
} #content ul li:nth-child(1):hover {
background:#003366
}
#content ul li:nth-child(2) {
margin:392px 0 0 -401px;
background:#009999;
border:1px solid #CC3300
} #content ul li:nth-child(2):hover {
background:#003366
}
#content ul li:nth-child(3) {
background:#009999;
border:1px solid #CC3300
} #content ul li:nth-child(3):hover {
background:#003366<div id="content">
<ul>
<li><a id="a1" href="#"></a></li>
<li><a id="a2" href="#"></a></li>
<li><a id="a3" href="#"></a></li>
</ul>
</div><!-- #content -->
<div id="header">
<a id="logotipo" href=""></a>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</div>
<!-- #header -->
<div class="clear"></div><!-- CLEAR! -->
<div id="footer"><span>Footer</span></div>
<!-- #footer -->