|
CSS - Line-height Affecting Spacing Above First Line
I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks!
Similar TutorialsGreetings, I have a class called "header" and I am trying to give it a touch of extra space between it and the next line. All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class. Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer? Thanks in advance! Hi I have a classic CSS:- ul.none { FONT-SIZE: 70%; line-height: 10pt; COLOR: #000000; list-style-position: intside; list-style-type: none; font-family: Verdana, Arial, Helvetica, sans-serif; position:relative; width:150px; padding:10px; text-align:center; BACKGROUND-COLOR: #EDF5F5; border: 1px solid #0000000; } AND THE HTML:- <ul class="none"> <li>NEWS 1</li> <li>NEWS 2</li> <li>NEWS 3</li> <li>NEWS 4</li> <li>NEWS 5</li> </ul> I want to have a larger gap between each <li> item, without using a <p> or a <br>? Line height or spacing does not work, it spaces out everything. E.g if the text in the <li> is longer than a line it makes this line higher, which means it looks well daft if you see what i mean. because everything is so spaced out. Margin and Padding do not work for what i wish to achieve. Could anyone Help please. I'm trying out coding a skin for IPB, and there's an odd gap beneath all my footer tables/body elements. I've attached an image so you can see what I mean as it's all hosted on my PC. Code:
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="padding: 0px;" bgcolor="#363636">
<tr height="30">
<td style="background: url(style_images/tmp/cat_foot_bg.gif);" height="25">
<img src="style_images/tmp/cat_foot_far_left.gif" alt="" />
</td>
<td style="background: url(style_images/tmp/cat_foot_bg.gif);">
<img src="style_images/tmp/cat_foot_left.gif" alt="" />
</td>
<td style="background: url(style_images/tmp/cat_foot_bg.gif);" width="100%">
</td>
<td style="background: url(style_images/tmp/cat_foot_bg.gif);">
<img src="style_images/tmp/cat_foot_right.gif" alt="" />
</td>
<td style="background: url(style_images/tmp/cat_foot_bg.gif);">
<img src="style_images/tmp/cat_foot_far_right.gif" alt="" />
</td>
</tr>
</table>
<!-- End Footer table -->
<!-- End Category -->
<br />
<!-- Begin new forum -->
<div style="display:none" id="fc_7">
<!-- Begin Header table -->
<table width="100%" style="background-image:url(style_images/tmp/cat_top_bg.gif)" border="0" cellpadding="0" cellspacing="0">
<tr width="100%">
<td height="32" width="8" align="left">
<img src="style_images/tmp/cat_top_far_left.gif" width="8" height="32" alt=" " border="0" />
</td>
<td height="32" width="103" align="left" valign="top">
<img src="style_images/tmp/cat_top_left.gif" width="95" height="32" alt=" " border="0" />
</td>
<td width="100%" style="background-image:url(style_images/tmp/cat_top_bg.gif)" align="left">
<div align="left" class="desc"><strong><a href="http://localhost/forums/index.php?showforum=7">Yahoo ****</a></strong></div>
</td>
<td style="background-image:url(style_images/tmp/cat_top_bg.gif)" valign="top">
<a href="javascript:togglecategory(7, 0);"><img src="style_images/tmp/cat_top_right.gif" alt=" " border="0" /></a>
</td>
<td style="background-image:url(style_images/tmp/cat_top_bg.gif)">
<img src="style_images/tmp/cat_top_far_right.gif" alt="" />
</td>
</tr>
</table>
<--! End Header table -->
</div>
The <br /> is what I added today....it has no effect if I remove it. The first table is what the bottom of the "row" would be, it's the bottom of the category in the screenshot. I assume it's CSS as my header image has the same spacing between my content, and my content has the same between my footer. There is no CSS for the html or body. In Firefox, it renders great, but IE has that white spacing... I'd be grateful for any help as this has baffled me for the past few days alone hey guys i'm having a problem with CSS line spacing. firefox is displaying correctly of course, and IE is scrunching the lines closer. here is an example (firefox on the right, IE on the left): here is the CSS: Code: #galleriesTextContainer
{
height: 130px;
margin: 0px;
padding: 0px;
margin-left: 8px;
line-height: 8pt;
}
.galleriesText
{
margin: 0px;
padding: 0px;
color: white;
font-family: Arial, Verdana, Sans Serif;
font-size: 11px;
}
Code: <div id="galleriesTextContainer"> <span class="galleriesText">dolphy day 2005 (132 images)<br />dolphy day 2004 (101 images)<br />buffalo wild wings (47 images)<br />lemoyne 2005 (425 images)<br />lemoyne 2004 (28 images)<br />lemoyne 2003 (147 images)<br />syracuse nationals 2004 (43 images)<br />nyc / jersey 2005 (245 images)<br />minutes monte (29 images)<br />my truck (67 images)<br />phil's t-type (70 images) </span> </div> Hi, I am having difficulty with the line-spacing on several pages of this website. One can be seen on this page the line spacing is not correct (it overlaps). The spacing should be like the home page and I haven't specified line spacing anywhere in the CSS. Also, some of the main headings on pages do not left align...they are in tables. Sometimes they are centered and sometimes they are just indented a little. I am trying to fix someone else's work and it's proving to be difficult. Hi all, I am trying to automate everything on my test website and I have one more angle to cover. In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height. Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder) My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement. Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values? I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit. Whew! I dont understand the purpose of Browser that behave differently from each other. Couldn't the browser makers just make it result consistently? This is my code to make my line spacing bigger or padding. I try to do other style changes and it also has the same problems. In Firefox, doing it this way works but in IE, nothing happens. Code: h1 {
font-size: 10px;
font-weight:bold;
line-height:50px;
padding:10px 10px 10px 10px;
}
Code: h1 {
font-size: 10px;
font-weight:bold;
padding:10px 10px 10px 10px;
}
Then on my web page I put this in on the text I want to customise. Code: <h1>Sample Text</h1> h1 text is inside my little div box. Am I doing this wrong to achieve what I want? I'm not that familiar with css yet...so this might be a stupid question. I'm creating this website for my department. on the index page, there are several lists of links. between the links there is line spacing. but some link name is too long it got wrapped under. the wrapped under text also have line spacing. this makes the viewer feels that there are 2 links instead of one. how can i make the wrapped under text go right under without the line spacing? here is the link if you wanna see how it looks like now. http://www.scienceevents.uwaterloo.ca/ for example under the first left hand side menu, international year of astronmy is one link. but it looks like 2 links. how can i make them move together? this is the css for the primary nav Code:
#primary_navigation {
background:url(../images/primary_navigation_bg.jpg) no-repeat; /* This controls the background image on the home page. */
width:960px;
height:200px;
margin-top:20px;
font-size:0.75em;
clear:both;
}
#primary_navigation ul {
list-style:none;
margin-left:-20px;
height:110px;
}
#primary_navigation ul li {
line-height:2.0em;
margin-right:5px;
}
Is it possible to adjust the line spacing in text using CSS because pressing return in text, the spacing is either too big or too small. I want control of line spacing so that I can have text and paragraph control like I do with Word documents. eg. A B I want the distance from A to B to be either greater or smaller. Can you also control the space between letters? eg. AB I want the spacing between A to B further or closer. Is this all possible on a HTML page without having to use images for text or using tables to seperate each text line on a table to create different line spacing. If I have a couple of paragraphs of text and would like to adjust the space when you press return to start a new paragraph, how would I add it to my styles code below. Right now, a hard and soft return is too big and I would like the spacing to be about half the font size of the text. How would I add it to my stylesheet code in this example: Code: .bodytext {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
text-align:right;
font-weight: none;
background-color: #ffffff;
line-height:1.5;
letter-spacing:-0.02em;
}
Hope this is a simple prob for you css gurus. This time I can just direct you to a public site http://tixrus.us Attention to the "On Sale Now" list at the left, I chose a small font to list the dates. I would like that teaser of the next 5 events in chron to be a little more compact. I have tried setting the line-height directly but nothing seems to change. I used style= in the source so it will be easy to find it. How can I make those more compact. Also the client list and the text in the search box. Thanks! I'm having trouble making the line-height work the way I want to in IE. I set the line-height of the outer container to this tag cloud to 24px, yet on IE it doesn't seem to be working. Any Ideas? Check it out. http://gifdump.com/tags/ Viewed on Firefox Viewed on IE Hope this is a simple prob for you css gurus. This time I can just direct you to a public site http://tixrus.us Attention to the "On Sale Now" list at the left, I chose a small font to list the dates. I would like that teaser of the next 5 events in chron to be a little more compact. I have tried setting the line-height directly but nothing seems to change. I used style= in the source so it will be easy to find it. How can I make those more compact. Also the client list and the text in the search box. Thanks! Hi, I have this simple sample: <div style="width: 50px; height: 100px; text-align: center; background-color: teal; line-height: .7em"> <span style="padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 10px; ">Here are some words that should wrap</span> </div> You can see in IE that the space between "should" and "wrap" is greater than the space between the other lines. Why is that? Also, the line height in this sample in IE and FF are different, FF has a bit more space than IE. I cannot measure em, so I don't know which is right. Is there any documentation on this difference? Thanks in advance, CJB Hi all, hope someone can help with this. Page with problem: html Code: http://central12.com/hovv.htm CSS Code: http://central12.com/hov.css Basically I used Eric Meyer image pop up tuturial, got it working ok in firefox, but in IE when I hover over the link the text jigs down a bit. I know I can stop this by removing the line-height attribute on the p tag, but wanted this to remain as it is a style I want across the site in general. Any way to keep the line height and remove the IE text jog. Thanks for any help. I'm encountering a stange problem with line-height in ie6 when my unordered list is wrapped in a div. Firefox displays the correct line-height but ie6 seems to double it. How can I fix this so ie6 looks like ff? Thanks for any help! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
ul {
list-style: none;
width: 192px;
margin: 20px 0px 0px 70px;
line-height: 2em;
padding: 0px;
}
li a:link, #nav li a:visited{
display: block;
color: #3e4735;
text-decoration: none;
position: relative;
}
li a:hover {
color: #6d7e59;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
</ul>
</div>
</body>
</html>
Question) In CSS can you line-height be set to a lower value than the current font size? What does this cause? potential answers (practise revision exam are) A) line-height cannot be set to a value lower than the current font size B) The lines are cut to prevent overlapping C) The lines will overlap I am pretty sure they overlap but want to confirm I'm using the following code: <font style="font-family:Verdana; font-size:10px; line-height: 70%; color: rgb(153, 153, 153);"<br />Photo Caption Goes Here</font> And it doesn't seem to be cross-browser compatible. The photo caption seems to publish differently across multiple browsers. I like how it's displayed in Firefox but on other browsers the photo caption is partially displayed or the line height is too close together. What's the best way to add css to a <font style=""> so it's cross browser compatible? Or does this have something to do with other styles on the page? Does line-height work in Internet Explorer? More specifically, does line-height work in Internet Explorer when applied to a <li>? This pertains to the "last nail in the coffin" so to speak in cross-browser compatability with the template for this site. The template is at http://www.spearsphotography.com/test_index.html The effect in question is on paragraph tags in the news item elements under the pagebody id div. (e.g., #pageblock div.story p ). Essentially, in every browser -except- IE Windows, the line spacing is as intended by the design. In IE6Win (haven't tested 5, but assume same) the lines are too-tight. Can anyone see the problem here, or has experienced this before? CSS File is at: http://www.spearsphotography.com/css/style.css Thanks. |
|||||||