My displays correct in FF3 but not IE7...Please help!

Dev Shed Forums Sponsor:

November 5th, 2009, 11:01 PM

yesyoucant

Registered User

Join Date: Nov 2009

Posts: 3

Time spent in forums: 44 m 34 sec
Reputation Power: 0

My displays correct in FF3 but not IE7...Please help!

Hi all,

There is a serious positioning problem going on with my page. It looks right in Firefox3, but in IE7 the spacing is messed up and the top left photo fails to display. I imagine it has something to do with the padding or margin for my text. Please help! I have validated in both CSS and HTML. Also, can anyone recommend any sort of tool to help with things like this in the future? I am in an intro web class so I failed to cross check browsers, bear with me...

Thanks in advance,
Amanda

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Dachsund Rescue of Houston</title>

<style type="text/css">

body{
background: url(images/background.jpg) no-repeat top center;}

#contain{	
		width: 800px;
		height: 640px;
		margin-left: auto;
		margin-right: auto;
			}
#menu{		width: 466px;
		height: 98px;
		float: right;
		margin-top: 15px;
		}
#dog{		width: 491px;
		height: 257px;
		margin-top: 19px;
		margin-left: 22px;
		
float: left; }
		
/* margin-top is the menu plus the remaining pixels (19) so, from the very TOP of the page. I guess you keep "adding"
*/
		


#community{	float: right;
		background: url(images/community_spot.jpg) no-repeat;
		width: 231px;
		height: 259px;
		margin-top: 19px;
		margin-right: 22px;
		 }

#arrival{	
	clear: right;
	background: url(images/arrivals.png) no-repeat;
	width: 800px;
	height: 286px;
}

.communitytext {
font-family: helvetica;
font-size: 10pt;
color: #000000;
padding: 160px 10px 0 15px; /*up, right, bottom, left */
margin: 5px auto 5px 10px; /*up, right, bottom, left */
}

.arrivaltext {
font-family: helvetica;
font-size: 10pt;
color: #000000;
padding: 105px 10px 0 10px; /*up, right, bottom, left */
margin: 15px 10px 5px 10px; /*up, right, bottom, left */
}

.arrivaltext2 {
font-family: helvetica;
font-size: 10pt;
color: #000000;
padding: 3px 10px 0 10px; /*up, right, bottom, left */
margin: 15px 10px 5px 10px; /*up, right, bottom, left */
}

</style>
</head>
<body>
<div id="contain">
<div id="menu">
<a href="about.html"><img src="images/about_btn.png" alt="About button"  title="About" border="0"/></a> 
<a href="adopt.html"><img src="images/adopt_btn.png" alt="Adopt button"  title="Adopt" border="0"/></a> 

<a href="help.html"><img src="images/help_btn.png" alt="Help button"  title="Help DROH" border="0"/></a> 
<a href="resources.html"><img src="images/resources_btn.png" alt="Resources button"  title="Resources" border="0"/></a> 
<a href="contact.html"><img src="images/contact_btn.png" alt="Contact button"  title="Contact" border="0"/></a> 
</div>
<div id="dog">
<img src="images/jumping.jpg"  alt=""  title="" border="0" /> </div>
<div id="community"> <p class="communitytext">If you love animals, fostering allows you to go through 'em and love a whole bunch of  'em - without having to keep 100 dogs at your house. MORE...</p></div>

<div id="arrival"><p class="arrivaltext">Luke is a happy-go-lucky, love bug. He is between 1-3 yrs old, with black/tan dapple. He is mixed with another breed which we suspect to be a Spaniel or Catahoula. He stands about 11/2 feet tall to the top of the head and weighs 20 lbs. </p> <p class="arrivaltext2"> Luke was rescued at the 11th hour and was emaciated when he came in.With a little bit of love and a lot of food, we found that Luke has a perky, easy-going and affectionate personality. In our house we call him Casanova because everyone who meets him, falls in love with
him. He has an intense alluring stare to draw you in, then he slowly cuddles up next to you, and when you've fallen for him, he covers you with gentle kisses. </p>  <p class="arrivaltext2"> Luke was rescued at the 11th hour and was emaciated when he came in.With a little bit of love and a lot of food, we found that Luke has a perky, easy-going and affectionate personality. In our house we call him Casanova because everyone who meets him, falls in love with
him. </p> 

</div>
</div>
</body>
</html>

November 6th, 2009, 05:24 PM

cranium

Contributing User

Join Date: Jun 2002

Location: close to the edge

Posts: 987

Time spent in forums: 1 Week 2 Days 12 h 7 m 46 sec
Reputation Power: 43

Glad to see you had made sure you stuff was valid, it helps greatly when trying to help. I think you have a case of overengineering.

I would make your links into a list as that is really what they are: a list of links. listomatic (or something like that) has a ton of examples or you can just search google.

Always try to do away w/ floats and absolutes if you can. What you are doing here can be accomplished with the floats, which is what I did. If you want to play with padding, font size, etc go ahead.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Dachsund Rescue of Houston</title>

<style type="text/css">
body {
	background: url(images/background.jpg) no-repeat top center;
}

div {
	margin: 0;
	padding: 0;
}

#contain {	
	width: 800px;
	height: 640px;
	margin-left: auto;
	margin-right: auto;
}

#menu {		
	width: 466px;
	height: 98px;
	float: right;
	margin-top: 15px;
}

#dog {
	padding-left: 505px;
	height: 257px;
	background: url(test.jpg) 0 0 no-repeat;
	clear: right;
	border: 1px solid #c00;
}
</style>
</head>
<body>

<div id="contain">
	<div id="menu">
		<a href="about.html"><img src="images/about_btn.png" alt="About button"  title="About" border="0"/></a> 
		<a href="adopt.html"><img src="images/adopt_btn.png" alt="Adopt button"  title="Adopt" border="0"/></a>		
		<a href="help.html"><img src="images/help_btn.png" alt="Help button"  title="Help DROH" border="0"/></a> 
		<a href="resources.html"><img src="images/resources_btn.png" alt="Resources button"  title="Resources" border="0"/></a> 
		<a href="contact.html"><img src="images/contact_btn.png" alt="Contact button"  title="Contact" border="0"/></a> 
	</div>
	
	<div id="dog">
		<p>If you love animals, fostering allows you to go through 'em and love a whole bunch of  'em - without having to keep 100 dogs at your house. MORE...</p>
	</div>
	
	<div id="arrival">
		<p>Luke is a happy-go-lucky, love bug. He is between 1-3 yrs old, with black/tan dapple. He is mixed with another breed which we suspect to be a Spaniel or Catahoula. He stands about 11/2 feet tall to the top of the head and weighs 20 lbs. </p> <p class="arrivaltext2"> Luke was rescued at the 11th hour and was emaciated when he came in.With a little bit of love and a lot of food, we found that Luke has a perky, easy-going and affectionate personality. In our house we call him Casanova because everyone who meets him, falls in love with him. He has an intense alluring stare to draw you in, then he slowly cuddles up next to you, and when you've fallen for him, he covers you with gentle kisses. </p>  <p class="arrivaltext2"> Luke was rescued at the 11th hour and was emaciated when he came in.With a little bit of love and a lot of food, we found that Luke has a perky, easy-going and affectionate personality. In our house we call him Casanova because everyone who meets him, falls in love with him.</p>
	</div>
</div>

</body>
</html>

Hope this helps,
cranium

Viewing: Dev Shed Forums > Web Design > CSS Help > My displays correct in FF3 but not IE7...Please help!

« Previous Thread | Next Thread »

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump

Free IT White Papers!

How to Present Effectively Online
This white paper offers practical and actionable advice on the key steps that any presenter should consider as they plan and execute a Webinar or online meeting.

Open Source Security Myths
Open Source Software (OSS) is computer software whose source code is available to the general public with relaxed or non-existent intellectual property restrictions (or arrangement such as the public domain), and is usually developed with the input of many contributors.

Power and Cooling Capacity Management for Data Centers
This paper describes the principles for achieving power and cooling capacity management.

Scalable, Fault-Tolerant NAS for Oracle - The Next Generation
For several years NAS has been evolving as a storage alternative for Oracle databases, and for good reason: NAS is quite often the simplest, most cost-effective storage approach for Oracle. Learn about the benefits that HP's approach to scalable NAS brings to Oracle environments in this comprehensive white paper.

Understanding Web Application Security Challenges
This white paper discusses many common threats and preventive measures for Web application security, and explains what you can do to help protect your organization.

More Free IT White Papers!