0

Here is a funny problem that I encountered.

I am using Asp.net MVC WebGrid in my project. I am trying to apply some CSS to it.

So changed the code to 

@grid.GetHtml(footerStyle: "pagination")

Now, the pagination class has some code like this

.pagination a:hover, .pagination a:active{
    border: 1px solid #2b66a5;
    color: #000;
    background-color: #F2F2F2;
}

So now, when I run this file and hover over the page numbers, the panel containing the table starts expanding! One row at a time!

I know I can't manage to get this kind of effect with just CSS if I tried. :p But I am getting it by accident! And it goes away only if I remove both the border and the background-color attributes.

I am just curious to know how is this happening??! Anyone has any idea?

Aditi
  • 1,188
  • 2
  • 16
  • 44

1 Answers1

0

Borders add to the size of some elements. For example, consider you have a div with a height of 800px and a width of 400px. If you add a border of 5px to that div like so: 

div.class {
    border: 5px solid black;
}

Then you'll notice that the box expands by 5px in every direction; resulting in the box being 810px by 410px.

This can be avoided by using something like this:

div.class {
    border: 5px solid black;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

This should solve your problem... hopefully!

Seer
  • 5,226
  • 5
  • 33
  • 55
  • I tried that, not luck. I had thought that the problem must be with the border but removing just the border did not help. It is some combination of these two attributes that is causing this. – Aditi Jan 29 '13 at 12:29
  • That's really weird, I can't see why a background color would ever do something like this... Is it possible for you to recreate the issue in a fiddle or something similar? – Seer Jan 29 '13 at 16:09