css - Weird spacing in my HTML that only appears in Chrome and not in IE or Komodo Edit's Preview -
i wrote in jsfiddle. https://jsfiddle.net/s2cq61ko/
below html.
<div id="wrapper"> <h2>i generalist</h2> <div id="boxy"> <div id="generalistheader">stratgey & design</div> <div id="general_list"> <ul> <li class="big">systems theory</li> <li class="medium">branding</li> <li class="small">ethnography</li> <li class="small">statistics</li> <li class="big">ios development</li> <li class="medium">user experience</li> <li class="small">web development</li> <li class="small">infographics</li> </ul> </div> </div> <h2>here past projects</h2> <p>that let see thought process.</p> </div> then css...
#wrapper { max-width: 940px; margin: 0 auto; padding: 0 5%; text-align: center; } { text-decoration: none } #generalistheader { font-size:2em; font-weight: 700; background:#19334c; color:white; display:inline-block; padding: 2px 10px; margin: -20px 0 0 0; } #boxy { border: solid; display:inline-block; border-width: 1px; margin-top: 35px; width:500px } #general_list ul { list-style-type: none; /*number of columns*/ -webkit-column-count: 2; /* chrome, safari, opera */ -moz-column-count: 2; /* firefox */ column-count: 2; margin: 10px 0 0 0; padding: 0; font-family:'raleway', serif; font-weight: 400; } notice massive spacing after box. doesn't appear in ie or komodo edit's preview. when open on chrome, shows that...
i'm sure it's css, not figure out.
the easiest solution change #boxy this:
#boxy { border: solid; display: block; /* inline-block block */ border-width: 1px; margin-top: 35px; margin-left: auto; /* added line */ margin-right: auto; /* added line */ width: 500px; }
Comments
Post a Comment