Ok, weird issue... I have a DIV set to have a dotted border, and within that I have a menu using <UL>.
body {background:#fff;font:14px arial;color:#888;margin:0;text-align:center;}
div#content {width:800px;margin:10px;padding:0;text-align:left;}
div#wrapper {width:800px;margin:5px 0 15px 0;padding:2;text-align:left;}
div#menu {margin:0px;padding:3px;text-align:left;border:1px dotted #888;display:inline;}
div#menu p {display:block;margin:3px;padding:3px;font:bold 18px arial;color:#fc5;}
a {color:#aaa;text-decoration:none;}
a:hover {color:#fc5;text-decoration:underline;}
ul {margin:0px;padding:3px;list-style:none;}
I have the
<div id="content">
<div style="text-align:left;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"bannerpic.gif">
</div>
<div id="wrapper" style="background:#888;color:#fff;">Welcome to my site!</div>
<div id="menu" style="width:200px;">
<p>Menu</p>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.whatever">first link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.whatever/">second link</a></li>
</ul>
</div>
</div>
See that WIDTH statement? I don't want that there... the links may change to be wider/smaller than they are now and I don't want to have to change it. That makes sense to me, it should stretch around the content... problem: if I don't put the width statement it does some funky stuff. Check out the attachments...Ok, remove the display:inline from div#menu and the display:block from div#menu p. CSS 2 has min-width and max-width you might bring to bear but the default is 100% so some width spec has to be declared.
body {background:#fff;font:14px arial;color:#888;margin:0;text-align:center;}
div#content {width:800px;margin:10px;padding:0;text-align:left;}
div#wrapper {width:800px;margin:5px 0 15px 0;padding:2;text-align:left;}
div#menu {margin:0px;padding:3px;text-align:left;border:1px dotted #888;display:inline;}
div#menu p {display:block;margin:3px;padding:3px;font:bold 18px arial;color:#fc5;}
a {color:#aaa;text-decoration:none;}
a:hover {color:#fc5;text-decoration:underline;}
ul {margin:0px;padding:3px;list-style:none;}
I have the
<div id="content">
<div style="text-align:left;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"bannerpic.gif">
</div>
<div id="wrapper" style="background:#888;color:#fff;">Welcome to my site!</div>
<div id="menu" style="width:200px;">
<p>Menu</p>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.whatever">first link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.whatever/">second link</a></li>
</ul>
</div>
</div>
See that WIDTH statement? I don't want that there... the links may change to be wider/smaller than they are now and I don't want to have to change it. That makes sense to me, it should stretch around the content... problem: if I don't put the width statement it does some funky stuff. Check out the attachments...Ok, remove the display:inline from div#menu and the display:block from div#menu p. CSS 2 has min-width and max-width you might bring to bear but the default is 100% so some width spec has to be declared.