CSS - Inline H1 First-letter Problem

Due to letter-spacing double break won't work in IE. And triple break works as it is double break.

How to solve this problem?

Hi,

My site is loading fine in IE but messing up in FF, the tables (yes tables, sry) are loosing all height and widths. Ive had a look about but cant work out how to fix/get around this.

HTML Code:

<div id="products">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#ED1C24" style="width:194px; height:114px; margin-right:5px;margin-bottom:5px;">
<tr>
<td align="left" class="code" style="padding-left:3px;">
	AKA
</td>
<td align="right" class="name" style="padding-right:3px;">
	TITLE
</td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle" style="background-image: url(images/item_bg.gif); background-repeat:no-repeat;">
	<a href="details.php?id=CODE">
	<img src="images/products/photos/CODE.jpg" alt="TITLE" border="0" style="height:84px; width:184;" /></a>
</td>
</tr>
</table>
</div>

CSS
Code:

#products { padding-bottom:10px; line-height:20px; font-family:Arial, Helvetica, sans-serif; font-size:11px; letter-spacing:1px; display:inline-table; vertical-align:top;}
#products table {display: inline}

How can i get the same effect so FF looks the same as IE?

Thanks for any help.

Mike

Hi, I am still quite new to CSS so forgive me if this is a silly question but I have created a DIV layout that look something like

Code:

<div class=row><div class=square>A</div><div class=square>B</div><div class=square>C</div></div>

In the CSS "row" is designated as display type BLOCK
"square" is designated as "INLINE-BLOCK"

in safari, firefox etc this comes up showing the A,B & C next to each other in their own styled boxes. This is how I want to be.

However in Internet Explorer (currently testing it on v8), the A ,B and C show up , one underneath the other in a straight line down the page. This is not cool.

To fix this issue, I tried changing the inline-block to just "inline" This works fine now in IE, the squares are next to each other like i wanted, but now when I test it on safari,firefox, the boxes go straight down the page!

Am I missing something here? I would rather not make a special style sheet for IE if there is a solution that will help make it work on all three browsers.

It just seems strange that the display types are working completely opposite to each other .

Any help would be appreciated.

below if the full CSS rules if that helps any

Code:

.row {
		width: 100%;
		height: 30px;
		display: block;
		font-size: 14px;
		text-align: center;
		font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	}
.square {
	
		display: inline-block;
	
		background-color: #eeeeee;
	
		line-height: 30px;
		height: 30px;
		width: 30px;
		border-width: 1px;
		border-color: #000000;
		border-style: solid;
	}

Hi, I'm having a slight problem with my css.

I want to display a comment with a number of images to the right of it.

e.g

"Excellent" plus 5 stars next to it (note: images of stars)

so i tried this:

Code:

 <div id = "commentText"> Excellent </div> 
		 
  <div id = "star"> </div>
  <div id = "star"> </div>
  <div id = "star"> </div>
 
  <div id = "commentText"> Fantastic </div> 
   <div id = "star"> </div>
   <div id = "star"> </div>
   <div id = "star"> </div>
   <div id = "star"> </div>

css

Code:

#commentText
{
  font-size: 100%;
  color: #000000;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  padding-left: 30px;
}

#star 
{
  display: inline;
  height: 24px;
  background-image: url(images/star.png);
  background-repeat: no-repeat;
  padding-left: 20px;
  
}

I currently have comment with 3 stars displayed underneath it - however they are only half being shown for some reason.

Any help is appreciated to help me get the desired effect. Thanks!

Why can't I get this to work on the first letter -

#maincontent {
float: right;
top: 100px;
width:638px;
margin-left:132px;
height:500px;
clear:right;
position: absolute;
background-repeat: no-repeat;
border: 0px solid purple;
text-align:left;
padding-top:0px;
}

#maincontent H1{
display:block;
width:auto;
border: 0px solid purple;
text-align:center;
margin-top:20px;
margin-bottom:40px;
color:#000066;
font-size:16px;

}

#maincontent P{
width:80%;
margin-left:10%;
margin-right:10%;
display:block;
background-repeat: no-repeat;
border: 0px solid purple;
text-align:justify;
padding-top:0px;
color:#08207B;
}

#maincontent P img{

border: 2px solid #08207B;
float:left;
margin-right:5px;
margin-bottom:0px;

}

#maincontent P:First-Letter{
color:red;
font-size:24px;
}


Everything else works fine...