Jump to content

Centering site with no CSS identifiers

ryanh_106

By ryanh_106
in CSS Help

Recommended Posts

ryanh_106 Member

ryanh_106

Posted
Posted

I am trying to style a salesforce.com portal, which has very little CSS identifiers in the HTML, not even a warpper div around the html and I am obviously having some problems.

 

I enclose the HTML and CSS but basically:

- I can center align it in firefox using text-align:center; but this doesnt work in IE

- In IE I usually use margin:0 auto; on a wrapper div of a fixed width but as its just a table with no IDs or classes, i cant identify it specifically

- If I assign CSS to set the width and margins or "body table {}" then this affects all tables and messes up the rest of the site.

 

Any ideas are much appreciated, I have contacted SF and asked them to update their HTML but its a lost cause as i suspected.

 

Cheers!!

 

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>Salesforce</title>
  
  <link  href="/sCSS/12.0/1208983943000/Theme2/default/ie7/elements.css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet" type="text/css" /><script  type="text/javascript">try { DynamicCss.addCssUrl('/sCSS/12.0/1208983943000/Theme2/default/ie7/elements.css', 'handheld,print,projection,screen,tty,tv');} catch(e) {}</script>
  <link href="/servlet/servlet.StyleSheetServlet?oid=00D3000000018MG" rel="stylesheet" type="text/css">

  <script  src="/dJS/en/1208068638000/ssp1Library.js" type="text/javascript"></script><script  src="/static/102207/js/functions.js" type="text/javascript"></script>

</head>


<body onLoad="if (this.bodyOnLoad) bodyOnLoad();" LINK="#000000" VLINK="#000000" ALINK="#99CC00" TOPMARGIN="0" LEFTMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">
<TABLE border=0 width="100%" cellpadding=0 cellspacing=0 height=100%>
    
        <tr><Td valign=top class="pageHeaderContainer"><table border=0 cellspacing=0 cellpadding=0 width=100%>
<tr><td class="pageHeader"><span id="ssp">Customer Support Portal</span></td></tr>
</table></td></tr>
    
    <tr><td valign=top height=99% class="pageBodyContainer">
        <table border=0 width="800" cellspacing=0 cellpadding=0>
        
            <TR>
                <TD valign=top><table cellspacing="1" cellpadding="2" width="800"><TR>
<td nowrap class="menuBarFrame"><a href="/sserv/home.jsp" class="tabOn">Home</a>.<a href="/sserv/search.jsp?lang_picker=1" class="tabOff">Find Solution</a>.<a href="/sserv/caseedit.jsp?retURL=%2Fsserv%2Fhome.jsp" class="tabOff">Log a Incident</a>.<a href="/sserv/caselist.jsp" class="tabOff">View Incidents</a>.<a href="/sserv/logout.jsp" class="tabOff">Logout</a></td></tr></table></TD>
            </TR>
        
<TR height=100% width=100%><TD>

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%"><TR><TD> </TD></TR>
<TR><TD CLASS="titleInfo" ALIGN="RIGHT">Logged in: RE1</TD></TR>
<TR><TD><div><div class="listTitle">Top Solutions</div><div><table width="100%" border="0" cellspacing="0" cellpadding="0"><TR><TD CLASS="listHeaderLine"><img src="/s.gif" border="0" alt="" width="1" height="1"></TD></TR><TR><TD CLASS="listHeading"> None Found</TD></TR><TR><TD CLASS="listHeaderLine"><img src="/s.gif" border="0" alt="" width="1" height="1"></TD></TR></table>
</div><br/></div></TD></TR>
<TR><TD><div><div class="listTitle">My Open Incidents</div><div><table width="100%" border="0" cellspacing="0" cellpadding="0"><TR><TD COLSPAN="6" CLASS="listHeaderLine"><img src="/s.gif" border="0" alt="" width="1" height="1"></TD></TR><tr><td CLASS="listHeading"> </td><td CLASS="listHeading">Number</td><td CLASS="listHeading"> </td><td CLASS="listHeading">Subject</td><td CLASS="listHeading"> </td><td CLASS="listHeading">Created Date</td></tr><TR><TD COLSPAN="6" CLASS="listHeaderLine"><img src="/s.gif" border="0" alt="" width="1" height="1"></TD></TR>
<TR><TD COLSPAN="6" CLASS="listFooterLine"><img src="/s.gif" border="0" alt="" width="1" height="1"></TD></TR></table>
</div><br/></div></TD></TR>


</TABLE>

</TD></TR>


<TR align=center><TD colspan=2>
<br>
    <a href="http://www.salesforce.com/" target="_blank"><img src="/img/poweredby_sfdc.gif" alt=""  width="184" height="40" class="logo" /></a>
</TD></TR>

</TABLE>
</td></tr>
</table>

</body>
</html>

 

CSS:

 

BODY {
BACKGROUND-COLOR: #FFFFFF;
COLOR: #333333;
FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif;
FONT-SIZE: 12px;
FONT-WEIGHT: bold;
TEXT-DECORATION: ;
PADDING: ;
width:100%;
text-align:center !important;
} 

.pageHeaderContainer, .pageHeaderContainer table {
width:800px !important;
height:120px !important;
} 

.pageHeader {
BACKGROUND-COLOR: #3830A6;
background-image:url('https://myheaderimage');
background-position:top left; 
background-repeat:no-repeat;
}

span#ssp {
width:100%; height:30px; font-family:"microsoft sans serif", verdana, arial, sans-serif; color:#FFFFFF;
font-size:14pt;
background-color:#2C2E84;
text-align:center; 
display:block;
position:relative; top:+45px;
}

td.pageBodyContainer {
padding-top:0px !important;
padding-left:0px !important;
padding-right:0px !important;
width:800px !important;
}

.menuBarFrame {
border:0px !important;
}

body table {
margin-left:auto !important; margin-right:auto !important; position:relative;
}
.labelCol { padding-right: 10px; font-weight: bold;}TD {
COLOR: #333333; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 11px; 
}
.titleheaderlinetop {
BACKGROUND-COLOR: none; 
}
.tabon:hover {
BACKGROUND-COLOR: #b3b3d7;

COLOR: #000000;
FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif;
FONT-SIZE: 11px;
FONT-WEIGHT: bold;
TEXT-DECORATION:none;
PADDING-TOP: 10px;
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
HEIGHT: 35px;
BORDER-COLOR: #FFFFFF;
BORDER-STYLE: solid;
BORDER-WIDTH: 0px;
BORDER-RIGHT-WIDTH: 1px;
}

INPUT {
COLOR: #333333; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 11px; 
}
TD.pageheaderline {
display:none;
}
.listheading {
COLOR: #333333; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 11px; HEIGHT: 14px; BORDER-COLOR: #AEAEAE; BORDER-STYLE: none; BORDER-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #006699; BACKGROUND-COLOR: #E4E4F1; PADDING: 2px; PADDING-LEFT: 4px; 
}
.button {

}
.logo {
BORDER-COLOR: #DDDDDD; BORDER-STYLE: solid; BORDER-WIDTH: 1px; 
}
.listentryeven {
BACKGROUND-COLOR: #E4E4F1; HEIGHT: 20px; 
}
.datafield {
COLOR: #333333; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 11px; BACKGROUND-COLOR: #FFFFFF; PADDING: 2px; PADDING-LEFT: 4px; 
}
.editlabel {
COLOR: #333333; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 11px; FONT-WEIGHT: bold; BACKGROUND-COLOR: #FFFFFF; PADDING: 2px; PADDING-LEFT: 4px; 
}
.pagetitle {
COLOR: #FFFFFF; FONT-SIZE: 13px; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-WEIGHT: bold; BORDER-COLOR: #AAAAAA; BORDER-STYLE: solid; BORDER-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BACKGROUND-COLOR: #5E901D; BACKGROUND-IMAGE: none; PADDING-TOP: 3px; PADDING-RIGHT: 1px; PADDING-LEFT: 4px; PADDING-BOTTOM: 3px; PADDING: 2px; 
}
.categoryheadercolor {
BACKGROUND-COLOR: #E4E4F1; 
}
.tabon {
BACKGROUND-COLOR: #b3b3d7;
COLOR: #000000;
FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif;
FONT-SIZE: 11px;
FONT-WEIGHT: bold;
TEXT-DECORATION:none;
PADDING-TOP: 10px;
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
HEIGHT: 35px;
BORDER-COLOR: #FFFFFF;
BORDER-STYLE: solid;
BORDER-WIDTH: 0px;
BORDER-RIGHT-WIDTH: 1px;
}
.searchtipsheader {
COLOR: #335577; FONT-FAMILY: arial, verdana, tahoma, sans-serif; FONT-SIZE: 11px; FONT-WEIGHT: bold; LINE-HEIGHT: 15px; BORDER-WIDTH: 0px; BORDER-TOP-WIDTH: 1px; BORDER-TOP-COLOR: #333333; BORDER-BOTTOM-WIDTH: 2px; BORDER-BOTTOM-COLOR: #333333; BORDER-STYLE: solid; 
}
.titleinfo {
COLOR: #333333; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 11px; BACKGROUND-COLOR: #FFFFFF; PADDING-BOTTOM: 3px; 
}
.commentauthor {
COLOR: #333333; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 11px; FONT-WEIGHT: bold; LINE-HEIGHT: 14px; PADDING: 2px; PADDING-LEFT: 4px; 
}
.closereasoneditlabel {
COLOR: #333333; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 11px; FONT-WEIGHT: bold; BACKGROUND-COLOR: #FFFFFF; PADDING: 2px; PADDING-LEFT: 4px; 
}
A:hover {
COLOR: #5b66a7; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 11px; PADDING-LEFT: 4px; 
}
.datalabel {
COLOR: #333333; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 11px; FONT-WEIGHT: bold; BACKGROUND-COLOR: #FFFFFF; PADDING: 2px; PADDING-LEFT: 4px; 
}
.suggestioncasedetaildata {
COLOR: #333333; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 11px; BACKGROUND-COLOR: #e5e5e5; PADDING: 2px; PADDING-LEFT: 4px; 
}
A.categorynode {
COLOR: #333333; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 11px; FONT-WEIGHT: bold; 
}
.blackline {
BACKGROUND-COLOR: #333333; 
}
.requiredsymbol {
COLOR: #990000; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 14px; 
}
.detaildata {
COLOR: #333333; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 11px; BACKGROUND-COLOR: #e5e5e5; PADDING: 2px; PADDING-LEFT: 4px; 
}
TD.pageheadercontainer {
PADDING: ;
HEIGHT: ;
}
.commentdate {
COLOR: #333333; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 11px; FONT-WEIGHT: bold; LINE-HEIGHT: 14px; PADDING: 2px; PADDING-LEFT: 4px; 
}
.taboff {
BACKGROUND-COLOR: #8080FF;
COLOR: #ededed;
FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif;
FONT-SIZE: 11px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none;
PADDING-TOP: 10px;
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
HEIGHT: 35px;
BORDER-COLOR: #FFFFFF;
BORDER-STYLE: solid;
BORDER-WIDTH: 0px;
BORDER-RIGHT-WIDTH: 1px;
}
SELECT {
COLOR: #333333; FONT-FAMILY: arial, verdana, tahoma, sans-serif; FONT-SIZE: 11px; 
}
.error {
BACKGROUND-COLOR: #FF9999;
COLOR: #990000;
FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif;
FONT-SIZE: 11px;
FONT-WEIGHT: bold;
TEXT-DECORATION: ;
PADDING: 5px ;
PADDING-LEFT: ;
border:1px solid #990000
}
.suggestioncasedetaillabel {
COLOR: #333333; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 11px; FONT-WEIGHT: bold; BACKGROUND-COLOR: #FFFFFF; PADDING: 2px; PADDING-LEFT: 4px; 
}
.listentryodd {
BACKGROUND-COLOR: #ffffff; HEIGHT: 20px; 
}
.categoryheader {
COLOR: #333333; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 13px; FONT-WEIGHT: bold; BORDER-STYLE: solid; BORDER-WIDTH: 0px; BORDER-BOTTOM-COLOR: #333333; BORDER-BOTTOM-WIDTH: 2px; 
}
.text {
COLOR: #333333; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 11px; FONT-WEIGHT: bold; 
}
A.categorysubnode {
COLOR: #333333; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 11px; 
}
.suggestionmessage {
COLOR: #333333; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 13px; FONT-WEIGHT: bold; BACKGROUND-COLOR: #FFFFFF; 
}
.titleheaderlinebottom {
BACKGROUND-COLOR: #5E901D; HEIGHT: 1px; 
}
.solutiontitledetail {
COLOR: #333333; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 13px; BACKGROUND-COLOR: #FFFFFF; BORDER-COLOR: #FFFFFF; BORDER-WIDTH: 0px; BORDER-STYLE: solid; BORDER-BOTTOM-WIDTH: 2px; BORDER-BOTTOM-COLOR: #333333; PADDING-TOP: 2px; PADDING-LEFT: 4px; PADDING-BOTTOM: 3px; 
}
TEXTAREA {
COLOR: #333333; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 11px; 
}
.listheaderline {
BACKGROUND-COLOR: #5E901D; 
}
TD.pagebodycontainer {
PADDING: 10px; BACKGROUND-COLOR: #FFFFFF; 
}
.errormsg {
COLOR: #990000; FONT-FAMILY: arial, verdana, tahoma, sans-serif; FONT-SIZE: 12px; FONT-WEIGHT: bold; 
}
.attachbkgd {
BACKGROUND-COLOR: #FFFFFF; 
}
.searchtips {
COLOR: #333333; FONT-FAMILY: arial, verdana, tahoma, sans-serif; FONT-SIZE: 11px; LINE-HEIGHT: 15px; 
}
.searchprompt {
COLOR: #335577; FONT-FAMILY: arial, verdana, tahoma, sans-serif; FONT-SIZE: 11px; FONT-WEIGHT: bold; LINE-HEIGHT: 15px; 
}
A {
COLOR: #5b66a7; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 11px; PADDING-LEFT: 4px; 
}
.editdata {
COLOR: #333333; FONT-FAMILY: arial, verdana, tahoma, sans-serif; FONT-SIZE: 11px; BACKGROUND-COLOR: #e5e5e5; PADDING: 2px; PADDING-LEFT: 4px; 
}
.detaillabel {
COLOR: #333333; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 11px; FONT-WEIGHT: bold; BACKGROUND-COLOR: #FFFFFF; PADDING: 2px; PADDING-LEFT: 4px; 
}
TD.pagefootercontainer {
BACKGROUND-COLOR: #FFFFFF; 
}
.menubarframe {
BACKGROUND-COLOR: #8080FF;
BACKGROUND-IMAGE: none;
BACKGROUND-REPEAT: ;
COLOR: #9A9A9A;
PADDING-TOP: ;
PADDING-LEFT: ;
PADDING-BOTTOM: ;
PADDING-RIGHT: ;
HEIGHT: 36px;
}
.taboff:hover {
BACKGROUND-COLOR: #b3b3d7;
COLOR: #000000;
FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif;
FONT-SIZE: 11px;
FONT-WEIGHT: bold;
TEXT-DECORATION:none;
PADDING-TOP: 10px;
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
HEIGHT: 35px;
BORDER-COLOR: #FFFFFF;
BORDER-STYLE: solid;
BORDER-WIDTH: 0px;
BORDER-RIGHT-WIDTH: 1px;
}
.categorybackground {
BACKGROUND-COLOR: #FFFFFF; 
}
.closereasoneditdata {
COLOR: #333333; FONT-FAMILY: arial, verdana, tahoma, sans-serif; FONT-SIZE: 11px; BACKGROUND-COLOR: #FFFFFF; PADDING: 2px; PADDING-LEFT: 4px; 
}
.solutionbodydetail {
COLOR: #333333; FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif; FONT-SIZE: 11px; BACKGROUND-COLOR: #FFFFFF; PADDING: 4px; PADDING-LEFT: 4px; 
}
TD.custommessagecontainer {
PADDING: 5px; BACKGROUND-COLOR: #FFFFFF; 
}
.listtitle {
COLOR: #FFFFFF; FONT-FAMILY: arial, verdana, tahoma, sans-serif; FONT-SIZE: 13px; FONT-WEIGHT: bold; BORDER-COLOR: #AAAAAA; BORDER-STYLE: none; BORDER-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BACKGROUND-COLOR: #5E901D; BACKGROUND-IMAGE: none; PADDING-TOP: 3px; PADDING-LEFT: 4px; PADDING-BOTTOM: 3px; 
}
.listfooterline {
BACKGROUND-COLOR: #5E901D; 
}
.solutionquestion {
COLOR: #000000; FONT-FAMILY: arial, verdana, tahoma, sans-serif; FONT-SIZE: 12px; FONT-WEIGHT: bold; 
}
TD.pagefooterline {
BACKGROUND-COLOR: #99CCFF; HEIGHT: 0px; 
}

 

Link to comment
https://forums.phpfreaks.com/topic/102743-centering-site-with-no-css-identifiers/
Share on other sites
wildteen88 Regular Member

wildteen88

Posted
Posted

Just apply the relevant CSS to the BODY rather than a div.

BODY {
BACKGROUND-COLOR: #FFFFFF;
COLOR: #333333;
FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif;
FONT-SIZE: 12px;
FONT-WEIGHT: bold;
TEXT-DECORATION: ;
PADDING: ;
width: 800px
margin: 0 auto;
}

TheFilmGod Advanced Member

TheFilmGod

Posted
Posted 

BODY {
BACKGROUND-COLOR: #FFFFFF;
COLOR: #333333;
FONT-FAMILY: trebuchet ms, verdana, arial, sans-serif;
FONT-SIZE: 12px;
FONT-WEIGHT: bold;
TEXT-DECORATION: ;
PADDING: ;
width: 800px
margin: 0 auto;
}

 

On another side note I think that about half of all those declarations are useless, change it to this:

 

body {
background: #fff;
color: #333;
font-family: trebuchet ms, verdana, arial, sans-serif;
width: 800px
margin: 0 auto;
}

 

Font-sizeLP: 12px is the default size for all major browsers. Padding and text decoration do not have any declarations and are a waste of the overall download time.

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.