Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS my logo will not render propeerly in ff or safari

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #188447
    Baerspective
    Participant
    div#logo { /*round frame of logo*/    
        -moz-border-radius:200px;
        -webkit-border-radius:200px;
        border-radius:200px; 
        border:#195335 5px solid;
        background:#C8C3BD;
        position:relative;
        z-index:2;
        top: -9.5em;
        left: 5em;
        height:150px;
        width:150px;    
        -o-box-shadow: -8px 8px 8px -6px #333;  
        -moz-box-shadow: -8px 8px 8px -6px #333;    
        -webkit-box-shadow: -8px 8px 8px -6px #333; 
        box-shadow: -8px 8px 8px -6px #333; 
    }
    
    #square {/*logo*/
        border: rgba(25, 83, 53, .3) 2px solid;
        background:rgba(25, 83, 53, 1);
        background: #white;
        width:100px;
        height:100px;   
        position:relative;
        z-index: 3;
        left: 1.6em;
        top: 1.6em;
        
    }
    
    #triangle1 {/*outer*/
        width: 0;
        height:0;
        border-style: inset solid;
        border-width: 0 48px 100px 48px;
        border-color: transparent transparent #green transparent;
        left: 1.9em;
        top: -4.7em;
        position: relative;
        z-index: 4;
        -webkit-transform:rotate(360deg);
    }
    
    #triangle2 {/*inner*/
        width: 0;
        height:0;
        border-style: inset solid;
        border-width: 25px 0 25px 50px;
        border-color: transparent transparent transparent #white;
        left: 3.8em;
        top: -8em;
        position: relative;
        z-index: 5;
        -webkit-transform:rotate(360deg);
    }

    in dreamweaver it looks correct :

    green circle with a grey/beige background
    a white square/block
    inside it a large green triangle
    inside that large triangle a white triangle

    dont know how to post screen shot.

    hope this helps

    could someone help me please? thanks

    #188451
    Paulie_D
    Member

    Seriously…just use an image…you’re putting a lot of effort into unsemantic divs just to make a logo.

    Or use an SVG.

    As for screenshots…they have to be hosted online…I use Photobucket but there are other services.

    #188453
    Paulie_D
    Member

    Also, you are better off using just position relative on the parent and everything else should be positioned absolutely within that.

    #188455
    Chris Bloomfield
    Participant

    I can tell you that you’ve got a few issues with your code:

    border-color: transparent transparent #green transparent;
    border-color: transparent transparent transparent #white;

    Just remove the hashes before the colour names.

    Also, your last block of CSS uses this:

    -webkit-transform:rotate(360deg);

    You’ve used other vendor prefixes elsewhere, but you’re only targeting webkit browsers with this code.

    #188456
    Paulie_D
    Member

    A little bit more like this

    http://codepen.io/Paulie-D/pen/QwWJze

    Also…named colors like white and green don’t start with #

    #188457
    Baerspective
    Participant

    Chris, thanks, you rock. i forgot to pull the # before the color names as these were only temporary for me to see what i’m doing….thanks a bunch.
    i removed the vendor specific prefix and will have a look if that will be an issue.

    #188458
    Baerspective
    Participant

    Paulie thanks. i spaced the # tags out. the color names were only a temporary thing so i could better see what im doing. thanks for your input. always greatly appreciated.
    ps: i wasnt sure if i should make a gif or code the logo. ill try a gif or img next

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.