I believe it has something to do with this, although I don't have the time right now to confirm: https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element?redirectlocale=en-US&redirectslug=CSS%2FReplaced_element. You can apply `vertical-align:top` to your button declaration to make sure they are all aligned consistently.
On Mon, Jun 24, 2013 at 5:38 AM, Manfred Rebentisch <[email protected] > wrote: > Hello, > the following HTML-Snippet can be copied and used directly for > demonstrating the problem (the missing image bl.png is not needed, > but the img tag must be present): > the button's without img tag will be positioned some pixels below the > others. Why? I do not understand that. > > Thank you for any help! > > > <html> > <head> > <meta http-equiv="Content-Type" content="text/html; > charset=utf-8" /> <meta charset="UTF-8" /> > <title>Button-Test</title> > <meta http-equiv="Content-Style-Type" content="text/css" /> > <meta http-equiv="Content-Script-Type" content="text/javascript" /> > <style type="text/css"> > /*top,right,bottom,left*/ > button img { > margin: 0; > padding: 0; > display: block; > width: 100%; > height: 100% > } > button { > position: relative; > width: 60px; > height: 40px; > margin: 0 2px 2px 0; > padding: 0; > border: 1px solid blue; > line-height: 1em; > font-size: 11px; > text-indent: 0px; > text-decoration:none; > overflow: visible; > } > button p { > margin: 5px 0 5px 0; > display: inline-block; > } > div.BCF { > background: #DDD; > position: relative; > width: 375px; > height: 235px; > border: 1px solid black; > margin: 0 4px 4px 0; > padding: 0; > } > div.multmenu { > background: #ADA; > width: 330px; > height: 220px; > padding: 2px; > top: 6px; > left: 18px; > position: absolute; > } > > </style> > </head> > <body> > <div class="BCF"> > <div class="multmenu"> > <button type="button" ><img src="img/bl.png" /></button> > <button type="button" ><img src="img/bl.png" /></button> > <button type="button" >Haupt menu</button> > <button type="button" ><img src="img/bl.png" /></button> > <button type="button" ><img src="img/bl.png" height="40" > width="40"/></button> <button type="button" ><img > src="img/bl.png" /></button> <button type="button" ><p>Nach- > richten</p></button> <button type="button" ><img > src="img/bl.png" /></button> <button type="button" ><img > src="img/bl.png" height="40" width="40" /></button> </div> > </div> > > </body> > </html> > > > -- > COMPARAT Software-Entwicklungs-GmbH > Prießstraße 16 > 23558 Lübeck > Telefon: 0451/479 56 60 > > Geschf: Manfred Rebentisch > AG Lübeck, HRB 3559 > > Web: http://www.comparat.de > Die Cards: https://cards.athesios.de > Businessplattform: https://www.athesios.de > Lübeck: http://www.luebeck-info.com > Twitter: http://twitter.com/COMPARAT > > ______________________________________________________________________ > css-discuss [[email protected]] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Chris Rockwell ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
