#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Location
    Québec
    Posts
    4
    Rep Power
    0

    Problems with CSS outprint in FireFox


    look at
    http://www.timestranger.net/trunks/test/news/news.php
    in both IE and Firefox, and see the difference. It's really butchered in Firefox, and I REALLY don't see why. My code seems okay.

    source:
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <
    title>my index...</title>
    <
    link rel="stylesheet" type="text/css" href="stylesheet.css" />
    </
    head>
    <
    body class="body">
    {
    start loop}
    <
    div class="content2">
    <
    div class="newsheader"><class="leftalign"><b>{title}</b></p><class="rightalign">{author} - {day} / {month} / {year}</p></div>
    <
    div class="newscontent">{content}</div>
    <
    div class="newsfooter"><class="rightalign"><a href="{commentsurl}">see comments</a></p></div>
    </
    div>
    {
    end loop}
    {
    next page}
    </
    body>
    </
    html
    CSS:
    PHP Code:
     a 
        
    color#000000;
        
    text-decorationunderline;
    }
    a:hover {color#808688;}
    body {
        
    background#F2F0F0;
        
    color#880000;
        
    text-aligncenter;
    }
    div.content {
        
    border1px solid;
        
    margin-top1px;
        
    margin-left0px;
        
    margin-right5px;
        
    padding-left0px;
        
    padding-top2px;
        
    padding-bottom2px;
        
    padding-right2px;
        
    text-aligncenter;
        
    width97%;
        
    border-color#880000;
        
    floatinherit;
    }
    div.content2 {
        
    border1px solid;
        
    margin-top0px;
        
    margin-left0px;
        
    margin-right0px;
        
    padding-left4px;
        
    padding-top2px;
        
    padding-bottom2px;
        
    padding-left2px;
        
    padding-right2px;
        
    text-aligncenter;
        
    width90%;
        
    background-color#C9C9C9;
        
    floatinherit;
    }
    div.newsheader {
        
    margin-left0px;
        
    margin-right0px;
        
    width100%;
        
    background-colorMaroon;
        
    border-bottom1px solid;
        
    padding-bottom3px;
        
    colorwhite;
        
    floatinherit;
    }
    div.newscontent {
        
    text-alignjustify;
        
    padding2px;
        
    colorblack;
    }
    div.newsfooter {
        
    margin-left0px;
        
    margin-right0px;
        
    width100%;
        
    border-colorMaroon;
        
    border-top1px solid;
        
    padding-bottom3px;
        
    colorblack;
        
    floatinherit;
    }
    div.container {
        
    margin-leftauto;
        
    margin-rightauto;
        
    text-aligncenter;
        
    width100%;
    }
    p.rightalign {
        
    float:right;
    }
    p.leftalign {
        
    float:left;

    if anyone could help.. im losing my calm :P
  2. #2
  3. Mad Cow
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Posts
    4
    Rep Power
    0

    It's not Mozilla that's the problem


    IE is notorious for messing up when using CSS. Although it looks ok in IE, it's really IE that is the problem, Firefox is handling it correctly.

    For what you want, check out this article at ALA
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Location
    Québec
    Posts
    4
    Rep Power
    0
    Hmm, maybe I'm a bit slow, but I don't understand how I can align something horizontally without making it leave the box that contains it. I want it in the box, since I want the left text and the right text to be in a red box. If I float, the red box is 1milimeter high and the text is not in that box at all.
    Can someone explain a way?

    p.s I went through the link above, and it doesn't exactly apply here, since they use floats and float doesn't seem to work for me.
    Last edited by Rahan; May 20th, 2004 at 02:53 PM.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Feb 2004
    Location
    Lawrence, Kansas [KU]
    Posts
    1,559
    Rep Power
    15
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Location
    Québec
    Posts
    4
    Rep Power
    0
    Originally Posted by jacktasia
    they both look exactly the same now...
    Yeah, I know. I don't want it to look that way. I want the title to be on the left, and the author-date on the right. All this while staying in the red box. If I use floats, the red box contains nothing anymore (and is 1px high), and the text is lower.
  10. #6
  11. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Code:
    .redbox {
        color: white;
        background-color: some-kind-of maroon;
        }
    
    .author {
        float: right;
        width: 48%;
        text-align: right;
        }
    
    .title {
        float: left;
        width: 48%;
        text-align: left;
        }
    
    .clearing { /*a lot of this is just IE BS*/
        height: 0;
        font-size: 0;
        overflow: hidden;
        margin: 0;
        clear: both;
        }
    
    <div class="redbox">
      <h2 class="title">Hey&hellip;</h2>  <!-- I assume these are immediate sub-headers 
                                               under the page's h1 -->
      <p class="author">rahan - 20/03/2004</p>
      <p class="clearing">&nbsp;</p>  <!-- this could be a br element, but IE sometimes  
                                          has a brain fart -->
    </div>
    See if that won't get you there.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Location
    Québec
    Posts
    4
    Rep Power
    0
    All fixed, I set a height and while not exactly included in the red box, it went in front of it so nothing to whine about. Thank you guys.

IMN logo majestic logo threadwatch logo seochat tools logo