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,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    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 04: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 07: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,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    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
    •