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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    My borders are wonky in IE

    I haven't touched my website in ages, but when I came to expand it recently I found the borders display wrongly in IE. Funny, I swear that when I first made the site I checked that it displayed correctly in IE and FF, but I must've tweaked/untweaked something along the way and now I don't have a clue what's wrong. I'm really out of practice on my CSS. Here it is:

    www.sanguineplanet.com

    I'll probably be getting rid of the redundant bottom border. Maybe its better to make the background/border one big image?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Dashwood - Merry Christmas!

    In IE6 and IE7 the sundial breaks out of the borders.
    In FF2 it all looks good.

    This might fix it for you:
    Code:
    #mainbit {
    padding: 0px 20px 45px 0px;
    border:6px double #9A816D;
    border-top: none;
    width: 790px; 
    height: 499px; 
    background: black;
    overflow: hidden;
    }
    ====================================
    Or you could just make the image a background for #mainbit.
    Take image out of markup like this:
    Code:
    <div class="maintext" id="mainbit">
    <!--removed sundial-->
    <img alt="" src="logo.jpg" id="logo" height="110" width="324">
    <div id="sakura"><a href="sakura.html"><img alt="" src="tnsaks.jpg" border="0" height="52" width="69"></a></div>
    Then make your CSS look like this:
    Code:
    #mainbit {
    padding: 0px 20px 45px 0px;
    border:6px double #9A816D;
    border-top: none;
    width: 790px; 
    height: 499px; 
    background: #000 url(http://www.sanguineplanet.com/dial777.jpg) no-repeat right bottom;
    }
    
    
    
    /*#dial {position: absolute; left: 535px; top: 30px; z-index: 2;} this line can be deleted now*/
    I used the full path to the image because that's easier on this end. You can edit that to (dial777.jpg) and it will work fine.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I used the second one and it works a treat. Many thanks to you!


  •  

    Posting Permissions

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