Overpowering HTML Codes

[Destroyer2000]

Can certain HTML codes be more powerful than others? Say, take Myspace for example. i've noticed that if you have a code for a bcakground or something, if you try to enter in something basic, like chainging the font face, nothing will happen, as apparently the background coding is more complex, and therefore, more powerful. I'm uncertain of this...is there anyway to stop it, and to change something such as that despite the background code being there?

[Debitt]

I'd offer some help, but I'm not quite sure what you're trying to do -- simply change the font of the text while having a custom background coded at the same time? Shouldn't be a problem, I would imagine. =/ Would you happen to have code that someone could take a look at? Or a pictoral example?

(maybe it's just because I'm up late, though...>.>; )

[Mithrandir]

It sounds like you describing, essentially, CSS. Cascading Style Sheets. The whole point is that the 'highest' level should override the lower ones. Can you post the code you are looking at? Background stuff shouldn't overpower something in the foreground.

Perhaps you are trying to use a font that your users might not have? (I can't really troubleshoot without seeing the code).

[Destroyer2000]

Okay, this is the main code that seems to be the highest level:

<coolchaser embed code: do not remove modify this line or below layout=360721>



<a href="http://www.msplinks.com/MDFodHRwOi8vY29vbGNoYXNlci5jb20=" .."Get your layout at CoolChaser.com">Layout by: <img src="http://www.coolchaser.com/images/favicon.gif" border=0 style="vertical-align:text-bottom;" alt="CoolChaser.com"></a>
<div class='cool'>
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmNvb2xjaGFzZXIuY29t" ..'CoolChaser'>
<img src="http://www.coolchaser.com/images/banner_xray.gif" alt="CoolChaser">
</a>
</div>
<style>
body {font-size: 1px; line-height: 1px; font-family: Verdana, Arial, sans-serif, Book Antiqua;
background-color:666666;
background-image:url('http://www.coolchaser.com/background/view/80980');
background-attachment: fixed;
background-position:center center;
background-repeat:no-repeat;
margin-top:10px;
}

.cool {
position:absolute;
left:0px;
top:0px;
width:156px;
height:154px;
z-index:9;
}

p {margin: 0px 0px 1em 0px; font-family: Verdana, sans-serif !important}

a, a:link, a:visited {color:F35485; text-decoration: none;}

a:hover {color:76996E; text-decoration: none}

img {border: none}

* html table table table br { line-height:0; }

form {border-width:0px;background-color:none;}

input {background-color:transparent !important}

body>div {margin-left: 10px;}

table, tr, td, table table, table table td {border-width:0px; background-color: transparent;}

table table table td {background-color:transparent;margin:0px;padding: 0; vertical-align:top ! important;}
* html table table table td {padding: 0 26px 15px 26px;}

table table table table {border-width:0px;background-color:transparent;padding:0px;margin:0px; background-image: none;}
table table table table table { border-color:ffffff;}
table table table table td {padding:3px 0;margin:0px; }

table table table {
margin:0;
max-width: 423px;
width: 100% !important;
padding:0 21px 20px 21px;
}

* html table table table { padding:0;}

.NOTES { content:'make font smaller for friends comments box';}

table table table table table a { font-size:9px !important;}

body td table, body div table {margin-top: 0;}

font {font-size:10px}

table tr td table tr td font {display: inline;}

table tr td table a.navbar {font-size: 10px;}

.contactTable {width: auto !important;}

* html .contactTable {width: 332px !important;}

.contactTable td {padding: 0px; margin: 0px; text-align: center;}

.contactTable span.whitetext12 { left: 0;}
* html .contactTable .whitetext12 {margin-left: 25px;}

.contactTable td table {
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
}

.contactTable a {padding: 0px; margin: 0px 0px 1px 5px; display: block; height: 30px; width: 136px; background-color: transparent;}

.contactTable a img, .contactTable img {border: 0px; display: none; visibility: hidden;}


.nametext, .whitetext12, .orangetext15, .btext {
margin: 14px 0px 4px 0px;
width:auto;
display: block;
}

* html .nametext, * html .whitetext12 { width:278px; }

.orangetext15, .btext {
width:auto;
}

* html .orangetext15, * html .btext { width:373px;}

table tr td table tr td table tr td div strong {display: block; width: 270px;}

.whitetext12 { margin-top:0;}
.blacktext12 {
display: block;
margin-top:14px;
}

table table div { color:#000;}


.NOTES { content:"view all of your friend's link"; }

a.redlink:link {display: block; text-align: center; border-width: 3px 0px 0px 0px; padding-top: 3px;}



u {text-decoration: none; font-size: 10px;}

.redtext { font-weight:bold; color:ffffff;}
.NOTES { content:"firefox hack to make tables not to have a huge gap"; }
td.text {text-align:left;}


.r{}


table table table {
background-color:transparent;
}

.contactTable td table {
background-image: url('http://www.coolchaser.com/images/spicy_b_contact.gif');
}

.r{}

span.blacktext12 {
background-color: 000000;
width: 100%;
height: 15px;
display: block;
}



.r{}
body, table table tr td, table table div, li, p, .redtext, .blacktext10, .text, a.text:link, a.text:visited,
a.searchlinksmall, a.searchlinksmall:link, a.searchlinksmall:visited,
.lightbluetext8,a, a:link, a:visited, a.redlink:link, div, font, a.navbar:link, a.navbar:visited
{
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size:12px;
font-size:10px;
color:ffffff;
}


.r{}
.nametext, .whitetext12, .orangetext15, .btext, .redbtext, .blacktext12 {
color:ffffff;
font-size:10px;
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-weight:bold;
}



.nametext, .whitetext12, .orangetext15, .btext {
padding: 2px 2px 2px 4px;
text-align: left;
background-position:top left;
background-repeat:no-repeat;
background-color:000000;
color:ffffff;
font-size:10px;
}

.r{}

.lightbluetext8 { color:ffffff; background-color:333333; text-align:right; display:block; padding-right:5px; font-size:9px;}

.r{}
a, a:link, a:visited, a.redlink:link, a.redlink:visited {text-decoration: none; color:ffffff;}

a:hover, a.redlink:hover {color:ffffff; text-decoration: underline}

a.redlink:link {display: block; text-align: center; border-width: 3px 0px 0px 0px; padding-top: 3px;}



.r{}
div, font, a.navbar:link, a.navbar:visited, a.text:link, a.text:visited {color:ffffff}

a.navbar:hover, a.text:hover {color:cccccc}
</style>

</coolchaser>



And the code I want to use is basically this:
<p>
<font>
<font face="Book Antiqua">
(Whatever words I want changed)
</font>
</P>

The background image, the one with the really long code, seems to overpower any other changes.

[SnoringFrog]

To my knowledge, you can't just input the text you want changed how you're doing it and have it work like that.

However, what might be overriding the code you're using is this:

Code: Select all

p {margin: 0px 0px 1em 0px; font-family: Verdana, sans-serif !important}


In this sectino of the CSS, it's setting anythign contained with <P></P> tags to display as Verdana ((or sans-serif should the viewing computer not have Verdana)). So, if you place Book Antiqua in front of Verdana, serpeating them with a comma, it will make everything withinh the <P></P> tags display as Book Antiqua if it's available, or Verdana or sans-serif if the viewing computer does not have the Book Antiqua font.

Code: Select all

<coolchaser embed code: do not remove modify this line or below layout=360721>



<a href="http://www.msplinks.com/MDFodHRwOi8vY29vbGNoYXNlci5jb20=" .."Get your layout at CoolChaser.com">Layout by: <img src="http://www.coolchaser.com/images/favicon.gif" border=0 style="vertical-align:text-bottom;" alt="CoolChaser.com"></a>
<div class='cool'>
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmNvb2xjaGFzZXIuY29t" ..'CoolChaser'>
<img src="http://www.coolchaser.com/images/banner_xray.gif" alt="CoolChaser">
</a>
</div>
<style>
body {font-size: 1px; line-height: 1px; font-family: Verdana, Arial, sans-serif, Book Antiqua;
background-color:666666;
background-image:url('http://www.coolchaser.com/background/view/80980');
background-attachment: fixed;
background-position:center center;
background-repeat:no-repeat;
margin-top:10px;
}

.cool {
position:absolute;
left:0px;
top:0px;
width:156px;
height:154px;
z-index:9;
}

p {margin: 0px 0px 1em 0px; font-family: Book Antiqua, Verdana, sans-serif !important}

a, a:link, a:visited {color:F35485; text-decoration: none;}

a:hover {color:76996E; text-decoration: none}

img {border: none}

* html table table table br { line-height:0; }

form {border-width:0px;background-color:none;}

input {background-color:transparent !important}

body>div {margin-left: 10px;}

table, tr, td, table table, table table td {border-width:0px; background-color: transparent;}

table table table td {background-color:transparent;margin:0px;padding: 0; vertical-align:top ! important;}
* html table table table td {padding: 0 26px 15px 26px;}

table table table table {border-width:0px;background-color:transparent;padding:0px;margin:0px; background-image: none;}
table table table table table { border-color:ffffff;}
table table table table td {padding:3px 0;margin:0px; }

table table table {
margin:0;
max-width: 423px;
width: 100% !important;
padding:0 21px 20px 21px;
}

* html table table table { padding:0;}

.NOTES { content:'make font smaller for friends comments box';}

table table table table table a { font-size:9px !important;}

body td table, body div table {margin-top: 0;}

font {font-size:10px}

table tr td table tr td font {display: inline;}

table tr td table a.navbar {font-size: 10px;}

.contactTable {width: auto !important;}

* html .contactTable {width: 332px !important;}

.contactTable td {padding: 0px; margin: 0px; text-align: center;}

.contactTable span.whitetext12 { left: 0;}
* html .contactTable .whitetext12 {margin-left: 25px;}

.contactTable td table {
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
}

.contactTable a {padding: 0px; margin: 0px 0px 1px 5px; display: block; height: 30px; width: 136px; background-color: transparent;}

.contactTable a img, .contactTable img {border: 0px; display: none; visibility: hidden;}


.nametext, .whitetext12, .orangetext15, .btext {
margin: 14px 0px 4px 0px;
width:auto;
display: block;
}

* html .nametext, * html .whitetext12 { width:278px; }

.orangetext15, .btext {
width:auto;
}

* html .orangetext15, * html .btext { width:373px;}

table tr td table tr td table tr td div strong {display: block; width: 270px;}

.whitetext12 { margin-top:0;}
.blacktext12 {
display: block;
margin-top:14px;
}

table table div { color:#000;}


.NOTES { content:"view all of your friend's link"; }

a.redlink:link {display: block; text-align: center; border-width: 3px 0px 0px 0px; padding-top: 3px;}



u {text-decoration: none; font-size: 10px;}

.redtext { font-weight:bold; color:ffffff;}
.NOTES { content:"firefox hack to make tables not to have a huge gap"; }
td.text {text-align:left;}


.r{}


table table table {
background-color:transparent;
}

.contactTable td table {
background-image: url('http://www.coolchaser.com/images/spicy_b_contact.gif');
}

.r{}

span.blacktext12 {
background-color: 000000;
width: 100%;
height: 15px;
display: block;
}



.r{}
body, table table tr td, table table div, li, p, .redtext, .blacktext10, .text, a.text:link, a.text:visited,
a.searchlinksmall, a.searchlinksmall:link, a.searchlinksmall:visited,
.lightbluetext8,a, a:link, a:visited, a.redlink:link, div, font, a.navbar:link, a.navbar:visited
{
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size:12px;
font-size:10px;
color:ffffff;
}


.r{}
.nametext, .whitetext12, .orangetext15, .btext, .redbtext, .blacktext12 {
color:ffffff;
font-size:10px;
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-weight:bold;
}



.nametext, .whitetext12, .orangetext15, .btext {
padding: 2px 2px 2px 4px;
text-align: left;
background-position:top left;
background-repeat:no-repeat;
background-color:000000;
color:ffffff;
font-size:10px;
}

.r{}

.lightbluetext8 { color:ffffff; background-color:333333; text-align:right; display:block; padding-right:5px; font-size:9px;}

.r{}
a, a:link, a:visited, a.redlink:link, a.redlink:visited {text-decoration: none; color:ffffff;}

a:hover, a.redlink:hover {color:ffffff; text-decoration: underline}

a.redlink:link {display: block; text-align: center; border-width: 3px 0px 0px 0px; padding-top: 3px;}



.r{}
div, font, a.navbar:link, a.navbar:visited, a.text:link, a.text:visited {color:ffffff}

a.navbar:hover, a.text:hover {color:cccccc}
</style>

</coolchaser>


The above coding should make any text in <P> tags Book Antiqua, and any text not in <P> tags Verdana. Or, if you want to use the coding you showed us as the bottom of your post, just remove

Code: Select all

font-family: Verdana, sans-serif

from the coding I showed at the beginning of this post and it should work.