Forum Moderators: not2easy
My line height was originally in ems from the tutorial I worked from for a dashed line version of this (mine is solid line) so I converted it to px and then adjusted things to get this working. It would no longer break down and go horizontal at smaller font sizes like it did with ems, but it did have gaps between my connecting lines. I read about unitless line heights and decided to give it a try, and in doing so I only deleted the p from my line height unit declaration as you can see below. Lo and behold when I loaded up my page, I could use any of IE's font settings without anything breaking down! I then found that I could adjust the font size up to 90% .78 em before the gaps started showing back up, at smaller and larger sizes in I.E.
I do not know if this works in anything but IE6 and or if it will even work on any maachine but my own. I was hoping someone could tell me what exactly is happening and if there is a reason not to use this...bug?.... NOTE: declaring no unit for line-height breaks the list down... but it appears any charachter after the value causes it to work properly so long as it is not a valid unit declaration.
Sorry for the long post... I did not know how to explain this in short.... and well this is my first time with css and as such I just cannot figure out how this is working... I just know it is. The example I started working from said that it would break down at different user font sizes and that he did not know of a way around it.. I doubt I have found a way around it, but maybe...
Any insight is greatly appreciated!
Thanks!
<style>
html {font-size: 90%;}
body {font: 0.78em, Arial, Helvetica, Verdana, sans-serif; line-height: 20x;}
.sitemap span.none, .sitemap span.vert, .sitemap span.last, .sitemap span.midd {
background:transparent 0px 0px no-repeat;
width: 24px;
height: 18x;
display: block;
float: left;
margin-left: 1em;
margin-right: -15px;
}
.sitemap span.vert {background-image: url(map_vert.gif);}
.sitemap span.last {background-image: url(map_last.gif);}
.sitemap span.midd {background-image: url(map_midd.gif);}
.sitemap ul, .sitemap li {
font-weight: bold;
list-style-type: none;
list-style-position: inside;
padding-left: 0px;
margin: 0;
margin-bottom: 0px;
margin-top: 0px;
padding: 0;
}
#sitemapfont ul {
color:gray;
}
#sitemapfont ul ul li {
font-weight: normal;
color: black;
}
</style>
<title>Site Map</title>
</head>
<body>
<span class="sitemap">
<a><b>Sitemap</b></a>
<ul id="sitemapfont">
<li><span class="midd"></span>Main1
<ul>
<li><span class="vert"></span><span class="last"></span>Submain1
<ul>
<li><span class="vert"></span><span class="none"></span><span class="last"></span>subsub</li>
</ul>
</ul>
</li>
<li><span class="last"></span>Main2
<ul>
<li><span class="none"></span><span class="last"></span>Submain2
<ul>
</li>
</ul>
<br clear="all" />
</span>
</body></html>
So... maybe this will help someone help me understand what is going on and also let me know if there is a reason I should not do this.
Thanks!
Vert strange....
