Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:acid="http://acid/">
<head>
<title>Acid4 Test</title>
<link rel="stylesheet" type="text/css" href="acid4.css" />
</head>
<body>
<h1><acid:textGradient></acid:textGradient>Acid<span>4</span></h1>
</body>
</html>
and stylesheet:
#font-face {
src: url('syncopateBold.ttf');
font-family: Syncopate;
font-weight: bold;
font-style: normal;
font-variant: none;
}
#font-face {
src: url('syncopate.ttf');
font-family: Syncopate;
font-weight: normal;
font-style: normal;
font-variant: none;
}
* {
margin: 0;
padding: 0;
}
body > *:first-child { /* our title */
font-family: Syncopate;
font-size: 4em;
font-weight: bold;
margin: 0;
text-shadow: 0 0 10px black;
text-transform: lowercase;
*color: blue;
_color: red;
}
body > *:first-child > span { /* The 4 in Acid4 */
color: white;
font-weight: normal;
font-size: 200%;
vertical-align: sub;
z-index: 999;
}
acid\:textGradient:empty {
background: url('textGradient.png') repeat-x;
display: block;
height: 31px;
margin-top: 50px;
position: absolute;
width: 210px;
}
. Here's the result I get on Google Chrome:
Which is what I expect. However, Firefox and IE9 display this:
I'd like to know, which one is the standards-compliant result?
The fonts can be found here: http://www.google.com/webfonts/family?family=Syncopate&subset=latin and the textGradient.png is just a gradient image.
Despite the contrived example (all the "acid" stuff is completely irrelevant), this is actually a question about vertical alignment, and in particular, vertical-align:sub. As far as I can see, neither css2.1 nor css3 defines how far vertical-align:sub should shift the text. They simply say
sub
Lower the baseline of the box to the proper position for subscripts of
the parent's box. (This value has no
effect on the font size of the
element's text.)
So there is no standard, Chrome has just chosen a different value to Firefox.
I suggest using something like vertical-align: -10%; instead.
I'm pretty sure that acid:xmlns should be xmlns:acid:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:acid="http://acid/">
<head>
<title>Acid4 Test</title>
<link rel="stylesheet" type="text/css" href="acid4.css" />
</head>
<body>
<h1><acid:textGradient></acid:textGradient>Acid<span>4</span></h1>
</body>
</html>
Of course, I'm assuming that xmlns:acid is not actually "http://acid/", because that refers to a user's local page on localhost.
Related
I have a select box styled for good browsers, and for ie9 and down, I wish to have the default select box displayed, with no custom styles.
Styles for good browsers:
select {
display: inline-block;
background: transparent;
padding: 5px;
font-size: 16px;
line-height: 1.3;
border: 0;
border-radius: 0;
height: 40px;
-webkit-appearance: none;
-moz-appearance: none;
}
/*ie-10 fix*/
select.select-k::-ms-expand {
display: none;
}
select.select-k {
font-family: Bitter, Georgia, serif;
font-weight: 700;
border: none;
padding-left: 20px;
}
select.select-k.quantity {
width: 80px;
background: url(../img/forms/arrow.png) no-repeat 80% 50% #fff;
}
Now I have the following conditional:
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="/css/bugbrowser.css" />
<![endif]-->
My question is, in order to overwrite those styles on IE, should I redeclare all values? If so, where can I see the default IE styles to overwrite?
Considering that IE 10 and higher don't support conditional comments, why not write something like this:
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="/css/styles.css">
<!--<![endif]-->
Or if you persist on using inline styles:
<!--[if !IE]><!-->
<style>
select {
display: inline-block;
background: transparent;
padding: 5px;
font-size: 16px;
line-height: 1.3;
border: 0;
border-radius: 0;
height: 40px;
-webkit-appearance: none;
-moz-appearance: none;
}
/*ie-10 fix*/
select.select-k::-ms-expand {
display: none;
}
select.select-k {
font-family: Bitter, Georgia, serif;
font-weight: 700;
border: none;
padding-left: 20px;
}
select.select-k.quantity {
width: 80px;
background: url(../img/forms/arrow.png) no-repeat 80% 50% #fff;
}
</style>
<!--<![endif]-->
So let's say you create a new file that you only want to display on modern browsers, (including IE10+, but not IE9 and below) then you'd call that file something like: gt-ie9.css (greater than IE 9). Then, in your HTML you'd call that CSS like so:
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="/path-to-file/gt-ie9.css">
<!--<![endif]-->
Two same tags have different alignment in IE9. I've stored code in http://jsfiddle.net/9B2hK/, but when I see it in IE9 there both buttons have 5px intead on 6px. If I remove one line break tag, text alignment in second tag became OK.
Few words about my task. I need buttons styled by css. I've created .btn class which is used for anchor tag, for input tag with types "submit" and "button". I need button height be the same with text input field, so I've set it's height 20px. Also because I need it works in chrome and others I set line-height=14px and padding=3px for top and bottom to align text. I've tried to use vertical-align, but for some browsers it doesn't work good. But my styles works strange in IE9. I've removed unnecessary tags from my page and here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
body {
font-size: 11px;
font-family: Verdana, Tahoma, sans-serif
}
.btn {
display: inline-block;
line-height: 14px;
padding: 3px 10px 3px;
font-family: Verdana, Tahoma, sans-serif;
font-size: 11px;
text-align: center;
color: #FFFFFF;
background-color: #5675B5;
vertical-align: middle;
}
</style>
</head>
<body>
<span class="btn">Search</span>
<br/><br/><br/><br/><br/><br/><br/>
<span class="btn">Search</span>
</body>
</html>
Remove the line-height and use css transform property.
.btn {
position: relative;
top: 50%;
transform: translateY(-50%);
padding: 3px 10px 3px;
font-family: Verdana, Tahoma, sans-serif;
font-size: 11px;
text-align: center;
color: #FFFFFF;
background-color: #5675B5;
vertical-align: middle;
}
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>
I have one button , over that I am applying below style/class. but this class doesn't work properly in mozila browser. it works in IE. Button's starting point I have icon which renders at the middle of left side and text comes beside that.
IE renders in middle but mozila renders at top of ![enter image description here][1]button. please let me know what I m doing wrong here. also find attached screenshot of the issue
.class
{
padding: 0px;
margin: 0px;
border-collapse: collapse;
background:url(GB_Link.gif) no-repeat 0px -2px;
display:inline-block;
height:20px;
line-height:13px;
font-size: 11px;
font-family: Tahoma, Arial, Verdana, Sans-Serif;
text-decoration: none;
text-align:left;
text-indent:25px;
text-color:black;
vertical-align:middle;
width:180px;
cursor:hand;
border: 1px solid #77A2B5;
}
this is a general issues.
add the following code at the top of the layout or in your html page where you have defined the html tag:
<!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">
I hope so your problem will be short out.
I think you have understood very well.
Set the line-height to the same as the button height:
line-height: 20px;