Forum Moderators: not2easy
Is there a hack or some way around this?
Examples that i have tried based on google searches.
<p> {
font-size: 12px;
font-family: Verdana, Geneva, sans-serif;
line-height: 125%;
}
<p> {
font-size: 12px;
font-family: Verdana, Geneva, sans-serif;
line-height: 125%;
line-height: 135%;
}
<p> {
font-size: 12px;
font-family: Verdana, Geneva, sans-serif;
line-height: 125%;
_line-height: 135%;
}
<p> {
font-size: 12px;
font-family: Verdana, Geneva, sans-serif;
line-height: 125%;
*line-height: 135%;
}
W3C (X)HTML Validator [validator.w3.org]
W3C CSS Validator [jigsaw.w3.org]
...................................
The samples are, every one, incorrect markup. It is not valid embedded CSS or inline CSS.
There are three samples that declare line-height: twice. Not recommended.
Also not recommended:
_line-height: 135%;
*line-height: 135%;
.................................
Option 1, embedded stylesheet in the <head>
p.lineht {
font: 12px/125% Verdana, Geneva, sans-serif;
}
Option 1 would also work fine in a linked external styesheet.
.................................
Option 2, inline declaration.
.................................
The sample below shows both.
(Note: It isn't 'wrong', but I am not a fan of mixing font-size: in px and line-height in % - It's a choice. Go with whatever works for you.)
(Note: Correct is to markup and test in Firefox or Opera and then correct for IE. Designing in IE will only cause you more problems.)
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
p.lineht-1 {
font: 12px/125% Verdana, Geneva, sans-serif;
}
p.lineht-2 {
font: 12px/180% Verdana, Geneva, sans-serif;
}
</style>
</head>
<body>
<p class="lineht-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ipsum tellus, convallis nec ornare ut, imperdiet sit amet tellus. Vestibulum ullamcorper
diam sed dui egestas id malesuada diam lacinia. Morbi ut mi elit, nec faucibus purus. Nam pretium nisi vel nunc viverra lobortis. Nullam venenatis ipsum vitae felis pretium varius. In a nunc eu lacus imperdiet euismod. Ut erat lacus, rhoncus quis dignissim quis, posuere sit amet felis. In commodo gravida accumsan. Mauris nisl dolor, condimentum eget dignissim eget,
molestie quis sapien. Morbi vel tortor nisi, ut molestie nibh. Suspendisse dictum rhoncus feugiat. Donec sit amet arcu ac urna pulvinar ornare sit amet
vitae tellus. Nulla nec tempor neque. Mauris tristique rhoncus leo sed tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin fermentum metus lorem, id lacinia ipsum.
</p>
<p class="lineht-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ipsum tellus, convallis nec ornare ut, imperdiet sit amet tellus. Vestibulum ullamcorper
diam sed dui egestas id malesuada diam lacinia. Morbi ut mi elit, nec faucibus purus. Nam pretium nisi vel nunc viverra lobortis. Nullam venenatis ipsum vitae felis pretium varius. In a nunc eu lacus imperdiet euismod. Ut erat lacus, rhoncus quis dignissim quis, posuere sit amet felis. In commodo gravida accumsan. Mauris nisl dolor, condimentum eget dignissim eget,
molestie quis sapien. Morbi vel tortor nisi, ut molestie nibh. Suspendisse dictum rhoncus feugiat. Donec sit amet arcu ac urna pulvinar ornare sit amet
vitae tellus. Nulla nec tempor neque. Mauris tristique rhoncus leo sed tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin fermentum metus lorem, id lacinia ipsum.
</p>
<p style="font: 12px/180% Verdana, Geneva, sans-serif;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ipsum tellus, convallis nec ornare ut, imperdiet sit amet tellus. Vestibulum ullamcorper
diam sed dui egestas id malesuada diam lacinia. Morbi ut mi elit, nec faucibus purus. Nam pretium nisi vel nunc viverra lobortis. Nullam venenatis ipsum vitae felis pretium varius. In a nunc eu lacus imperdiet euismod. Ut erat lacus, rhoncus quis dignissim quis, posuere sit amet felis. In commodo gravida accumsan. Mauris nisl dolor, condimentum eget dignissim eget,
molestie quis sapien. Morbi vel tortor nisi, ut molestie nibh. Suspendisse dictum rhoncus feugiat. Donec sit amet arcu ac urna pulvinar ornare sit amet
vitae tellus. Nulla nec tempor neque. Mauris tristique rhoncus leo sed tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin fermentum metus lorem, id lacinia ipsum.
</p>
<!--##########
Hi there, i have set my line height css to 125% which looks great in explorer but in firefox i can see any difference.
-->
</body>
</html>
<p> { /* whatever */ } is not supposed to work at all.
The correct syntax to select all <p> elements in your html is:
p { /* this will work */ }
Just test it in all the IE versions you care about at the very last and don't use hacks anymore: use conditional comments instead: much cleaner (also towards future IE versions)
