Firefox removes a large part of the header

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
Jacob Søndberg

Firefox removes a large part of the header

Post 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 */
KO
Power Poster
Power Poster
Posts: 562
Joined: Mon Nov 06, 2006 7:55 pm

Re: Firefox removes a large part of the header

Post by KO »

Your links does not work.
Jacob Søndberg

Re: Firefox removes a large part of the header

Post by Jacob Søndberg »

The links work now.
RonnyK
Support Guru
Support Guru
Posts: 4962
Joined: Wed Oct 25, 2006 8:29 pm

Re: Firefox removes a large part of the header

Post 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
Locked

Return to “Layout and Design (CSS & HTML)”