hi - i'm trying to create a menu using <div>s and <span>s but i'm having some trouble. this is what i have so far:
<div id="big_container" style="width: 100%; text-align: center;">
<div id="menu1" style="width: 600px;">
<span style="height: 30px; border-bottom: 1px solid red; vertical-align: top;">
<span style="height: 20px; width: 70px; padding: 5px 15px; border: 1px solid red; background-color: #ccc; text-align: center;">Other</span>
</span>
<span style="height: 30px; width: 2px; border-bottom: 1px solid red;"></span>
<span style="height: 30px; vertical-align: top; background-color: #ddd; border-top: 1px solid red; border-left: 1px solid red; border-right: 1px solid red;">
<span style="height: 20px; width: 70px; vertical-align: middle; padding: 5px 15px; background-color: #ddd; text-align: center;">Home</span>
</span>
<span style="height: 30px; width: 2px; border-bottom: 1px solid red;"></span>
<span style="height: 30px; border-bottom: 1px solid red; vertical-align: top;">
<span style="height: 20px; width: 70px; padding: 5px 15px; border: 1px solid red; background-color: #ccc; text-align: center;">Other</span>
</span>
<span style="height: 30px; width: 2px; border-bottom: 1px solid red;"></span>
<span style="height: 30px; border-bottom: 1px solid red; vertical-align: top;">
<span style="height: 20px; width: 70px; padding: 5px 15px; border: 1px solid red; background-color: #ccc; text-align: center;">Other</span>
</span>
<span style="height: 30px; width: 2px; border-bottom: 1px solid red;"></span>
<span style="height: 30px; border-bottom: 1px solid red; vertical-align: top;">
<span style="height: 20px; width: 310px; padding: 5px 15px; border: 1px solid red; background-color: #ccc;"></span>
</span>
</div>
<div id="menu2" style="width: 600px; padding: 5px; border-left: 1px solid red; border-right: 1px solid red; border-bottom: 1px solid red;">and . some . more . stuff . will . go . here</div>
</div>
i realise this is pretty rubbish but you hopefully get the idea?? it works fine in ie but messes up completely in mozilla...! anyone able to help or am i going to have to give up and resort to using tables AGAIN...!!
cheersmozilla doesn't like heights on spans because they are technically inline elements...anything i can do about it? is it likely to work if i use <div>s but set the display to inline or something like that...personally I'd be floating them to the left... but I'd go with a list:
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/listamatic/">http://css.maxdesign.com.au/listamatic/</a><!-- m -->
<div id="big_container" style="width: 100%; text-align: center;">
<div id="menu1" style="width: 600px;">
<span style="height: 30px; border-bottom: 1px solid red; vertical-align: top;">
<span style="height: 20px; width: 70px; padding: 5px 15px; border: 1px solid red; background-color: #ccc; text-align: center;">Other</span>
</span>
<span style="height: 30px; width: 2px; border-bottom: 1px solid red;"></span>
<span style="height: 30px; vertical-align: top; background-color: #ddd; border-top: 1px solid red; border-left: 1px solid red; border-right: 1px solid red;">
<span style="height: 20px; width: 70px; vertical-align: middle; padding: 5px 15px; background-color: #ddd; text-align: center;">Home</span>
</span>
<span style="height: 30px; width: 2px; border-bottom: 1px solid red;"></span>
<span style="height: 30px; border-bottom: 1px solid red; vertical-align: top;">
<span style="height: 20px; width: 70px; padding: 5px 15px; border: 1px solid red; background-color: #ccc; text-align: center;">Other</span>
</span>
<span style="height: 30px; width: 2px; border-bottom: 1px solid red;"></span>
<span style="height: 30px; border-bottom: 1px solid red; vertical-align: top;">
<span style="height: 20px; width: 70px; padding: 5px 15px; border: 1px solid red; background-color: #ccc; text-align: center;">Other</span>
</span>
<span style="height: 30px; width: 2px; border-bottom: 1px solid red;"></span>
<span style="height: 30px; border-bottom: 1px solid red; vertical-align: top;">
<span style="height: 20px; width: 310px; padding: 5px 15px; border: 1px solid red; background-color: #ccc;"></span>
</span>
</div>
<div id="menu2" style="width: 600px; padding: 5px; border-left: 1px solid red; border-right: 1px solid red; border-bottom: 1px solid red;">and . some . more . stuff . will . go . here</div>
</div>
i realise this is pretty rubbish but you hopefully get the idea?? it works fine in ie but messes up completely in mozilla...! anyone able to help or am i going to have to give up and resort to using tables AGAIN...!!
cheersmozilla doesn't like heights on spans because they are technically inline elements...anything i can do about it? is it likely to work if i use <div>s but set the display to inline or something like that...personally I'd be floating them to the left... but I'd go with a list:
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/listamatic/">http://css.maxdesign.com.au/listamatic/</a><!-- m -->