Hello peeps,
I am just getting into the whole fancy graphic designing thing but have come across one stupid problem that I can't seem to fix no matter how many blogs/forums i read so hopefully you guys will prove to be the most technically adept!
Basically i'm learning to create fancy menus, content holders etc so... cutting it short IE won't display background images if they're delcared within the stlye="" element of anything!, e.g.
<td background="http://www.v7n.com/forums/images/image123.gif"></td> works just fine BUT this is poor practise and I want to do it properly!
<td style="background: transparent url(images/image123.gif) no-repeat fixed center;"></td> DOES NOT WORK, for some reason IE won't render but you can drag your mouse over it and it's there!?
this is the design view, which works with CSS styles fine (ignore the site it's one i'm maintaining for someone and thus can use it to display my problems!)
This is the rendered view, in the development server mode; I have to drag the mouse over everything just to see that something is there!
Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demonstrator.aspx.cs" Inherits="Demonstrator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Mobility Products UK</title>
<style type="text/css">
.navmenuhome
{
width:160px;
height:35px;
background: transparent url(images/staticnavhome1.gif) no-repeat fixed center;
font-family: "Trebuchet MS";
text-align:center;
vertical-align:bottom;
color:#ffffff;
font-size:1.45em;
}
.navmenuwho
{
width:160px;
height:35px;
background: transparent url(images/staticnavwho.gif) no-repeat fixed center;
font-family: "Trebuchet MS";
text-align:center;
vertical-align:bottom;
color:#ffffff;
font-size:1.45em;
}
.navmenuwhat
{
width:160px;
height:35px;
background: transparent url(/images/staticnavwhat.gif) no-repeat fixed center;
font-family: "Trebuchet MS";
text-align:center;
vertical-align:bottom;
color:#ffffff;
font-size:1.45em;
}
.navmenucontactus
{
width:160px;
height:35px;
background: transparent url(/images/staticnavcontactus.gif) no-repeat fixed center;
font-family: "Trebuchet MS";
text-align:center;
vertical-align:bottom;
color:#ffffff;
font-size:1.45em;
}
.navmenucommunity
{
width:160px;
height:35px;
background:transparent url(/images/staticnavcommunity.gif) no-repeat fixed center;
font-family: "Trebuchet MS";
text-align:center;
vertical-align:bottom;
color:#ffffff;
font-size:1.45em;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div></div>
<div><img src="Images/Swift Logo 400 wide.jpg" alt="bannerPhoto" /></div><br />
<br />
<div style="width:800px;">
<table>
<tr>
<td class="navmenuhome">Home</td>
<td class="navmenuwho">Who</td>
<td class="navmenuwhat">What</td>
<td class="navmenucontactus">Contact Us</td>
<td class="navmenucommunity">Community</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Basically, does anyone know why it won't render the backgrounds and text within <td>text</td> ?
If i havent submitted enouh info, guys please let me know,
Any help is much appreciated,
Thanks,
Boog's