PDA

View Full Version : Browser compatibility for IE8


scottsman78
08-25-2010, 05:10 PM
I am relatively new to dreamweaver, or at least inexperienced.
I have a page open I am working on. I want to create a navigation bar across the top of the page with a background and rollover images.
The background image has been placed inside the "navBar" div tag, then to get the links I have dropped a table of 1 row and 6 columns each containing a rollover .png file so the buttons have a shiney effect when rolled over.

When I test it, it works perfectly in firefox, chrome and safari but none of the background images appear in Internet explorer.
The rollovers are there but the background isn't and this is also the case for my header image and any other background images I have written into the DIV tag in CSS.

Can anyone help please? This is really starting to annoy me.

Thanks,

Scott.

scottsman78
08-25-2010, 05:24 PM
Don't know if this helps anyone but I've been told to clear the floats? Not sure how to do this but whatever I try doesn't work.
I've also tried just adding an image instead of a background image and that gives me the broken image icon in dreamweaver and I can see it fine in all browsers except IE where I get a red cross where the image should be?

DWcourse
08-25-2010, 07:09 PM
We'd really need to see the page to offer any meaningful help.

Ricky55
08-25-2010, 07:38 PM
Doesn't sound like its got anything to do with clearing Floats. I wouldn't insert a a table into your Div though. Just use a list to create your menu, see below for some very basic ruff code example.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">

ul {
font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size: .9em;
width: 800px;
list-style-type: none;
}

li {
padding: 15px; /*or provide a specific width*/
float: left;
}

li a {
display: block;
height: 30px;
color: #505050;
text-decoration: none;
}

li.home {
background: red; /*make these backgrounds links to your pngs background: url(images/home.png) left top no-repeat;*/
}

li.about {
background: silver;
}

li.contact {
background: teal;
}

li.play {
background: pink;
}

li.talk {
background: green;
}

li.chat {
background: blue;
}

li a:hover {
color: white;
text-decoration: underline;
}
</style>

</head>

<body>

<ul>
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About Us</a></li>
<li class="contact"><a href="#">Contact Us</a></li>
<li class="play"><a href="#">Play with Us</a></li>
<li class="talk"><a href="#">Talk to Us</a></li>
<li class="chat"><a href="#">Chat to Me</a></li>
</ul>

</body>
</html>

scottsman78
08-26-2010, 09:57 AM
I've temporarily put the page online at: http://www.leithathleticfc.com/home.html