|
CSS - Css - Line Height Across All Browsers
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? Similar TutorialsHi 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! Greetings, 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! 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! I've been trying to solve this for many hours. I'm using CSS and transitional tables. I have content with a box of navigation right aligned within the content table. I need to have a gray line in the content area dividing sections. The width of that gray line is dependent on whehter that navigation box is there or not. I've tried two ways to create the line, a table set at 100% with a gray background color and a <hr> tag that is styled in the css. I thought the hr tag was working, but in NS7, the gray line writes over the navigation box. Here's the page: http://www.vma.org/paris/nci-intranet/work-life-services-coachin.html If I use a table width=100%, it starts working in NS7 and Firefox, but stops working in IE. As you can see from the page, the width of the gray line is dependent on the navigation box to the right. The navigation box is a right aligned table floating within the content box. Here's my <hr> definition in the css: hr { border: 0; color: #D5D5D5; background-color: #D5D5D5; height: 1px; text-align: left; padding: 0px; margin: 0px; } Any ideas? Its driving me crazy, I know there's gotta be a simple solution to having the line take up the same amount of space as the text does and no more. Thanks! Hey guys, I'm having some trouble getting a table to stretch to 100% of the browser height. It seems to work in IE but not in netscape. Any suggestions? Here is what I'm doing in headder tag: Code: <style type="text/css">
html,body { height:100%; }
.outer{ height:100%; }
</style>
Then in my code for the table I have this: Code: <table width="808" border="0" cellspacing="0" cellpadding="0" class="outer"> Should I try using a DIV tag instead? Please let me know if you have any suggestions. Thanks! Is it possible to have the <div>'s #content to expand 100% in height for Gecko browsers? It worked fine in IE.... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* ================================================== */
/* == Web Layout == */
/* ================================================== */
body {
MARGIN: 0px;
PADDING: 0px;
WIDTH: 100%;
HEIGHT: 100%;
BACKGROUND-COLOR: #55649D;
TEXT-ALIGN: center; /* for IE stupidity */
BORDER-TOP: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-RIGHT: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-LEFT: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-BOTTOM: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
}
html {
MARGIN: 0px;
PADDING: 0px;
WIDTH: 100%;
HEIGHT: 100%;
}
#content {
MARGIN-TOP: 0px; /* border-top is at one, so margin-top only need to be at one pixel */
MARGIN-BOTTOM: -1px; /* border-bottom is at one, so margin-bottom only need to be at one pixel */
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
PADDING: 0px;
WIDTH: 598px;
HEIGHT: 100%;
BACKGROUND-COLOR: #8FA1B3;
BORDER-TOP: 1px solid white; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-RIGHT: 1px solid white; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-LEFT: 1px solid white; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-BOTTOM: 1px solid white; /* Test/Debug, otherwise leave actual table border as 0px */
}
#wrapper {
MARGIN: 0px;
PADDING: 0px;
WIDTH: 100%;
MIN-HEIGHT: 100%;
BACKGROUND-COLOR: #77649D;
BORDER-TOP: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-RIGHT: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-LEFT: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-BOTTOM: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
}
* html #wrapper {HEIGHT: 100%;} /* IE Hack since IE does not support "min-height" in the #wrapper*/
/* ================================================== */
/* == HTML General == */
/* ================================================== */
div
{
MARGIN: 0px;
PADDING: 0px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">asdf</div>
</div>
</body>
</html>
THanks, FletchSOD 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 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! 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 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 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. Hi, Trying to create a menu using <ul> tags and to have a nice spacing between <li> items. I have tried the line-height property but it seems like IE ignores them. Firefox formats the line-height properly. Can anyone help me? Should the line-height be applied to ul or li tags? /Hubba Bubba I'm not able to make the div spacing be 8px in height? I can do that for Seamonkey but not IE... Code: <div style="margin:0px;padding:0px;height:8px;"></div> So, what is the workaround to it?? 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. Hi all -- I've been messing w/ this for awhile and don't know why it isn't doing what I want. I have some headings, and the color, size, etc. all work but when the heading wraps to the next line, they are too close together... I've tried everything I can think of, like line-height normal, inherit, pixels,percent, you name it, doesn't change. here is a page example: http://www.keepsakequilting.com/landing/halloween2010.aspx they are the pinkish headings near the images.. here is the css I have: #lpage-titlel { font-family:century gothic,avant garde,arial,sans-serif; color:#AD4266; font-size: 110%; line-height:normal; font-weight: bold; padding: 0; margin: 8px 2px 5px 17px; text-align: left; } #lpage-titler { font-family:avant garde,century gothic,arial,sans-serif; color:#AD4266; font-size: 100%; line-height:normal; font-weight: bold; padding:10px; margin: 8px 2px 5px 5px; text-align: left; } #lpage-titler a {color:#AD4266;text-decoration:none;} #lpage-titler a:hover {color:#AD4266; text-decoration:underline;} #lpage-titlel a {color:#AD4266; text-decoration:none;} #lpage-titlel a:hover {color:#AD4266; text-decoration:underline;} What am I missing?? Any help would be greatly appreciated. THANKS Does line-height work in Internet Explorer? More specifically, does line-height work in Internet Explorer when applied to a <li>? Hello, I created the following header: http://www.27lamps.com/Beta/Typography/Typography.html Where Font Size is the same as Line Height: 2.0em. Shouldn't the border be next to the text? Thanks, Miguel Hey, Here is an example of code for one of my links where I attempted to align the link "Entry Form" to the middle of the image, what am I doing wrong? Code: <p class="NavigationOption" id="Nav_Entry" line-height=32px text-align=middle><img src="../links/entryform.jpg" border=0></img> <a class="NavigationLink" id="NavLink_Entry" href="<?= ptpr; ?>members/index.php"><font color= #555555>Entry Form</a></p> |
|||||||