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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Vermont
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Resolved - Absolute Position IE 8 off

    Hello,

    Bear with me as this is my first site that I've gone into the code on a site builder (like Weebly, which I'm using now) and changed more than the font colors.

    My problem is with the circle buttons on the home page of this site: flipsweb.weebly.com

    Looks like I want it to in Firefox, Safari, and Opera. IE 8 is another story. All of the buttons are about 20 pixels too far to the right on IE 8. Also, the logo on the top has a blue border around it .. no idea where that came from.

    Any ideas? Or - is there a way I can create the same kind of circular menu that would be a bit more stable (the original was in Flash, but I don't have that so I rebuilt the images and am trying just CSS).

    This is on Weebly. THANKS!!!

    CSS (most relevant code is at the bottom)

    [CODE]

    *|* {
    margin:0pt;
    padding:0pt;
    }

    body {
    font-size:11px;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    color:#003366;
    }

    p {
    font-size:1.15em;
    }

    h1 {
    font-size:2em;
    font-weight:bold;
    }

    h2 {
    font-size:1.875em;
    font-weight:bold;
    }

    #wrapper {
    width: 960px;
    background-color:#FFFFFF;
    margin-top: 10px;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    }

    #header {
    padding: 5px;
    margin: 0px;
    text-align: center;
    }

    #navigation {
    width: 960px;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    }


    #navigation ul {
    font-size:1.25em;
    display:block;
    list-style-type:none;
    margin:0;
    padding:8px 15px;
    padding-top:6px;
    padding-bottom:6px;
    }

    #navigation li {
    display:inline;
    text-align:center;
    border-left:1px solid #fff;
    }

    #navigation a:link, a:visited {
    font-weight:bold;
    color:#FFFFFF;
    background-color:#003366;
    text-align:center;
    padding:6px;
    text-decoration:none;
    }

    #navigation a:hover, a:active {
    background-color:#cc6600;
    }

    #content {
    width: 900px;
    min-height: 500px;
    _height: 500px;
    padding: 19px 30px 25px 30px;
    }

    #content a:link {
    color:#cc6600;
    text-decoration: none}

    #content a:visited {
    color:#cc6600;
    text-decoration: none}

    #content a:active {
    text-decoration: none}

    #content a:hover {
    text-decoration: underline;
    color:#cc6600;
    }

    #quotebox {
    margin:0;
    padding:10px;
    border:4px solid #E8ECF1;
    /*background: url(images/startquote.gif) no-repeat;*/
    }

    .quote {
    font: bold 11px Verdana,Arial,Helvetica,sans-serif;
    color:#003366;
    margin:10px 20px 10px 20px;
    }

    .quote .emp {
    font: bold italic 11px Verdana,Arial,Helvetica,sans-serif;
    }

    #footer{
    width: 960px;
    padding: 36px 0px 20px 0px;
    text-align: right;
    color: #666666;
    font-size: 12px;
    }

    #footer a{
    color: #ff6633;
    text-decoration: none;
    }

    #footer .weebly-footer a{
    color: #666666;
    }

    #circle {
    height: 500px;
    background-image:url('homecircle.gif');
    background-repeat:no-repeat;
    background-position: center;
    }

    #buttons {position:relative;}
    #buttons li {margin:0;padding:0;list-style:none;position:absolute;}
    #buttons li, #buttons a{height:97px;display:block;}

    #buttonscompany{position:absolute;top:0px;left:305px;width:97px;}
    #buttonscompany{background:url('icons.gif') 0 0;}
    #buttonscompany a:hover{background: url('icons.gif') 0 -97px;}

    #buttonsprocess{position:absolute;top:0px;left:545px;width:97px;}
    #buttonsprocess{background:url('icons.gif') -97px 0;}
    #buttonsprocess a:hover{background: url('icons.gif') -97px -97px;}

    #buttonsvalues{position:absolute;top:150px;left:210px;width:97px;}
    #buttonsvalues{background:url('icons.gif') -194px 0;}
    #buttonsvalues a:hover{background: url('icons.gif') -194px -97px;}

    #buttonsclients{position:absolute;top:150px;left:650px;width:97px;}
    #buttonsclients{background:url('icons.gif') 291px 0;}
    #buttonsclients a:hover{background: url('icons.gif') 291px -97px;}

    #buttonsresults{position:absolute;top:350px;left:250px;width:97px;}
    #buttonsresults{background:url('icons.gif') -388px 0;}
    #buttonsresults a:hover{background: url('icons.gif') -388px -97px;}

    #buttonsresources{position:absolute;top:350px;left:600px;width:97px;}
    #buttonsresources{background:url('icons.gif') -485px 0;}
    #buttonsresources a:hover{background: url('icons.gif') -485px -97px;}
    [CODE]

    and the HTML

    [CODE]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
    <title>{title}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    <div id="wrapper">
    <div id="header">
    <a href="http://www.businesscultureconsultants.com">
    <img src="/files/theme/masthead.gif" alt="Business Culture Consultants logo" align="center"></a></div>
    <div id="sitename">{title}</div>
    <div id="circle">
    <ul id="buttons">
    <li id="buttonscompany"><a href="http://flipsweb.weebly.com/company.html"></a></li>
    <li id="buttonsprocess"><a href="process.html"></a></li>
    <li id="buttonsvalues"><a href="values.html"></a></li>
    <li id="buttonsclients"><a href="clients.html"></a></li>
    <li id="buttonsresults"><a href="results.html"></a></li>
    <li id="buttonsresources"><a href="resources.html"></a></li>
    </ul>
    </div>

    <div id="content">{content}</div>
    <div id="footer">{footer}</div>
    </div>

    <div style='display:none;'>{menu}</div>
    </body>
    </html>
    [CODE]
    Last edited by orangesoup; 09-06-2011 at 10:45 PM.

  • #2
    New Coder
    Join Date
    Aug 2011
    Posts
    23
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I think you can get rid of the border explicitly and it should clear the problem in IE8:
    Code:
    img {border:0px;}
    Specify a Class or Id if you have other images that need borders.

    I think the spacing issue is a padding issue with IE rendering it differently.. Not sure if you want to use an ie workaround to fix this.. not sure if there are proper ways to handle this

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    It's because of the default margin that IE applies to a ul element - other browsers use padding. Try adding:

    Code:
    #buttons {
        position: relative;
        margin:0
    }
    PS: It helps if you wrap your code in # tags when posting.

  • #4
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Vermont
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you coding geniuses! Both little lines of code fixed the problem.



  •  

    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
    •