SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    P Town
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Working in IE but not Firefox

    Ok, I am pretty new to CSS in terms of using it for layout and am having one of the seemingly simple but maddeningly frustrating problems that have always made me go back to using tables.

    The problem is when I raise the "post_author_container" with margin-top: -35px; Firefox wants to take the text all the way to the left. It is a little hard to explain so take a look at the attached pictures for what I mean. IE gets it right and puts the text just to the right of the avatar.

    Here is my code
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    a.forum_post_poster:link {color: #990000; text-decoration: none; font-size: 25px; line-height:26px; font-family: "Trebuchet MS","Arial","Verdana","sans-serif"; font-weight: normal;}
    a.forum_post_poster:active {color: #990000; text-decoration: none; font-size: 25px; line-height:26px; font-family: "Trebuchet MS","Arial","Verdana","sans-serif"; font-weight: normal;}
    a.forum_post_poster:visited {color: #990000; text-decoration: none; font-size: 25px; line-height:26px; font-family: "Trebuchet MS","Arial","Verdana","sans-serif"; font-weight: normal;}
    a.forum_post_poster:hover {color: #8f8f8f; text-decoration: none; font-size: 25px; line-height:26px; font-family: "Trebuchet MS","Arial","Verdana","sans-serif"; font-weight: normal;}
    
    .post_author_container {
    margin-top: -35px;
    padding-bottom:5px;
    z-index:6;
    }
    .post_score_container {
    margin-top: -22px;
    float:right;
    z-index:6;
    }
    #liquid-round { 
    width:70&#37;;
    margin:0px auto; 
    background:#c1c1c1 url(http://www.sitename.com/img/forum_imgs/post_box_leftline.gif) repeat-y left top;
    } 
    .top { 
    width:100%; 
    height:36px; 
    background:url(http://www.sitename.com/img/forum_imgs/post_box_tleft.gif) no-repeat left top; 
    } 
    .top span { 
    display:block; 
    position:relative; 
    height:36px; 
    background:url(http://www.sitename.com/img/forum_imgs/post_box_tright.gif) no-repeat right top; 
    }
    .center-content { 
    position:relative; 
    background:url(http://www.sitename.com/img/forum_imgs/post_box_rightline.gif) repeat-y right top; 
    padding:1px 1px 1px 1px;
    margin:-1px 0px 0px 0px;
    } 
    .bottom { 
    height:16px; 
    background:url(http://www.sitename.com/img/forum_imgs/post_box_bleft.gif) no-repeat left bottom; 
    } 
    .bottom span { 
    display:block; 
    position:relative; 
    height:16px; 
    background:url(http://www.sitename.com/img/forum_imgs/post_box_bright.gif) no-repeat right top; 
    }
    .avatar {
    margin: -36px 0px 0px -1px;
    border:solid 1px #000000;
    float:left;
    z-index:6;
    }
    .postxt {
    margin-top:-5px;
    padding-left:5px;
    padding-right:5px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:14px;
    line-height:14px;
    color: #650000;
    }
    </style>
    </head>
    <body>
    <BR /><BR />
    <div id="liquid-round">
        <div class="top"><span></span></div>
        <div class="center-content">
            <img class="avatar" src=/img/no-avatar.jpg /><div class="post_author_container"><a href="http://www.sitename.com/user/view_profile.php?uid=2" class="forum_post_poster">Vertex</a></div><div class="post_score_container">Post Score 12 </div>
            <!-- CONTENT BEGIN -->
            <div class="postxt">this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text <BR /> this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text
            </div>
            <!-- CONTENT END -->
        </div>
        <div class="bottom"><span></span></div>
    </div>
    </body>
    </html>
    Attached Images Attached Images

  2. #2
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    P Town
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nevermind I fixed it by putting the avatar in the post_author_container box

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    glad you fixed it so quickly

  4. #4
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE probably did not "get it right" but stumbled into doing what you want. Remember this mantra: "If it works in IE but not Firefox/Opera/Safari, then there is something wrong with the markup."


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
  •