Hi, here I am in search of help once again
I'm putting together a site which is still in the development stages and have encountered a few issues.
I'm trying to use the p:first-letter psuedo class to make the first letter of each paragraph larger. This works fine in FF but, surprise surprise, IE actually makes the letters smaller - despite being set at 150% of the defualt.
Any clues?
Here's a live link. http://robster.freehostia.com/phreestyledesign/frontpage.php
Here is the specific code in question.
Thanks in advance
#center {margin-left:201px;
margin-right:215px;
padding:10px 0;
background:transparent;
}
#center p {line-height:1.3em;
margin:0 0 1em 0;
}
#center p:first-letter {font-size: 150%;
padding: 0 0.2em 0 0;
}
All the CSS.
* {
margin:0;
padding:0;
font-size:100.1%;
font-family: Georgia, Verdana, Courier, sans-serif;
}
body {background:#2B6655;
color:white;}
#header {background-image: url('header.png');
background-repeat:no-repeat;
background-position:center;
margin: 1em auto;
width:500px;
height:60px;
}
#header h1 {font-size:300%;
text-align: center;
color:#F6E50F;}
/*Horizontal Navlist Properties*/
#navcontainer {background: transparent;
margin: 0 auto;
padding: 0.4em 0 0.4em 0;
font-family: georgia, serif;
text-transform: lowercase;
margin-bottom:0px;
}
/*to stretch the container div to contain floated list*/
#navcontainer:after {content: ".";
display: block;
line-height: 1px;
font-size: 1px;
clear: both;
}
ul#navlist {list-style: none;
padding: 0 15%;
width:80%;
margin: 0;
font-size: 80%;
}
ul#navlist li {display: block;
float:left;
width: 15%;
margin:0;
padding: 0;
}
ul#navlist li a {display: block;
width: 100%;
padding: 0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #020304;
text-decoration: none;
background: #F6E50F;
}
#navcontainer ul#navlist li a {width: auto;
}
ul#navlist li#active a {background: #eee;
color: #541f14;
}
ul#navlist li a:hover, ul#navlist li#active a:hover {color: #cc9e61;
background: #020304;
border-color: #aaab9c #fff #fff #ccc;
}
/*#left, #right, #center {border: 1px groove #333}*/
#left {float:left;
width:200px;
padding:10px 0;
background:transparent;
}
#left h2, #right h2 {font-weight:bold;
font-size:100%;
text-align:center;
margin:0 0 1em 0;
color:#F6E50F;
}
/*Vertical Navbar properties*/
#left .navbar {background-color:transparent;
border: groove #aaaaaa 0px;
padding:0;
width:150px;
font-size:80%;
text-transform:lowercase;
}
#left .navbar ul li {list-style-type: none;
margin: 0 1.5em;
padding: 0.1em;
text-align:left;
}
#left .navbar ul {margin: 0px;
padding: 0;
width:190px;
}
#left .navbar ul li a:link, #left .navbar ul li a:visited {background:#F6E50F;
color: #020304;
display: block;
text-decoration: none;
font-weight: normal;
border: outset #EF8426 2px;
padding: 0.2em 0 0.2em 2em;
}
#left .navbar ul li a:hover {background:#020304;
color:#cc9e61;
font-weight:bold;
border: inset #F6E50F 2px;
}
#right { float:right;
width:200px;
padding:10px 0;
background:transparent;
}
#right img {margin:0 0 1em 0;
border:none;
}
#right ul {list-style-type:none;
text-align:center;
line-height:1.3em;
}
#center {margin-left:201px;
margin-right:215px;
padding:10px 0;
background:transparent;
}
#center p {line-height:1.3em;
margin:0 0 1em 0;
}
#center p:first-letter {font-size: 150%;
padding: 0 0.2em 0 0;
}
#center dl dt {font-weight:bold;
color:#F6E50F;
}
#center dl dd {margin: 0 0 1em 2em;
line-height:1.3em;
}
#footer {
clear:both;
background:transparent;
padding:8px 100px;
text-align:center;
}
#footer a {color:#eee;}
#footer img {border:none;}
#footer #footerlist li {
display: inline;
list-style-type: none;
padding-right: 0.2em;
}
Someone may have a better
Someone may have a better solution.
first-letter is buggy. Have a look there http://www.satzansatz.de/cssd/pseudocss.html
Remove #center from the rule and it will work.
Yikes. Just when you think
Yikes.
Just when you think you have got your head around IE idiosyncrasies another one pops out and bites you in the a**.
Thanks for the link. Interesting stuff. I've just added it to my bulging IE bug bookmark folder.
Ta