im writing in xhtml , want description elements , header elements position along left of image used div elements instead of span breaks rules of xhtml tried span elements instead can't position them or add padding or margins them can do. hee code is. want description , header elements exaclty in vertically in middle beside image 5 pixels left
<div class="menu" style="width:300px; height:300px"> <ul> <li class="menu-item"> <a href="#"> <img alt="" src="images/icon.jpg" width="36" height="36" style="float:left; border:1px solid #000000" /> <div class="header">electronics</div> // << span here doesn't work <div class="description">computers & office supplies</div> // << span here doesn't work </a> </li> </ul> </div> breaks xhtml rules do
this way on same line, horizontally (even thought said vertically, think mixed them up..since current code displaying them vertically):
<div class="menu" style="width: 300px; height: 300px"> <ul> <li class="menu-item"> <a href="#"> <img alt="there should alt text here" src="images/icon.jpg" style="float: left; border: 1px solid #000000; width: 36px; height: 36px;" /> <span style="float: left; display: block;" class="header">electronics</span> <span style="float: left; display: block;" class="description">computers & office supplies</span> </a> </li> </ul> </div> however, cant understand, why xhtml not validating correctly, div's?! think meant, layout breaking up.. because div = display: block;. dumb down, means, full width..and doesn't care else -- divs selfish.
so in case need either float way.. makes less selfish. or make display: inline-block;. however, inline-block not cross-browser.. recommend use floating.
Comments
Post a Comment