text chopped off in Firefox but not IE

[kohoutek]

Hi everyone,

I have now managed to get the design as I imagined with CSS only.
There is just one small problem that I have with the text length in Firefox.

If I enter a long text, Firefox doesn't display the whole text but stops at some point.I am insure which of the definitions in the CSS is responsible for that.

Here is the relevant code:

html, body {height:100%}

body {
	margin: 0;
	padding: 0;
       	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 11px; 
	color: #817D6D;
	background: url(http://www.currentswillshift.net/cws...mg/tmpl/bg.jpg);
        text-align:center;
        min-width:750px;
}
html>body #container {height:auto;}

#container {
	     margin: 0 auto;
	     width: 800px; 
	     height:100%;
	     min-height:100%;
	     text-align:left;
	     background-color: #F0ECDB;
	     border-left: 1px solid #706D61;
	     border-right: 1px solid #706D61;
	     position:relative;
}
html>#container {height:auto}  
#footer {
  position:absolute;
  bottom:0;
  left:0px;
  width:800px;
  height: 31px;
  text-align:center;
  overflow:hidden;
  background:#96907B url(http://www.currentswillshift.net/cws.../footer_bg.jpg) repeat-x left top;
}
html>#container {height:auto}		
#mainheader {
		position:absolute;
		left:0;top:0;
		height: 147px;
		width:100%;
		background:url(img/tmpl/header.jpg);
		margin: 0px 0px 5px 0px;
		z-index:1;
}
#header {
		height: 147px;
		width:100%;
		background: url(img/tmpl/header_bg.jpg);
		position:relative;
		z-index:2;
}

#navigation {
		float: left;
		width: 185px;
	        padding: 5px 0;
}
#content {
           width:550px;
           margin-left:185px;
}
#content p, #navigation p, #header p,#footer p  {margin:0 5px 5px 5px}	
}
#clearfooter {height:33px;width:100%;clear:both}

Does anyone know what setting is causing this?

Thank you

[kohoutek]

Oh, forgot to add the test page:

Here it is: http://www.currentswillshift.net/cws...id=0,1,0,0,1,0

[Paul O'B]

Hi,

You have an erroneous bracket in the css which is stopping firefox from reading the clearfooter style.

#content p, #navigation p, #header p,#footer p {margin:0 5px 5px 5px} 
} ------this bracket here needs to be deleted
#clearfooter {height:149px;width:100%;background:red;}

Paul

[kohoutek]

Thanks Paul.

That was the problem.

I have a question. Is the css code clean and cross browser compatible? I am especially worried about MAC users who use older browsers. So, I was hoping that maybe you know whether the bit of css code (it is mostly adapted from your samples) is ok? I have little knowledge on the subject.

Thanks again Paul for your great support and kindness.

[kohoutek]

Well, for some reason the css does not validate at W3C

I made the validate CSS test in Firefox and got the following errors.

To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML.
Errors
URI : http://www.currentswillshift.net/cws...id=0,1,0,0,1,0

    * Line: 27

      Property align doesn't exist : center
    * Line: 56

      Property align doesn't exist : center

But when I check the CSS code I do not see why those errors occur?
I am embarassed for having to ask for help again, but I just don't know what is wrong with the CSS.


Here is the full CSS code:

html, body {height:100%}

body {
	margin: 0;
	padding: 0;
       	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 11px; 
	color: #817D6D;
	background: url(http://www.currentswillshift.net/cws...mg/tmpl/bg.jpg);
        text-align:center;
        min-width:750px;
}
html>body #container {height:auto;}

#container {
	     margin: 0 auto;
	     width: 800px; 
	     height:100%;
	     min-height:100%;
	     text-align:left;
	     background-color: #F0ECDB;
	     border-left: 1px solid #706D61;
	     border-right: 1px solid #706D61;
	     position:relative;
}

html>#container {height:auto}

#mainheader {
		position: absolute;
		left:0;top:0;
		height: 147px;
		width:100%;
		background:url(img/tmpl/header.jpg) repeat;
		z-index:1;
}
#header {
		height: 147px;
		width:100%;
		background: url(img/tmpl/header_bg.jpg) repeat;
		margin: 0px 0px 5px 0px;
		border-top: 1px solid #96907B;
		border-bottom: 1px solid #F0ECDB;
		position:relative;
		z-index:2;
}
#navigation {
		float: left;
		width: 185px;
	        padding: 5px 0;
}
#content {
           width:550px;
           margin-left:185px;
}
#content p, #navigation p, #header p, #footer p  {margin:0 5px 5px}

#footer {
  position:absolute;
  bottom:0;
  left:0px;
  width:800px;
  height: 31px;
  text-align:center;
  overflow:hidden;
  background:#96907B url(http://www.currentswillshift.net/cw...l/footer_bg.jpg) repeat-x left top;
}
#clearfooter {height:33px;width:100%;clear:both}

/*
ul { margin: 0px 0px 0px 20px; }
li { font-size: 11px; list-style: disc; }
*/

a, a:link, a:visited, a:active {
	color: #FF3300;
	text-decoration: none
}
a:hover {
	color: #FF3300;
	text-decoration: underline;
}

.articleText { 

        text-align: justify;
}

.articleCode {
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
}

.articleHead, .articleList_tophead, h1, h2 {
	font-weight: bold;
	font-size: 21px;
	font-family: "Arial Narrow", "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	line-height : 120%;
	color : #817D6D;
}

.articleSubHead, .articleList_topsubhead, h3, h4 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 17px;
	font-weight: normal;
	color: #6D7983;
	line-height: 110%;
	margin-bottom: 0px;
	padding: 0 0 0 10px;
}

.articleSummary {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 11px;
	color: #817D6D;
	line-height: 135%;
	padding: 0 0 0 10px;
}

.contentHead {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #817D6D;
	line-height: 110%;
	padding: 0 0 0 10px;
}

.contentSubHead {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 12px;
	color: #817D6D;
	line-height: 110%;
	padding: 0 0 0 10px;
}

.tableHead {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #817D6D;
	line-height: 13px;
}

.tableSubHead {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #817D6D;
}

.v09 {  font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 9px; }
.v10 {  font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 10px; }
.v11 {  font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 11px; }
.v12 {  font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 12px; }
.v13 {  font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 13px; }
.v14 {  font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 14px; }


.formButton	{ font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: bold; color: #FFFFFF; background-color: #92A1AF; }
.formLabel	{ font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 10px; }
.checkLabel	{ font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: bold;}
.radioLabel	{ font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: bold;}
.formTextArea	{ font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 11px;	}
.inputText	{ font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: bold;}
.inputPass	{ font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: bold;}
.selectMenu	{ font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: bold;}
.selectList	{ font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: bold;}

/* search */
.formSearch { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold;}
.search_form {}
.search_result {}



.nav_table, .nav_table a, .nav_table a:link, .nav_table a:active, .nav_table a:visited, .nav_table a:hover {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 10px;
	color: #4A5966;
	font-weight: normal;
	text-decoration: none;
}
.nav_table a:hover {
	text-decoration: underline;
}

.nav_table_active, .nav_table_active a, .nav_table_active a:link, .nav_table_active a:active, .nav_table_active a:visited, .nav_table_active a:hover {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 10px;
	color: #4A5966;
	font-weight: bold;
	text-decoration: none;
}

.articleList_toptext {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 10px;
}

.articleList_listhead {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: bold;
}


/* CSS for the top level list */
#list_top_ul {
	padding: 3px 0;
	margin-left: 0;
	border-bottom: 1px solid #5E747F;
	font: bold 12px Verdana, sans-serif;
}
#list_top_ul li {
	list-style: none;
	margin: 0;
	display: inline;
}
#list_top_ul li a {
	padding: 3px 0.5em;
	margin-left: 3px;
	border: 1px solid #778;
	border-bottom: none;
	background: #D7DEE5;
	text-decoration: none;
}
#list_top_ul li a:link { color: #5E747F; }
#list_top_ul li a:visited { color: #5E747F; }
#list_top_ul li a:hover {
	color: Black;
	background: #92A1AF;;
	border-color: #227;
}
#list_top_ul li a#list_top_active_link, #list_top li a#list_top_home_active_link {
	background: white;
	border-bottom: 1px solid white;
}

/* CSS for the currect level list */
#list_level ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
}
#list_level li { margin: 0 0 1px 0; }
#list_level a {
	display: block;
	padding: 2px 2px 2px 24px;
	border: 1px solid #92A1AF;
	width: 160px;
	background-color: #B7C2D0;
}
#list_level a:link, #list_level_ul a:visited {
	color: Black;
	text-decoration: none;
}
#list_level a:hover {
	border: 1px solid #92A1AF;
	background-color: #FF8C00;
	color: Black;
}
#list_level_parent a:link, #list_level_parent a:visited, #list_level_parent_link a:hover {
	border: 1px solid #92A1AF;
	background-color: #FF6600;
	color: White;
}

Thank you for any tips.

Maleika

[kohoutek]

Ok, figured it out. Thanks.

[Paul O'B]

Is the css code clean and cross browser compatible? I am especially worried about MAC users who use older browsers. So, I was hoping that maybe you know whether the bit of css code (it is mostly adapted from your samples

Hi,

Glad you sorted your other problems out as I have been away for most of the weekend.

Ie 5 mac has problems with the 100% height on the html,body {height:100%} so you should use the mac hiding technique which can be found on the main demo but is reproduced below.

/* commented backslash mac hiding hack \*/ 
html {height:100%;} 
/* end hack */ 
body {height:100%}

This means it won't have the 100% height feature but will work as normal. It doesn't seem possible to get ie5mac to behave with 100% (without a great deal of help).

Safari doesn't like the 100% heigh either and if you look at the main 3 col demo there is a hack in safari in placing a 100% float with no width to hold the page open.

I'm inclined to just let these browsers forego the 100% height for the sake of keeping things simple but the code is in the demo for safari should you wish to use it.

Any other problems with display will be the usual mac problems and nothing to do with this type of layout and will have to be worked through accordingly. You may find that the page displays ok but my mac isn't connected to the net at the moment so I can't check for you.

Hope that helps.

Paul

[kohoutek]

Ah, that's great Paul. Thanks for taking the extra time to look into this. I wish users would see reason and at least update their browsers every now and then. I do know that newever MAC browsers (new Safari and Firefox) are 100% compatible with modern design techniques as they also get my heavily modified vbulletin displayed correctly. But users with older browser versions on a Mac have huge problems. I wish there was some automatic browser updating when you get online. That way people wouldn't have to bother to update their browsers manually as many still don't really see a reason to. lol. Ah, utopia.

[kohoutek]

Hmm... I am most confused as to what code in the 3 Column layout is for Safari? I just checked the css of the first link of your sticky tutorial thread and cannot find it there. Probably because I don't know what the code looks like.

[Paul O'B]

Hi,

Its here

#minHeight{float:left;width:0px;height:100%;margin-bottom:-52px;} /*safari wrapper thanks to Tim Connor  - 52px is the space for the footer - adjust to suit*/
</style>
</head>
<body>
<div id="minHeight"></div><!--do not nest and must come first  safari 100% height --> 
<div id="outer">

Its basically a 100% spacer and while I don't like using an extra empty div, it does seems to do the job.

Paul