...

View Full Version : Problems with my CSS in IE



ViperBlade
01-20-2009, 03:36 PM
Hi there.
I'm making a website for a couple who breed cats, and I'm almost done. I just need to sort out some cross-browser compatibility with my CSS and I'm stuck.

In Firefox, the links in the navbar have an image of a star either side of them which rotate when hovered over. In IE, only the one on the right-hand-side rotates.
Also in FF the background images show fine for all forms of <H#> (<H1>,<H2>, etc), however in IE they seem to disappear.

I've attached all necessary code for you lot to crucify me over (eg: "How dare you use that? That tag is defunct!") :p.
Any advice or corrections you could offer would be greatly appreciated.

Many thanks,
ViperBlade

7057

abduraooft
01-20-2009, 03:37 PM
Could you post a link to your page than the zipped attachment?

PS: always validate your code (http://validator.w3.org/#validate_by_input), and fix all markup errors, if any

ViperBlade
01-20-2009, 05:05 PM
I've installed Apache on my laptop so I can code wherever, so it's not actually live on the Internet anywhere.

Give me a few moments and I'll post it up onto my webspace.

EDIT: It's uploaded now
www.vbgm.x10hosting.com/cats

Rowsdower!
01-20-2009, 05:38 PM
It looks fine to me in both IE7 and FF2. Check browsershots to see how things look in other browsers/settings:

http://browsershots.org/http://www.vbgm.x10hosting.com/cats/

ViperBlade
01-20-2009, 06:22 PM
Wow, that's one awesome little resource! Thanks for showing me that.

Notice though in the Internet Explorer screenshots (5.5 & 6.0) the yellow bar underneath "HOME" disappears for some reason. IE 4.01 is a complete mess, but I'll sort that out (maybe) at a later date.
Also, the screenshots don't show the rotating star problem I mentioned earlier.

Rowsdower!
01-20-2009, 08:36 PM
The rotating star problem is occurring because - for some reason - the hover effect is being triggered only for your <a> link, not your <li> item. The easiest fix would be to find/create a gif of the desired width that includes both the left and right stars, then use that as the <a> background and be done with it. If that's not possible you can do something messy and inappropriate like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Snowcape Norwegian Forest Cats - Home</title>
<style type="text/css">
* {margin:0;padding:0;border:0;}

#bottom {
margin: 0;
padding: 0;
padding-top: 16px;
text-align: center;
}

#content {
margin: 0;
padding: 0;
width: 100%;
position: relative;
}

#navbar {
margin: 0;
padding: 0;
position: absolute;
top: 0px;
left: 0px;
width: 192px;
}

#page {
margin: 0;
margin-left: 192px;
padding: 0;
padding-left: 16px;
text-align: center;
}

#top {
height: 141px;
margin: 0;
padding: 16px;
}

body {
margin: 0;
padding: 0;
background: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
}

h1, h2, h3, h4, h5, h6 {
text-align: center;
margin: 0;
padding: 0;
padding-bottom: 1em;
}

li a{
display: block;
height: 24px;
line-height: 24px;
padding: 0;

}

ul {
list-style-type: none;
margin: 0;
padding: 0;
padding-left: 2px;
padding-right: 2px;
text-align: center;
}

a {
text-decoration: underline;
color: #FFFFFF;
}

a:visited {
}

a:hover {
text-decoration: none;
}

body {
color: #F6D600;
}

h1, h2, h3, h4, h5, h6 {
text-transform: uppercase;
letter-spacing: .2em;
background-image: url(http://www.vbgm.x10hosting.com/cats/home.php_files/images/bgr-h3.gif);
background-repeat: repeat-x;
background-position: bottom left;
}

hr {
background-color: #F6D600;
color: #F6D600;
height: 3px;
width: 75%;
}

p, ul, ol, blockquote, td {
color: #F6D600;
margin-top: 0;
line-height: 120%;
}

#bottom {
background-image: url(http://www.vbgm.x10hosting.com/cats/home.php_files/images/bgr-h1.gif);
background-repeat: repeat-x;
background-position: top left;
}

#top{
background-image: url(http://www.vbgm.x10hosting.com/cats/home.php_files/images/bgr-h1.gif);
background-repeat: repeat-x;
background-position: bottom left;
}

.title {
font-size: 2em;
}

.left {
display:block;
float:left;
height:24px;
width:24px;
background-image: url(http://www.vbgm.x10hosting.com/cats/home.php_files/images/star-inactive.gif);*/
}

.right {
display:block;
float:right;
height:24px;
width:24px;
background-image: url(http://www.vbgm.x10hosting.com/cats/home.php_files/images/star-inactive.gif);*/
}

li a:hover .left {
background-image: url(http://www.vbgm.x10hosting.com/cats/home.php_files/images/starl.gif);*/
}

li a:hover .right {
background-image: url(http://www.vbgm.x10hosting.com/cats/home.php_files/images/starr.gif);
}
</style>

</head>
<body>
<div id="top">
<p style="text-align:center;margin:0 auto;"><img src="http://www.vbgm.x10hosting.com/cats/home.php_files/titlebar.png" alt="Snowcape Norwegian Forest Cats"></p>
<img src="http://www.vbgm.x10hosting.com/cats/home.php_files/images/starl.gif" alt="" style="display:none;">
<img src="http://www.vbgm.x10hosting.com/cats/home.php_files/images/starr.gif" alt="" style="display:none;">
</div>
<div id="content">
<div id="page">
<h3>home</h3>
<p><a href="http://localhost/kittens.php"><img src="http://www.vbgm.x10hosting.com/cats/home.php_files/red-boy.jpg" alt="Red &amp; White Male" width="504" height="543"></a>
<br>Visit our kitten page to see our latest kittens</p>
<p><a href="#">Sign our Guest Book</a>&nbsp; - &nbsp;<a href="#">View our Guest Book</a></p>
<p><a href="#">View &amp; Sign our Guest Map</a></p>
<p><a href="#"></a></p>
<p>Updated<br>
XX/01/2009</p>
</div>
<div id="navbar">
<h3>Navigation</h3>
<ul>
<li><a href="http://localhost/home.php"><span class="left"></span><span class="right"></span>Home</a></li>
<li><a href="http://localhost/queens.php"><span class="left"></span><span class="right"></span>Queens</a></li>
<li><a href="http://localhost/studs.php"><span class="left"></span><span class="right"></span>Studs</a></li>
<li><a href="http://localhost/kittens.php"><span class="left"></span><span class="right"></span>Kittens</a></li>
<li><a href="http://localhost/links.php"><span class="left"></span><span class="right"></span>Links</a></li>
<li><a href="http://localhost/contact.php"><span class="left"></span><span class="right"></span>Contact</a></li>
</ul>
</div>
</div>
<div id="bottom">
<p><img src="http://www.vbgm.x10hosting.com/cats/home.php_files/counter.png" alt="counter"><br>
Since 28/10/2006</p><p>Derek &amp; Di Buckley<br>
Copyright 2004 - 2009 Snowcape</p>
</div>
</body>
</html>

The CSS needs to be pulled out of the file and probably cleaned up since there may be duplicate stuff you can delete. This was a quick and dirty solution and it abuses the <span> tag a bit, but it works in IE7 and FF. Let me know if this is what you're looking for.

Also, I added some "hidden" image tags in the "top" div that have the effect of preloading your right and left stars so that there is less chance of any pop-in graphics the first time someone hovers over your menu items. This is optional and can be removed if you don't like it.

ViperBlade
01-20-2009, 08:59 PM
I was thinking about making a single gif for the stars but I had other ideas about the navbar having a sliding-doors sort of thing, which is completely stupid and pointless because I've already declared its width.

Spaz! lol

Now onto fixing H3 disappearing in IE versions before IE7...

ViperBlade
01-21-2009, 07:06 PM
Anyone know why my background image would appear on one header and not another.
In IE I mean.

abduraooft
01-22-2009, 08:04 AM
Anyone know why my background image would appear on one header and not another.
In IE I mean.
Looks like a silly peekaboo (http://www.positioniseverything.net/explorer/peekaboo.html)... Have a try by adding height:1%; to your #page

ViperBlade
01-22-2009, 04:34 PM
Thanks man, I added height: 1%; to h3 and it worked great.
Issue resolved!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum