#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    1
    Rep Power
    0

    Slight footer issues in Internet Explorer


    Hey, I have just about finished this website here except for the footer issue in Internet Explorer.

    My main issue is that I'm limited to a Macbook Pro right now, I have VM Fusion but haven't been able to use my external harddrive with my virtual machine on it and have no other way to test in IE. Browsershots has it's limitations, haha.

    Anyway, it displays fine in WebKit and Firefox, but internet explorer is being real finnicky. If I have to I can resort to calling in a modified footer strictly for IE, but then I have to go design a footer for it down at the library so i can use on of their computers to test it. Thought I'd try posting a question here and see if anyone could spot something in my CSS that may not be working with IE.

    Thanks in advance, really appreciated.


    The link is http://www.laserbodysculpting.ca/beta/
    The screenshots in IE are MSIE7.0 and IE6.0 .

    I'm using the following DIV structure. (http://pastebin.com/meef27b4)
    Code:
    <div id="footer">
    	<div id="fcont">
    			<div id="f1" class="fwrap"><h2>Newsletter</h2>
    			...
    			</div>
    
    			<div id="f2" class="fwrap"><h2>Map</h2>
    			...
    			</div>
    
    			<div id="f3" class="fwrap"><h2>Contact</h2>
    			...
    			</div>
    	</div>
    
    	<div id="minifooter"> 
    		...
    	</div>
    </body>
    </html>
    Here is the CSS
    Code:
    #footer {
    	width: 100%;
    	height: 270px;
    	position: static;
    	clear:both;
    	text-align: center;
    	border-top:solid 1px #414243;
    	background:#9a9a9a;
    	letter-spacing: 0.2em;
     	filter:alpha(opacity=90);
    	-moz-opacity:0.9;
    	-khtml-opacity: 0.9;
    	opacity: 0.9; 
    }
    
    			#footer h2{
    				font-size: 15px;
    				color: #414243;
    				padding:0 0 .5em .1em;
    		}
    			.info {
    				color:#fff;
    				}
    			.map {
    				border: 1px #414242 solid; 
    				margin: 2px;
    				}
    				
    			#footer h3{
    				font-size:10px;
    				padding:0 0 .5em 0;
    				letter-spacing:5px;
    				color:#414243;
    				font-weight:bold;
    			}
    	#fcont {
    	width:100%;
    	margin-left:200px;
    	overflow:auto;
    	}
    	
    	#minifooter {
    	clear:both;
    	width: 100%;
    	height: 15px;
    	padding-bottom:10px;
    	border-top:solid 1px #000;
    	background:#414243;
    	color: #fff;
    	letter-spacing: 0.2em;
    	}
    
    	#minifooter a:hover {
    	color:#fff;
    	}
    	
    	#f1 {
    	display: inline;
    	float:left;
    	text-align: left;
    	position: relative;
    	margin-bottom: 10px;
    	margin-top: 10px;
    	width: 300px;
    	}
    	
    	#f2 {
    	display: inline;
    	text-align: left;
    	float:left;
    	position: relative;
    	margin-top: 10px;
    	width: 300px;
    	}
    	
    	#f3 {
    	display: inline;
    	text-align: left;
    	float:left;
    	position: relative;
    	width: 300px;
    	margin-top: 10px;
    	}
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, freshjives.

    The end tags for the anchors in the #f2 element are missing. Missing end tags is a common cause for wrongly colored text.

    I suggest you read Tips on Debugging Layouts. You might also find 10 Things You Might Not Know About Using CSS helpful.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo