VoyForums: Different Styles (the DIV STYLE Trick)

[ Show ]

Support VoyForums

[ Shrink ]

VoyForums Announcement: Programming and providing support for this service has been a labor of love since 1997. We are one of the few services online who values our users' privacy, and have never sold your information. We have even fought hard to defend your privacy in legal cases; however, we've done it with almost no financial support -- paying out of pocket to continue providing the service. Due to the issues imposed on us by advertisers, we also stopped hosting most ads on the forums many years ago. We hope you appreciate our efforts.

Show your support by donating any amount. (Note: We are still technically a for-profit company, so your contribution is not tax-deductible.) PayPal Acct: Feedback:

Donate to VoyForums (PayPal):

This page shows how to mix incompatible methods.
when you're learning HTML & CSS, you've probably searched for various codes
(visiting Internet Forums & Websites).
But, much to your dismay, the codes which you're given often don't work.
For example, you begin with a simple old code, such as <Table border=0 bgcolor="#FDF5E6" > ...etc.

....or, something that looks like this:

examples of standard HTML: ------------------------- <table border="1" name="" width="50%" cellpadding="1" cellspacing="0" BORDERCOLOR=RED> <tr align="" valign=""> <td colspan="1" rowspan="1" CELLPADDING="1" CELLSPACING="3" BORDERCOLOR="#00ff00" width="50%" align="center" valign="top"> <TR> <TD>Row #1</TD> <TD>Row #2</TD> </TR> </table> <iframe frameborder="0" width="698" height="503" scrolling="no" id="videoplayer" title=”watch videos online” src="http://www.youtube.com/" ></iframe> ... target="_blank" ... title=" " ... title="outer text here" ... etc.

So, a few years afterward......
you're trying to enhance your old page with updated CSS features.
The latest CSS Codes are then obtained from the most reputable websites.
But, when you try implementing them, it just doesn't work.

Perhaps... A great site, such as Stackoverflow, or W3schools offers promising CSS codes.
for example:
{font-size: medium; color: #3E3E54; text-align:center;
border:2px solid #E6E6FA; padding: 8px; border-spacing: 12px; border-radius:5px;}
etc, etc, etc.

You get very excited! ....expecting to see wonderful new effects on your webpage.
But instead, nothing works!
Unfortunately, these codes produce no noticeable changes whatsoever.

Here's a little trick which may solve this problem:

Whenever using older HTML code,
---(example: <Table border=0 bgcolor="white")
and, you're trying to use newer HTML or CSS,
.....such as...
border:2px solid #E6E6FA; padding: 12px; border-spacing: 12px; border-radius:40px; color:#282828; text-align: center;
let's try using The DIV STYLE Trick which may allow you to mix incompatible styles:
Simply try adding style= and then, the new code within " ".
(Thus allowing you to mix older material with upgrades within the same continuing sentence).

(older material which used = signs and "parenthesis"), along with newer code which now uses : hyphens and ; semicolons.
here's an example:
<Table border=0 bgcolor="#FDF5E6" style="border:2px solid #E6E6FA; padding: 2px; border-spacing: 2px; border-radius:23px; color:#282828; text-align: center;"> <td> try me </td> </table>

Notice how style="additional code using : and ;" was added after bgcolor="#FDF5E6"
Different methods are being used within the same code:
bgcolor="#FDF5E6" style="border:2px solid #E6E6FA; ...etc."
(Also: notice how it starts with bgcolor="xxxxxx" THEN suddenly changes to STYLE=" )
and, of course; all codes after STYLE= are enclosed between " ")

here are a few examples where I'm mixing old tables with newer-style code:

Joy To The World Joy To The earth Joy To The planet

LINKS HERE 1 LINKS HERE 2 LINKS HERE 3

List #1 List #2 List #3 List #4 List #5

LINKS HERE 1 LINKS HERE 2 LINKS HERE 3 LINKS HERE 4 LINKS HERE 5

Joy To The World	Joy To The earth	Joy To The planet
LINKS HERE 1	LINKS HERE 2	LINKS HERE 3

List #1	List #2	List #3	List #4	List #5
LINKS HERE 1	LINKS HERE 2	LINKS HERE 3	LINKS HERE 4	LINKS HERE 5

This example shows how CSS is being implemented into the existing HTML code.

notice the change from TABLE to STYLE
                     ----------------------------------
                                     STYLE="..............
                                           
<Table border=0  bgcolor="#FDF5E6"   style="border:2px solid #B8BECC; padding: 12px;  border-spacing: 12px;  border-radius:40px;  color:#282828; text-align: center;"> 
<tr>
<th> Joy To The World </th>
<th> Joy To The earth </th>
<th> Joy To The planet </th>
</tr>

<tr>
<td>LINKS HERE 1</td>
<td>LINKS HERE 2</td>
<td>LINKS HERE 3</td>
</tr>

</table>
<br>

<tr>
<td>LINKS HERE 1</td>
<td>LINKS HERE 2</td>
<td>LINKS HERE 3</td>
<td>LINKS HERE 4</td>
<td>LINKS HERE 5</td>
</tr>

</table><br>

Best of all: We can just keep adding more codes whenever desired.

style="border:2px solid #E6E6FA; padding: 12px; border-spacing: 12px; border-radius:25px; color:#282828; text-align: center;"
...and, just keep going...

....(although, many added affects can either be trivial or negative. So, choose wisely).

THE DIV STYLE TRICK can even be used with obsolete HTML features.
Let's try it with FONTS:

TitleA TitleB TitleC TitleD (with large text-font-size: 137%;) TitleE (with large text)

<font color="green" style="border:2px solid blue;" >TitleA</font> <font color="black" style="border:2px solid blue; padding: 3px; background-color:#cccccc;" >TitleB</font> <font color="red" style="border:2px solid #E6E6FA; padding: 12px; border-radius:25px; background-color:#eaeaea;" >TitleC</font> <font color="red" style="border:2px solid #E6E6FA; padding: 12px; border-radius:25px; background-color:#eaeaea; font-size: 137%;" >TitleD (with large text-font-size: 137%;)</font> <font color="#000000" style="border:2px solid brown; padding: 12px; font-size: 157%;" >TitleE (with large text)</font>

Row 1A Row 1B Row 1C

Row 2A Row 2B Row 2C

Row 3A Row 3B Row 3C

<table border="1" name="" width="74%" cellpadding="5" cellspacing="0" > <tr align="" valign="" style="background-color:green;"> <td>Row 1A</td> <td>Row 1B</td> <td>Row 1C</td> </tr> <tr align="" valign="" style="background-color:gold; font-weight:bold;"> <td>Row 2A</td> <td>Row 2B</td> <td>Row 2C</td> </tr> <tr align="" valign="" style="background-color:#cccccc; color:blue; text-align:center;"> <td>Row 3A </td> <td>Row 3B </td> <td>Row 3C </td> </td> </tr> </table> <br>

Row 1A-- Row 1B-- Row 1C--

Row 2A-- Row 2B-- Row 2C--

Row 3A --the end Row 3B --the end Row 3C --the end

<table border="1" style="border-radius:10px; border:3px dotted yellow;"> <tr> <td>Row 1A--</td> <td>Row 1B--</td> <td>Row 1C--</td> </tr> <tr> <td>Row 2A--</td> <td>Row 2B--</td> <td>Row 2C--</td> </tr> <tr> <td>Row 3A --the end</td> <td>Row 3B --the end</td> <td>Row 3C --the end</td> </tr> </table> <br>

for office use only
this was an experimental project, since completed on voy/230247

List #1 List #2 List #3 List #4 List #5

editors note only:
this is an old-style example of Tables.

Row #1 Row #2

and, here's a few examples of trivial CSS:
border-left: solid; border-right: blank; border-width: medium; border: dotted 20px black; border: double 20px black;

Row 1A--	Row 1B--	Row 1C--
Row 2A--	Row 2B--	Row 2C--
Row 3A --the end	Row 3B --the end	Row 3C --the end