Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Problems with my CSS in IE

    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!") .
    Any advice or corrections you could offer would be greatly appreciated.

    Many thanks,
    ViperBlade

    cats.zip

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Could you post a link to your page than the zipped attachment?

    PS: always validate your code, and fix all markup errors, if any
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    ViperBlade (01-20-2009)

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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
    Last edited by ViperBlade; 01-20-2009 at 05:09 PM.

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.v...ting.com/cats/
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    ViperBlade (01-20-2009)

  • #5
    New Coder
    Join Date
    Jan 2009
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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:

    Code:
    <!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.
    Last edited by Rowsdower!; 01-20-2009 at 08:39 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    New Coder
    Join Date
    Jan 2009
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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...

  • #8
    New Coder
    Join Date
    Jan 2009
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Anyone know why my background image would appear on one header and not another.
    In IE I mean.

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Quote Originally Posted by ViperBlade View Post
    Anyone know why my background image would appear on one header and not another.
    In IE I mean.
    Looks like a silly peekaboo... Have a try by adding height:1%; to your #page
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    ViperBlade (01-22-2009)

  • #10
    New Coder
    Join Date
    Jan 2009
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks man, I added height: 1%; to h3 and it worked great.
    Issue resolved!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •