Dear All,
...still development.
The Page on IE, FireFox and Safari... looks ok to me.
Looking at the page with Opera .. messed ...
Anybody can see or have a guess what I did wrong...
Thanks a lot in advance. I am happy for ever comment - hint...
Page: www.MeetFilipinaGirls.com
Sloft.
This is my in dev CSS for it .......
/************************************************/
/* HTML tag styles */
/************************************************/
body {
font-family: "Trebuchet MS",Verdana,sans-serif;
font-size:10.4pt;
border: 1px solid;
border-color:#336699;
background-color: #fff8dc;
background-color: #ffffff;
margin:10px;
text-align:justify;
margin:0;
}
h3 {
border: 1px solid;
border-color: #8BCDF3 #3366FF #003366 #3366FF;
background-color:#42A3E0;
padding:.2em 1.5em;
-moz-border-radius: 4px;
color:#000000;
font-family:Arial;
margin:0px;
font-size:1.2em;
}
/* ----------------------- */
/* Banner (Page Header) */
/* ----------------------- */
#banner {
height:97px;
/*border-top: 1px solid #369;
border-left: 1px solid #369;
border-right: 1px solid #369; */
border-bottom: 1px solid white;
voice-family: "\"}\"";
voice-family: inherit;
height:97px;
}
html>body #banner {
height:97px;
}
/* ----------------------- */
/* top navigtion */
/* ----------------------- */
#topnavigtion {
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
height:24px;
/* fix for IE5 bug */
voice-family: "\"}\"";
voice-family: inherit;
height:24px;
}
/* be nice to Opera */
html>body #topnavigtion {
height:24px;
width:auto;
}
ul#navlist
{
margin: 0;
padding: 0;
list-style-type: none;
float: left;
margin:0px;
width: 100%;
background-color: #F1F1F1;
}
ul#navlist li { display: inline; }
ul#navlist li a
{
float: left;
color: #000000;
background-color: #F1F1F1;
padding: 0.2em 1em;
padding: 0.2em 1.3em;
text-decoration: none;
border-right: 1px solid #A9A9A9;
}
ul#navlist li a:hover
{
background-color: #CCCCCC;
color: #000000;
}
ul#navlist li b
{
float: right;
background-color: #F1F1F1;
padding: 0.4em 0.3em;
text-decoration: none;
}
/* ----------------------- */
/* icons */
/* ----------------------- */
.mfg_hd_right {
position:absolute;
right:11px;
/* height: 90px;*/
top:11px;
z-index:1;
border: 0;
}
.mfg_hd_right2 {
position:absolute;
right:111px;
/* height: 90px;*/
top:21px;
z-index:1;
border: 0;
}
.mfg_hd_right3 {
position:absolute;
right:151px;
/* height: 90px;*/
top:21px;
z-index:1;
border: 0;
}
.mfg_hd_left {
position:absolute;
left:120px;
top:21px;
z-index:1;
border: 0;
}
.mfg_hd_txt {
position:absolute;
left:170px;
top:17px;
z-index:1;
border: 0;
}
/* ==================================================================================
3 column stuff
================================================================================== */
/* ---------------------- */
/* center column SIZE */
/* ---------------------- */
#centerColumn {
background-color: #fff8dc;
background-color: #ffffff;
padding: 0;
margin: 0;
margin-left: 150px;
margin-right: 149px;
}
/* ----------------------- */
/* left/right column SIZE */
/* ----------------------- */
#leftColumn, #rightColumn {
position: absolute;
top: 125px;
width: 150px;
margin: 0;
padding: 0;
font-size: small;
background-color: #fff8dc;
}
#leftColumn {
background-color: #fff8dc;
border-right: 1px solid #999999;
}
#rightColumn {
background-color: #FFFFFF;
}
#leftColumn {
left: 1px;
}
#rightColumn {
right: 0px;
}
/* ----------------------- */
/* column content all */
/* ----------------------- */
#leftColumnContent, #centerColumnContent, #rightColumnContent {
margin: 0;
padding: 0;
}
#centerColumnContent{
padding-left: 15px;
padding-top: 15px;
padding-right: 10px;
}
#leftColumnContent{
float: left;
width: 100%;
margin: 0;
padding: 0;
}
/* ----------------------- */
/* left navigtion Bar */
/* ----------------------- */
#leftColumnContent ul a:link, #leftColumnContent ul a:visited {display: block;}
#leftColumnContent ul {list-style: none; margin: 0; padding: 0;}
/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#leftColumnContent li {border-bottom: 1px solid #EEE;}
/* fix for browsers that don't need the hack */
html>body #leftColumnContent li {border-bottom: none;}
/* ----------------------- */
/* sectionLinks style */
/* ----------------------- */
#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
padding-top: 14px;
padding-bottom: 14px;
border-bottom: 1px solid #cccccc;
font-size: 1.1em;
font-size:12pt;
}
#sectionLinks h3{
padding: 10px 0px 2px 10px;
}
#sectionLinks a {
display: block;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #eeeeee;
color: #336699;
padding: 2px 0px 2px 10px;
padding-top: 2px;
padding-right: 0px;
padding-bottom: 2px;
padding-left: 10px;
text-decoration: none;
}
#sectionLinks a:hover{
border: solid 1px white;
color:white;
background-color: #7adaff;
background-color: #369;
}
#sectionLinks li{
margin-top:0em;
margin-right:0em;
margin-bottom:0em;
margin-left:0em;
}
/* ----------------------- */
/* relatedLinks styles */
/* ----------------------- */
.relatedLinks{
position: relative;
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}
.relatedLinks h3{
padding: 10px 0px 2px 5px;
}
.relatedLinks a:link,
.relatedLinks a:visited {
color: #336699;
text-decoration: none;
display: block;
}
.relatedLinks a:hover {
color:#336699;
text-decoration:underline overline;
}
/* ----------------------- */
/* footer */
/* ----------------------- */
#footer {
/*background: #D6D6D6 url(/_img/bg/to939393.gif) repeat-x top left;
border: 1px solid;
border-color: #fff #aaa #999 #aaa; */
border-top: 1px solid #5076C9;
border-bottom: 1px solid #999999;
background-color:#5175C9;
padding:.2em .5em;
color:#000000;
font-family:Arial;
font-size:10px;
}
#footer a:link,
#footer a:visited {
color:#000000;
text-decoration:none;
padding-left:6px;
padding-right:6px;
}
#footer a:hover {
color:#FFFFFF;
background-color:#ccc;
background-color:#BCCBF2;
-moz-border-radius: 4px;
}
#footer span {
padding-left:0px !important;
padding-right:2px !important;
color:#FFFFFF;
background-color:#ccc;
-moz-border-radius: 4px;
}
#footer#tm {
padding-left:0px !important;
padding-right:2px !important;
color:#FFFFFF;
background-color:#5175C9;
-moz-border-radius: 4px;
}
/* need description */
.redstar
{
font-size: 11px;
color: #FF0000;
font-family: Verdana, Arial;
}
.smlcomment
{
font-size: 10px;
color: #336699;
font-family: Verdana, Arial
}
.smlmailttext a:link, a:hover, a:visited {text-decoration:none;}
/* ----------------------- */
/* no JavaScript */
/* ----------------------- */
.noscript {
font-size:20px;
color: #FF0000;
font-weight:bold;
font: 'verdana','arial','helvetica','san-serif';
background-color: yellow;
border-style:ridge;
text-align: center;
}
/* ----------------------- */
/* advert style */
/* ----------------------- */
#advert{
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left:15px;
}
#advert img{
display: block;
}
.center {
margin: auto;
display: block;
padding-top: 1em;
}
/* ----------------------- */
/* search box style */
/* ----------------------- */
#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}
#search form{
margin: 0px;
padding: 0px;
}
#search label{
display: block;
margin: 0px;
padding: 0px;
}
/* ----------------------- */
/* error style */
/* ----------------------- */
.error {
padding-top: 10px;
color: #990000;
}
/* --------------------------------------------------- */
/* used in elements & admin -> need to get rid off */
/* --------------------------------------------------- */
.copy {
font: 10px verdana, geneva, arial, sans-serif;
color: #000000;
padding-bottom: 5px;
}
.dotrule {
background-image: url(/_img/deco/bg_15dot_rule.gif);
}
/* --------------------------------------------------- */
/* used in forums -> need to get rid off */
/* --------------------------------------------------- */
.section {
font: 11px verdana, geneva, arial, sans-serif;
color: #000000;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
}
/* --------------------------------------------------- */
/* CAPTCHA-Styles */
/* --------------------------------------------------- */
.captchapict {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-style: inset;
border-style: groove;
border-style: none;
border-width: 4px;
border-color: #C0C0C0;
border-color: #FF0000;
}
/* --------------------------------------------------- */
/* for elemnts */
/* --------------------------------------------------- */
.paging {
padding-top: 5px;
padding-bottom: 5px;
}
/* --------------------------------------------------- */
/* profile page - paging numbers */
/* --------------------------------------------------- */
.pagingnumbers {
font-size: 100%;
COLOR: #82AAEE;
font-weight: bold;
text-decoration: none
}
a.pagingnumbers:hover {
COLOR: #ff6347;
font-size: 100%;
text-decoration:underline overline;
}
/* --------------------------------------------------- */
/* gold border and shadow testing */
/* --------------------------------------------------- */
/* background:url('/_img/deco/rangoon_girls.gif') no-repeat; */
.shadowbox1 {position: absolute;
background: url(/_img/bg/shadowdark.gif) repeat;
top: 40px;
left: 5%;
width: 45%;
}
.shadowbox2 {position: absolute;
background: url(/_img/bg/shadow.gif) repeat;
top: 40px;
right: 4%;
width: 41%;
}
.shadowboxfloat {margin: 4px 0px 0px 5px;
background: url(/_img/deco/shadowlight.gif) repeat;
width: 50%;
position: relative; /*IE needs this to show float properly*/
}
.shadowcontent, .shadowcontent2 {position: relative;
padding: 10px;
top: -5px; /* these two define the shadow 'offset'*/
left: -5px; /*...*/
background: #C4E1C7;
background: #ff6347;
color: black;
border: 1px solid #2E595C
}
.shadowcontent2 {background: #CEE6D0}
.img-shadow {
background: url(/_img/bg/shadowalpha.png) no-repeat bottom right !important;
background: url(/_img/bg/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
border: 1px solid gold;
margin: -6px 6px 6px -6px;
padding: 4px;
}
.rightalign {
float: right;
}
.leftalign {
float: left;
}
.p-shadow {
width: 60%;
float:both;
background: url(/_img/bg/shadowalpha.png) no-repeat bottom right !important;
background: url(/_img/bg/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.p-shadow div {
background: none !important;
background: url(/_img/bg/shadow2.gif) no-repeat left top;
padding: 0 !important;
padding: 0 6px 6px 0;
}
.p-shadow p {
color: #777;
background-color: #fff;
font: italic 1em georgia, serif;
border: 1px solid #a9a9a9;
padding: 4px;
margin: -6px 6px 6px -6px !important;
margin: 0;
}
.shadowbox {
background: #ccc;
position: relative;
top: 2px;
left: 2px;
}
.shadowbox div {
background: #333;
border: 2px solid #000;
color: #fff;
padding: 10px;
position: relative;
top: -2px;
left: -2px;
}
/* --------------------------- */
/* Buttons style */
/* --------------------------- */
input.btn{
color:#050;
font-family:'trebuchet ms',helvetica,sans-serif;
font-size:84%;
font-weight:bold;
background-color:#fed;
border:1px solid;
border-top-color:#696;
border-left-color:#696;
border-right-color:#363;
border-bottom-color:#363;
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');}
input.btnhov{
border-top-color:#c63;
border-left-color:#c63;
border-right-color:#930;
border-bottom-color:#930;
cursor:pointer;
}
.b5 {
background-color: #369;
color: #fff;
font-family:'Times New Roman',Times,Serif;
border:2px outset #69c;
}
.bmail {
background-color: #21AB97;
color: #fff;
font-family:'Times New Roman',Times,Serif;
/* border:2px outset #fff #FFD35E #f90 #FFD35E; */
border:2px outset #fff ;
}
/* --------------------------- */
/* W3C VALIDATION BUTTONS */
/* --------------------------- */
.w3cbutton3 {
margin: 1em 0;
width: 9em;
border: 1px solid #ccc;
font-family: helvetica,arial,sans-serif;
font-size: 70%;
font-weight: bold;
}
.w3cbutton3 a {
display: block;
width: 100%;
}
.w3cbutton3 a:link,
.w3cbutton3 a:visited,
.w3cbutton3 a:hover {
background-color: #fc6;
color: #000;
text-decoration: none;
}
.w3cbutton3 span.w3c {
padding: 0 0.4em;
background-color: #fff;
color: #0c479d;
}
/*----------*/
.charbox {
background-color: #EAE5CA;
border: none;
}
/* ----------------------------------- */
/* Referral Box - Commission screen */
/* ----------------------------------- */
.referralbox {
padding: 0 4px;
background-color: #FFFF99;
font-weight:bold;
padding-right: 4px;
color: #000;
border:3px double #21AB97;
}
/* ---------- */
/* acronym */
/* ---------- */
acronym {
cursor: help;
background: url(/_img/deco/acronym.gif) repeat-x 0px 13px;
}
/* for the character count text and color of charachter count box */
.gtext
{
font-size: 11px;
color: #000000;
font-family: Verdana, Arial
}
.charbox
{
background-color: #fff8dc;
border: none;
font-size: 11px;
color: #000000;
font-family: Verdana, Arial
}
/* ------------------- */
/* Bonus Points Box */
/*-------------------- */
#bonusbox {
color: #333333;
}
#bonusbox span {
color: #ffffff;
font-size: -1;
font-family:Arial, Helvetica, sans-serif;
font-size:-1;
}
/* for see profile */
.smlmailttext
{
margin-left: 5px;
font-size:0.7em;
text-decoration: none;
}
.smlmailttext a:link,
.smlmailttext a:visited {text-decoration:none;}
/* ----------------------- */
/* for Privacy Statement */
/*------------------------ */
.greytitle {
background: #eee url('/_img/bg/greyheader_bg.png');
border: 1px solid #969696;
padding: 2px;
padding-left: 10px;
margin-top: 23px;
margin-bottom: 5px;
font: bold 11px Tahoma, Verdana, Arial;
color: #666666;
}
/* ----------------------- */
/* for Profile display */
/*------------------------ */
div.gallery_header span.left {
float: left;
text-align: left;
margin-left: 1em;
}
div.gallery_header span.right {
float: right;
text-align: right;
margin-right: 1em;
}
/* ----------------------- */
/* for Bonus display */
/*------------------------ */
ol.decimal
{
list-style-type: decimal
}
.thumbnail
{
float: left;
height:180px;
background-color:#FFFF99;
border: 1px solid #999;
margin: 0 15px 20px 0;
padding: 5px;
}
.thumbnail a:link,
.thumbnail a:visited {text-decoration:none;}
/* register, profile, photo */
.info {
background-color: #FFFFFF;
border: 3px solid #FF0000 ;
padding:8px;
font-family: Arial, Helvetica;
font-size: 9pt;text-align: left;
}
.info span {
font-family: Arial, Helvetica;
font-size: 12pt;text-align: left; font-weight:bold; vertical-align:top;
}
/* ------------------------- */
/* login box right columns */
/* ------------------------- */
#loginright {
background-color: #369;
color: #FF0000;
font: bold;
margin: .8em;
padding:.8em;
border: 2px solid;
border-top-color:#FFFFFF;
border-left-color:#FFFFFF;
border-right-color:#E2C17E;
border-bottom-color:#E2C17E;
-moz-border-radius: 4px;
}
/* test */
#loginright h3 {
font-size:1em;
color:#6F4136;
color:#FFFFFF;
}
#loginright span {
font-size:10px;
color:#6F4136;
color:#FFFFFF;
}
#loginright p {
font-size:10px;
color:#6F4136;
}
#loginright a {
font-size:10px;
color:#6F4136;
color:white;
}
#loginright input {
width:100%;
font-size : 10px;
color:#000000;
background-Color : #8CC3C9;
}
/* random and featured boxes */
.rnd_rc_tab { margin-top: 20px; width: 132px }
.rnd_rc_head { }
.rnd_rc_content { color: #5a5a5a; font-size: 10px; background-color:#FFFFFF; font-family: Verdana, Arial; padding: 3px 4px 3px 8px; border-right: 1px solid #bfbfbf; border-left: 1px solid #bfbfbf }
.rnd_rc_seperator { background-color: #bfbfbf; height: 1px }
.rnd_rc_bottom { }
/* links - addurl,banners*/
#addurl {border: 1px solid #000000;background-color:#BA010F;color: #FFFFFF;height:24px;font-size: 14px;-moz-border-radius: 4px;}
#addurl a:link {color: #FFFFFF;text-decoration:none;margin: 0px 10px;}
#addurl a:visited {color: #FFFFFF;text-decoration:none;margin: 0px 10px;}
#addurl a:hover {background-color:#BCCBF2;-moz-border-radius:4px;}
/* LOGIN on logout scree, etc... */
.shopcrumb { font-size: 12px; font-family: arial,sans-serif; color: #FD8901; font-weight: bold; }
A.shopcrumb { color: #FD8901; text-decoration: none; }
A.shopcrumb:hover { color: #FD8901; text-decoration: underline; }
A.shopcrumb:visited { color: #FD8901; text-decoration: none; }
A.shopcrumb:visited:hover { color: #FD8901; text-decoration: underline; }
