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 2 of 2
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Span positioning working in Safari and Opera but not FF

    Hello,

    I was wondering if anyone could tell me what I'm doing wrong here: http://www.elroperodetiffany.com/home.html.

    If you're using FF, you can see the little drawers that act as navigation aren't in place (they're pushed to the right), In Safari and Opera they're correctly positioned under the header line.

    Here are both my css and html:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>El ropero de Tiffany</title>
    <link href="main.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    .style1 {color: #1C1811}
    -->
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    <a href="home.html"><span class="cajon"></span></a>
    <a href="home.html"><span class="cajon2"></span></a>
    <a href="home.html"><span class="cajon3"></span></a>
    <a href="home.html"><span class="cajon4"></span></a>
    <div id="header"></div>
    <div id="content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.
    
    Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis. Donec eget sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis. Suspendisse sagittis ante a urna. Morbi a est quis orci consequat rutrum. Nullam egestas feugiat felis. Integer adipiscing semper ligula. Nunc molestie, nisl sit amet cursus convallis, sapien lectus pretium metus, vitae pretium enim wisi id lectus. Donec vestibulum. Etiam vel nibh. Nulla facilisi. Mauris pharetra. Donec augue. Fusce ultrices, neque id dignissim ultrices, tellus mauris dictum elit, vel lacinia enim metus eu nunc.
    
    Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem. Ut vitae enim eu est vehicula gravida. Morbi ipsum ipsum, porta nec, tempor id, auctor vitae, purus. Pellentesque neque. Nulla luctus erat vitae libero. Integer nec enim. Phasellus aliquam enim et tortor. Quisque aliquet, quam elementum condimentum feugiat, tellus odio consectetuer wisi, vel nonummy sem neque in elit. Curabitur eleifend wisi iaculis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non velit non ligula laoreet ultrices. Praesent ultricies facilisis nisl. Vivamus luctus elit sit amet mi. Phasellus pellentesque, erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo.
    
    Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin consectetuer velit in dui. Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis. Mauris sollicitudin, turpis in hendrerit sodales, lectus ipsum pellentesque ligula, sit amet scelerisque urna nibh ut arcu. Aliquam in lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla placerat aliquam wisi. Mauris viverra odio. Quisque fermentum pulvinar odio. Proin posuere est vitae ligula. Etiam euismod. Cras a eros.
    
    Nunc auctor bibendum eros. Maecenas porta accumsan mauris.</div>
    <div id="footer">
    &copy; El ropero de Tiffany 2008<br />
    <span class="style1">Diseño : Sad Sparrow</span></div>
    </div>
    </body>
    </html>
    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    body{
    padding: 0px;
    background-color:#c5c0ab;
    text-align:center;
    margin:auto;
    width:950px;
    font-family:"Courier New", Courier, monospace;
    color:#c5c0ab;
    font-size:13px;
    background-image:url(images/fondodelfondo.png);
    }
    
    #wrapper{
    margin: 0px;
    padding: 0px;
    background-image:url(images/fondo.png);
    background-repeat:repeat-y;
    background-position:center;
    width: 950px;
    height:auto;
    margin-bottom:20px;
    }
    
    #header{
    padding: 0px;
    background-image:url(images/bgrnd2.png);
    background-repeat:no-repeat;
    width:950px;
    height:694px;
    } 
    
    #content{
    padding:20px;
    margin-top:-400px;
    margin-left:100px;
    background-image:none;
    width:720px;
    height:auto;
    text-align:left;
    overflow:auto;
    }
    
    #footer{
    width:950px;
    height:57px;
    background-image:url(images/footer.png);
    background-repeat:no-repeat;
    line-height:30px;
    }
    
    /*Navigtion*/
    
    .cajon {
    position:absolute;
    width:123px;
    top:215px;
    margin-left:305px;
    height:82px;
    background: url(images/nav/cajon1.png) 0 0 no-repeat;
    cursor:pointer;
    }
    
    .cajon:hover {
    background-position: -123px 0;
    }
    
    .cajon2 {
    position:absolute;
    width:123px;
    top:202px;
    margin-left:440px;
    height:82px;
    background: url(images/nav/cajon2.png) 0 0 no-repeat;
    cursor:pointer;
    }
    
    .cajon2:hover {
    background-position: -123px 0;
    }
    
    .cajon3 {
    position:absolute;
    width:123px;
    top:208px;
    margin-left:570px;
    height:82px;
    background: url(images/nav/cajon3.png) 0 0 no-repeat;
    cursor:pointer;
    }
    
    .cajon3:hover {
    background-position: -123px 0;
    }
    
    .cajon4 {
    position:absolute;
    width:123px;
    top:212px;
    margin-left:700px;
    height:82px;
    background: url(images/nav/cajon4.png) 0 0 no-repeat;
    cursor:pointer;
    }
    
    .cajon4:hover {
    background-position: -123px 0;
    }
    I'd really really appreciate any help!

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Hi,

    you want to make a list of the links and use the images as their backgrounds. You might get away with using the same image over and over, so that the class for each list item would be the same.

    Code:
    <div id="wrapper">
     <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="home.html">Home</a></li>
      <li><a href="home.html">Home</a></li>
      <li><a href="home.html">Home</a></li>
     </ul>
    
     <div id="header"></div>
    Then your css could be a bit like this.. (I am tired at 4.30am so this might be wrong).

    Code:
    #wrapper ul {
    display:inline;
    line-height : 25px;
    }
    
    #wrapper ul li {
    attributes :  here
    }
    
    #wrapper a:link, #wrapper a:visited, #wrapper a:hover, #wraper a:active {
    background-image : url(/images/nav/cajon1.png); /* maybe all four images were the same so you can use the same one over and over.*/
    font-size : 1em; /*relative to the 13px set in your body*/
    color : #ccc; /*base color for links*/
    }
    
    #wrapper a:hover {
    color : #ffff80; /* the colour when you hover over the link */
    }
    hth

    bazz
    Last edited by bazz; 07-17-2008 at 05:41 AM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

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