2 replies [Last post]
Phreestyle
Phreestyle's picture
Offline
Enthusiast
Australia
Last seen: 4 years 45 weeks ago
Australia
Timezone: GMT+8
Joined: 2007-05-12
Posts: 235
Points: 6

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;
}

Life's a journey. Enjoy the trip.

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 29 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

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.

Phreestyle
Phreestyle's picture
Offline
Enthusiast
Australia
Last seen: 4 years 45 weeks ago
Australia
Timezone: GMT+8
Joined: 2007-05-12
Posts: 235
Points: 6

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

Life's a journey. Enjoy the trip.