Quick CSS Question

For questions and problems with the CMS core. This board is NOT for any 3rd party modules, addons, PHP scripts or anything NOT distributed with the CMS made simple package itself.
Locked
orionellis

Quick CSS Question

Post by orionellis »

Can someone tell me why this theme is dsplayed on the left in IE6 and centered in Firefox?

http://siteground185.com/~facevsh/

I am trying to tweak my CSS to fix it.

Thanks so much. ;D
Top
User avatar
Nullig
Power Poster
Power Poster
Posts: 2380
Joined: Fri Feb 02, 2007 4:31 pm

Re: Quick CSS Question

Post by Nullig »

There is a smarty error on the page:

"Smarty error: unable to read resource: "globalcontent:JavaScript for IE page width"

I think this is the problem. Check your syntax around this area of your template.

Nullig
Top
orionellis

Re: Quick CSS Question

Post by orionellis »

Okay I corrected that.
The site is still displaying on the left in IE but perfectly centered in Firefox.

Should I tweak the margin, body, alignment? CSS is a bit confusing for me and this theme!

Thanks for your quick reply!

Here is the CSS:

Code: Select all

/* Start of CMSMS style sheet 'Horizontal_dropdown : sort' */
/* this contains the menu */
#menu_horiz {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #fff;
	font-size: 10px;
        background:  url(uploads/Horizontal_dropdown/nav_bg.jpg) repeat 0 0px;
        background-color:#fff;
	width: 780px;
	height: 20px;
	margin: 0;
	text-align: center;
        border-right: solid 1px #c0c0c0;
}

/* this contains nothing but when the submenu drops it falls over it*/
/* making it LOOK like it contains the nav items*/
#submenu_horiz {
	/*background-color: #790451;*/
	width: 780px;
	height: 30px;
}


#menu_horiz ul {
    margin: 0;
    padding: 0;
    list-style: none;

}

#menu_horiz li {
    float: left;
    color: #fff;
    list-style: none;
    margin: 0;
    padding: 0em 0em .0em 0em;
        border-right: solid 1px #efefef;
}

#menu_horiz li a {
	color: #fff;
	text-decoration: none;
    border-right: none;
}


/* note the a declarations below don't use #menu_horiz in front */
/* if you do they won't work */



/* this one formats the actual 'nested' unordered list */
li ul {
        background:  url(uploads/Horizontal_dropdown/nav_hover_bg.jpg) repeat 0 0px; 	
        top:178px;
	left: 0px;
	display: none;
	position: absolute;
        width: 779px;
	height: 20px;
	}


/* and these format the list items within it */
li li {
	color: #fff;
background:  url(uploads/Horizontal_dropdown/nav_bg.jpg) repeat 0 0px;

}
li > ul {
}

/* this stuff makes it drop - you need a javascript file for it work with IE6 though*/

li:hover ul, li.over ul { display: block; }

li li:hover, li li.over { display: inline; background: #30731a;  border: none;}
/* End of 'Horizontal_dropdown : sort' */

/* Start of CMSMS style sheet 'Horizontal_dropdown : Colours' */
/* Layout sections */
	body {
		background: #efefef;
		color: #333;
		}
		
	div#pagewrapper {
		border: 1px solid #ccc;
		background: #fff;
	    }
		
	div#header {
		color: #fff;
		}
		
	div#footer {
		color: #fff;
		background-color: #F68F3A;
		}
		
/* Links */		
	a,
	a:link 
	a:active, a:visited {
		color: #385C72;
	}

/* Headings */	
	h1, h2, h3, h4, h5, h6 {
		color: #000;
	}
/* End of 'Horizontal_dropdown : Colours' */

/* Start of CMSMS style sheet 'Horizontal_dropdown : Nav-Horizontal' */
/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* NAV */

    * html div#menu_horiz {
        /* hide ie/mac \*/
        height: 1%;
        /* end hide */
    }
    div#menu_horiz {
      width: 780px;
      margin: 0;
      text-align: center;
      border-right: solid 1px #cccccc;
    }
    div#menu_horiz ul {    
        margin: 0;
        padding: 0;
        list-style: none;
        border-left:  1px solid #C0C0C0;
        
div#menu_horiz ul li {
      background-color: #000;
       
    }
    div#menu_horiz li {
        float: left;
        display: inline;
        list-style: none;
        margin: 0 ;
        border-right: 1px solid #C0C0C0;

}


    }
    div#menu_horiz li a {
        border-right: none;
    }
    div#menu_horiz a,
    div#menu_horiz a:link,
    div#menu_horiz a:active,
    div#menu_horiz a:visited {
        display: block;
        padding: 5px 10px; 

        /* hide from ie/mac \*/
        display: block;
        /* end hide */
        background:  url(uploads/Horizontal_dropdown/nav_bg.jpg) repeat 0 0px; 
        text-decoration: none;
        margin: 0;
        color: #fff;
        /*background: #F68F3A;*/
         font-weight: bold;
    }
div#menu_horiz li a:hover {
        background:  url(uploads/Horizontal_dropdown/nav_hover_bg.jpg) repeat 0 0px;
	background-color: #D10D40;
        color: #FFF;
        line-height: 1em;
        font-weight: bold;
}
    div#menu_horiz .activeparent {
        display: inline-block;

        /* hide from ie/mac \*/
        display: block;
        /* end hide */
        
	background-color: #D10D40;
    }

    div#menu_horiz .current a,
    div#menu_horiz .current a:link,
    div#menu_horiz .current a:active,
    div#menu_horiz .current a:visited,
    div#menu_horiz .current a:hover,
    div#menu_horiz .activeparent a,
    div#menu_horiz .activeparent a:link,
    div#menu_horiz .activeparent a:active,
    div#menu_horiz .activeparent a:visited,
    div#menu_horiz .activeparent a:hover 
{
	background-color: #D10D40;
    }
/* END NAV */

div#menu_horiz li.active01 h3 {
        display: inline-block;
        padding: 5px 10px; 
        background:  url(uploads/Horizontal_dropdown/nav_hover_bg.jpg) repeat 0 0px;
        /* hide from ie/mac \*/
        display: block;
        /* end hide */
        font-size: 1em;
        line-height: 1em;
        text-decoration: none;
        margin: 0;
        color: #ffffff;
        background-color: #D10D40;
    }

#menu_horiz li.active02 h3 {
  display: block;
  text-decoration: none;
  padding: 5px 5px 5px 10px;
  font-weight: normal;
  color: #18507C;
  margin: 0;
  font-size: 1em;
  background-color: #D10D40;
  }

#menu_horiz li.active03 h3
{
  display: block;
  padding: 3px 5px 3px 25px;
  border-bottom: none;
  font-size: 90%;
  font-weight: bold;
  color: #D10D40;
  margin: 0;
}

/* End of 'Horizontal_dropdown : Nav-Horizontal' */

/* Start of CMSMS style sheet 'Horizontal_dropdown : Layout' */
/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* SITE SPECIFIC LAYOUT */
    body {
        margin: 0;
        padding: 1em;
        text-align: center;
    }
    div#pagewrapper {
        margin: 0 auto;
        width: 780px;
        padding: 0;
        text-align: left;
    }
    #container {
	position: relative;
            	margin: 0;
    }
    
    /* HEADER */
        div#header {
            margin: 0;
            padding: 0;
            height: 159px;
            background: #ffffff;           
            text-align: left;
        }
        div#header h1 a {
            background:  url(uploads/Horizontal_dropdown/hdr.jpg) no-repeat 0 0px; 
            display: block;
            height: 159px;
            text-indent: -700em;
            width: 780px;
            margin: 0;
            padding: 0;
            text-decoration:none;
        }
    /* END HEADER */
    
    
    /* CONTENT */
        div#content {

        }
        
        /* MAIN */
            div#main {

            }
        /* END MAIN */
        
        /* SUB */
            div#sub {
                
            }
        /* END SUB */
        
    /* END CONTENT */
    
    
    /* FOOTER */
        div#footer {

        }

        div#footer p {
            font-size: 0.8em;
            margin: 0;
            padding: 15px;
            text-align: center;
        }
    /* END FOOTER */
/* END LAYOUT */

.movie {
	background-color: #D10D3F;
	padding: 5px;
	width: 200px;
	text-align: center;
	position: relative;
}

div.subnav {
   padding: 10px 0;
   text-align: left;
   margin: 0 1em;
   border-bottom: 1px dashed #ccc;
}
div.breadcrumbs {
   padding: 1em 0;
   text-align: left;
   font-size: 90%;
   margin: 0 1em;
   border-bottom: 1px dashed #ccc;
}

div.flags {
  float: right;
  width: 18px;
  padding: 1em 0;
  text-align: right;
  margin: 0 1em 0 0;
}

div.left49 {
  float: left;
  width: 49%;
  }

div.right49 {
  float: right;
  width: 49%;
  text-align: right;
  }
/* End of 'Horizontal_dropdown : Layout' */

/* Start of CMSMS style sheet 'Horizontal_dropdown : Layout EllNav H/V L 2Col' */
/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* NAV BAR AT THE TOP, LOCAL NAV ON THE LEFT AND TWO COLUMNS OF CONTENT */

    div#content {
        position: relative;
        margin: 1.5em auto 2em 0;
        padding: 0;
        text-align: left;
    }
    div#menu_vert {
        float: left;
        width: 25%;
        display: inline;
    }
    div#main {
        float: left;
        width: 65%;
        display: inline;
        margin-left: 2%;
        padding: 0 1% 0 2%;
    }
    div#content2 {
        float: left;
        width: 25%;
        display: inline;
        padding: 0 1% 0 2%;
        border-left: dashed 1px #cccccc;
    }
    div#menu_horiz {
        width: 100%;
        text-align: left;
        
    }

/* END CONTENT */
/* End of 'Horizontal_dropdown : Layout EllNav H/V L 2Col' */

/* Start of CMSMS style sheet 'Horizontal_dropdown : Forms' */
/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* FORM ELEMENTS */
	form {
		margin:0;
		padding:0;
	}
	form div,
	form p {
		font-size: 1em;
		margin: 0 0 1em 0;
		padding: 0;
	}
	label {
		font-weight: bold;
	}
	fieldset {
		border: 1px solid #eee;
		padding: 5px 10px;
		margin: 0 0 1.5em 0;
	}
	fieldset legend {
		color: #666;
		font-size: 1.1em;
		font-weight: bold;
		margin: 0 0 0 0px;
		padding: 0;
		background-color: white;
	}
	* html fieldset legend {
		margin: 0 0 10px -10px;
	}
	fieldset ul {
		list-style: none;
		margin: 0 0 1.5em 0;
		padding: 0;
	}
	fieldset ul li {
		list-style: none;
		margin: 0 0 0.5em 0;
		padding: 0;
	}
     
	
	input, select, textarea {
		font-size:1em; 
		font-family: arial, helvetica, verdana, sans-serif;
        
        margin: 0;
		padding: 2px;
	}
	
	input, select {
		vertical-align:middle;
	}
	textarea {
		width: 200px;
		height: 8em;
	}
	
	input.check {
		border: none;
		width: auto;
		height: auto;
		margin: 0;
	}
	input.radio {
		border: none;
		width: auto;
		height: auto;
		margin: 0;
	}
	input.file {
		height: auto;
		width: 250px;
	}
	input.readonly {
		background-color: transparent;
		border: none;
	}
	input.button {
		width: 10em;
		border:1px solid black;
		background-color: #ddd;
	}
	input.image {
		border: none;
		width: auto;
		height: auto; 
	}
	
    form div.submit {
		margin: 1em 0;
	}
    form div.submit input {
		height: 2em;
        width: 15em;
	}
/* END FORM ELEMENTS */
		
/* End of 'Horizontal_dropdown : Forms' */

/* Start of CMSMS style sheet 'Horizontal_dropdown : Typography' */
/* A CSS Framework by Mike Stenhouse of Content with Style */

/* TYPOGRAPHY */
	body {
		text-align: left;
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-size: 8pt;
                line-height: 1em;
	}
	div {
		font-size: 1em;
	}
	.img_border {
		border: 2px solid #efefef;
                margin: 5px;
	}
	
/* LINKS */
	a,
	a:link 
	a:active, a:visited {
		text-decoration: underline;
	}

        div#footer a, 	
        div#footer a:link 
	div#footer a:active, div#footer a:visited {
               color: #fff;
        }

	a:hover {
	text-decoration: none;
	}
/* END LINKS */
	
/* HEADINGS */
	h1 {
		font-size: 2em;
		line-height: 1em;
		margin: 0;
		padding: 0;
	}
	h2 {
		font-size: 1.5em;
                line-height: 1.5em;
		margin: 0 0 0.5em 0;
		padding: 0;
	}
	h3 {
		font-size: 1.3em;
		line-height: 1.3em;
		margin: 0 0 0.5em 0;
		padding:0;
	}
	h4 {
		font-size: 1.2em;
		line-height: 1.3em;
		margin: 0 0 0.25em 0;
		padding: 0;
	}
	h5 {
		font-size: 1.1em;
		line-height: 1.3em;
		margin: 0 0 0.25em 0;
		padding: 0;
	}
	h6 {
		font-size: 1em;
		line-height: 1.3em;
		margin: 0 0 0.25em 0;
		padding: 0;
	}
/* END HEADINGS */

/* TEXT */
	p {
		font-size: 1em;
		margin: 0 0 1.5em 0;
		padding: 0;
		line-height:1.6em;
	}
	blockquote {
		border-left: 10px solid #ddd;
		margin-left: 10px;
	}
	pre {
		font-family: monospace;
		font-size: 1.0em;
	}
	strong, b {
		font-weight: bold;
	}
	em, i {
		font-style:italic;
	}
    code {
        font-family: "Courier New", Courier, monospace;
        font-size: 1em;
        white-space: pre;
    }
/* END TEXT */
	
/* LISTS */
	#main ul {
        line-height:1.4em;
		margin: 0 0 1.5em 0;
		padding: 0;
	}
	#main ul li {
		margin: 0 0 0.25em 30px;
		padding: 0;
	}
	ol {
		font-size: 1.0em;
		line-height: 1.4em;
		margin: 0 0 1.5em 0;
		padding: 0;
	}
	ol li {
		font-size: 1.0em;
		margin: 0 0 0.25em 30px;
		padding: 0;
	}
	dl {
		margin: 0 0 1.5em 0;
		padding: 0;
		line-height: 1.4em;
	}
	dl dt {
		font-weight: bold;
		margin: 0.25em 0 0.25em 0;
		padding: 0;
	}
	dl dd {
		margin: 0 0 0 30px;
		padding: 0;
	}
/* END LISTS */
	
	
/* TABLE */
	table {
        font-size: 1em;
		margin: 0 0 1.5em 0;
        padding: 0;
	}
	table caption {
		font-weight: bold;
		margin: 0 0 0 0;
		padding: 0 0 1.5em 0;
	}
	th {
		font-weight: bold;
		text-align: left;
	}
	td {
		font-size: 1em;
	}
/* END TABLE */	
	
	hr {
		display: none;
	}

	div.hr {
		height: 1px;
		margin: 1em 10px;
		border-bottom: 1px dotted black;
	}

	
/* END TYPOGRAPHY */	
/* End of 'Horizontal_dropdown : Typography' */

/* Start of CMSMS style sheet 'Horizontal_dropdown : Tools' */
/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* clearing */
	.stretch,
	.clear {
		clear:both; 
		height:1px; 
		margin:0; 
		padding:0; 
		font-size: 15px;
		line-height: 1px;
	}
	.clearfix:after {
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		visibility: hidden;
	}
	* html>body .clearfix {
		display: inline-block; 
		width: 100%;
	}
	
	* html .clearfix {
		/* Hides from IE-mac \*/
		height: 1%;
		/* End hide from IE-mac */
	}

/* end clearing */


/* replace */
	.replace {
		display:block;
		
		background-repeat: no-repeat;
		background-position: left top;
		background-color:transparent;
	}
	/* tidy these up */
	.replace * {
		text-indent: -10000px;
		display:block;
		
		background-repeat: no-repeat;
		background-position: left top;
		background-color:transparent;
	}
	.replace a {
		text-indent:0;
	}
	.replace a span {
		text-indent:-10000px;
	}
/* end replace */


/* accessibility */
     span.accesskey {
     	text-decoration:none;
     }
     .accessibility {
     	position: absolute;
     	top: -999em;
     	left: -999em;
     }
dfn {
  position: absolute;
  left: -1000px;
  top: -1000px;
  width: 0;
  height: 0;
  overflow: hidden;
  display: inline;
}
/* end accessibility */
/* End of 'Horizontal_dropdown : Tools' */
http://siteground185.com/~facevsh/
Last edited by orionellis on Tue Jun 05, 2007 7:35 pm, edited 1 time in total.
Top
Oliver
Forum Members
Forum Members
Posts: 28
Joined: Wed Mar 15, 2006 9:50 pm

Re: Quick CSS Question

Post by Oliver »

Your HTML forces Internet Explorer to run in quirks mode so it behaves not like IE 6 but like IE 5 which supports CSS standards very badly. Try to include a propper DOCTYPE statement befor the first html-tag. This might help. Oliver
Top
Locked

Return to “CMSMS Core”