Forums

Biofobico

As usually everything works fine except IE6 and IE7
The right way: http://img440.imageshack.us/my.php?i...icture1bz6.png

On IE6: http://img384.imageshack.us/my.php?image=ie6tw7.png

On IE7: http://img140.imageshack.us/my.php?image=ie7vg3.png

html:

<div id=\"header\">

				<h1 id=\"logo\"> 
						<a href=\"http://www.qoska.com\" title=\"Qoska: Home\">
						<img src=\"images/logo.jpg\" alt=\"Logo Qoska\" width=\"174\" height=\"35\"/></a>
					</h1>
		
				<ul id=\"main-nav\">
					<li><a href=\"index.html\" title=\"Go to the Home page\">Home</a></li>
					<li><a href=\"portfolio.html\" title=\"My Portfolio\">Work</a></li>
					<!-- <li><a href=\"http://qoska.com/blog\" title=\"Go to my Blog\">Blog</a></li> -->
					<li><a href=\"contact.html\" title=\"Contact me\">Contact</a></li>
				</ul>
			
			 <!-- <div class=\"clear\"></div> -->

		</div>
		
		<div id=\"welcome\">
		
					<div id=\"hire-me\">		
							<a href=\"contact.html\" title=\"Click to hire me\">
							<img src=\"images/hire-me.png\" alt=\" click to hire me\" width=\"227\" height=\"233\" /></a>
						</div>
						
					 <h1 id=\"welcome-msg\">Hello and welcome to Qoska!</h1>
				
			</div>

and the css:

/*
	HEADER
*/

#header:after
{
	content: \".\";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#header
{display: inline-block;}

/* Hides from IE-mac \*/
* html #header
{height: 1%;}

#header
{display: block;}
/* End hide from IE-mac */

h1#logo 								{ width: 174px; height: 35px; 
										  background: url(images/logo.jpg) top left no-repeat;
										  margin-top: 35px;
										  float: left; }
										  
/*
	MENU
*/

ul#main-nav 							{ width: 278px; margin-top: 55px; float: right;}
ul#main-nav li 							{ display: inline; }
ul#main-nav li a 						{ text-transform: uppercase; color: #6c6c6c; font-size: 1.3em; 
										  padding: 3px 0px 3px 20px; }
ul#main-nav li a:hover, a:active 		{ color: #ae0c0c; }


/*
	WELCOME MESSAGE/SHOWROOM
*/

#welcome 								{ margin-top: 5px; height:117px; 
										  background: url(images/welcome-bg.jpg) repeat-x; position: relative;  
										  display: inline-block;}
										  
										  
#welcome:after
{
	content: \".\";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/*#welcome
{display: inline-block;}*/

/* Hides from IE-mac \*/
* html #welcome
{height: 1%;}

#welcome
{display: block;}
/* End hide from IE-mac */

										  									  
										  
h1#welcome-msg, h1#showroom, h1#sucess-msg  { width: 100%; margin-top: 45px; margin-left: 45px; color: #4b4a4a; text-align: left; 
 										  text-transform: uppercase; 										
   										  font-weight: normal;
   										  float: left;
   										 /*display: inline;*/
   										   }
   										  
h1#welcome-msg:first-letter, h1#showroom:first-letter, h1#sucess-msg:first-letter { font-size: xx-large; text-transform: uppercase; color: #ae0c0c; }


/*
	HIRE ME
*/


#hire-me 								{ background: url( images/hire-me.png) no-repeat; 
										  width: 227px; 
										  height: 216px;
										  /*clear: both;*/
										  position: absolute;
										  top: 35px;
										  right: 35px;
										   }

I think i tried everything that i remember to solve this, but unfortunately with zero sucess :(

chriscoyier

IE6 just doesn't support the :first-letter pseudo class. If it's super important, you could use something like jQuery (which supports CSS3 selectors) to target that letter and change its color. I think of these things as progressive enhancement. Newer browsers get snazzier design, but older browsers aren't penalized.

treehouse : what would you like to learn today?

Forums

IE h1 and first:letter problem