PDA

View Full Version : Problems with my CSS in IE



ViperBlade
Jan 20th, 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
Jan 20th, 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
Jan 20th, 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!
Jan 20th, 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
Jan 20th, 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!
Jan 20th, 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
Jan 20th, 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
Jan 21st, 2009, 07:06 PM
Anyone know why my background image would appear on one header and not another.
In IE I mean.

abduraooft
Jan 22nd, 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
Jan 22nd, 2009, 04:34 PM
Thanks man, I added height: 1%; to h3 and it worked great.
Issue resolved!