I am a novice to html (I'm a designer by nature) and I'm having some difficulty controlling the spacing after an UL. I've created a CSS but I seem to get an extra space after indented text or a bulleted list. This is the code I currently have:
<body bgcolor="#FFFFFF" text="#333333" link="#003366" vlink="#006699" alink="#006699" leftmargin="15" topmargin="10">
<p class="bulletedlist"> </p>
<table width="640" cellspacing="10" cellpadding="0">
<tr>
<td><img src="../Images/Careers.gif" width="78" height="25"></td>
</tr>
<tr>
<td class="maintext">If you already have browsed the other parts of our website,
you know by now that <font color="#003366">Light Management Consulting’s</font>
motto is <font color="#003366"><i>“Quality, Value, Change.”</i></font>
You also know that this motto is not just about the work we do for our clients.
It is about each and every aspect of who we are as a firm.</td>
</tr>
<tr>
<td class="maintext">This is important for someone considering a career at
our firm. For those people, our motto communicates a number of important
messages. It makes clear, for example, that we are dedicated to hiring and
promoting only the most qualified candidates – because only they can
deliver the quality our clients expect us to deliver. It means that our
associates have a level of dedication and commitment that allows us to provide
our clients the value our motto promises them.</td>
</tr>
<tr>
<td class="maintext">Perhaps most important, however, is what the <font color="#003366"><i>“Change”</i></font>
part of our motto represents to our current and future associates. Put simply,
it is what makes LMC a different place to work. Whereas many firms resist
change, we seek it. Indeed, we embrace it. We work hard to bring about change
at our clients. We constantly encourage change – in the form of growth
and development – in our associates. And all of our associates actively
participate in efforts to bring about positive change in the world around
us.</td>
</tr>
<tr>
<td class="maintext">Intrigued? We hope so. Because, as a rapidly growing
firm, we constantly are in search of new <font color="#003366"><i>“change
agents”</i></font> to join our team. In particular, we are looking
for individuals who</td>
</tr>
<tr>
<td>
<table width="577" cellspacing="0" cellpadding="0">
<tr>
<td class="bulletedlist">
<ul>
<li>Are mature, articulate and able to work independently</li>
<li>Have consulting industry experience, preferably in the area
of pricing</li>
<li>Possess exceptional educational qualifications</li>
<li>Seek a work environment where trust, honesty, mutual respect
and common courtesy are the rule, not the exception.</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="maintext"><b>If you match this description, please <a href="../Company/ContactUs" target="_parent">contact
us</a> and let us know more about who you are, what you have done and –
most importantly – where you want to go in the future.</b></td>
</tr>
</table>
<p class="bulletedlist"> </p>
</body>
</html>
Can anybody offer a solution for the spacing? Much appreciated. Ananuku
PeOfEo
06-01-2003, 05:21 PM
the </p> is incerting a space. Also look at your table cells they can throw some of that in there.
ananuku
06-01-2003, 05:29 PM
Hi P...
The <p> is actually right at the end of the document. If you look at the code you will see that there is no </p> after the last bullet. And the table is quite consistent. Any other suggestations about what may be going on?
PeOfEo
06-01-2003, 05:32 PM
I am seeing a <P> and a </P> I thought that is where your space was. How about you give a link so I can see where it is exactly cause I am having trouble visualising this then...
<body bgcolor="#FFFFFF" text="#333333" link="#003366" vlink="#006699" alink="#006699" leftmargin="15" topmargin="10">
<p class="bulletedlist"> </p>
<table width="640" border="0" cellspacing="10" cellpadding="0">
<tr>
<td><img src="../Images/Careers.gif" width="78" height="25"></td>
</tr>
<tr>
<td class="maintext">If you already have browsed the other parts of our website,
you know by now that <font color="#003366">Light Management Consulting’s</font>
motto is <font color="#003366"><i>“Quality, Value, Change.”</i></font>
You also know that this motto is not just about the work we do for our clients.
It is about each and every aspect of who we are as a firm.</td>
</tr>
<tr>
<td class="maintext">This is important for someone considering a career at
our firm. For those people, our motto communicates a number of important
messages. It makes clear, for example, that we are dedicated to hiring and
promoting only the most qualified candidates – because only they can
deliver the quality our clients expect us to deliver. It means that our
associates have a level of dedication and commitment that allows us to provide
our clients the value our motto promises them.</td>
</tr>
<tr>
<td class="maintext">Perhaps most important, however, is what the <font color="#003366"><i>“Change”</i></font>
part of our motto represents to our current and future associates. Put simply,
it is what makes LMC a different place to work. Whereas many firms resist
change, we seek it. Indeed, we embrace it. We work hard to bring about change
at our clients. We constantly encourage change – in the form of growth
and development – in our associates. And all of our associates actively
participate in efforts to bring about positive change in the world around
us.</td>
</tr>
<tr>
<td class="maintext">Intrigued? We hope so. Because, as a rapidly growing
firm, we constantly are in search of new <font color="#003366"><i>“change
agents”</i></font> to join our team. In particular, we are looking
for individuals who</td>
</tr>
<tr>
<td align="left">
<table width="550" cellspacing="0" cellpadding="0" align="left">
<tr>
<td class="bulletedlist">
<ul>
<li>Are mature, articulate and able to work independently</li>
<li>Have consulting industry experience, preferably in the area
of pricing</li>
<li>Possess exceptional educational qualifications</li>
<li>Seek a work environment where trust, honesty, mutual respect
and common courtesy are the rule, not the exception.</li>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="maintext"><b>If you match this description, please <a href="../Company/ContactUs" target="_parent">contact
us</a> and let us know more about who you are, what you have done and –
most importantly – where you want to go in the future.</b></td>
</tr>
</table>
<p class="bulletedlist"> </p>
</body>
</html>
ananuku
06-01-2003, 06:06 PM
Thanks. I tried that but I use Dreamweaver and it seems to automatically add it in after I delete it. Sorry to be such a pain. Can I get around that?
Then you don't even need to add class tags to your html and you should be able to get rid of the table-within-a-table for the bulleted list.
sheila
06-01-2003, 06:14 PM
But keep the </ul> - it's there for a reason! ;)
ananuku
06-01-2003, 06:30 PM
Hi Sheila,
Where abouts would I place this code?
And is it only the class tags that I need to get rid of?
spufi
06-01-2003, 06:40 PM
First of all, make sure you validate your code, which it does not. Second, do not use tables for layout. All the more so when using something else would create far less code. Third, learn more about CSS because it will help simplify your code more. Here's my stab at the sollution. It should validate.
EDIT: I had to remove some extra lines.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
a:link { color:#003366; }
a:visited { color:#006699; }
a:active { color:#006699; }
body { color:#333333; margin-left:15px; margin-top:10px; font-family:"Verdana", "Arial", "Helvetica", "sans-serif"; font-size:11px; line-height:14px; }
em { color:#003366; }
span { color:#003366; }
.footer { font-weight:bold; }
.main { width:640px; padding:10px;}
.main p { margin-bottom:-6px; }
.main ul { margin-bottom:-6px; }
.main img { margin-bottom:-6px; }
-->
</style>
</head>
<body>
<div class="main">
<img src="../Images/Careers.gif" width="78px" height="25px" alt="">
<p>If you already have browsed the other parts of our website, you know by now that <span>Light Management Consulting's</span> motto is <em>"Quality, Value, Change."</em> You also know that this motto is not just about the work we do for our clients. It is about each and every aspect of who we are as a firm.</p>
<p>This is important for someone considering a career at our firm. For those people, our motto communicates a number of important messages. It makes clear, for example, that we are dedicated to hiring and promoting only the most qualified candidates because only they can deliver the quality our clients expect us to deliver. It means that our associates have a level of dedication and commitment that allows us to provide our clients the value our motto promises them.</p>
<p>Perhaps most important, however, is what the <em>"Change"</em> part of our motto represents to our current and future associates. Put simply, it is what makes LMC a different place to work. Whereas many firms resist change, we seek it. Indeed, we embrace it. We work hard to bring about change at our clients. We constantly encourage change in the form of growth and development in our associates. And all of our associates actively participate in efforts to bring about positive change in the world around us.</p>
<p>Intrigued? We hope so. Because, as a rapidly growing firm, we constantly are in search of new <em>"change agents"</em> to join our team. In particular, we are looking for individuals who</p>
<ul>
<li>Are mature, articulate and able to work independently</li>
<li>Have consulting industry experience, preferably in the area of pricing</li>
<li>Possess exceptional educational qualifications</li>
<li>Seek a work environment where trust, honesty, mutual respect and common courtesy are the rule, not the exception.</li>
</ul>
<p class="footer">If you match this description, please <a href="../Company/ContactUs" target="_parent">contact us</a> and let us know more about who you are, what you have done and most importantly where you want to go in the future.</p>
</div>
</body>
</html>
spufi
06-01-2003, 06:45 PM
I forgot to add that "-" doesn't validate so I went and tried to use the special character value for it, but it wouldn't show up. Anybody know what code number is used to represent a dash, "-"?
ananuku
06-01-2003, 06:52 PM
Thanks for taking the time to modify the code. I actually need to use tables because I need to make the bulleted text areas shorter in width than the rest of the text - this is a request from my client. Can I still just insert one table into the file, and leave the rest as is?
ananuku
06-01-2003, 07:11 PM
Thanks, I'll try that.
sheila
06-02-2003, 11:55 AM
I agree with Spufi's suggestion to get rid of the tables but would simplify the style instructions even further: the majority of the text is "main" so you could get rid of that class and just specify a special style for the footer.
Originally posted by ananuka
Where abouts would I place this code?
li { font-size: 9px; list-style-position: outside; list-style-type: circle; }
.footer { font-weight:bold; }
-->
</style>
But add the extras (span, a:link, etc.).
For restricting the width of the UL you could also replace 550px with 90% (or similar), sort of like Dave suggested, if you wanted a more flexible width.
Originally posted by Spufi
learn more about CSS because it will help simplify your code more.
The official specification document is pretty helpful:
http://www.w3.org/TR/REC-CSS2/
But you might find these easier to get started:
http://www.htmlhelp.com/reference/css/
http://www.w3schools.com/css/default.asp
And Khaki pointed me to this site yesterday, it's beautifully designed using CSS and this specific page contains a long list of useful links:
you could just copy the code I had and paste it into notepad... or another idea is put that bottum stuff in the same cell as your list, because it would get rid of your big cell spacing and you would not see any difference
ananuku
06-11-2003, 08:12 AM
Thank you all for your responses, they have been very helpful. I updated the code for the one page and fixed the CSS
<body bgcolor="#FFFFFF">
<div class="main"> <img src="../Images/Careers.gif" width="78" height="25" alt="">
<p>If you already have browsed the other parts of our website, you know by now that <span>Light Management Consulting's</span> motto is
<em>"Quality, Value, Change."</em> You also know that this motto is not just about the work we do for our clients. It is about each and
every aspect of who we are as a firm.</p>
<p>This is important for someone considering a career at our firm. For those
people, our motto communicates a number of important messages. It makes clear,
for example, that we are dedicated to hiring and promoting only the most qualified
candidates because only they can deliver the quality our clients expect us
to deliver. It means that our associates have a level of dedication and commitment
that allows us to provide our clients the value our motto promises them.</p>
<p>Perhaps most important, however, is what the <em>"Change"</em> part of our
motto represents to our current and future associates. Put simply, it is what
makes LMC a different place to work. Whereas many firms resist change, we
seek it. Indeed, we embrace it. We work hard to bring about change at our
clients. We constantly encourage change ? in the form of growth and development
in our associates. And all of our associates actively participate in efforts
to bring about positive change in the world around us.</p>
<p>Intrigued? We hope so. Because, as a rapidly growing firm, we constantly are in search of new <em>"change agents"</em> to join our
team. In particular, we are looking for individuals who</p>
<ul class="image">
<li>Are mature, articulate and able to work independently</li>
<li>Have consulting industry experience, preferably in the area of pricing</li>
<li>Possess exceptional educational qualifications</li>
<li>Seek a work environment where trust, honesty, mutual respect and common courtesy are the rule, not the exception.</li>
</ul>
<p class="footer">If you match this description, please <a href="file:///I%20Love%20Nuku/Company/ContactUs" target="_parent">contact
us</a> and let us know more about who you are, what you have done and most
importantly where you want to go in the future.</p>
</div>
</body>
</html>
Am I still doing something wrong?
Thanks.
spufi
06-11-2003, 10:00 AM
If you want the bullets to show up, define your CSS for the <ul> tag like this...
.main ul { list-style-position:outside; margin-bottom:-6px; width:550px; }
and then just have a plain <ul> tag in your code. Why the difference? Because the style is applied to the <ul> tag indirectly versus directly. I tried to define the CSS for the tag even as...
ul { list-style-position:outside; margin-bottom:-6px; width:550px; }
and it still didn't work.
ananuku
06-11-2003, 10:30 AM
Thanks. I changed the code (same URL) but the bullets still do not appear in IE 6 on PCs - works fine on a Mac though. Do you have any other suggestions?
Ananuku
spufi
06-11-2003, 11:21 AM
It looks like IE doesn't like the width attribute. :rolleyes:
sheila
06-11-2003, 02:34 PM
In which case Dave's suggestion should solve your problem. Put the bulleted list inside a <div> and restrict the width of the <div> instead of the <ul>.
div.list { width: 550px; margin: 0px; }
<div class="list">
<ul class="image">
<li>Are mature, articulate and able to work independently</li>
<li>Have consulting industry experience, preferably in the area of pricing</li>
<li>Possess exceptional educational qualifications</li>
<li>Seek a work environment where trust, honesty, mutual respect and common courtesy are the rule, not the exception.</li>
</ul>
</div>
ananuku
06-13-2003, 08:19 PM
Hi Sheila.
Thank you for that suggestion. However, it seems to add wonky spacing before and after the bullets. I also tried playing around with margin tops and bottoms in the div code, but it didn't seem to make a difference. Is there another alternative?
Sorry to be such a pain.
Ananuku
PeOfEo
06-14-2003, 01:43 AM
you can use my code :)
sheila
06-14-2003, 06:40 AM
OK, I've visited your page now (sorry, really should have done that before...) and am suggesting this:
<style type="text/css">
<!--
/* DELETED .main
It was superfluous as it simply included the main body of text. The body will automatically fit the width of the frame. */
body {
/* CHANGED margin-top to margin
Means that the text will never touch the edges on the right-hand side (awkward to read) or the bottom of the page. */
margin: 20px; /* INCLUDES an extra 10px from div.main */
margin-left: 25px; /* INCLUDES an extra 10px from div.main */
font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
font-size: 11px;
line-height: 14px;
color: #333333;
text-align: justify;
}
/* CHANGED .main p to p
As div.main no longer exists. This rule now applies to EVERY p */
p {
margin-top: 14px; /* ADDED margin-top so that you can control the spacing before each paragraph */
margin-bottom: 0px; /* CHANGED margin-bottom from -6px to 0px */
}
a:link { color: #003366; }
a:visited, a:active { color: #006699; } /* MERGED instructions as same color is used for both */
/* MERGED em and span
As same color used for both */
em, span { color: #003366; }
/* DELETED .main img
As margin-bottom instruction no longer needed.
/* CHANGED ul.list to list
As doesn't need a class because its the only one */
ul {
list-style-position: outside;
/* ERROR SPOTTED semi-colon was missing from end of list-style-image
Which is stopping the rule from working! Hence normal bullet. */
list-style-image: url("../Images/bullet2.gif");
margin-top: 10px; /* MOVED from div.list */
margin-bottom: 0px; /* CHANGED margin-bottom from -6px to 0px */
}
/* DELETED .main li
As the color and font-size are inherited from body and list-style-position is inherited from ul */
div.list {
/* REPLACED margin-top and margin-bottom with margin
So that the div has no impact other than to allow you to restrict the width of its contents */
margin: 0px;
width: 89%; /* CHANGED from 550px as is 88.7% of 620px (makes it more flexible) */
}
<body bgcolor="#FFFFFF">
<!-- Deleted <div class="main"> (and its closing partner) -->
<!-- Completed alt so that image means something to users who
have sight problems or who have instructed their browser
not to show images -->
<img src="../Images/Careers.gif" width="78" height="25" alt="Careers">
<p>If you already have browsed the other parts of our website, you know by now that <span>Light Management Consulting's</span> motto is <em>"Quality, Value, Change."</em> You also know that this motto is not just about the work we do for our clients. It is about each and every aspect of who we are as a firm.</p>
<p>This is important for someone considering a career at our firm. For those people, our motto communicates a number of important messages. It makes clear, for example, that we are dedicated to hiring and promoting only the most qualified candidates because only they can deliver the quality our clients expect us to deliver. It means that our associates have a level of dedication and commitment that allows us to provide our clients the value our motto promises them.</p>
<p>Perhaps most important, however, is what the <em>"Change"</em> part of our motto represents to our current and future associates. Put simply, it is what makes LMC a different place to work. Whereas many firms resist change, we seek it. Indeed, we embrace it. We work hard to bring about change at our clients. We constantly encourage change in the form of growth and development in our associates. And all of our associates actively participate in efforts to bring about positive change in the world around us.</p>
<p>Intrigued? We hope so. Because, as a rapidly growing firm, we constantly are in search of new <em>"change agents"</em> to join our team. In particular, we are looking for individuals who</p>
<div class="list">
<!-- Deleted class="list" from <ul> -->
<ul>
<li>Are mature, articulate and able to work independently</li>
<li>Have consulting industry experience, preferably in the area of pricing</li>
<li>Possess exceptional educational qualifications</li>
<li>Seek a work environment where trust, honesty, mutual respect and common courtesy are the rule, not the exception.</li>
</ul>
</div>
<p class="footer">If you match this description, please <a href="file:///I%20Love%20Nuku/Company/ContactUs" target="_parent">contact us</a> and let us know more about who you are, what you have done and most importantly where you want to go in the future.</p>
</body>
Hope this works.
Ps. Feeling no pain - this is what the forum's for!
ananuku
06-14-2003, 08:25 AM
Hi Sheila,
Thanks for taking the time to modify the code. I'll give it a try and let you know.
Quick question. This page is actually an inline frame so I want to set the main width of the page (620) so I don't get a horizontal scrollbar. Can I still include that in the code you have provided without messing things up?
Thanks. Ananuku
sheila
06-14-2003, 08:38 AM
It's years since I used an iframe so forgive me if I'm wrong but as you have nothing that is fixed to a width wider than the width of the iframe won't the content simply wrap to fit without a horizontal scroll bar?
ananuku
06-14-2003, 09:01 AM
Hi Sheila,
That seems to be the case with most browsers except IE 6 on a PC. It adds the horizontal scrollbar as well. Nevertheless, I'll try to put in the width value somewhere to see if that helps. Thanks.
sheila
06-14-2003, 09:25 AM
in that case limit the width of the body to 550px.
I think that the bullets may not have been showing because of the missing semi-colon so you probably don't need <div class="list"> at all (it will inherit its width from the body anyway).
PS. Apparently IE doesn't support list-style-position: outside.
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.