Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

safari/myspace issue

melissarae

melissarae

macrumors regular
Original poster
May 2, 2008
245
0
tampa, florida
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
 
angelwatt

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
9
USA
Should we guess at the page you're talking about? Maybe you can provide some code. It won't be a plug-in issue.
 
melissarae

melissarae

macrumors regular
Original poster
May 2, 2008
245
0
tampa, florida
<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>
 
angelwatt

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
9
USA
melissarae said:
<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>
Click to expand...

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.
 
elppa

elppa

macrumors 68040
Nov 26, 2003
3,233
151
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.
 
angelwatt

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
9
USA
elppa said:
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.
Click to expand...

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...
 
melissarae

melissarae

macrumors regular
Original poster
May 2, 2008
245
0
tampa, florida
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...
 
elppa

elppa

macrumors 68040
Nov 26, 2003
3,233
151
melissarae said:
ok no i still can't see the extended network banner. any other ideas what it could be?
Click to expand...

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.
 
melissarae

melissarae

macrumors regular
Original poster
May 2, 2008
245
0
tampa, florida
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>
 
elppa

elppa

macrumors 68040
Nov 26, 2003
3,233
151
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.
 

Attachments

  • cleanedup.txt
    7.2 KB · Views: 74
melissarae

melissarae

macrumors regular
Original poster
May 2, 2008
245
0
tampa, florida
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!!
 
angelwatt

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
9
USA
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.
 
melissarae

melissarae

macrumors regular
Original poster
May 2, 2008
245
0
tampa, florida
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.

http://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)
 
elppa

elppa

macrumors 68040
Nov 26, 2003
3,233
151
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.
 
angelwatt

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
9
USA
elppa said:
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.
Click to expand...

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.
 
melissarae

melissarae

macrumors regular
Original poster
May 2, 2008
245
0
tampa, florida
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
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom