SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)

    text chopped off in Firefox but not IE

    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:

    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

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Oh, forgot to add the test page:

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

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You have an erroneous bracket in the css which is stopping firefox from reading the clearfooter style.
    Code:
    #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

  4. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

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

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


    Code:
    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:

    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

  6. #6
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Ok, figured it out. Thanks.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    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.
    Code:
    /* 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

  8. #8
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Its here
    Code:
    #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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •