#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    2
    Rep Power
    0

    CSS not working across browsers


    Our site embeds a chat module. It looks great in Chrome, but doesn't look good in IE, and doesn't come up in Firefox.

    We know a little about HTML, but very little about CSS. We're thinking this is probably an easy fix. Any help would be greatly appreciated.

    The page is www. eshcentral . org / chat . html

    This is our CSS code:

    Code:
    /********************************************
       HTML ELEMENTS
    ********************************************/ 
    
    /* top elements */
    * {
    	margin: 0; padding: 0;
    } 
    body {
    	margin: 0; padding: 0;
    	font: 71%/1.5em  Verdana, 'Trebuchet MS', Arial, Sans-serif;
    	background: url(headerbg-blue.gif) repeat-x;
    	color: #666666;	
    	text-align: center;		
    }
    
    /* links */
    a {
    	background: inherit;
    	color: #3182C0; 
    }
    a:hover {
    	background: inherit;
    	color: #72A545;
    }
    
    /* headers */
    h1, h2, h3 {
    	font: bold 1em 'Trebuchet MS', Tahoma, Sans-serif;
    	text-transform: uppercase;
    	color: #555;
    }
    h1 { font-size: 1.5em; }
    h2 { font-size: 1.3em; }
    h3 { font-size: 1.2em; text-transform: none;}
    
    #main h1, #rightbar h1 {
    	padding: 10px 0 5px 5px;
    	margin: 0 0 0 10px;
    	text-transform: uppercase;
    	border-bottom: 1px solid #f2f2f2; 	
    }	
    #sidebar h1 {
    	padding: 10px 0px 5px 30px;
    	background: url(square_arrow.gif) no-repeat 2px 12px;
    	margin: 0;
    	text-transform: uppercase;	
    }
    
    p, h1, h2, h3 {
    	margin: 10px 15px;
    }
    ul, ol {
    	margin: 10px 30px;
    	padding: 0 15px;	
    	color: #3182C0;	
    }
    ul span, ol span {
    	color: #666666;
    }
    
    /* images */
    img {
    	border: 2px solid #CCC;
    }
    img.float-right {
      margin: 5px 0px 5px 15px;  
    }
    img.float-left {
      margin: 5px 15px 5px 0px;
    }
    a img {  
      border: 2px solid #3791D7;
    }
    a:hover img {  
      border: 2px solid #806B4D !important; /* IE fix*/
      border: 2px solid #3791D7;
    }
    
    code {
      margin: 5px 0;
      padding: 10px;
      text-align: left;
      display: block;
      overflow: auto;  
      font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
      /* white-space: pre; */
      background: #FAFAFA;
      border: 1px solid #f2f2f2;  
      border-left: 3px solid #3182C0;
    }
    acronym {
      cursor: help;
      border-bottom: 1px solid #777;
    }
    blockquote {
    	margin: 15px;
     	padding: 0 0 0 32px;  	
      	background: #FAFAFA url(quote.gif) no-repeat 5px 10px !important; 
    	background-position: 8px 10px;
    	border: 1px solid #f2f2f2; 
    	border-left: 3px solid #3182C0;  
    	font-weight: bold; 
    }
    
    /* form elements */
    form {
    	margin:10px; padding: 0;
    	border: 1px solid #f2f2f2; 
    	background-color: #FAFAFA; 
    }
    label {
    	display:block;
    	font-weight:bold;
    	margin:5px 0;
    }
    input {
    	padding: 4px;
    	border:1px solid #eee;
    	font: normal 1em/1.5em Verdana, sans-serif;
    	color:#777;
    }
    textarea {
    	width:350px;
    	padding:4px;
    	font: normal 1em/1.5em Verdana, sans-serif;
    	border:1px solid #eee;
    	height:100px;
    	display:block;
    	color:#777;
    }
    input.button { 
    	margin: 0; 
    	font: bold 1em Arial, Sans-serif; 
    	border: 1px solid #CCC;
    	background: #FFF; 
    	padding: 2px 3px; 
    	color: #333;	
    }
    
    /* search form */
    form.searchform {
    	background: transparent;
    	border: none;
    	margin: 0; padding: 0;
    }
    form.searchform input.textbox { 
    	margin: 0; 
    	width: 120px;
    	border: 1px solid #CCC; 
    	background: #FFF;
    	color: #333; 
    	vertical-align: top;
    }
    form.searchform input.button {
    	width: 55px;
    	vertical-align: top;
    }
    
    /*****************/
    /*    Layout     */
    /*****************/
    #wrap {
    	margin: 0 auto;
       width: 850px;  	
    	text-align: left;		
    	background: #FFF;	
    }
    #content-wrap {
    	clear:both;
       margin: 0; padding:0;
    	width: 850px;	
    }
    
    /* header */
    #header {
    	position: relative;
    	background: url(headerbg-blue.gif) repeat-x;
    	height: 84px;	
    }
    #header h1#logo {
    	position: absolute;
    	margin: 0; padding: 0;
    	font: bolder 4.1em 'Trebuchet MS', Arial, Sans-serif;
    	letter-spacing: -2px;
    	color: #CCC;
    	text-transform: lowercase;
    	/* change the values of top and Left to adjust the position of the logo*/
    	top: 0; left: 5px;	
    }
    #header h2#slogan {
    	position: absolute;
    	margin: 0; padding: 0;
    	font: bold 1em 'Trebuchet MS', Arial, Sans-serif;
    	text-transform: none;
    	color: #00349A;
    	/* change the values of top and Left to adjust the position of the slogan*/
    	top: 48px; left:65px;		
    }
    #header .searchform {
    	position: absolute;
    	top: 5px; right: 3px;	
    }
    
    /* main column */
    #main {
    	float: left;
    	margin-left: 15px;
    	padding: 0;
    	width: 54%;	
    	border-left: 1px solid #f2f2f2;
    }
    
    .post-footer {
    	background-color: #FAFAFA;
    	padding: 5px; margin-top: 20px;
    	font-size: 95%;
    	border: 1px solid #f2f2f2;
    }
    .post-footer .date {
    	background: url(clock.gif) no-repeat left center;
    	padding-left: 20px; margin: 0 10px 0 5px;
    }
    .post-footer .comments {
    	background: url(comment.gif) no-repeat left center;
    	padding-left: 20px; margin: 0 10px 0 5px;
    }
    .post-footer .readmore {
    	background: url(page.gif) no-repeat left center;
    	padding-left: 20px; margin: 0 10px 0 5px;
    }
    
    /* sideabar */
    #sidebar {
    	float: left;
    	width: 21%;
    	margin: 0;	padding: 0; 
    	display: inline;	
    }
    #sidebar ul.sidemenu {
    	list-style: none;
    	text-align: left;
    	margin: 0 0 8px 0;	
    	padding-right: 0;		
    	text-decoration: none;
    }
    #sidebar ul.sidemenu li {
    	border-bottom: 1px solid #EFF0F1;
    	background: url(arrow.gif) no-repeat 2px 5px;
    	padding: 2px 5px 2px 20px;	
    }
    
    * html body #sidebar ul.sidemenu li { height: 1%; }
    
    #sidebar ul.sidemenu a {
    	font-weight: bold;
    	background-image: none;
    	text-decoration: none;	
    }
    
    /* rightbar */
    #rightbar {
    	float: right;
    	width: 21%;
    	padding: 0;			
    }
    
    /* footer */
    #footer {
    	clear: both;
    	background: #FFF url(footerbg.gif) repeat-x left top;
    	border-top: 1px solid #F2F2F2;
    	text-align: center;	
    	height: 50px;	
    }
    #footer a {
    	text-decoration: none;
    	font-weight: bold;
    }
    
    /* menu */
    #menu {
    	clear: both;
    	margin: 0; padding: 0;	
    }
    #menu ul {	
    	position: relative; 
    	bottom: 4px;
    	margin: 0; padding: 0;	
    	float: left;
    	font: bold 1.4em 'Trebuchet MS', Tahoma, Arial, Sans-serif;
    	width: 850px;/* 775px; */
    	border: 1px solid #808080;
    	border-width: 0 0 4px 0;	
    	list-style: none;
    }
    #menu ul li{
    	display: inline;	
    }
    #menu ul li a {	
    	position: relative; bottom: -4px;
    	float: left;
    	color: #808080;
    	padding: 0px 10px;
    	text-decoration: none;
    	background: white url(menudivide.gif) repeat-y right top; 
    	border-bottom: 4px solid #808080; 	
    }
    #menu ul li a:hover{
    	color: black;
    	background-color: #F3F3F3; 
    	border-bottom: 4px solid #3791D7;
    }
    #menu ul li#current a{
    	color: #333;
    	background-color: #F3F3F3; 
    	border-bottom: 4px solid #3791D7;
    }
    
    /* Alignment classes */
    .float-left   { float: left;}
    .float-right  { float: right; }
    .align-left   { text-align: left; }
    .align-right  { text-align: right; }
    .align-center { text-align: center;	}
    .align-justify { text-align: justify; }
    
    /* display classes */
    .clear { clear: both; }
    .block { display: block; }
    .hide  { display: none; }	
    .blue  {	color: #3791D7; }
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    Welcome to DevShed Forums, eamjk.

    Have you found a solution? When I tell NoScript not to block that chat script, it seems to load fine in Firefox.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    2
    Rep Power
    0
    Thanks for the welcome. No, I haven't found a solution yet.

    The chat script still doesn't load in Firefox. In IE, the window remains very small. Works perfect in Chrome.

    I do believe this is a CSS issue because when I created chat2.html without CSS, it comes up fine in all the browsers.

    I'm mainly looking for the screen not to be minimized across browsers like it does in chat.html (this is the page with the CSS above).

    (I'll deal with the Firefox load issue with tech support.)
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    In chat.html the parent of "#chatblazerLayer" doesn't have a set height, so the 100% height doesn't have any point of reference. I suggest you use the "min-height" property or set the height directly in pixels (px) or EMs (em, where 1em is the element's font-size). Also chat.html has a doctype which tells the browser to use "standards mode", while chat2.html does not, so the browser renders the page in "quirks mode".
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo