Grid of boxes - IE7 problem

Discussion in 'CSS' started by Claesh, Dec 21, 2010.

0
  1. #1
    Hi,
    I want to create a "grid" of boxes with links. It turns up the way I want in FF and IE8, but the link has no right padding in IE7. All tips to a newbie are appreciated :eek:

    Correct:
    1.gif

    IE7:
    2.gif

    My code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
.box {float: left; margin: 10px 13px 0px 0px;}
div.box a{background:#336699; padding:6px 0px 6px 6px;display:block;text-decoration:none;font-weight:bold;width:100%;color:#fff;}
div.box a:hover{background:#335577;color:#fff;}
div.box a:active{background:#f00;color:#fff;}
</style>
</head>
<body>
	<div style="width:600px; float:left;">
		<div class="box"><a href="x">Box 1</a></div>
		<div class="box"><a href="x">Box 2</a></div>
		<div class="box"><a href="x">Box 3</a></div>
		<div class="box"><a href="x">Longer box txt</a></div>
		<div class="box"><a href="x">Another box</a></div>
		<div class="box"><a href="x">Box m</a></div>
		<div class="box"><a href="x">Box mm</a></div>
		<div class="box"><a href="x">Box 14</a></div>
		<div class="box"><a href="x">Box 15</a></div>
		<div class="box"><a href="x">Box 16</a></div>
	</div>
</body>
</html>
    Code (markup):
     
    Claesh, Dec 21, 2010 IP
  2. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #2
    Why use <div> when the same can be achived using Lists.
     
    radiant_luv, Dec 21, 2010 IP
  3. Claesh

    Claesh Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    That's a simple answer... I played around with LIs but didn't get that to work either. I came closer using DIVs. :rolleyes:
     
    Claesh, Dec 21, 2010 IP
  4. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #4
    If you want, you can take a look at 
    http://inspirationsunlimited.co.in/web-design/two-level-horizontal-dropdown-menu-using-css-and-html/
    Code (markup):
    , that will point you to the right direction, even you can extract what you need from the example.
     
    radiant_luv, Dec 21, 2010 IP
  5. cazort

    cazort Peon

    Messages:
    276
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I see in your code that you specified "padding:6px 0px 6px 6px" on "div.box a". This may be the culprit.

    Is there any reason you've chosen to pad the links, and not the box itself? It seems more natural to bad the box. Also, I noticed that the padding of the box is not currently specified; I've had problems with cross-browser portability because a few of the defaults will be different. The more things you specify, in general, the more standard the displaying will be across different browsers.

    I'd try specifying the "padding-right:", or all the padding, in the box class, and see if that makes a difference. Also, unless you have some reason you need to do it that way, I'd move the padding out of the "a" element and into the box class, and make sure it's padded equally on all sides.
     
    cazort, Dec 23, 2010 IP