search

ucla-oarc-web / WebBlocks

Out of the box, WebBlocks is a platform based on modern web technologies for building full-featured, responsive sites suited for all viewports including desktops, tablets and mobile devices. It leverages existing best-in-breed web tools, defines semantics based on modern web standards and includes a large suite of UI elements and Javascript interactivity libraries. However, WebBlocks is a lot more than just a set of semantics, elements and libraries. At it's core, it is a highly modular toolkit that can be customized to meet business needs, fitted to different development paradigms and integrated into existing web solutions.
http://ucla.github.io/WebBlocks/doc
BSD 3-Clause "New" or "Revised" License
22 stars 14 forks source link

DIV / UL Row, not inline #227

Closed lnicks closed 11 years ago

lnicks commented 11 years ago

I have a row, with a 6-6 panel split, one is a UL, one is a DIV. Taken from example provided earlier this is the basic markup.

Right now, both elements are stacked, as if there is a clear being applied to the div.

I am unsure if this is the wrong syntax, or if there's a complication with UL / DIV on a row. I have no floats nor clears applied to any elements within the footer.

<footer class="dentFooter row">
  <ul class="dentFooterLinks panel-6">
    <li></li>
    <li></li>
    <li></li>
    <li></li>    
  </ul>
  <div class="dentFooterSprites panel-6">
    <div id="dentFooterSpriteEmail"> <a href="#" title="Contact us via email">TEST</a> </div>
  </div>
</footer>
lnicks commented 11 years ago

Strangely enough, in reverse it appears to be working fine. That is, if the div comes first, instead of the UL, it works.

http://dentistrydev.oit.ucla.edu

You can see an example here: The header is a div/ul panel-6 split. The footer is a ul/Div panel-6 split.

/cc @ebollens @chris4ucla

lnicks commented 11 years ago

my [app/dentistry] branch is up to date with my most current settings if you need them.

ebollens commented 11 years ago

The problem accrues here because the ul element, under most browser default sheets, includes a margin-left attribute (you can see this with the Web Inspector, for instance). While we could put in a hack that thwarts this, it's going against browser conventions. As such, my recommendation is this:

<footer class="dentFooter row">
  <div class="panel-6">
    <ul class="dentFooterLinks panel-6">
      <li></li>
      <li></li>
      <li></li>
      <li></li>    
    </ul>
  </div>
  <div class="dentFooterSprites panel-6">
    <div id="dentFooterSpriteEmail"> <a href="#" title="Contact us via email">TEST</a> </div>
  </div>
</footer>

I will add mention to this in the documentation that some elements, such as ul are not suited to be used as a panel directly because they include [left|right]-margin attributes.