Printable View
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??
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;
}
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:
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.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 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:
Use overflow:hidden on the parent or if you want visible overflow then use the clearfix method (see faq on floats - see my sig).Code:<p class="clear"><br />
<br />
</p>
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.
Don;t go straight form a block level to an inline element if you can help it.Code:<ul class="mid_list">
<li>
<h1 class="headerTitle">Leaderboard</h1>
</li>
The span should really be a p element as it is not part of the same sentence as the ul.Code:</ul>
<span class="read_more"> <img src="http://members.incentiveusa.com/awardpages/propel5/test/css/images/Down_Arrow.gif" alt="" border="0" /> <img src="http://members.incentiveusa.com/awardpages/propel5/test/css/images/Up_Arrow.gif" alt="Up" width="18" height="16" border="0" /> </span>
Don't use breaks to make space:
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.Code:<h4 class="footerCopyright">Copyright © 2011, ASIM. All Rights Reserved.<br />
</h4>
Hope that helps :)
Thank you so much for your help!!!