CSS - Netscape Pc - Css - Images Chopped In Half!

I'm in the process of creating a new website to replace the current ageing site. I'm having problems with IE and am looking for some assistance...
Code:
Original - Code <div id="content-2"> <h3>Hole 1 - Gallachers</h3> <img src="includes/phpThumb/phpThumb.php?src=/V2/testlayout/V3/images/gallery/16.jpg&w=300&h=500" alt="1st Hole - Gallachers" /> <h5></h5> <p align="left"><b>History</b></p> <p><i>Named after the Blyth District Medical Officer and Public Vaccinator Dr Thomas Ardgowan Gallacher L.R.C.P. and S. Edin., L.F.P.S. Glas., whose home backed onto the field known ever since the early 1900&rsquo;s as &ldquo;Gallacher's Field&rdquo; now a sports ground &ndash; and Out of Bounds!<strong> </strong></i></p> <p><b>Pro's Tip</b></p> <p>Tough opening hole, out of bounds right, trees left. Avoid the fairway bunkers on the right to open up your second shot to the green. <table cellspacing="0" cellpadding="1" width="100" align="right" border="1"><tbody><tr><td style="text-align: center" bgcolor="#ffffff"><span style="color: rgb(0,0,0)"><span style="background-color: rgb(255,255,255)">393<br /></span></span></td><td style="text-align: center" bgcolor="#ffff00"><span style="color: rgb(0,0,0)"><span style="background-color: rgb(255,255,0)">363</span></span><span style="background-color: rgb(255,255,0)"><br /></span></td><td style="text-align: center" bgcolor="#ff0000"><span style="color: rgb(0,0,0)"><span style="background-color: rgb(255,0,0)">350</span></span><span style="background-color: rgb(255,0,0)"><br /></span></td></tr><tr><td style="text-align: center" bgcolor="#ffffff"><span style="color: rgb(0,0,0)">4</span></td><td style="text-align: center" bgcolor="#ffff00"><span style="color: rgb(0,0,0)">4</span></td><td style="text-align: center" bgcolor="#ff0000"><span style="color: rgb(0,0,0)">4</span></td></tr></tbody></table></p> <p>&nbsp;</p> <h6>06/06/08 - 23:48<br /> Jamie Wright</h6> </div>

  

<div id="content-2">
<h3>Hole 1 - Gallachers</h3>
<img src="includes/phpThumb/phpThumb.php?src=/V2/testlayout/V3/images/gallery/16.jpg&w=300&h=500" alt="1st Hole - Gallachers" />
<h5></h5>
<p align="left"><b>History</b></p>
<p><i>Named after the Blyth District Medical Officer and Public Vaccinator Dr Thomas Ardgowan Gallacher L.R.C.P. and S. Edin., L.F.P.S. Glas., whose home backed onto the field known ever since the early 1900&rsquo;s as &ldquo;Gallacher's Field&rdquo; now a sports ground &ndash; and Out of Bounds!<strong> </strong></i></p>
<p><b>Pro's Tip</b></p>
<p>Tough opening hole, out of bounds right, trees left. Avoid the fairway bunkers on the right to open up your second shot to the green.
<table cellspacing="0" cellpadding="1" width="100" align="right" border="1"><tbody><tr><td style="text-align: center" bgcolor="#ffffff"><span style="color: rgb(0,0,0)"><span style="background-color: rgb(255,255,255)">393<br /></span></span></td><td style="text-align: center" bgcolor="#ffff00"><span style="color: rgb(0,0,0)"><span style="background-color: rgb(255,255,0)">363</span></span><span style="background-color: rgb(255,255,0)"><br /></span></td><td style="text-align: center" bgcolor="#ff0000"><span style="color: rgb(0,0,0)"><span style="background-color: rgb(255,0,0)">350</span></span><span style="background-color: rgb(255,0,0)"><br /></span></td></tr><tr><td style="text-align: center" bgcolor="#ffffff"><span style="color: rgb(0,0,0)">4</span></td><td style="text-align: center" bgcolor="#ffff00"><span style="color: rgb(0,0,0)">4</span></td><td style="text-align: center" bgcolor="#ff0000"><span style="color: rgb(0,0,0)">4</span></td></tr></tbody></table></p>
<p>&nbsp;</p>
<h6>06/06/08 - 23:48<br />
          Jamie Wright</h6>
</div>

The inline styles in the middle are caused by the code editor I use to create dynamic content.

In IE the centre of the image is chopped out following the end of the first <p> tag. In FF it works exactly as I expect it to.

Many thanks for any help that you can provide and apologies if this is a really obvious!

Jamie

Hi!

I'm using hte CSS's float for the image. This allow the big image to float over the small table. It look good in Gecko browser but in IE, the bottom image get chopped off, right where the last row of the table end. Why is that? Is there a workaround to it?

--snip--
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>E-Market Online</title>
</head>
<body>

<style type="text/css">
a:link
{
BACKGROUND: none transparent scroll repeat 0% 0%;
COLOR: #0000FF;
TEXT-DECORATION: none
}
a:active
{
COLOR: #0000FF;
TEXT-DECORATION: none
}
a:visited
{
BACKGROUND: none transparent scroll repeat 0% 0%;
COLOR: #0000FF;
TEXT-DECORATION: none
}
a:hover
{
BACKGROUND: none transparent scroll repeat 0% 0%;
COLOR: #18208c;
TEXT-DECORATION: underline
}
body
{
MARGIN: 0px;
BACKGROUND-COLOR: #83878C;
}
form
{
MARGIN: 0px;
}
table
{
BORDER-COLLAPSE: collapse;
}
a.wto_link1:link
{
FONT-FAMILY: Tahoma;
FONT-SIZE: 10px;
FONT-WEIGHT: bold;
COLOR: #AD0044;
TEXT-DECORATION: underline;
}
a.wto_link1:active
{
FONT-FAMILY: Tahoma;
FONT-SIZE: 10px;
FONT-WEIGHT: bold;
COLOR: #AD0044;
TEXT-DECORATION: underline;
}
a.wto_link1:visited
{
FONT-FAMILY: Tahoma;
FONT-SIZE: 10px;
FONT-WEIGHT: bold;
COLOR: #AD0044;
TEXT-DECORATION: underline;
}
a.wto_link1:hover
{
FONT-FAMILY: Tahoma;
FONT-SIZE: 10px;
FONT-WEIGHT: bold;
COLOR: #18208c;
TEXT-DECORATION: underline;
}
a.wto_no_link1:link
{
FONT-FAMILY: Tahoma;
FONT-SIZE: 10px;
FONT-WEIGHT: bold;
COLOR: #AD0044;
TEXT-DECORATION: underline;
CURSOR: text !important;
}
a.wto_no_link1:active
{
FONT-FAMILY: Tahoma;
FONT-SIZE: 10px;
FONT-WEIGHT: bold;
COLOR: #AD0044;
TEXT-DECORATION: underline;
CURSOR: text !important;
}
a.wto_no_link1:visited
{
FONT-FAMILY: Tahoma;
FONT-SIZE: 10px;
FONT-WEIGHT: bold;
COLOR: #AD0044;
TEXT-DECORATION: underline;
CURSOR: text !important;
}
a.wto_no_link1:hover
{
FONT-FAMILY: Tahoma;
FONT-SIZE: 10px;
FONT-WEIGHT: bold;
COLOR: #AD0044;
TEXT-DECORATION: underline;
CURSOR: text !important;
}
.faq_color1
{
COLOR: #18208C;
FONT-WEIGHT: bold;
}
.img_float3
{
FLOAT: left;
MARGIN: 0px 0px -250px 400px;
}
.wto_txt1
{
FONT-FAMILY: Tahoma;
FONT-SIZE: 10px;
FONT-WEIGHT: normal;
COLOR: #55575B;
TEXT-DECORATION: none;
}
</style>

<table border="0" cellpadding="0" cellspacing="0" width="761" height="100%" align="center">
<tr>
<td width="1" bgcolor="#000000"><img src="images/layout_spacer1.gif" width="1" height="1"></td>
<td align="center" valign="top" width="760" bgcolor="#FFFFFF">


<!-- inside table anchor -->
<table border="0" cellpadding="0" cellspacing="0" width="760" align="center">
<tr>
<td width="24">&nbsp;</td>
<td align="left" valign="top" width="712">
<img src="http://i.a.cnn.net/cnn/2004/ALLPOLITICS/09/30/debate.main/top.2110.split.pool.jpg" width="280" height="210" class="img_float3">
<table border="0" cellpadding="0" cellspacing="0" width="712">
<tr>
<td align="left" valign="top" width="12">
<img src="images/arrow.jpg" width="9" height="9" vspace="6" align="top">
</td>
<td width="4">
&nbsp;
</td>
<td align="left" valign="top" width="696">
<a href="#" class="wto_no_link1">F.A.Q.</a>
</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
<td align="left" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="696" align="left" valign="top">
<tr>
<td align="left" valign="top" class="wto_txt1" width="55">
<span class="faq_color1">Question:</span>
</td>
<td align="left" valign="top" class="wto_txt1" width="641">
Once my business send in all the paperworks, how soon can
I start using<br> the whatever?
</td>
</tr>
<tr>
<td align="left" valign="top" class="wto_txt1">
<span class="faq_color1">Answer:</span>
</td>
<td align="left" valign="top" class="wto_txt1">
Once your business is issued an account number and
password.
</td>
</tr>
<tr><td colspan="2"><img src="images/spreadsheet_spacer1.gif" width="1" height="10"></td></tr>
<tr>
<td align="left" valign="top" class="wto_txt1">
<span class="faq_color1">Question:</span>
</td>
<td align="left" valign="top" class="wto_txt1">
How can I be sure the transmission of data is secure with
your website?
</td>
</tr>
<tr>
<td align="left" valign="top" class="wto_txt1">
<span class="faq_color1">Answer:</span>
</td>
<td align="left" valign="top" class="wto_txt1">
The e-Market website encrypts all the data using 128 bit Secure
Sockets<br> Layer technology. &nbsp;End users can decrypt the
information using 128 bit<br> from the web browser.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="24">&nbsp;</td>
</tr>
</table>
<!-- inside table anchor -->


</td>
</tr>
</table>

</body>
</html>
--snip--

Thanks..

FletchSOD

So I came up with this lovely design for the company I'm working for, because they're website now is just utter crap. I figured instead of coding my usual way (a mess and unvalidated) I'd start off making it as clean and css-friendly as possible. I've run into some major issues, some common and some not. If any of you could help me, I would be extremely grateful.

My main problem is my issue with internet explorer. I've positioned everything to match up perfectly in Firefox, the site looks great and is aligned fairly well. However, when the site hits IE, everything shifts a couple pixels and throws everything off. Anyone know why this is happening? There is also a gap at the top of the page in IE, which isn't present in firefox.

I also can't figure out how to pus the footer to the bottom. I wanted another footer that stretched the whole page at the bottom (similar to the top), with a sort of 'prefooter' on top of it. I can't figure out how to just push a regular footer to the bottom, and I've tried all the fixes I can find online. Any idea why?

Here is the site:
Code:

http://www.chromaticstudios.net/AVT/

I'm trying to achieve the effect of flipping an element down. I can get it to flip down but I want to add perspective in order to have a 3D effect. I can get perspective to work but the second half of the transformation is what I want to happen from the start, not just half way through.

A lot of things I'm trying makes it go up and then down and that's not what I'm after.

Code:

.flip {
	-webkit-animation: flipDown 5000ms 1 linear;
	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: bottom center;
}

@-webkit-keyframes flipDown {
	0%    {
		-webkit-transform: rotateX(0deg);
	}
	50%   {
		-webkit-transform: rotateX(45deg);
	}
	100%  {
		-webkit-transform: rotateX(90deg) perspective(900);
	}
}

So I know that the perspective is only being transformed in the frames between the 50% and 100% marks but if I add an initial or perspective the the other keyframes it'll either jump up and then go down or just go straight down as if I didn't have perspective in there.

Any help?

Hi.

Ive been working on a theme I have a navbar with links on it and a background image. When you hover, you get a different background image on that section of the navbar.

Im trying to style it like this:



This is what it is currently like:



This is my current css:
Code:

#nav li {
	float: left;
	border-right: 0px solid #d5d5d5;
	text-align: center;
}

#nav li.over a, #nav a:hover, #nav a:active, #nav a:focus, #nav a.over {
	color: #FFFFFF;
	border-color: #2F2F2F;
	background: url(../images/grad_d1.gif) repeat-x top #0088CC;
	text-align: center;
}

#nav li.active a {
	color: #FFFFFF;
	font-style:bold;
	background: url(../images/grad_d1.gif) repeat-x top #0088CC;
	text-align: center;
	align: center;
}

This is a link: http://toyota.identityprojects.co.uk

Everything Ive tried seems to give bad results. Initally I tried putting width 75% and height 30px, centrally and vertically aligning the red gradient, but this seemed to break the whole menu and im sure its a bad way of doing it.

Can anyone help me out with this, ive wasted ages on this!