I'm currently facing an issue with aligning my nested list properly within the rest of my content. The website I'm working on uses semantic.gs grid, which you can view here: . The problem arises at the bottom where the nested list doesn't align with the black line above or the "slideshow" div. There appears to be a small gap on both the left and right sides of the outer lists, especially noticeable when resizing the browser window.
Any tips or tricks on how to address this issue? I tried using CSS3 columns to eliminate the gap, but they have compatibility issues across different browsers. Is there a workaround to make them work universally? Or perhaps another method to exclusively apply inner margins to the list items? Should I consider opting for CSS3 columns with a fallback for Internet Explorer instead?
Here's the HTML snippet:
<article id="memberContainer">
<ul id="memberList">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</article>
CSS(/LESS) code:
@columns: 12;
@column-width: 81;
@gutter-width: 19;
@total-width: 100%;
#memberContainer {
.border;
ul#memberList {
.row(9);
li {
.column(3,9);
margin-top: 1em;
}
}
}
You can access the semantic.gs grid I'm utilizing from this link: https://github.com/twigkit/semantic.gs/blob/master/stylesheets/less/grid.less
Thank you for any assistance!