Alright, I have a page which is generated through PHP but there is a lot of styles in it. This page can have thousands of lines, and each line is pushed up by three more for each line. I have to do this to get the pictures to touch eachother.
EX. position:relative;top
3*linenumber)
(I know that's not really CSS syntax, but you get the idea)
Well, my problem is that with all of these lines that are bumped up, there is tons of white space as the bottom.
Example page (<!-- m --><a class="postlink" href="http://68.103.43.67:8570/example.php">http://68.103.43.67:8570/example.php</a><!-- m -->)
(Please allow several minutes for it to load)
(Some of the file names contained in the above link may be offensive, there is nothing I can do about that - yet. Do not complain about the content please, the discussion is about the style, not the content. Be warned. Only click the link if you understand and agree to this statement.)
What can I do to get rid of all that extra space?
I tried line-height:8pt, but it doesn't seem to work in IE.The document crashes FF. Redesign you site using a menu. Give an example of your problem with a few lines of code.Try this one: <!-- m --><a class="postlink" href="http://68.103.43.67:8570/csstest.html">http://68.103.43.67:8570/csstest.html</a><!-- m -->
The picture at the very end of the document helps illustrate the problem.
Firefox wants to crash because of all the elements on the page. When it stops responding, just wait it out and it will respond again.It's a list. No need for all that positioning.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>lists</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
ul {
margin-left:1em;
padding-left:1em;
list-style-image:url(dir.gif);
}
li {padding-left:0.5em;}
.dir ul ul ul li {
list-style:none none;
border-left:3px solid blue;
}
-->
</style>
</head>
<body>
<ul>
<li class="dir" title="dir:"><strong>STY C++ in 24 Hours, 3E</strong>
<ul>
<li class="dir" title="dir:"><strong>Examples</strong>
<ul>
<li class="dir" title="dir:"><strong>Hour01</strong>
<ul>
<li title="file:">list0102.cpp (100 B)</li>
<li title="file:">list0101.cpp (105 B)</li>
</ul>
</li>
<li class="dir" title="dir:"><strong>Hour02</strong>
<ul>
<li title="file:">list0204.cpp (430 B)</li>
<li title="file:">list0203.cpp (477 B)</li>
<li title="file:">list0202.cpp (425 B)</li>
<li title="file:">list0201.cpp (108 B)</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>In your example you used a left border. Is there any way that I can stick with my original picture (because I would like to make it interchangeable with images of the same height), but still have them touch without making a gap?Change this:.dir ul ul ul li {
list-style-image:url(filebar.gif);
line-height:22px;
}
EX. position:relative;top
3*linenumber)(I know that's not really CSS syntax, but you get the idea)
Well, my problem is that with all of these lines that are bumped up, there is tons of white space as the bottom.
Example page (<!-- m --><a class="postlink" href="http://68.103.43.67:8570/example.php">http://68.103.43.67:8570/example.php</a><!-- m -->)
(Please allow several minutes for it to load)
(Some of the file names contained in the above link may be offensive, there is nothing I can do about that - yet. Do not complain about the content please, the discussion is about the style, not the content. Be warned. Only click the link if you understand and agree to this statement.)
What can I do to get rid of all that extra space?
I tried line-height:8pt, but it doesn't seem to work in IE.The document crashes FF. Redesign you site using a menu. Give an example of your problem with a few lines of code.Try this one: <!-- m --><a class="postlink" href="http://68.103.43.67:8570/csstest.html">http://68.103.43.67:8570/csstest.html</a><!-- m -->
The picture at the very end of the document helps illustrate the problem.
Firefox wants to crash because of all the elements on the page. When it stops responding, just wait it out and it will respond again.It's a list. No need for all that positioning.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>lists</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
ul {
margin-left:1em;
padding-left:1em;
list-style-image:url(dir.gif);
}
li {padding-left:0.5em;}
.dir ul ul ul li {
list-style:none none;
border-left:3px solid blue;
}
-->
</style>
</head>
<body>
<ul>
<li class="dir" title="dir:"><strong>STY C++ in 24 Hours, 3E</strong>
<ul>
<li class="dir" title="dir:"><strong>Examples</strong>
<ul>
<li class="dir" title="dir:"><strong>Hour01</strong>
<ul>
<li title="file:">list0102.cpp (100 B)</li>
<li title="file:">list0101.cpp (105 B)</li>
</ul>
</li>
<li class="dir" title="dir:"><strong>Hour02</strong>
<ul>
<li title="file:">list0204.cpp (430 B)</li>
<li title="file:">list0203.cpp (477 B)</li>
<li title="file:">list0202.cpp (425 B)</li>
<li title="file:">list0201.cpp (108 B)</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>In your example you used a left border. Is there any way that I can stick with my original picture (because I would like to make it interchangeable with images of the same height), but still have them touch without making a gap?Change this:.dir ul ul ul li {
list-style-image:url(filebar.gif);
line-height:22px;
}