SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot biggie2's Avatar
    Join Date
    Feb 2006
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form won't appear correctly in IE6,7

    at my site here, i have two issues;

    First) i don't know how to get the purple login form to appear within my banner area in IE6 AND IE7. It's fine in Firefox.

    Second) I don't know how to decrease the left padding of my listed 123 text bullet items on the right hand side. For some strange reason, when I decrease the padding for the "3 East Steps", the padding for the 3 items also decrease. Not sure why? I just want to decrease the padding for the bulleted items.
    Code CSS:
     
    .login {
    	width: 200px;
    	height: 250px;
    	float: left;
    	display: inline;
    	}
     
    fieldset {
    	clear: both;
    	display: block;
    	color: #fff;
    	font-size: 1em;
    	width: 200px;
    	}
     
    #loginform {
    	position: absolute;
    	margin-top: 40px;
    	border: 0;
    	background-color: #9966FF;
    	}	
     
     
    .photo  {
    	width: 350px;
    	height: 250px;
    	overflow: hidden;
    	display: inline;
    	float: left;
    	margin-left: 50px;
    	}
     
    .step123  {
    	display: inline;
    	float: left;
    	height: 250px;
    	width: auto;
    	}
     
    .loginform {
    	padding: 20px 0 10px 20px;
    	font-size: .8em;
    	color: white;
    	}
     
    /*************** Navigation Menu *************/
    h2.step123 {
    	font-size: 1.2em;
    	font-weight: bold;
    	color: #fff;
    	padding: 10px 0 0 20px;
    	}
    h2.login {
    	font-size: 1.2em;
    	font-weight: bold;
    	color: #fff;
    	padding: 10px 0 0 20px;
    	}	
     
    .step123 ul {
    	margin-top: 30px;
    	}	
     
    .step123 ul li {
    	font-size: 1.1em;
    	font-weight: bold;
    	color: #fff;
    	}
     
    li.step123a, li.step123b, li.step123c {
    	padding-right: 5px;
    	padding-bottom: 5px;
    	}
     
    li.step123a {
    	list-style-image: url(images/1bullet.gif);
    	list-style-type: none;
    	}
    li.step123b {
    	list-style-image: url(images/2bullet.gif);
    	list-style-type: none;
    	}
    li.step123c {
    	list-style-image: url(images/3bullet.gif);
    	}

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    The loginform will go in the right position if you used top instead of margin-top.

    Code:
    #loginform {
        position: absolute;
        top: 40px;
        border: 0;
        background-color: #9966FF;
        }
    You have some badly nested comments above that IE doesn't like.
    Code:
        <!--end logo-->
        <!-- <div id="navmenu">
                <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="/#">Info</a></li>
                <li><a href="#">Contact Us</a></li>
                </ul>
        
        </div><!--end navmenu-->
        -->
    Don't nest the comments because it confuses IE.

    The easy steps is misplaced because you have used the same class for different items. The steps123 class is floated and has a height of 250px which means that it styles are carried into the h2.steps123. You should have used a different class or over-ruled the styles you didn't want.

    Code:
    h2.step123 {
        font-size: 1.2em;
        font-weight: bold;
        color: #fff;
        padding: 10px 0 0 20px;
        float:none
        }
    .step123 ul {
        margin:30px 0 0 50px;
        }

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The main problem with the login form is you assigned the .login class to the h2 as well as the div, resulting in the h2 being too high, therefore requiring the absolute positioning as a hack..

    If you remove the login class from the h2
    Code:
    		<div class="login">
    		<h2>Seller's Login</h2>
    and refer to the h2 in the css via it's parent
    Code:
    .login h2 {
    	font-size: 1.2em;
    	font-weight: bold;
    	color: #fff;
    	padding: 10px 0 0 20px;
    	}
    you can then get rid of the absolute positioning and clear
    Code:
    fieldset {
    	color: #fff;
    	font-size: 1em;
    	width: 200px;
    	}
    	
    #loginform {
    	margin-top: 40px;
    	border: 0;
    	background-color: #9966FF;
    	}


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
  •