Page 1 of 1

Firefox removes a large part of the header

Posted: Wed May 23, 2007 8:40 am
by Jacob Søndberg
Hi everyone. I have made a fine webpage in CMS Made Simple 1.0.6 "Niihau". It looks perfect in IE but in Firefox a large part of the header i removed. Try to paste the link into the two browsers, and you will see what I mean: http://cms.consit.dk/cms/index.php?page=home The webpage is on Unix server

I have customized the template a bit, but the original template is from 2005, so maybe I need a hack or workaround for Firefox. I have tried to increase the header size, but that caused the page to look strange in IE. Below is the CSS and I hope someone can help me  :D

Thanks a lot. Jakestar

/* culture shock: grass stains by pogy366 - Sept. 2005 */

/******* structure and layout *******/
body {
font-family: Frutiger, Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 7pt;
color: #000000;
background: #ffffff;
margin:45px 0 0 0;
padding:0 0 0 0;
background: #ffffff;
text-align:left;
}

.wrap {
width:920px;
margin:0 auto;
padding:0 0 0 0;
text-align:center;
background: #ffffff url(uploads/images/header.jpg) no-repeat;
border:0px solid #9EB874;
}

.header {
clear:none;
width:920px;
height:105px;
margin:0px 0 0 0;
padding:0 0 0 0;
background:transparent;
color:#ffffff;
text-align:right;
}

.topnav {
clear:both;
width:920px;

margin:0 0 0 0;
padding:0 0 0 0;
background:transparent;
font-size:8pt;
}

.container {
clear:both;
width:920px;
margin:15px 0px 0 0px;
padding:0 0 0 0;
background:#ffffff;
color:#000000;
text-align:left;
}

img.cnr {
width:8px;
height:8px;
border:none;
display: block !important;
}

.footer {
position:relative;
clear:both;
width:920px;
margin:20;
padding: 0;
background:#ffffff;
font-size:6pt;
text-align:center;

}
*html body #footer{margin:10px 0 0 0;}


div#flat{clear:both;width:66%;height:38px;margin:10px 0 20px;padding:0px}
div.left49 {float:left;width: 70%;}
div.right49 {float:right;width: 15%;text-align: right;}
div.left49 p{margin:0px 20px; padding:0px}
div.right49 p{margin:0; padding:0px}


/******* links *******/

a {
color:#a1a3a7;
text-decoration:underline;
}

a:hover {
color:#E39243;
text-decoration:none;
}

#news a {
color:#D3812D;
text-decoration:underline;
}

#news a:hover {
color:#E39243;
text-decoration:none;
}

#footer a {
color:#a1a3a7;
text-decoration:none;
}

#footer a:hover {
color:#4F6C1F;
text-decoration:none;
}

/******* fonts and colors *******/

/* HEADINGS */
div#content h1 {
   /*font-size: 20pt;    font size for h1 */
   font-family: Frutiger, Verdana, Tahoma, Arial, Helvetica, sans-serif;
   font-size: 20pt;
   line-height: 1em;
   margin: 0;
}
div#content h2 {
   color: #000000;
   font-family: Frutiger, Verdana, Tahoma, Arial, Helvetica, sans-serif;
   font-weight: normal;
   font-size: 14pt;
   text-align: left;
/* some air around the text 1.1em solid */
   padding-left: 0.5em;
   padding-bottom: 1px;
/* set borders around header */
   border-bottom: 1px solid #c8c8c8;
   border-left: 1px solid  #c8c8c8;
   line-height: 1.5em;
/* and some air under the border */
   margin: 0 0 1em 0;
}
div#content h3 {
   color: #294B5F;
   font-size: 1.3em;
   line-height: 1.3em;
   margin: 0 0 0.5em 0;
}
div#content h4 {
   color: #294B5F;
   font-size: 1.2em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
div#content h5 {
   font-size: 1.1em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
h6 {
   font-size: 1em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
/* END HEADINGS */

/* TEXT */
p {
   font-size: 1em;
   margin: 0 0 1.5em 0;  /* some air around p elements */
   line-height:1.4em;
   padding: 0;
}
blockquote {
   border-left: 10px solid #ddd;
   margin-left: 10px;
}
pre {
   font-family: monospace;
   font-size: 1.0em;
}
strong, b {
/* explicit setting for these */
   font-weight: bold;
}
em, i {
/* explicit setting for these */
   font-style:italic;
}


.header strong {
font-family:Frutiger, Verdana, Tahoma, Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:13pt;
letter-spacing:.7em;
}

.news_title {
font-family:Frutiger, Verdana, Tahoma, Arial, Helvetica, sans-serif;
color:#65764B;
font-size:10pt;
font-weight:bold;
}

.page_title {
font-family:Frutiger, Verdana, Tahoma, Arial, Helvetica, sans-serif;
color:#697D55;
font-size:10pt;
font-weight:bold;
padding: 0 0 0 0;
margin: 0 0 -8px 0;
}


/******* images *******/

img {
border:none;
}

.right img{
float:right;
padding:0 0 0 0;
margin:5px 2px 2px 5px;
}

.left img{
float:left;
padding:0 0 0 0;
margin:0 5px 0 0px;
}



/******* workarounds and hacks *******/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Re: Firefox removes a large part of the header

Posted: Wed May 23, 2007 1:50 pm
by KO
Your links does not work.

Re: Firefox removes a large part of the header

Posted: Fri Jun 01, 2007 7:59 am
by Jacob Søndberg
The links work now.

Re: Firefox removes a large part of the header

Posted: Fri Jun 01, 2007 8:21 am
by RonnyK
jakestar, how big is the total header in height, as you only have 105px reserved for it, and I think you need more, as not only the blue image is the header, but the text above belongs to it as well, with the "web developer" extension for FF and then using "view stylesheet information" under CSS you can see what elements are active at what position on the screen.

Ronny