CSS Code showing on Index in View Source

[Guest]

Hello, does any one know why when I go to view the souce of my webpages in the browser my CSS code is showing?

 

Does anyone have CSS Code in their Header.php file?

[♥Monika in Germany]

Hello, does any one know why when I go to view the souce of my webpages in the browser my CSS code is showing?

 

Does anyone have CSS Code in their Header.php file?

 

well that sounds like a template that your got from an online store for osCommerce ... I've seen that several times - and I do not like it!

[Guest]

well that sounds like a template that your got from an online store for osCommerce ... I've seen that several times - and I do not like it!

 

 

Yes, you are so right. Do you know how I can take the CSS code and move it to a style sheet?

[♥Monika in Germany]

Yes, you are so right. Do you know how I can take the CSS code and move it to a style sheet?

 

yuppers, there is a trick to it. Basically, the templates create a bucnh of new classes BUT they also use classes already defined. That's why calling the css of the template in the header will overwrite the old values which the issuer of the template intends to do, of course.

 

If you add the whole lot to the END of your stylesheet, you should get the same results. Let me know if it worked for you!

[Guest]

yuppers, there is a trick to it. Basically, the templates create a bucnh of new classes BUT they also use classes already defined. That's why calling the css of the template in the header will overwrite the old values which the issuer of the template intends to do, of course.

 

If you add the whole lot to the END of your stylesheet, you should get the same results. Let me know if it worked for you!

 

 

Hello Monika,

 

This is what is in my Header File? What do I do with this?

 

if ($messageStack->size('header') > 0) {
echo $messageStack->output('header');
 }
?>

<STYLE TYPE="text/css">
/* #################

   #################
*/
.topbanner_logo{
  width: 173;
  height: 52;
  position:absolute;
  left: 30px;
  top: 20px;
  padding: 5px;
  visibility:block;
  z-index:1;
}
.date_location{
  position:absolute;
  left: 205px;
  top: 128px;
  visibility:block;
  z-index:1;
  color: #000000;
  width: 300;
}
.topbanner_td1{
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
line-height: 1.5;
height: 104;
width: 764;
}
.topbanner_td2{
background-image: url("<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_top_right.jpg");
background-repeat: repeat-x;
height: 104;
}
/* MENU bar css controls */
.menubarmain{
height: 23px;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
line-height: 1.5;
color: #000000;
}
.menubarmain_td1{
background-image: url("<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_nav_left.jpg");
background-repeat: no-repeat;
height: 32px;
width: 386px;
}
.menubarmain_td1 A:link, .menubarmain_td1 A:active, .menubarmain_td1 A:visited{ 
font-size: 11px; 
font-family: Arial;
color: #1B648C;
font-weight: normal;
text-decoration: none;
}
.menubarmain_td1 A:hover{
font-family: Arial;
font-size: 11px;
font-weight: normal;
color: #B3B3B3;
}
.menubarmain_td2{
width: 350px;
height: 32px;
text-align: right;
vertical-align: top;
}
.menubarmain_td3{
background-image: url("<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_nav_right.gif");
background-repeat: repeat-x;
height: 32px;
}
.menubuttons{
position:absolute;
  left: 200px;
  top: 110px;
height: 32px;
vertical-align: top;
}
.filler{
  width: 173;
  height: 52;
  position:absolute;
  left: 600px;
  top: 99px;
  padding: 5px;
  visibility:block;
  z-index:1;

}
	.shad_piece_SM{
  width: 7;
  height: 33;
  position:absolute;
  left: 593px;
  top: 99px;
  padding: 5px;
  visibility:block;
  z-index:1;

}



/* MAIN table css controls */		
.maincont_tb{
background-image: url(<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_back_left_r.jpg);
background-repeat:  repeat-y;
background-position: top left;
}
.maincont_mid_td{
padding-top: 25px;
}
/* LEFT bar css controls */	
.maincont_left_td {
background-image: url(<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_back_left.jpg);
background-repeat: no-repeat;
width: 170px;
padding-top: 70px;
padding-right: 10px;
}
.leftbar_tb{
width: 170px;
}
BODY{
background-image: url(<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_back_main.jpg);
background-repeat: no-repeat;
background-position: 170 137;	
}
/*Algozone (Specific for osCommerece) CONTENT in LEFT bar css */ 
.infoBoxLeft {
}
TD.infoBoxLeft, SPAN.infoBoxLeft { 
font-family: Verdana, Arial, sans-serif; font-size: 10px; 
}
infoBoxHeadingLeft {
}
TD.infoBoxHeadingLeft {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
font-weight: bold;
text-align: left;
vertical-align: middle;
padding-left: 10px;
padding-bottom: 5px;
color: #FFFFFF;
background-image: url(<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_box_m_left.jpg);
background-repeat:  no-repeat;
width: 170px;
height: 25px;
}
.infoBoxContentsLeft {
color: #DCDAC1;
font-size: 10px;
}
.infoBoxHeadingRcornerLeft {
}
.infoBoxHeadingLcornerleft {
}
.infoBoxContentsLeft A:link, .infoBoxContentsLeft A:active, .infoBoxContentsLeft A:visited{
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
}
.infoBoxContentsLeft A:hover {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: normal;
color: #DCDAC1;
}
/* RIGHT bar css controls */		
.maincont_right_td {
width: 172;
text-align: right; 
padding-right: 10px;
padding-left: 10px;
margin-top: 20px;
height: 100%;	
color: #6D6629;
}
.rightbar_tb{
vertical-align: top; 
height: 100%;	
}
.rightbar_tb2{
width: 152;
vertical-align: top;
margin-top: 35px;
margin-bottom: 10px;
}
.rightbar_td3{
}
.newProductsBox {  
border: 1px solid #7597B3;
margin-top: 3px;
}
.newProductsBox A:link, .newProductsBox A:active, .newProductsBox A:visited{
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: normal;
color: #1B648C;
}
.newProductsBox A:hover {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000000;
}
.productBoxHeadingLcorner {
}
.productBoxHeading {
line-height: 0.6;
background-image: url(<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_box_m_prod.jpg);
background-repeat:  no-repeat;
background-position: top right;
border-left: 1px solid #7597B3;
border-right: 1px solid #7597B3;
border-top: 1px solid #7597B3;
background-color: #FFFFFF;
height: 18px;
padding-left: 5px;
}
.productBoxHeadingRcorner {
width: 0px;
}
.productBox {  
border-left: 1px solid #7597B3;
border-right: 1px solid #7597B3;
border-bottom: 1px solid #7597B3;
padding: 4px;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
font-color: #000000;
background-color: #FFFFFF;
}
/*Algozone (Specific for osCommerece) CONTENT in RIGHT bar css */ 
.infoBoxRight {  
border: 1px solid #7597B3;
margin-top: 3px;
margin-bottom: 5px;
font-size: 10px;
}
.infoBoxHeadingRcornerRight {
}
.infoBoxHeadingLcornerRight {
}
TD.infoBoxHeadingRight {
background-image: url(<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_box_m_right.jpg);
width: 152px;
height: 20px;
background-position: top right;
background-repeat:  no-repeat;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
font-weight: bold;
color: #1B648C;
padding-left: 5px;
}
.infoBoxContentsRight {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #6D6629;
}
.infoBoxContentsRight A:link, .infoBoxContentsRight A:active, .infoBoxContentsRight A:visited{ 
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: normal;
color: #1B648C;
}
.infoBoxContentsRight A:hover
{
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: normal;
color: #B3B3B3;
}
/* middle boxes control*/
.infoBoxHeadingLcorner {
background-image: url(<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_box_l_middle.jpg);
background-repeat:  no-repeat;
width: 51px;
height: 25px;
}
.infoBoxHeading {
line-height: 0.8;
background-image: url(<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_box_m_middle.jpg);
background-repeat:  repeat-x;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
font-weight: bold;
color: #1B648C;
}
.infoBoxHeadingRcorner {
background-image: url(<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_box_r_middle.jpg);
background-repeat:  no-repeat;
width: 141px;
height: 20px;
background-color: #EDF0F7;	
}
/* Product list header*/	
TD.productListing-heading {
background-image: url(<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_prodlist_header.jpg);
background-repeat:  repeat-x;
background-color: #EDF0F7;	
height: 20px;
}
.footer_tb{
text-align: center; 
background-image: url(<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_footer.jpg);
background-repeat:  repeat-x;
color: #17191D;
}
.footer_td{
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
padding-top: 5px;
}
</STYLE>
<!-- Top table with logo -->

[♥Monika in Germany]

you take the part I post here and paste it to the bottom of your stylesheet.css, right after the last code line :thumbsup:

 

.topbanner_logo{
width: 173;
height: 52;
position:absolute;
left: 30px;
top: 20px;
padding: 5px;
visibility:block;
z-index:1;
}
.date_location{
position:absolute;
left: 205px;
top: 128px;
visibility:block;
z-index:1;
color: #000000;
width: 300;
}
.topbanner_td1{
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
line-height: 1.5;
height: 104;
width: 764;
}
.topbanner_td2{
background-image: url("<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_top_right.jpg");
background-repeat: repeat-x;
height: 104;
}
/* MENU bar css controls */
.menubarmain{
height: 23px;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
line-height: 1.5;
color: #000000;
}
.menubarmain_td1{
background-image: url("<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_nav_left.jpg");
background-repeat: no-repeat;
height: 32px;
width: 386px;
}
.menubarmain_td1 A:link, .menubarmain_td1 A:active, .menubarmain_td1 A:visited{ 
font-size: 11px; 
font-family: Arial;
color: #1B648C;
font-weight: normal;
text-decoration: none;
}
.menubarmain_td1 A:hover{
font-family: Arial;
font-size: 11px;
font-weight: normal;
color: #B3B3B3;
}
.menubarmain_td2{
width: 350px;
height: 32px;
text-align: right;
vertical-align: top;
}
.menubarmain_td3{
background-image: url("<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_nav_right.gif");
background-repeat: repeat-x;
height: 32px;
}
.menubuttons{
position:absolute;
left: 200px;
top: 110px;
height: 32px;
vertical-align: top;
}
.filler{
width: 173;
height: 52;
position:absolute;
left: 600px;
top: 99px;
padding: 5px;
visibility:block;
z-index:1;

}
.shad_piece_SM{
width: 7;
height: 33;
position:absolute;
left: 593px;
top: 99px;
padding: 5px;
visibility:block;
z-index:1;

}



/* MAIN table css controls */ 
.maincont_tb{
background-image: url(<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_back_left_r.jpg);
background-repeat: repeat-y;
background-position: top left;
}
.maincont_mid_td{
padding-top: 25px;
}
/* LEFT bar css controls */ 
.maincont_left_td {
background-image: url(<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_back_left.jpg);
background-repeat: no-repeat;
width: 170px;
padding-top: 70px;
padding-right: 10px;
}
.leftbar_tb{
width: 170px;
}
BODY{
background-image: url(<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_back_main.jpg);
background-repeat: no-repeat;
background-position: 170 137; 
}
/*Algozone (Specific for osCommerece) CONTENT in LEFT bar css */ 
.infoBoxLeft {
}
TD.infoBoxLeft, SPAN.infoBoxLeft { 
font-family: Verdana, Arial, sans-serif; font-size: 10px; 
}
infoBoxHeadingLeft {
}
TD.infoBoxHeadingLeft {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
font-weight: bold;
text-align: left;
vertical-align: middle;
padding-left: 10px;
padding-bottom: 5px;
color: #FFFFFF;
background-image: url(<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_box_m_left.jpg);
background-repeat: no-repeat;
width: 170px;
height: 25px;
}
.infoBoxContentsLeft {
color: #DCDAC1;
font-size: 10px;
}
.infoBoxHeadingRcornerLeft {
}
.infoBoxHeadingLcornerleft {
}
.infoBoxContentsLeft A:link, .infoBoxContentsLeft A:active, .infoBoxContentsLeft A:visited{
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
}
.infoBoxContentsLeft A:hover {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: normal;
color: #DCDAC1;
}
/* RIGHT bar css controls */ 
.maincont_right_td {
width: 172;
text-align: right; 
padding-right: 10px;
padding-left: 10px;
margin-top: 20px;
height: 100%; 
color: #6D6629;
}
.rightbar_tb{
vertical-align: top; 
height: 100%; 
}
.rightbar_tb2{
width: 152;
vertical-align: top;
margin-top: 35px;
margin-bottom: 10px;
}
.rightbar_td3{
}
.newProductsBox { 
border: 1px solid #7597B3;
margin-top: 3px;
}
.newProductsBox A:link, .newProductsBox A:active, .newProductsBox A:visited{
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: normal;
color: #1B648C;
}
.newProductsBox A:hover {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000000;
}
.productBoxHeadingLcorner {
}
.productBoxHeading {
line-height: 0.6;
background-image: url(<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_box_m_prod.jpg);
background-repeat: no-repeat;
background-position: top right;
border-left: 1px solid #7597B3;
border-right: 1px solid #7597B3;
border-top: 1px solid #7597B3;
background-color: #FFFFFF;
height: 18px;
padding-left: 5px;
}
.productBoxHeadingRcorner {
width: 0px;
}
.productBox { 
border-left: 1px solid #7597B3;
border-right: 1px solid #7597B3;
border-bottom: 1px solid #7597B3;
padding: 4px;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
font-color: #000000;
background-color: #FFFFFF;
}
/*Algozone (Specific for osCommerece) CONTENT in RIGHT bar css */ 
.infoBoxRight { 
border: 1px solid #7597B3;
margin-top: 3px;
margin-bottom: 5px;
font-size: 10px;
}
.infoBoxHeadingRcornerRight {
}
.infoBoxHeadingLcornerRight {
}
TD.infoBoxHeadingRight {
background-image: url(<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_box_m_right.jpg);
width: 152px;
height: 20px;
background-position: top right;
background-repeat: no-repeat;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
font-weight: bold;
color: #1B648C;
padding-left: 5px;
}
.infoBoxContentsRight {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #6D6629;
}
.infoBoxContentsRight A:link, .infoBoxContentsRight A:active, .infoBoxContentsRight A:visited{ 
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: normal;
color: #1B648C;
}
.infoBoxContentsRight A:hover
{
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: normal;
color: #B3B3B3;
}
/* middle boxes control*/
.infoBoxHeadingLcorner {
background-image: url(<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_box_l_middle.jpg);
background-repeat: no-repeat;
width: 51px;
height: 25px;
}
.infoBoxHeading {
line-height: 0.8;
background-image: url(<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_box_m_middle.jpg);
background-repeat: repeat-x;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
font-weight: bold;
color: #1B648C;
}
.infoBoxHeadingRcorner {
background-image: url(<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_box_r_middle.jpg);
background-repeat: no-repeat;
width: 141px;
height: 20px;
background-color: #EDF0F7; 
}
/* Product list header*/ 
TD.productListing-heading {
background-image: url(<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_prodlist_header.jpg);
background-repeat: repeat-x;
background-color: #EDF0F7; 
height: 20px;
}
.footer_tb{
text-align: center; 
background-image: url(<?php echo DIR_WS_TEMPLATE_IMAGES; ?>az_footer.jpg);
background-repeat: repeat-x;
color: #17191D;
}
.footer_td{
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
padding-top: 5px;
}

[Guest]

Okay, done.. I have taken the code and placed it at the bottom of my style sheet. What do I do with the style code in the header? I removed it and re-uploaded the header.php and the page now displayes distorted.

 

Thank you! :thumbsup:

[♥Monika in Germany]

Okay, done.. I have taken the code and placed it at the bottom of my style sheet. What do I do with the style code in the header? I removed it and re-uploaded the header.php and the page now displayes distorted.

 

Thank you! :thumbsup:

 

hmmmmmmmmm ... I'd have removed the <style></style> part from the header myself ... may I see a link?

[Guest]

hmmmmmmmmm ... I'd have removed the <style></style> part from the header myself ... may I see a link?

 

 

Okay, I will PM you with a link.