i have basic menu, made horizontally aligned list (<li>), each containing icon image , text:
one of <li> contains image display: none; icon can toggled (from green red pepper, in example. problem doesn't align correctly on browsers, shown in above image. understanding in contrast visibilty: hidden;, element display: none; should not affect position of other element , should render if it's not there?
the browsers doesn't render correctly google chrome , safari - on macos(!?) , ie7 (i know, know...) on windows. every other browser / os combination i've tested works fine.
here's html:
<ul class="menu"> <li><img alt="green pepper" src="/green.png">li</li> <li><img alt="green pepper" src="/green.png">li</li> <li><img alt="green pepper" src="/green.png">li</li> <li id="change"> <img alt="red pepper" src="/red.png" style="display: none;"> <img alt="green pepper" src="/green.png"> li </li> <li><img alt="green pepper" src="/green.png">li</li> </ul> here's css:
.menu li { cursor: default; font-family: verdana, arial, helvetica, sans-serif; font-size: 10pt; list-style-type: none; position: relative; text-align:center; margin: 0 0 0 -25px; padding: 8px 0 0 0; width: 144px; height: 35px; display: inline-block; background-image: url(../bct-white.png); background-repeat: no-repeat; color: #0091c1; } and icon images:
.menu img { display: inline; vertical-align: -25%; padding-right: 6px; } i've had include browser hack ie7 because doesn't recognise inline-block, coming separate stylesheet based on conditional import (<!--[if lte ie 7]>):
.menu li { zoom: 1; display: inline; } although, style isn't loaded on chrome , safari regardless of os, can't causing issue on macs.
i know quickest solution refactor html , javascript manipulation of show / hide of icons, i'd know causes issue , how resolve it.
update
i've tracked cause down. basically, element style of display: none; on <img> element overrides inline .menu img rule. removing that, toggling between block , inline allows reproduce issue. browser bug, , while element not displayed being in-line or block element should have no effect on layout.
jsfiddles
issue chrome , safari on macs only
note! me, fiddle page didn't load using ie7, direct link result iframe http://fiddle.jshell.net/z4du7/3/show/
bounty update!!!
i've posted 1 fix below, introduces same layout problem in ie9! please feel free evolve or improve on answer - or come table different! :)
scrap approach , use background images
<ul class="menu"> <li><span>li</span></li> <li><span>li</span></li> <li><span>li</span></li> <li class="change"><span>li</span></li> <li><span>li</span></li> </ul> css
ul.menu { overlflow: hidden; } ul.menu li { float: left; font-family: verdana, arial, helvetica, sans-serif; font-size: 10pt; text-align:center; margin: 0 0 0 -25px; width: 152px; line-height: 35px; height: 35px; background: url(../bct-white.png) no-repeat; color: #0091c1; } ul.menu li span { background: url(/green.png) no-repeat 5px 6px; display: block; } ul.menu li.change span { background-image: url(/red.png); } css2.0 , browser compatibility
the code application have provided css2.0 , should work in ie7 , above.
- removed
imgtags , implemmented aesthetics (images) backgrounds - extra
spanhad added because css2 allows 1 background image per element - li tag holds arrow background; span tag holds pepper background
- updated
id="change"class="change". unless 100% have 1 #change element, use class. purely styling , prevents having 2 menu lists on same page. - tweaked css styling bit follows:
removed top padding , increased height. li elements same height added line-height: 35px -> best way vertically center text. utlizing top padding works prone poor browser inconsistency.
change li elements floats. floated elements ie7 friendly method! ie6 not bug out don't have old version test webpage in. fyi - ul.menu has have overflow: hidden clear floats.
position: relative; cursor: default; unless changed defaults, can keep these 2 properties out. cursor should default. position: relative unnecessary - aren't using absolute positioning or warrants need. now, can keep these in declaration. code "slim" possible.
final words:
take @ css. notice how used ul.menu in declaration. may want in habit of doign same; provides developer insight on html looks , more importantly - css not overrided if decide add <div class=menu> later on. specfically .menu img apply image tag within menu div.
okay - that's it. let me know if there clarfications.
fyi - seeing question has bounty, if provide me background images can polish code suit needs 100% - perhaps upload them in edit of answer.
Comments
Post a Comment