6

I'm designing a web page and I used HTML5 to make an entire div tag a link. Prior to adding the link, the whole div would expand when I hovered over it. Suddenly, it's only working if I hover over the words, not the box I created. The HTML looks like this (minus the actual link):

<a href="link goes here" style="text-decoration: none;">
<div class="home-tab">
home
</div>
</a>

And the CSS to make it hover looks sort of like this:

.home-tab:hover {
width: 150px;
height: 45px;
margin-top: 30px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}

(Note: This is not all of the code in the stylesheet. I have some lovely color in there too.)

Is there something I'm missing in my CSS to make the whole thing work on the hover and not just the words? I'm not even sure what questions to ask to figure out what I've done here.

ETA: I have checked this across three different browsers. It has the same problem on IE, Firefox and Chrome.

ETA: CSS without the :hover attribute.

.home-tab{
width: 150px;
height: 35px;
margin-top: 40px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}

ETA: Okay, here's something very weird. It seems that any elements on the far right don't have this problem. Seriously, the forums tab and next button on the far right both have :hover elements and they work exactly as I want them to.

Gary
  • 61
  • 1
  • 1
  • 5
  • More specifically, most browsers won't let you place a block-level element (i.e. a DIV) inside an inline element (A) – landons Jun 17 '13 at 20:37
  • 1
    While it may not be for HTML, HTML5 does do this. – Gary Jun 17 '13 at 20:37
  • 1
    @KimberlyLewis Might need to cite a source on that. News to me – landons Jun 17 '13 at 20:38
  • 1
    HTML5 a-tag http://www.w3.org/TR/html-markup/a.html allows flow content http://www.w3.org/TR/html-markup/common-models.html#common.elem.flow, You are absolutly right @kimberlyLewis – Pevara Jun 17 '13 at 20:40
  • can you provide the default (none hover) styling for the div as well, preferably here: http://jsfiddle.net/Pevara/BNm7A/ – Pevara Jun 17 '13 at 20:42
  • Consider swapping the order of elements: [jsFiddle demo](http://jsfiddle.net/HfUEW/) – George Cummins Jun 17 '13 at 20:43
  • @PeterVR, Done. You'll notice that the only thing that changes is the height and any related margins/padding. – Gary Jun 17 '13 at 20:45
  • @KimberlyLewis, did you update? Can you provide a link? – Pevara Jun 17 '13 at 20:46
  • I'm not seeing the issue in FF at least http://jsfiddle.net/Rk3NC/ – James Montagne Jun 17 '13 at 20:47
  • Hm, I may need to eat a bit of crow here. I think your interpretation of the documentation is correct. Checking with the [validator](http://validator.w3.org) now... – George Cummins Jun 17 '13 at 20:47
  • Validator agrees: `
    ` is valid. I may need to rethink my worldview.     – George Cummins Jun 17 '13 at 20:50
  • @PeterVR I'm having some trouble getting the jsfiddle site to work. The library network keeps shutting me out of it, claiming hacking. I may have to wait until tonight when I can repair the internet at home. – Gary Jun 17 '13 at 20:51
  • just post the code in your question then, I'll paste it in the fiddle for you (and you shouldn't hack ;-) ) – Pevara Jun 17 '13 at 20:52
  • @PeterVR Done. Code is now in my question. – Gary Jun 17 '13 at 20:56
  • Your code seems to work fine: http://jsfiddle.net/Pevara/BNm7A/1/ And there is no need to repeat all the properties, just the ones you want to change – Pevara Jun 17 '13 at 20:59
  • @PeterVR, maybe that's the problem? That I've repeated elements? I'm going to give that a shot in the IDE. ETA: Nope, doesn't fix it. – Gary Jun 17 '13 at 21:00

3 Answers3

2

Get rid of the <div> entirely and set <a> to display: block.

You're not supposed to put block-level elements inside of an <a> anyway.

Ringo
  • 5,097
  • 3
  • 31
  • 46
  • 3
    HTML5 lets you do this. I checked [here](http://stackoverflow.com/questions/8160494/how-to-make-a-whole-div-clickable-in-html-and-css-without-javascript) Also [here](http://dev.w3.org/html5/markup/a.html#a-changes) – Gary Jun 17 '13 at 20:41
0

Seems to be working fine here: jsFiddle

The only thing I can think of is that the div is not the size you think it is. the size and width elements that you are setting in your css are only active when your mouse is on the div. You need to set them in the normal non hover settings as well if you want the div to be that size. Right now it is defaulting to just large enough to hold the text. You can see this demonstrated by the black border I added in my example.

Here is my suggestion:

.home-tab {
/*All of the sizing code goes here to create box for div*/
}
.home-tab:hover {
/*anything you want changed on hover goes here*/
}

I hope I was understanding your question correctly. If you need more clarification please let me know. Good luck!

chockleyc
  • 581
  • 2
  • 5
  • It's defaulting to just bigger than the text? In what browser? In current FF it is 100% width as a default div is. – James Montagne Jun 17 '13 at 20:49
  • I misspoke, the height is only as tall as the text. It is the full width but very short. I am using google chrome. – chockleyc Jun 17 '13 at 20:51
0

I think you want to expand that div when you hover cursor on that div. i wrote a code below that will solve your hover problem. Here is a code for you customize this 

.home-tab{
   width:150px;
   height:45px;
   margin-top:30px;
   color:#008080;
   font-family: arial;
   background-color: blue;
   transition-duration: .8s;
   color:white;
   text-align: center;
   font-size: 13pt;
   padding-top: 25px;
}
.home-tab:hover{
    width:200px;
   height:60px;
   font-size: 16pt;
   
    transition-duration: .8s;
}
a{ text-decoration:none} /* optional*/
</style>
<a href="#"><div class="home-tab">
    home
</div>
  </a>
MIM
  • 54
  • 5