Slight Problem.. Column with IE / Firefox

**chris_unity** · 01-14-2008, 02:27 PM

I am quite capable with XHTML / CSS
but i seem to be making a school boy error?

Could anyone decipher why the column on the right of this website..
cmschester.com/press_releases1.html

is working with IE but not Firefox/Safari

I can't seem to figure it out, i bet its really simple now haha

Cheers
Chris

(posted code below)

HTML

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" lang="en">
	<head>
		<title>Creative Mortgage Solutions - Press Release - CHL Mortgages Joins Panel of Lenders</title>
		<meta http-equiv="Content-Type" content="charset=utf-8">
		<meta name="url" content="">
		<meta name="description" content="">
		<meta name="keywords" content="">
		<meta name="robots" content="index, follow">
		<meta name="copyright" content="Copyright © 2007 Creative Mortgage Solutions. All Rights Reserved.">
		<meta name="author" content="Chris Drury">
		<meta name="language" content="english">
	
		<link rel="Shortcut Icon" type="image/ico" href="favicon.ico">
	
		<link rel="stylesheet" href="css/default.css" type="text/css" media="screen">

	

	
	<body id="aboutUs">

		<div id="container">

			<a href="#main" class="skipContent">Go to content</a>
			
			<div id="logo">
				<h1><a href="index.html">Creative Mortgage Solutions | The non-conforming specialist</a></h1>
			</div>
			
			<div id="topLinks">
				<ul>
					<li><a href="index.html">Home</a>|</li>
					<li><a href="newsletter.html">Newsletter</a>|</li>
					<li><a href="contact_us.html">Contact Us</a></li>
				</ul>
			</div>

			<div id="header">
				<ul class="top">
					<li><a href="accord.html" class="selected">NEWSLETTER</a></li>
				    <li><a href="contact_us.html">CONTACT US</a></li>
				</ul>
				<h2>A Fresh Perspective</h2>
				<p>We believe that relationships mean everything so whenever you see our name you know it stands for trust and excellent service.</p>
				<ul class="bottom">
					<li class="link1"><a href="#">EDGE</a></li>
					<li class="link3"><a href="javascript:;" onClick="MM_openBrWindow('form1.asp','Application','scrollbars=yes,width=775,height=470')"></a></li>
				</ul>
			</div>
			
			<div id="content1">
				<div id="content2">

					<div id="colLeft">
					
						<div id="menu">
							
					  <ul>
								<li><a href="about_us.html">- About us</a></li>
								<li><a href="service_promise.html">- Service Promise</a></li>
								<li><a href="residential_mortgages.html">- Residential Mortgages</a></li>
								<li><a href="second_mortgages.html">- Second Charges </a></li>
								<li><a href="bridging_mortgages.html">- Bridging Finance </a></li>
								<li><a href="commercial_mortgages.html">- Commercial Mortgages</a></li>
								<li><a href="accord.html">- Panel of Lenders</a></li>
                                <li><a href="download_centre.html">- Download Centre</a></li>
                                <li><a href="press_releases1.html" class="selected">- Press Releases</a></li>
                                <li><a href="privacy_policy.html">- Privacy Policy</a></li>
						  </ul>				
						</div>
                        
                        <div id="menu">
							<h3>Press Releases </h3>                            
							<ul>
								<li><a href="press_releases1.html" class="selected">- CHL MORTGAGES Join CMS Panel </a></li>
						  </ul>
                            <br/>
					  </div>
						
						<div id="login">
								<h3>Member Login:</h3>
								<form id="loginForm">
									<dl>
										<dd>
						
											<label for="name">Member Name:</label>
											<input id="name" name="name" value="" size="30" type="text">
										</dd>
										<dd>
											<label for="password">Password:</label>
											<input id="password" name="password" value="" size="30" type="password">
											<input value="Login" class="button" type="submit">
										</dd>
										<dd>
											<a href="">Forgotten your password >>></a>										</dd>
									</dl>
								</form>
						</div>
						
						<div id="important">
							<h3>IMPORTANT</h3>
							<p>
								The information contained within this 
								website is not intended for members of 
								the public but solely for professional 
								mortgage intermediaries. No information 
								is intended as a consumer advertisement. 
								The content is strictly for mortgage 
								intermediaries only							</p>
						</div>
					</div>
		
					<div id="colRight2">
		
						
						
		<h1>CHL MORTGAGES JOINS  PANEL OF LENDERS </h1>
        <img src="images/chl_logo.jpg" /> <br />
        <br />
        <p>CHL Mortgages, the Fleet-based specialist lender, has today (17th December 2007) been appointed to Creative Mortgage Solutions’ lender panel.</p>
<p>Chester-based packagers Creative Mortgage Solutions, will now be able to offer its intermediaries access to CHL’s buy-to-let and self-certification homeloan range.  CHL’s provides a flexible product range with unique criteria, coupled with a reputation for the quality of its service.</p>

<p><strong>Trevor Child</strong>, Head of Sales and Marketing at CHL Mortgages, commented: </p>

<p><i>“We are delighted to gain access to the Creative Mortgage Solutions’ lender panel.  CHL’s range of leading buy-to-let and self-cert products already have a wide intermediary audience and this new development will bring them to even more mortgage brokers.</i></p>
<p><i>“CHL is focused on the intermediary marketplace and our product criteria reflect the needs of today’s borrower.  We pride ourselves on our service levels and, at a time when our competitors have been struggling, CHL is achieving record levels of business.  We are looking forward to a number of new developments in 2008 and believe we can offer those intermediaries using Creative’s packaging services a variety of product and criteria they will be unable to find anywhere else.”</i></p>
					<ul>
                      <li>CHL Mortgages has been offering specialist mortgage solutions since 1992. It is based in Fleet, Hampshire and is part of the  Irish Life &amp; Permanent Group.</li>
					  <li>CHL Mortgages is a pioneer of both buy-to-let mortgages and self-certification mortgage products for the self-employed. It has now grown to be a leading player in these sectors.</li>
					  <li>CHL Mortgages offers a range of buy-to-let and home loan products for distribution through intermediaries.</li>
					  <li>CHL products are designed to meet the needs of various customers, ensuring CHL Mortgages lends responsibly and treats customers fairly.</li>
					  <li>In 2007 CHL launched its Commercial Lending division, CHL Commercial.</li>
					  </ul>
					<h5>CHL Mortgages</h5>
					<p>Admiral House, Harlington Way, Fleet, Hampshire GU51 4YA<br />
					  Tel: <span class="ff">01252 812271</span><br />
					  Fax: <span class="ff">01252 811826</span></p>
					<p>Website: <a href="http://www.chlmortgages.co.uk/" target="_blank">www.chlmortgages.co.uk</a></p>
					</div>
					<div class="end"></div>
				</div>
			</div>
		</div>
		
<div id="footer">
			
			<p>Creative Mortgage Solutions Ltd, Registered in Cardiff, Registered No : 3921027, Registered Office : St John's Chambers, Love Street, Chester CH1 1QN.</p>
			
			<p>Copyright © 2007. All rights reserved.</p>
	</div>
			
</body>
</html>

CSS in next post

THANKS ALOT

**chris_unity** · 01-14-2008, 02:27 PM

Code:

/* CSS DISPLAY SCREEN CHESTER FESTIVAL 2007 */

/* ---------- 1.0 MISC ---------- */

*   {
	padding:0;
	margin:0;
	border:0;
	}
	
body {
	color:#535353;
	font: 0.7em "Verdana", Arial, Tahoma, Helvetica, Sans-Serif;
	background:url(images/body.png);
	padding:20px 0 10px 0;
	text-align:center;
	}

.end {
	clear:both;
	list-style:none;
	font-size:1em;
	text-indent:-2000em;
	line-height:0;
	display:block;
	}

#container {
	width:750px;
	margin:0 auto;
	position:relative;
	border:1px solid #000;
	z-index:5;
	text-align:left;
	padding:25px;
	background:#fff;
	}

.skipContent {
	position:absolute;
	top:-100px;
	z-index:100;
	text-decoration:none;
	font-weight: normal;
	font-size: 1.0em;
	line-height: 1.0em;
	text-indent: -2000em;
	}

/* ---------- 2.0 LOGO ---------- */
#logo{
	float:right;
	width:247px;
	}

#logo h1 {
	font-weight: normal;
	font-size: 1.0em;
	line-height: 1.0em;
	text-indent: -2000em;
	display:block;
	width:247px;
	height:48px;
	background:url(images/logo_cms.png);
	}

#logo h1 a {
	width:247px;
	height:48px;
	display:block;
	text-decoration:none;
	cursor:pointer;
	}


/* ---------- 5.0 CONTENT ---------- */

#content1 {
	width:750px;
	background:url(images/content_repeat.png) repeat-y;
	}

#content2 {
	width:750px;
	background:url(images/content_top.png) no-repeat;
	}

	/* ---------- 5.1 COLLEFT ---------- */
	
	#colLeft {
		width:257px;
		float:left;
		padding-right:25px;
		}

			
		/* ---------- 5.1.1 MENU ---------- */
		#menu {
			background:url(images/dash.png) 0 100% repeat-x;
			padding:15px 10px 15px 17px;
			}
		
		#menu h3 {
			font-weight: normal;
			font-size: 1.0em;
			line-height: 2.0em;
			color:#FF6309;
			/*text-indent: -2000em;*/
			/*display:block;*/
			/*position:absolute;*/
			}
			
		#menu li {
			margin-bottom:5px;
			list-style:none;
			}
		
		#menu li a {
			color:#01265A;
			text-decoration:none;
			}
		
		#menu li a.selected, #menu li a:hover {
			text-decoration:none;
			color:#FF6309;
			}


	/* ---------- 5.1.2 LOGIN ---------- */
	
		#login {
			background:url(images/dash.png) 0 100% repeat-x;
			padding:13px 10px 8px 17px;
			}
			
		#login h3 {
			color:#01265A;
			font-size:1.1em;
			margin-bottom:0.8em;
			}

		#login dd {
			margin-bottom:0.9em;
			}

		#login label {
			color:#999999;
			margin-bottom:0.3em;
			display:block;
			}

		#login input {
			width:110px;
			border:1px solid #000;
			height:18px;
			}

		#login input.button {
			width:48px;
			height:20px;
			border:0;
			background:url(images/bt_login.png) no-repeat;
			font-weight: normal;
			font-size: 1.0em;
			line-height: 1.0em;
			text-indent: -2000em;
			cursor:pointer;
			margin-left:5px;
			position:relative;
			top:1px;
			}

		#login a {
			color:#FF6309;
			text-decoration:none;
			}
		
		
		/* ---------- 5.1.3 IMPORTANT ---------- */
		
		#important {
			background:url(images/important_repeat.png);
			margin-top:18px;
			}

		#important h3 {
			background:url(images/important_top.png) no-repeat;
			font-size:1.0em;
			font-weight:normal;
			color:#fff;
			padding:5px 0 0 30px;
			}

		#important p {
			color:#FF6309;
			padding:12px;
			line-height:1.3em;
			}



	
	/* ---------- 5.2 COLRIGHT ---------- */
	
	#colRight {
		width:467px;
		float:right;		
		padding-top:30px;		
		}

	#colRight h1 {
		color:#FF6309;
		font-size:1.5em;
		font-weight:normal;
		margin-bottom:1.0em;
		}

	#colRight h3 {
		color:#01265A;
		font-size:1.2em;
		margin-bottom:1em;
		}

	#colRight p {
		line-height:1.6em;
		margin-bottom:1.4em;				
		}

	#colRight ul {
		margin-bottom:1.4em;
		}

	#colRight li {
		padding-left:15px;
		list-style:none;
		margin-bottom:0.2em;
		background:url(images/square_orange.png) 0 50% no-repeat ;
		}

	#colRight a {
		color:#FF6309;
		text-decoration:none;
		}

	#colRight a:hover {
		text-decoration:underline;
		}



/* ---------- 5.3 COLRIGHT2 ---------- */
	
	#colRight2 {
	width:467px;
	float:right;
	padding-top:30px;
	position: relative;
	margin: 0px;
	clear: left;
		}

	#colRight2 h1 {
		color:#FF6309;
		font-size:1.5em;
		font-weight:normal;
		margin-bottom:1.0em;
		}

	#colRight2 h3 {
		color:#01265A;
		font-size:1.2em;
		margin-bottom:1em;
		}

	#colRight2 p {
		line-height:1.6em;
		margin-bottom:1.4em;				
		}

	#colRight2 ul {
		margin-bottom:1.4em;
		}

	#colRight2 li {
		padding-left:15px;
		list-style:none;
		margin-bottom:0.2em;
		background:url(images/square_orange.png) 0 50% no-repeat ;
		}

	#colRight2 a {
		color:#FF6309;
		text-decoration:none;
		}

	#colRight2 a:hover {
		text-decoration:underline;
		}



		/* ---------- 5.2.1 SELECT LENDERS ---------- */

		.selectLenders {
			margin:0 0 30px 0;
			}

		.selectLenders select {
			border:1px solid #000;
			margin:0 0 0 10px;
			color:#535353;
			font-size:0.9em;
			}








/* ---------- 6.0 FOOTER ---------- */
	#footer {
		width:798px;
		color:#fff;
		font-size:0.8em;
		position:relative;
		margin:10px auto;
		}
	
	#footer p {
		margin-bottom:1.5em;
		text-align:justify;
		}
	
	.ff {color: #FF4F04}

**ExplainThat** · 01-14-2008, 04:25 PM

Chris,

I haven't looked at all your CSS - not enough time - but looking at what you are getting in IE & comparing it with Firefox I wondered if there isn't an issue with default margins being differnt for your body element in different browsers. I have run into issues with this every once in a while and find it best to specify margin:0 for the body element. It has been a while since I checked but the last time I did I found that unlike other elements browsers tend to use a, browser-dependent, non-zero default for the body element - could be enough to throw the rest of your design out of joint.

Thread: Slight Problem.. Column with IE / Firefox

Thread Tools

Search Thread

Slight Problem.. Column with IE / Firefox

Bookmarks

Bookmarks

Posting Permissions