safari/myspace issue

Discussion in 'Web Design and Development' started by melissarae, May 2, 2008.

  1. melissarae macrumors regular

    melissarae

    Joined:
    May 2, 2008
    Location:
    tampa, florida
    #1
    i code/design myspace layouts. i just recently switched from pc to mac. in safari i cannot view the extended network banners on the myspace pages that use the layouts i code/design. they can be seen in firefox, just not in safari. is there a plug in that i need to install or am i coding it wrong?

    it's bugging me that i can't figure this out... i hope someone here an help me out ;o)

    thanks, mr
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Should we guess at the page you're talking about? Maybe you can provide some code. It won't be a plug-in issue.
     
  3. melissarae thread starter macrumors regular

    melissarae

    Joined:
    May 2, 2008
    Location:
    tampa, florida
    #3
    <style type="text/css">
    table table table td {vertical-align:top

    !important;}
    span.blacktext12 {visibility:visible !important;
    background-color:ff00c0;
    background-image:url(http://i32.tinypic.com/23sfbpt.png);
    background-repeat:no-repeat;
    background-position:center center;
    font-size:0px; letter-spacing:-0.5px; width:400px;

    height:300px; !important;}
    span.blacktext12 img {display:none;}
    </style>
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    You have an extra semicolon on the height property after the 300px. That could be causing a cascade effect for Safari. Nothing else stands out as being an issue.
     
  5. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #5
    Code:
    span.blacktext12 {
    	background-color: #ff00c0;
    }
    
    The other issue is the background colour should have a # in front to indicate it is a hex value.

    As a hint: CSSEdit is an excellent debugging tool, you can click on each element as see which styles apply to it. The preview update as you type as well.
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    For MySpace designing since it's done through the profile you can't use the # for colors, which is why they are missing. That's actually correct. sigh...
     
  7. melissarae thread starter macrumors regular

    melissarae

    Joined:
    May 2, 2008
    Location:
    tampa, florida
    #7
    hmm... thanks guys! i'll have to check if that extra semicolon thing is the issue. i'll get back to you in a second...
     
  8. melissarae thread starter macrumors regular

    melissarae

    Joined:
    May 2, 2008
    Location:
    tampa, florida
    #8
    ok no i still can't see the extended network banner. any other ideas what it could be?
     
  9. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #9
    Would you mind pasting in all the relevant HTML and CSS, or providing a link where they can be accessed.

    All your myspace pages are private, so I can't access them.
     
  10. melissarae thread starter macrumors regular

    melissarae

    Joined:
    May 2, 2008
    Location:
    tampa, florida
    #10
    here is the whole layout code:

    <style type="text/css">
    table table table td {vertical-align:top !important;}
    span.blacktext12 {visibility:visible !important;
    background-color:ff00c0;
    background-image:url(http://i32.tinypic.com/23sfbpt.png);
    background-repeat:no-repeat;
    background-position:center center;
    font-size:0px; letter-spacing:-0.5px; width:400px; height:300px}
    span.blacktext12 img {display:none;}
    </style>

    <style type="text/css">
    table, td
    {background-color:transparent;
    border:none;
    border-width:0;}

    table table table
    {border: 1px solid;
    border-color: ff00c0;
    padding:0;
    background-color:ffffff;}


    table tbody td table tbody tr td.text table
    {background-color:ffffff;}

    table table
    {border:0px;}

    table table table table
    {border:0px;}

    body
    {background-color:ffffff;
    background-image:url(http://i26.tinypic.com/2ytuvk0.png);
    background-attachment: fixed;
    background-position:bottom left;
    background-repeat:repeat;}

    font, td, a body, table, body, td, li, p, div, li,

    p, br,
    {font-family:century gothic;
    font-size:12px;
    text-transform:none;
    line-height:14px;
    text-decoration:none;
    font-weight:normal;
    color:ff00c0;
    letter-spacing:1px;}

    .blacktext12
    {font-family:century gothic;
    font-size:12px;
    text-transform:none;
    line-height:14px;
    text-decoration:none;
    font-weight:normal;
    text-align:center center;
    color:ff00c0;
    padding-left:0;}

    .blacktext10
    {font-family:century gothic;
    font-size:12px;
    text-transform:none;
    line-height:14px;
    text-decoration:none;
    font-weight:normal;
    color:ffffff;
    background-color:ff00c0;
    border:1px solid;
    border-color:ffffff;
    padding-left:4px;
    display:block;}

    .lightbluetext8
    {font-family:century gothic;
    font-size:12px;
    text-transform:none;
    line-height:14px;
    text-decoration:none;
    font-weight:normal;
    color:ffffff;
    background-color:ff00c0;
    border:1px solid;
    border-color:ffffff;
    padding-left:4px;
    display:block;}

    .fff
    {font-family:century gothic;
    font-size:12px;
    text-transform:none;
    line-height:14px;
    text-decoration:none;
    font-weight:normal;
    color:ffffff;
    background-color:ff00c0;
    border:1px solid;
    border-color:ffffff;
    padding-left:0px;
    width:300px;}

    .whitetext12
    {font-family:century gothic;
    font-size:12px;
    text-transform:none;
    line-height:14px;
    text-decoration:none;
    font-weight:normal;
    color:ff00c0;}

    .redtext
    {font-family:century gothic;
    font-size:12px;
    text-transform:none;
    line-height:14px;
    text-decoration:none;
    font-weight:normal;
    color:ff00c0;}

    .text
    {font-family:century gothic;
    font-size:12px;
    text-transform:none;
    line-height:14px;
    text-decoration:none;
    font-weight:normal;
    color:ff00c0;
    letter-spacing:0px;}

    .btext
    {font-family:century gothic;
    font-size:12px;
    text-transform:none;
    line-height:14px;
    text-decoration:none;
    font-weight:normal;
    color:ff00c0;
    letter-spacing:0px;}

    a:link, a.man:link, a.text:link, a:visited,

    a.man:visited,
    a.text:visited, a:active
    {font-family:century gothic;
    font-size:12px;
    text-transform:none;
    line-height:14px;
    text-decoration:none;
    font-weight:normal;
    color:ff00c0;
    letter-spacing:0px;}

    a:hover, a.man:hover, a.text:hover
    {font-family:century gothic;
    font-size:14px;
    text-transform:none;
    line-height:16px;
    border-bottom:0px dashed;
    border-color:none;
    text-decoration:none;
    font-weight:normal;
    color:3856ef;
    background-color:transparent;
    letter-spacing:0px;}

    a.redlink:active, a.redlink:visited, a.redlink:link
    {font-family:century gothic;
    font-size:10px;
    text-transform:none;
    line-height:15px;
    border-bottom:0px dashed;
    border-color:none;
    text-decoration:none;
    font-weight:normal;
    color:ff00c0;
    background-color:transparent;
    width:300px;
    letter-spacing:0px;}

    a.redlink:hover
    {font-family:century gothic;
    font-size:10px;
    text-transform:none;
    line-height:15px;
    border-bottom:0px dashed;
    border-color:none;
    text-decoration:none;
    font-weight:normal;
    color:333333;
    background-color:ff00c0;
    width:300px;
    letter-spacing:0px;}

    a.navbar:link, a.navbar:visited, a.navbar:active
    {font-family:century gothic;
    font-size:9px;
    text-transform:none;
    line-height:16px;
    text-decoration:none;
    font-weight:normal;
    color:ff00c0;
    letter-spacing:0px;}

    a.navbar:hover
    {font-family:century gothic;
    font-size:9px;
    text-transform:none;
    line-height:16px;
    text-decoration:none;
    font-weight:normal;
    color:ffffff;
    background-color:ff00c0;
    border:1px solid;
    border-color:ff00c0;
    letter-spacing:0px;}

    textarea, input
    {font-family:century gothic;
    font-size:12px;
    text-transform:none;
    line-height:14px;
    text-decoration:none;
    font-weight:normal;
    color:ff00c0;
    height: 10px;
    width: 90px;}

    .nametext
    {font-family:century gothic;
    font-size:30px;
    text-transform:uppercase;
    line-height:35px;
    text-decoration:none;
    font-weight:bold;
    color:ffffff;
    height: 40px;
    background-color:ff00c0;
    border-bottom:3px double;
    border-color:ffffff;
    width: 100%;
    text-align:center;}

    .orangetext15
    {font-family:century gothic;
    font-size:10px;
    text-transform:none;
    line-height:11px;
    text-decoration:none;
    font-weight:normal;
    color:ffffff;
    background-color:ff00c0;
    border:1px solid;
    border-color:ffffff;
    padding-top:-10px;
    padding-left:3px;
    width:100%;}

    td.text td.text .orangetext15,
    .whitetext12, .btext, .redbtext

    {display:none!important}

    b {color:3856ef; font-weight:normal;}
    u {text-decoration:underline; border-bottom:1px

    solid; border-color:3856ef;}

    img {filter:none; border:0px;}

    TD TD
    {text-align: center;}
    TD TD TD
    {text-align: left;}
    TD TD TD TD
    {border-top: 0px solid; width: 30%;

    text-align:left;}
    TD TD TD TD TD
    {border-top: 0px solid black; text-align:left;}
    TD TD TD TD TD TD
    {border: 0px solid;}

    TABLE, TD
    {padding: 0px; text-transform: none; width:400px;}
    TABLE TABLE
    {padding: 0px; text-transform: none;}
    TABLE TABLE TABLE
    {padding: 0px; text-transform: none; height: .01%;

    width: 100%;}
    TABLE TABLE TABLE TABLE
    {padding: 0px; text-transform: none;}
    TABLE TABLE TABLE TABLE TABLE
    {padding: 0px; text-transform: none;}
    TABLE TABLE TABLE TABLE TABLE TABLE
    {padding: 0px; text-transform: none;}


    </style>

    <style type="text/css">
    .contactTable
    {width:300px!important;
    height:152px!important;
    padding:0px!important;
    background-image:url("http://i25.tinypic.com/2z9l8x3.png");
    background-attachment:scroll;
    background-position:center center;
    background-repeat:no-repeat;}

    .contactTable table, table.contactTable td
    {padding:0px !important;
    border:0px;
    background-color:transparent !important;
    background-image:none;}

    .contactTable a img
    {visibility:hidden; border:0px!important;}
    .contactTable a {display:block; height:28px;

    width:115px;}
    .contactTable .text {font-size:1px!important;}
    .contactTable .text, .contactTable a, .contactTable
    </style>

    <style type="text/css">
    td.text td.text table table table td a img {width:100px;}
    td.text td.text table table table td div img {width:80px;}
    td.text td.text table table td img {width:260px; max-width:260px; width:auto;}
    td.text td.text table table td div img {width:80px;}
    * html td.text td.text table table td img {width:260px;}
    * html td.text td.text table table td a img {width:90px;}
    * html td.text td.text table table td div img {width:80px;}
    </style>
     
  11. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #11
    Please can you supply the HTML as well so we can see what styles apply to the “extended network banner”. There is no way to work that out just from CSS alone.

    There are many errors in that CSS you have posted, but many of them web browsers will be forgiving about and will either correct or ignore.

    Here is a list:
    [1] Negative padding values (you can have negative margins)
    [2] Filter is not a valid property according to the CSS spec
    [3] All hex colour values (e.g. ffffff) should have a hash (#) in front of them.
    [4] You cannot say border-colour: none; (you can say border: none; )

    I have attached a style sheet with all these corrections made, but it is unlikely to solve the network banner problem.
     

    Attached Files:

  12. melissarae thread starter macrumors regular

    melissarae

    Joined:
    May 2, 2008
    Location:
    tampa, florida
    #12
    like stated earlier this is for a myspace profile, so the # sign thing isn't needed.

    i've temporarily made my myspace profile public if you want to take a look at it and tell me if you can see it my extended network banner in safari or not.

    thanks for all your help!!
     
  13. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #13
    First, when posting that much code you should use the code tag (the # button on the toolbar) that way we don't have to scroll so far.

    Near the bottom of the code there is,
    Code:
    .contactTable .text, .contactTable a, .contactTable
    </style>
    and as you can see that line isn't complete, no {}'s. It may be causing some issues. Also, when using the font-family property you should separate fonts with a comma, or if they are suppose to be one, use quotes around them,

    Code:
    font-family:"century gothic";
    [U]or[/U]
    font-family:century, gothic;
    I don't have a lot of confidence that these fixes will fix your problem. What version of Safari are you using and is it on Mac or Windows? Also, the latest Safari (3.1.1) has a developer menu that can be turned on from the advanced tab on the preferences. It is pretty powerful and might be able to narrow the problem since you haven't given us a page to visit.
     
  14. melissarae thread starter macrumors regular

    melissarae

    Joined:
    May 2, 2008
    Location:
    tampa, florida
    #14
    sorry about not using that # button for posting that code. i'm a newbie ;o)

    i'm 99% sure i'm using 3.1.1 safari. i just got my iMac two days ago.

    www.myspace.com/matteberry is the profile with the extended network banner being used. i've fixed it sort of but now my image seems to be shifted to the left about 50px and there's a big white blank space. grrr this is so aggrevating!

    thanks you guys for helping me out ;o)
     
  15. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #15
    It still says private and I don't know what an extended network banner is, but I would figure it out if I could see the page. You can just copy and paste the HTML code if you'd rather not make your profile public.

    Also you do need the hash (#) sign, MySpace profile or not, you can still follow the CSS spec.
     
  16. melissarae thread starter macrumors regular

    melissarae

    Joined:
    May 2, 2008
    Location:
    tampa, florida
    #16
    ok thanks guys for the help. i give up trying to figure it out. it's late and i'm tired :eek:(
     
  17. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #17
    No, like I said # will not work with MySpace, using it will cause it not to work. That's just the horrible way MySpace works. The profile is the matteberry link in her signature. The Extended Network picture in question seems to be the picture in the upper right region with the text "Any man can be a father" on it.

    I've been looking at the page, and for some reason that right column is using a 435px width rather than 400px. I've been messing with it with Firebug on Firefox, but even overriding the width attribute doesn't seem to want to fix it. MySpace pages are so jacked with all of those embedded tables it's nearly impossible to get things done in a straight forward manner.
     
  18. melissarae thread starter macrumors regular

    melissarae

    Joined:
    May 2, 2008
    Location:
    tampa, florida
    #18
    thanks angelwatt.... if you happen to figure anything out let me know. but for now i'm just going to try to get in contact with a few other layout sites that i know of and ask them if they have the same issues and what they do to get around it.

    thanks for all your help! you guys have a great forum here... i'm sure i'll be seeing you guys around ;o)

    thanks again, mr
     

Share This Page