How is the value of lh and rlh computed?
Regardless of the value that I put for the span, the computed value shown by chrome's computed tab is 12px.
<!DOCTYPE html>
<head>
<style>
body {
font-size: 16px;
border: 1px solid black;
}
div {
font-size: 12px;
}
span {
font-size: 1.5lh; // 15lh, 1.5rlh, 150rlh still gives a value of 12px
}
</style>
</head>
<body>
<div>Hello <span>world</span></div>
</body>
</html>
Related
I am playing with various css properties to see how they work. And my question is, why is it when I set "margin-top" that is more negative than -20px my link doesn't move more upwards any more. Setting a more negative value like -21px and above doesn't move the link more to the top at all.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nav</title>
<style>
nav { /*height: 60px;*/ border: 2px solid black;}
a {
display: inline-block;
text-decoration: none;
background-color: lightgreen;
color: grey;
font-weight: bold;
padding: 20px;
border-bottom: 2px solid red;
margin-top: -20px; /* more negative value doesn't move the link more to the top */
}
</style>
</head>
<body>
<h1>Testing</h1>
<nav>
link 1
</nav>
<p>some text so we can see how it is affected when setting various properties</p>
</body>
</html>
For inline (inline-block) elements it appears they don't go beyond their height (can't say/find why), so if you for example change padding greater that 20px, you can have a negative margin as big.
If you do change the anchor to a block level element though, the negative margin applies properly.
Sample 1 - padding
nav { /*height: 60px;*/ border: 2px solid black;}
a {
display: inline-block;
text-decoration: none;
background-color: lightgreen;
color: grey;
font-weight: bold;
padding: 40px;
border-bottom: 2px solid red;
margin-top: -40px; /* more negative value doesn't move the link more to the top */
}
<h1>Testing</h1>
<nav>
link 1
</nav>
<p>some text so we can see how it is affected when setting various properties</p>
Sample 2 - block element
nav { /*height: 60px;*/ border: 2px solid black;}
a {
display: block;
text-decoration: none;
background-color: lightgreen;
color: grey;
font-weight: bold;
padding: 20px;
border-bottom: 2px solid red;
margin-top: -40px; /* more negative value doesn't move the link more to the top */
}
<h1>Testing</h1>
<nav>
link 1
</nav>
<p>some text so we can see how it is affected when setting various properties</p>
It will never go more negative because there is a h1 tag which dosen't have any spaces above it to do the margin
you have to use position:absolute; to make a tag move freely
All the elements in your example have what is called (are in) a "Normal Flow". The very first element in the flow is <h1> which is block element, it occupies the whole available width and makes the line break. When you use negative margin-top you go up to the element above. 20px of padding is the available negative margin for the element. To go out of the "Normal flow" you can use position: absolute. To stay in the flow you may use position: relative, and use top: -21px;.
can some one explain why the following happens:
Test
<style type="text/css">
.test {
border: thin solid blue;
color: red;
}
</style>
This only creates the border but doesn't turn the text red when using a class.
However, this works in turning the text red when using an id instead:
Test
<style type="text/css">
#test {
border: thin solid blue;
color: red;
}
</style>
Why does the class not change the text color, while using id does work?
Thanks!
use this
demo here
Test
<style type="text/css">
a.test {
border: thin solid blue;
color: red;
}
</style>
See this example: http://jsfiddle.net/mD5us/4/
<div>
Test
</div>
CSS
​body div a.test{
color:yellow;
}
body div .test{
color:brown;
}
body a.test{
color:purple;
}
body .test{
color: orange;
}
a.test{
color:green;
}
.test {
border: thin solid blue;
color: red;
}
You might think that the link will be red, but it will actually be yellow since that is the most specific declaration.
try changing the style tag into this:
<style type="text/css">
a.test{
border: thin solid blue;
color: red;
}
</style>
I have 2px difference between Chrome and Firefox in the height of input, why?
(I don't want to specify height to input element)
<html>
<head>
<title></title>
<style type="text/css">
p {
font-size: 11px;
font-family : Verdana;
}
input {
border: 1px solid #ccc;
font-size: 11px;
font-family : Verdana;
}
</style>
</head>
<body>
<p>
<label>Text</label>
<input type="text" />
</p>
</body>
</html>
By the way, If I put Arial font instead of Verdana, the sizes are correct. Why?
Thank you.
I was having a similar issue with Firefox not rendering a Search box same as Chrome. I used the following css line and it fixed it:
input::-moz-focus-inner {
border: 0;
padding: 0;
}
Let me know if it worked.
Adjust line-height
input { line-height:17px; }
Set line-height to 1em:
input {line-height: 1em;}
I have a logo name called Example.
I want the Exam to be blue and the le to be red.
I know you can use :first-letter but I need to change up to 4 characters. It's the only thing stopping me from making a pure CSS logo instead of using an image.
You could split the single (what i assume is a span) into 3 separate spans.
<span class="blue logo">Exam</span><span class="logo">p</span><span class="red logo">le</span>
then your css could look something like this
.blue {
color: blue;
}
.red {
color: red;
}
.logo {
font-size: 33px;
font-family: Helvetica;
}
<!doctype html>
<html>
<head>
<title></title>
<style>
h1 {
font-size: 0;
}
h1:before {
content: 'Examp';
color: #0000ff;
font-size: 32px;
}
h1:after {
content: 'le';
color: #ff0000;
font-size: 32px;
}
</style>
</head>
<body>
<h1>Example</h1>
</body>
</html>
Assuming you can modify the markup, you could just re-wrap the text:
<span class="branding-highlight">Exam</span>ple
.branding-highlight {color:red;}
CSS does not have mechanics for accessing n-th everything just yet. And if it will, it will take time for browsers to adopt it - the sample above would remain best supported.
Its possible even without modifying the markup:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
display: inline-block;
margin: 0;
line-height: 1em;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 100px;
background: linear-gradient(to right, #1c87c9 50%, #8ebf42 50%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<h1>R</h1>
<p>This is a character with half-style.</p>
</body>
</html>
Hey i think you want to this as like
This is css Part
.logo{
font-size: 33px;
font-family: Helvetica;
color:red;
}
.logo > span{
color:blue;
}
This is HTML Part
<div class="logo">
Exam
<span>ple</span>
</div>
and now check to live demo http://jsfiddle.net/SyPfG/
I know you have already accepted an answer, but I figured I would contribute this method using jQuery, as it may be useful to you or future readers of this question.
HTML:
<span class="logo">Example</span>
CSS:
.logo{
color:blue;
}
jQuery:
$('.logo').each(function() {
$(this).html(
$(this).html().substr(0, $(this).html().length-3)
+ "<span style='color: red'>"
+ $(this).html().substr(-3)
+ "</span>");
});
DEMO
You can use this Method as O.V suggested!:
<div id="logo"><span style="color:red">Exam</span><span style="black">p</span><span style="blue">le</span></div>
Why does Firefox 4 absolutely position fieldset legends differently than other browsers?
Test page:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-family: Tahoma, Arial, sans-serif;
font-size: 62.5%;
}
#wrapper
{
margin: auto;
padding: 1em;
width: 720px;
}
form
{
width: 670px;
padding: 25px;
background-color: #ffffff; /* White */
color: #000000; /* Black */
border: 1px solid #cccccc; /* Gray */
font-size: 12px;
}
fieldset
{
position: relative;
border: 1px solid #cccccc; /* Gray */
padding: 25px 10px 5px 15px;
margin-bottom: 20px;
}
fieldset legend
{
position: absolute;
top: 5px;
left: -10px;
/* Firefox */
/*top: -20px;
left: -25px;*/
font-weight: 900;
background-color: #ffffff; /* White */
}
/* Input Types */
label
{
margin-right: 10px;
line-height: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<form method="POST" action="test" id="testForm">
<fieldset>
<legend>Test</legend>
<label for="test">Test:</label><input type="text" id="test" name="test" value=""/>
</fieldset>
<input type="submit" value="Test"/>
</form>
</div>
</body>
</html>
Notice that in Opera 11.10 Build 2092, Chrome 11.0.696.65, Safari 5.0.4 (7533.20.27), and Windows Internet Explorer 9, they display the legend on the left, overlapping the fieldset border.
In Firefox 4.0.1, I have to change the top and left properties to get a similar effect. For example, within the style tag of the test page, uncomment this CSS:
/* Firefox */
/*top: -20px;
left: -25px;*/
legend elements are quirky and weird. That being said, if all the other browsers do the same thing, then Firefox should do the same thing.
There's already a bug report here describing the issue in detail: https://bugzilla.mozilla.org/show_bug.cgi?id=450418
A workaround is to add a wrapper div inside the fieldset and move the padding to that.
Your unchanged code: http://jsbin.com/ivedo4
Fixed code: http://jsbin.com/ivedo4/2
I tested it with the same browsers (not identical versions, but close) you listed in your question, and the rendering was consistent.
My code doesn't look quite right in IE8, but yours is broken in exactly the same way.