Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Internet Explorer how can i fix alignment problems with IE?

    http://dev.edubnetwork.com/scottscooling/

    uname scotts
    pword coolingfans

    Looks fine in Safari and Firefox, in IE everything shifts around a bit.. but the biggest issue is the buttons dont line up with the welcome_box background image as they should.

    the source

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
    <head>
    	<title>Scotts Cooling Fans  
    	    </title>
    	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    	<meta name="description" content="The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible." />
    	<meta name="keywords" content="The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible." />
    	<meta name="robots" content="index, follow" />
    	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    
    </head>
    <body>
    <div id="container">
    
    <div id="header">
    
    <div id="boxtab-blue">
        <ul>
              <li  class="first" ><a  href="?section=fans"><span>Cooling Fans</span></a></li>
              <li ><a  href="?section=misc"><span>Miscellaneous Parts</span></a></li>
              <li ><a  href="?section=company_profile"><span>Company Profile</span></a></li>
    
              <li  class="last" ><a  href="?section=contact"><span>Contact</span></a></li>
             </ul>
        </div>
    </div>
    
    <div id="colmask">
    					
    	<div id="homecontent">
    	<div id="welcomebox">
    <div id="welcometop"></div>
    <div id="welcomebottom">
    <ul class="cssmenu">
    
    	<li class="volt6"><a href="?section=fans&amp;page=6v" title="6 Volt"><span class="displace">6 Volt</span></a></li>
    	<li class="volt12"><a href="?section=fans&amp;page=12v" title="12 Volt"><span class="displace">12 Volt</span></a></li>
    	<li class="volt24"><a href="?section=fans&amp;page=24v" title="24 Volt"><span class="displace">24 Volt</span></a></li>
    </ul>
    </div>
    </div>
    
    	</div>
                        
    	
    </div>
    
    <div id="footer">
    	  	<ul>
            	<li><a href="?section=home">Home</a></li>
                <li><a href="?section=fans">Products</a></li>
                <li><a href="?section=company_profile">About</a></li>
                <li><a href="?section=contact">Contact</a></li>
                <li><a href="?section=contact&amp;page=order_form">Order</a></li>
    
            </ul>
    <p>Scotts Cooling Fans | <strong>1 (800) 272 - FANS (3267)</strong> | <a href="mailto:contact@scottscoolingfans.com">contact@scottscoolingfans.com</a></p>
      
    </div>
    
    </div>
    
    </body>
    </html>



    the CSS

    Code:
    /*  */
    	/* General styles */
    	body {
    	margin:0;
    	padding:0;
    	border:0;			/* This removes the border around the viewport in old versions of IE */
    	width:100%;
    	min-width:1000px;		/* Minimum width of layout - remove line if not required */
    	/* The min-width property does not work in old versions of Internet Explorer */
    		font-size:90%;
    	background-color: #FF0;
    	/*background-image: url(images/bg3.png);*/
    	background-attachment: fixed;
    	background-repeat: repeat-x;
    	background-position: left top;
    	font-family: Arial, Helvetica, sans-serif;
    	}
    	a {
    		color:#369;
    	}
    	a:hover {
    		color:#ff0000;
    		text-decoration:none;
    	}
    	h1, h2, h3 {
    		margin:.8em 0 .2em 0;
    		padding:0;
    	}
    	p {
    		margin:.4em 0 .8em 0;
    		padding:0;
    	}
    	img {
    		margin:10px 0 5px;
    	}
    	/* container style and settings */
    	#container {
    	width: 100%;
    	margin: 0px auto;
    	float: none;
    	position: relative;
    		}
    	/* Header styles */
    	#header {
    	clear: both;
    	width: 100%;
    	margin-top: -15px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    	background-image: url(images/headerlogo4.png);
    	background-repeat: no-repeat;
    	background-position: center top;
    	}
    	
    	/* 'widths' sub menu */
    	#layoutdims {
    		clear:both;
    		background:#eee;
    		border-top:4px solid #000;
    		margin:0;
    		padding:6px 15px !important;
    		text-align:right;
    	}
    	/*no quirks mode divs*/
    	#colmask {
    		position:relative;	/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
    		clear:both;
    		float:left;
    		width:100%;			/* width of whole page */
    		overflow:hidden;		/* This chops off any overhanging divs */
    		background:#FFF; /*left column bg color */
    		}
    	#colmid {
    	float:left;
    	width:200%;
    	position:relative;
    	left:200px;    
    	border-left: 1px dashed #bbb;
    	min-height: 400px;
    	background-color: #FFF; /* Centre column background colour */
    	background-image: url(images/contentbg.png);
    	background-attachment: fixed;
    	background-repeat: no-repeat;
    	background-position: center center;
    	}
    	#colright {
    		float:left;
    		width:100%;
    		position:relative;
    		left:50%;
    		margin-left:-400px;
    		background:#FFF;    	/* Right column background colour */
    		border-left: 1px dashed #bbb;
    		min-height: 400px;
    	}
    	#col1wrap {
    		float:right;
    		width:50%;
    		position:relative;
    		right:100%;
    	
    	}
    	#col1pad {
    		margin:0 15px 0 415px;
    		overflow:hidden;
    	}
    	#col1 {
    		width:100%;
    		overflow:hidden;
    		padding-bottom: 10px;
    	
    	}
    	#col2 {
    		float:left;
    		width:180px;
    		position:relative;
    		margin-left:-50%;
    		left:215px;
    		overflow:hidden;
    	}
    	#col3 {
    		float:left;
    		width:170px;
    		position:relative;
    		left:15px;
    		overflow:hidden;
    	
    		}
    	/*Left-Column Styles*/
    	#leftnav {
    	margin:0 auto;
    	}
    	
    	/* Footer styles */
    		#footer a:hover {
    		color:#fff;
    		text-decoration:none;
    		}
    	#footer {
    	clear:both;
    	float:left;
    	width:100%;
    	background-image: url(images/footerbg.png);
    	background-repeat: repeat-x;
    	background-position: top;		
    	}
    	#footer p {
    	margin:0;
    	text-align: center;
    	color: #FFF;
    	padding-top: 0px;
    	padding-right: 10px;
    	padding-bottom: 10px;
    	padding-left: 10px;
    }
    
    	
    	#footer ul {
    	list-style: none;
    	padding: 0;
    	position: relative;
    	text-align: center;
    	}
    	#footer li {
    	margin: 0;
    	padding: 10px;
    	display: inline;
    	list-style-type: none;
    	}
    
    	/* NEW TAB STYLE*/
    
    
    	/* -------------------------------------------------- */
    	/* boxtab-blue */
    	/* -------------------------------------------------- */
    	#boxtab-blue {
    		padding-top: 175px; /* header size / distance from top */
    		background: url(images/tabbg6.png) bottom repeat-x;
    		width:100%;
    		overflow:hidden;
    		font-family:Verdana, Geneva, sans-serif;
    		position: relative;
    	}
    	#boxtab-blue ul {
    		float:left;
    		margin:0;
    		padding:0;
    		list-style:none;
    		position:relative;
    		left:50%;
    		text-align:center;
    	}
    	#boxtab-blue ul li {
    		display:block;
    		float:left;
    		list-style:none;
    		margin:20px 0 0 0;
    		padding:0;
    		position:relative;
    		right:50%;
    	}
    	#boxtab-blue ul li a {
    		display:block;
    		float:left;
    		margin:0 1px;
    		padding:5px 10px;
    		background:#fff;
    		text-decoration:none;
    		color:#000;
    		border-top:1px solid #333;
    		border-left:1px solid #333;
    		border-right:1px solid #333;
    		position:relative;
    		bottom:1px;
    	}
    	#boxtab-blue ul li a:hover {
    		background:#369;
    		color:#fff;
    	}
    	#boxtab-blue ul li.active {
    		margin-top:10px;
    	}
    	#boxtab-blue ul li.active a,
    	#boxtab-blue ul li.active a:hover {
    		position:relative;
    		bottom:0;
    		padding:10px;
    		background:#fff;
    		color:#000;
    		font-weight:bold;
    	}
    	/* homepage styles */
    	/* homepage styles */
    	#colmask #homecontent {
    	background-color: #FF0;
    	height: 430px;
    	width: auto;
    }
    	#colmask #homecontent img{
    	margin-top: -8px;
    	padding: 0;
    
    }
    
    /*
    *	CSS ROLLOVER SETUP
    */
    ul.cssmenu {
    	list-style: none;
    	padding: 0px;
    	margin-left: 33px;
    	}
    
    .displace {
    	position: absolute;
    	left: -5000px;
    	}
    
    ul.cssmenu li {
    	float: left;
    	}
    
    ul.cssmenu li a {
    	display: block;
    	width: 245px;
    	height: 238px;
    	background: url('images/home_sprite.png');
    	}
    
    /*
    *	Normal Links
    */
    ul.cssmenu li.volt6 a {
    	background-position: 0 0;
    	}
    
    ul.cssmenu li.volt12 a {
    	background-position: -245px 0;
    	}
    
    ul.cssmenu li.volt24 a {
    	background-position: -490px 0;
    	}
    
    /*
    *	Hover Links
    */
    ul.cssmenu li.volt6 a:hover {
    	background-position: 0 -238px;
    	}
    
    ul.cssmenu li.volt12 a:hover {
    	background-position: -245px -238px;
    	}
    
    ul.cssmenu li.volt24 a:hover {
    	background-position: -490px -238px;
    	}
    
    /*
    *	Clicked Links
    */
    ul.cssmenu li.volt6 a:active {
    	background-position: 0 -476px;
    	}
    
    ul.cssmenu li.volt12 a:active {
    	background-position: -245px -476px;
    	}
    
    ul.cssmenu li.volt24 a:active {
    	background-position: -490px -476px;
    	}
    
    
    #welcomebox {
    	background-image: url(images/welcome_box2.png);
    	background-repeat: no-repeat;
    	height: 430px;
    	width: 800px;
    	margin: 0px auto;
    }
    #welcomebottom {
    	margin-top: -14px;
    	height: 282px;
    	width: 800px;
    
    }
    #welcometop {
    	height: 148px;
    	width: 800px;
    
    }

    and as a side note, but less important... any suggestion on cleaning up the code a bit?

  • #2
    Regular Coder Jazzo's Avatar
    Join Date
    Apr 2008
    Location
    New York City
    Posts
    164
    Thanks
    20
    Thanked 2 Times in 2 Posts
    Try using relative margins instead of absolute margins. Ems are always good.
    ~Julian
    14 y/o web developer, drummer, and Bridge player

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    i dont see any absolute positioning in my css... at least related div that is out of place. also, i cant use ems because the image is not in ems, unless there is a way to convert. did you look at the site before answering the question? :-/

    2 other people i had look at it, had no problems viewing it. perhaps its a specific version of ie? is it just my version of ie and the ie renderer addon i have?

  • #4
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    hrmm.. seems like the problem fixed itself.. anyone else see what im talking about?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •