PDA

Click to See Complete Forum and Search --> : line spacing



pea3698
01-17-2007, 11:32 PM
I have a div that is 230 in height and 150 in width with an unordered list in it as navigation. Yes the same as I posted in another question. In explorer the line spacing looks great. But when I open it in FF the line spacing gets much larger. How can I lock the line spacing down in FF like it is in IE? My line-height=1px.

catbert303
01-18-2007, 04:43 AM
If you aren't specifically setting CSS margins or padding on your list items possibly Firefox applies more default margin or padding to them that IE?

in your CSS try something like,


li {
margin: 0; padding: 0;
}

to see if that changes things. If so you can experiment with different margin/padding values to get the exact spacing you want. Note that if you want to specify different values of margin or padding on different sides of the element you can supply different numbers of values to the property and they will be applied like this:

margin: 10px; /* 10px of margin applied to all sides of the element */
margin: 10px 5px; /* 10px of margin applied to the top and bottom of the element 5px on the left and right */
margin: 10px 5px 2px; /* 10px of margin on the top of the element, 5px on the left and right and 2px on the bottom */
margin: 10px 5px 2px 1px; /* 10px on the top, 5px on the right, 2px on the bottom and 1px on the left */

the same thing applies to padding (and obviously you could use a different unit than px if you wanted)

pea3698
01-18-2007, 10:10 AM
My code is as follows. Thank you Aversion for your help with the code.

header code
ul {
padding: 0;
margin: 0;
border-bottom: 1px solid #666;
width: 150px;
}
li {
padding: 3px 3px 3px 3px;
margin: 0;
list-style-position: inside;
list-style: none;
border-top: 1px solid #666;
}
a, a:link, a:visited {
font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
line-height: 50%;
font-weight: lighter;
color: #444;
text-decoration: none;
}

a:hover {
color: #f60;
}

li.active {
background: url(images/bullet.gif) no-repeat left 8px;
}
li.active a:hover {
color: #444;
}

body code:
<ul>
<li class="active"><a href="home.htm">Home</a></li>
<li><a href="place_holder.htm">Logos + Corporate ID</a></li>
<li><a href="place_holder.htm">Brochures</a></li>
<li><a href="place_holder.htm">Catalogs</a></li>
<li><a href="place_holder.htm">Magazines</a></li>
<li><a href="place_holder.htm">Annual Reports</a></li>
<li><a href="place_holder.htm">Annual Reports</a></li>
<li><a href="place_holder.htm">Client Comments</a></li>
<li><a href="place_holder.htm">Articles of Interest</a></li>
<li><a href="place_holder.htm">Contact Us</a></li>
<li><a href="place_holder.htm">Site Map</a></li>
</ul>

Also Lefteyewilly has suggested that I also add a duplicate line of code when it comes to positioning but with an underscore before the it such as:

ul {
_padding: 0;
_margin: 0;
_border-top: 1px solid #666;
_width: 150px;
}

aversion
01-18-2007, 12:05 PM
The line spacing isn't too different comparing FF and IE, here's a screenshot of what I see:

http://rigent.com/junk/ie-ff.gif

Doesn't seem like a big problem to me but if you need the two divs to be exactly the same height you can specify the height of the LIs and they should fall into line cross browser. If you do specify a height remove the top and bottom padding to the LIs. If you have an exact height or width *and* respective padding on an element then you will get the box model error (http://en.wikipedia.org/wiki/Box_model_bug). IE will not add the padding to the specified height but FF will.

In the original CSS I posted here there was a padding on the left which allowed room for the bullet image in FF. In IE there's padding there because you're specifying the list position as being inside. Change that to outside and IE will follow the same padding as FF.

so it would be:


li {
padding: 3px 3px 3px 14px;
margin: 0;
list-style-position: outside;
list-style: none;
border-top: 1px solid #666;
}

pea3698
01-18-2007, 03:31 PM
This is what it is doing on me. I did make the change you pointed out Aversion, which made it look better in IE. But there is still a shift down and to the right in FF.

IE displayhttp://i34.photobucket.com/albums/d111/pea3698/ie_menu.gifFF displayhttp://i34.photobucket.com/albums/d111/pea3698/ff_menu.gif

pea3698
01-18-2007, 03:52 PM
header code:

#sidebar-a {
float: left;
width: ;
margin: 0;
margin-right: ;
padding: 0px;
background-color: #FFFFFF;
width: 150px;
height: 100%;
background-position: left 176px;
text-align: left;
}
p {
font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
padding-left: 0;
color: #000000;
}
ul {
padding: 0;
margin: 0;
}

li {
padding: 3px 3px 3px 14px;
margin: 0;
list-style-position: outside;
list-style: none;
border-top: 1px solid #cccccc;
}

a {
font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
color: #000000;
text-decoration: none;

}
a:link {
font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
line-spacing: 50%;
color: #000000;
text-decoration: none;
padding: 3px;

}
link {
font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
line-height: 50%;
font-weight: lighter;
color: #000000;
text-decoration: none;
text-align: left;
padding: 2px;
}

a:visited {
font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
line-height: normal;
color: #000000;
text-decoration: none;
}
a:hover {
font-size: 9px;
font-style: normal;
line-height: normal;
font-weight: normal;
color: #666666;
text-decoration: none;
font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;

}
li.active {
background: url(/images/bullet.gif) no-repeat 6px 8px;
}
li.active a:hover{
color: #666666;
}
p.line-height
{
line-height: 1.5;
}

list:

<div id="sidebar-a">
<table width="145" border="0" align="left" cellpadding="0" cellspacing="0">
<p class="line-height">
<tr>
<ul>
<li class="active"><a href="/index.htm">Home</a></li>
<li><a href="/logos_and_corporate_id">Logos + Corporate ID</a></li>
<li><a href="/brochures.htm">Brochures</a></li>
<li><a href="/catalogs.htm">Catalogs</a></li>
<li><a href="/magazines.htm">Magazines</a></li>
<li><a href="/annual_reports.htm">Annual Reports</a></li>
<li><a href="/client_comments.htm">Client Comments</a></li>
<li><a href="/articles_of_interest.htm">Articles of Interest</a></li>
<li><a href="/contact_us.htm">Contact Us</a></li>
<li><a href="/site_map.htm">Site Map</a></li>
<li><p>&nbsp;</p></li>
</ul>
</tr></p>
</table>
</div>

I know that some wouldn't use tables, but they are working for this sort of thing.

aversion
01-18-2007, 04:32 PM
I don't have time for a proper look but what happened to your <TD>?

pea3698
01-18-2007, 05:07 PM
Didn't notice that. When I add it in the way it displays in explorer matches FF. Does this pinpoint a problem?

pea3698
01-18-2007, 05:16 PM
ok I have pin pointed the style that seems to be the problem. The unordered list style. When I apply it to other things in the same div they do the same exact shift. Now I just have to figure out how to fix it.

aversion
01-18-2007, 06:03 PM
The difference could come from the padding inside the table cells reacting with the <LI>s. Set the <TD> padding and margin to zero and see if it makes a difference.

I know you say the table does the job but there really shouldn't be any difference if you remove it altogether. The DIV is a containing element here, the table doesn't really seem to be doing anything. Put the width on the UL or the DIV.

pea3698
01-18-2007, 06:08 PM
Ok I got it to pretty much work. First off when I do take the table off the spacing between the links gets bigger in both browsers although my line-spacing is set to 1.5. Im not really sure why.?

Is it a complete sin to take the ul tags away? When I do this everything in both browsers looks pretty good. The only difference is a very slight shift down in FF. Also the rules in between each link extend past the viewable area, but I think i know how to fix that.

aversion
01-18-2007, 09:21 PM
Line spacing will have no effect on these buttons whatsoever. Line spacing is the distance between lines of text within a paragraph or other text element. Here you've never got more than one line in an element. Use a fixed height for the <LI> elements and you shouldn't have a problem. Use the padding to balance the <A> within the <LI>.

Taking the <UL> away is a cardinal sin. It may work in what you've tested now but you're asking for trouble with browsers and platforms and it will cause search engines and screen readers to trip up.

The whole mantra of coding a web page is separate style from markup and use markup semantically. That means keep your styles in a stylesheet and use valid well formed markup that is appropriate for the content. So if you have tabular data, use a table, if you have a list of some kind, use an OL or UL. Etc.

pea3698
01-18-2007, 09:26 PM
Thank you Aversion. Your advice has been great. If is seems like i'm not listening sometimes, it is because I don't understand lol.

aversion
01-20-2007, 10:26 AM
No worries, but you should definitely start out with some foundation knowledge, it's all too easy to skip important stuff when developing. You should look into an HTML and CSS primer, just to make sure you fill in the gaps. Things will get a lot easier to piece together from there.

pea3698
01-21-2007, 01:31 AM
Oh I hear you. This was kind of thrown on me. I have just started trying to learn css and I was starting from the beginning. Then this got thrown on me and Bam hit the wall lol. I am actually doing tutes and what not now.

Once again, thanks for the help.