SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float problem in Firefox

    I am fairly new to CSS and am trying to complete this template. Attached are the HTML and CSS for the page. As you can see there should be a white "tab" floating above the banner in the upper right corner, however in Firefox it is floating to the left. I have it positioned absolute and with a fixed width... any ideas??
    Attached Files Attached Files

  2. #2
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the section of CSS that I'm struggling with. The #main_right_panel is below the .main_right_login_details which is the white tab that floats above the top banner. Here is a link to the site to see what I'm talking about.

    http://members.incentiveusa.com/awar...est/index.html


    Code:
    .main_right_login_details {
    position:absolute;
        width: 240px;
        margin:0px 0px 0px 35px;
        background:url(images/login_panel.gif) no-repeat;
        height:110px;
        font-size: 10px;
        top:0px;
    
    }
    
    
    .main_right_login_details form {
        margin:0px 0px 0px 0px;
        padding:5px 0px 0px 5px;
        float: right;
    }
    .main_right_login_details h3 {
        margin:0px;
        padding:0px 0px 5px 35px;
        font-size:21px;
        font-weight:normal;
        color:#000;
    }
    span.login_img {
        margin:0px 0px 0px -30px;
        padding:0px 0px 0px -30px;
        position:relative;
        right:35px;
        font-size: 16px;
    }
    
    /* Top Right Box when logged in*/ 
    .main_right_details {
        margin:0px 0px 0px 0px;
        background:url(images/login_panel.gif) no-repeat;
        height:110px;
        font-size: 10px;
        }
    .main_right_details h3 {
        margin:0px; 
        padding:0px 0px 5px 0px; 
        font-size:21px; 
        font-weight:normal; 
        color:#000;
        }
        /* Progress Bar */ 
    .meter-wrap{
        position: relative;
        background-image: url(images/Progress_Bar.jpg);
        
    
    }
    .meter-wrap, .meter-value, .meter-text {    
    /* The width and height of your image */    
    width: 155px; 
    height: 15px;
    border:thin;
    border-color:#000;
    padding: 0px 0px 0px 0px;
    float: right;
    
    }
    .meter-wrap, .meter-value {   
        background: #eee url(images/Progress_Bar.jpg) top left no-repeat;
    border:thin;
    border-color:#000;
    }            
    .meter-text {
        position: absolute;
        top:0;
        left:0;
        padding-top: 1px;
        color: #333;
        text-align: center;
        width: 100%;
    }
    
    span.login_img2 {
        margin:0px 0px 0px -30px;
        padding:0px 0px 0px -30px;
        font-size: 14px;
        }
    span.update_heading {
        margin:0px;
        padding:0px 0px 0px 10px;
        display:block;
        font-size:12px;
        font-weight:bold;
        color:#132f5f;
    }
    
    .main_right_login_details p {
        margin:-2px;
        padding:0px 0px 10px 0px;
        color:#09F;
        position:relative;
        right:35px;
    }
    
        .user_name_details {
        margin:0px 0px 0px 0px;
        padding:0px;
        display:block;
        position:relative;
        right:35px;
    
    }
        .user_name_details label{margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; float:left;  color:#000;  font:11px "trebuchet MS"; font-weight:bold;}
        .user_name_details input {
        margin:0px 0px 8px 7px;
        padding:0px;
        background-color:#fff;
        border:1px #d1dfeb solid;
        width:120px;
        height:18px;
    }
    
    .password_details {
        margin:0px 0px -10px 0px;
        padding:0px;
        display:block;
        position:relative;
        right:35px;
    }
    
    .password_details label{margin:0px; padding:4px 0px 0px 0px; float:left; color:#000; font:11px "trebuchet MS"; font-weight:bold; }
    .password_details input {
        margin:0px 0px 10px 9px;
        padding:0px;
        background-color:#fff;
        border:1px #d1dfeb solid;
        width:120px;
        height:18px;
    }
    
    .remember_details {margin:0px; padding:0px; display:block; }
    .remember_details input {margin:0px 0px 0px 0px; padding:0px; float:right; display:block; }
    
    
    
    #main_right_panel {
        float:right;
        width:190px;
        margin:0px 0px 0px 35px;
        padding:0px 0px 0px 0px;
        
    
    }
    Last edited by Paul O'B; Apr 28, 2011 at 09:07. Reason: code tags added

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

    You basically just need to add a right position to that absolute element to push it into place. Set position:relative on the container and then the element will be placed to the right of the container and not the viewport.

    You have added float to the body which is killing firefox so remove it

    You don;t need the dropshadow div as the image can be placed on the container anyway.

    Pay attention to the changes in bold below:
    Code:
    html,body{margin:0;padding:0}
    body {
        font:13px "trebuchet MS";
        color:#898b8c;
        background-color:#fff;
    /* float removed*/
    }
    #container {
        margin:0px auto;
        width:1000px;
        padding:0 5px;
        background:url(http://members.incentiveusa.com/awardpages/propel5/test/css/images/background_dropshadow.jpg) repeat-y 50% 0;
        overflow:hidden;
        position:relative;
    }
    .main_right_login_details {
        position:absolute;
        width: 240px;
        margin:0px 0px 0px 35px;
        background:url(http://members.incentiveusa.com/awardpages/propel5/test/css/images/login_panel.gif) no-repeat;
        height:110px;
        font-size: 10px;
        top:0px;
        right:5px;
    }
    You've gone a bit overboard on your comments and there's no need to have all those start comments as the class is information enough.

    You can add comments to the end of a container but only do it for the main structural containers and not all container. You have more comments than html and it actually makes it harder to work with. Only comment where necessary especially as comments trip older versions of IE up all the time.


    No need for this:
    Code:
    <p class="clear"><br />
                <br />
            </p>
    Use overflow:hidden on the parent or if you want visible overflow then use the clearfix method (see faq on floats - see my sig).

    Don't wrap divs around uls when there's no need. The ul is a prefectly good container on its own.

    The heading inside your ul needs to be inside a list item as all content must be in the list item in a ul structure.

    Code:
    <ul class="mid_list">
       <li>
          <h1 class="headerTitle">Leaderboard</h1>
       </li>
    Don;t go straight form a block level to an inline element if you can help it.

    Code:
        </ul>
                            <span class="read_more"> <img src="http://members.incentiveusa.com/awardpages/propel5/test/css/images/Down_Arrow.gif" alt="" border="0" />&nbsp;&nbsp;<img src="http://members.incentiveusa.com/awardpages/propel5/test/css/images/Up_Arrow.gif" alt="Up" width="18" height="16" border="0" /> </span>
    The span should really be a p element as it is not part of the same sentence as the ul.

    Don't use breaks to make space:

    Code:
    <h4 class="footerCopyright">Copyright &copy; 2011, ASIM. All Rights Reserved.<br />
    </h4>
    Just use css and add the extra space you need with padding or margin where appropriate. Breaks are never used just to make space. They are used for natural line-breaks such as in poems, addresses, and between form controls.

    Hope that helps

  4. #4
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much for your help!!!


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
  •