CSS - Reducing The Angle Of Italics

I've encountered the italics problem with IE and am trying to work around it. I followed the hack from the http://www.positioniseverything.net...alicbug-ie.html page but it really screws things up. My page is cut, more or less, into 3 sections: header, main, footer. Since I don't use any italics in either the header or footer, the rule needs only to apply to main. It CAN apply to the others, but it doesn't need to. Now, when I apply the hack, instead of my page lining up with the 'header' on the left hand side and the main on the right hand side, it completely pushes my 'main' area down so that it doesn't start until after the header and I have no idea why? I noticed that if I put the hack in each particular page (rather than in the external file sheet) then it works, but why?

Hi All,

Does anyone know how to display an image at an angle (for example 45 degrees)?

TIA

HywelC

I used this tutorial to create my rounded corner boxes.

Now if I change the font in the content of the box to italics, IE goes bananas. I read about the "Holly Hack" by setting the height to 1%. I can't seem to get it work with these rounded corner boxes. I'm not sure what div to apply it to. Here is the relevant html for the boxes:

Code:

<div class="bluebox">
			<div class="hd"><div class="c"></div></div>
			<div class="bd">
				<div class="c">
                                       <h4>Something</h4>
			               <p>Content Goes Here</p>
				</div>
			</div>
			<div class="ft"><div class="c"></div></div>
		</div>

And the css is this:

Code:

.bluebox {
margin:0 auto 8px auto;
color:#fff;
}

.bluebox .hd .c{
font-size:1px;
height:16px;
}

.bluebox .ft .c{
font-size:1px; /* ensure minimum height */
height:18px;
}

.bluebox .hd {
background:transparent url(images/tlb.gif) no-repeat 0px 0px;
}

.bluebox .hd .c {
background:transparent url(images/trb.gif) no-repeat right 0px;
}

.bluebox .bd {
background:transparent url(images/mlb.gif) repeat-y 0px 0px;
}

.bluebox .bd .c {
background:transparent url(images/mrb.gif) repeat-y right 0px;
}

.bluebox .bd .c .s {
background:#1caaec url(images/msb.jpg) repeat-x 0px 0px;
}

.bluebox .ft {
background:transparent url(images/blb.gif) no-repeat 0px 0px;
}

.bluebox .ft .c {
background:transparent url(images/brb.gif) no-repeat right 0px;
}

.bluebox h4 {
font:0.9em Verdana, sans-serif;
font-weight:bold;
padding-left:5px;
}

.bluebox p {
font:0.8em Verdana, arial, sans-serif;
font-style:italic;
padding:2px 10px 8px 5px;
text-align:justify;
color:#000000;
}

Any ideas where to stick the Holly Hack?

Hello CSS gurus,

When I add an italic font style to my web page, it causes a vertical shift in IE6. Everything is fine in Firefox.

Can anyone tell me what is happening with this?

Vertical Shifted with Italics:
http://www.innovations-online.com/t...ch_news_it.html

No Italics is Fine:
http://www.innovations-online.com/t.../tech_news.html

The same problem occurs with oblique.

Thanks in advance!

Darin

Hi,

I am very new to CSS and was wondering if there is a way to angle text in a <TD></TD> cell of a table?

My problem is that along the top of my table I have to list the times e.g. 12:00:00, 12:15:00, to 23:45:00. This makes the width of my table much bigger.

I was wondering if its possible to angle the text so it stands ons its head - so to speak - that way the column width would be much smaller?


Thanks in advance

j