• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 779
  • Last Modified:

Right Float Not Displaying properly in IE7

I'm working on a site for a student project and have hit my first CSS bug.  I have floated img tags to the right, and they display properly in Safari and Firefox, but not in IE7.  I know IE has float bugs, but I don't know how to address them.  The page can be viewed at http://webmaster.cpd.fsu.edu/heytricia/website/dogs.htm and I've copied in the code from my stylesheet.



@charset "UTF-8";
body {
	background: #FFFFFF;
	font: 1em Tahoma, serif, sans-serif, monospace;
	color: #EEEEEE;
	margin: 0px;
	padding: 0px;
}
a:link {
	color: #E69AFA;
	text-decoration: none;
}
a:visited {
	color: #E69AFA;
	text-decoration: none;
}
a:hover {
	color: #EEEEEE;
	text-decoration: none;
}
p {
	padding-left: 10px;
	font-size: .85em;
}
img {
	padding-bottom: 15px;
	border-style: none;
}
h1, h2, h3, h4 {
	font-size: 1.4em;
	text-align: left;
	font-weight: normal;
	margin-left: 10px;
	padding: 0px;
	margin-top: 0px;
}
#container {
	margin: 0px auto;
	padding: 0px;
	width: 780px;
	background: #000000;
}
#header {
	margin: 0px;
	padding: 0px;
	height: 360px;
	width: 100%;
	background: url(images/header_bg.jpg) no-repeat center bottom;
}
#subheader {
	margin: 0px;
	padding: 0px;
	height: 180px;
	width: 100%;
	background: url(images/subheader_bg.jpg) no-repeat center bottom;
}
#nav {
	width: 640px;
	margin: 0px auto;
	padding: 130px 0px 0px;
	height: 45px;
}
#front #nav {
	padding-top: 315px;
}
#nav ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	text-indent: 0px;
}
#nav  li {
	float: left;
	text-align: center;
	width: 127.5px;
	margin: 0px;
	padding: 0px;
}
#nav   a:link {
	font-weight: bold;
	font-size: 0.85em;
	letter-spacing: 0.085em;
}
#nav a:visited {
	font-weight: bold;
	font-size: 0.85em;
	letter-spacing: 0.085em;
}
#content a:link {
	text-decoration: underline;
}
#content a:visited {
	text-decoration: underline;
}
#col1 {
	margin: 0px;
	float: left;
	width: 195px;
	height: 365px;
	padding: 15px 10px 10px 75px;
}
#col2 {
	margin: 0px;
	padding: 15px 10px 10px 20px;
	float: left;
	width: 190px;
	height: 365px;
}
#col3 {
	margin: 0px;
	float: left;
	width: 195px;
	height: 365px;
	padding: 15px 65px 10px 20px;
}
#divided {
	border-top: 1px dotted #777777;
	margin: 0px auto;
	width: 620px;
	border-bottom: 2px solid #4F336A;
	padding: 2px 0px;
}
#subcontent {
	width: 600px;
	margin: auto;
	padding-top: 2em;
	padding-bottom: 2em;
}
#subcontent a:link {
	text-decoration: underline;
}
#subcontent a:visited {
	text-decoration: underline;
}
#subcontent p {
	margin: 0px auto;
	padding: 0px;
	width: 500px;
}
#subcontent h2, h3, h4, h5, h6 {
	font-size: 1em;
	margin: 20px 0px 20px 50px;
	padding: 0px;
	font-weight: bold;
}
#divided   a img  {
	color: #000000;
	float: left;
	margin: 0px;
	padding: 10px 0px 0px;
}
#divided #shows {
	margin-right: 22px;
	margin-left: 22px;
}
#footer {
	font-size: 0.75em;
	margin: 15px 0px 20px;
	padding: 0px 0px 1.5em;
	width: 100%;
	text-align: center;
	line-height: 1.25em;
}
#flash {
	font-size: 0.5em;
	width: 480px;
	margin: 0px;
	padding: 30px 0px 10px 60px;
	text-align: center;
}
.dashed {
	height: 0.5em;
	width: 160px;
	border-top: 1px dotted #777777;
	display: block;
	margin-left: 10px;
}
.bullet   {
	padding-left: .75em;
	padding-bottom: 10px;
}
.intro {
	font-weight: bold;
}
.featured {
	margin-left: 60px;
	margin-top: 0px;
	margin-bottom: 20px;
	width: 480px;
	padding: 0px;
}
.featured2 {
	padding: 0px;
	margin: 55px 40px 20px 40px;
	float: right;
}
.clear {
	clear: both;
	float: none;
}

Open in new window

0
heykevin
Asked:
heykevin
  • 3
  • 2
  • 2
3 Solutions
 
David S.Commented:
IE7 does that because "#subcontent p" has a width. IE5-7/Win often wrongly make unfloated elements with set widths act like they have clear:both
0
 
myderrickCommented:
You actually have a clear class you have applied to the<p> tags. So IE7 is clearing the floats.

Also the img is not withing the <p> which means once the <p> clears the img needs a place to stay.

You can also keep the img with the <p> tag with a class (as you have already done to the img) floating the img right.


Awaiting feedback.

MD
0
 
David S.Commented:
He only gave the clear class to some of the paragraphs.

By the way, you should avoid using empty <p> elements. Use an empty <div> if you really need an extra element for clearing purposes.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
myderrickCommented:
Another Good option.

You can assign <div> <p>text</p> <img> </div>

You can assign classes to the divs and float the image to the right. Avoid clearing the <p>.

Do not forget to add a with to the floated class.

This is what I was trying to explain.
<p>text goes here and ends. <img> goes here floated right </p>

I think the div option will do as well.

Good luck

MD
0
 
heykevinAuthor Commented:
Well guys, I tried a number of options and, at some point, they worked.  I tried eliminating the fixed width and replacing with margins, and I cleaned up the messy <p> tags (used divs to clear) though, like noted, I was not clearing the paragraph that was giving me the headache.  Ultimately I did have to place the <img> tag within a <p> tag to make it work.  The updated page is at the same url and the new code follows:

btw...  I'm Mrs Kevin - can't have anyone thinking he would do such fru fru pages....

Thanks bunches for the help - it was excellent.
New Code Within Page:
 
<h2>Kristen</h2>
      <p><a href="#"><img src="images/kristen_sm.jpg" alt="Kristen" width="136" height="113" class="featured2" onclick="MM_openBrWindow('photo_kristen.htm','Kristen','width=446,height=368')"/></a>Kristen was our first Papillon.  She is 4 years old and has produced two healthy litters. We adore her and readily acknowledge that she is the one who started it all. Her wonderful disposition and keen intelligence sold us on the breed and led us to acquire a companion for her.<br /><br />
      <span class="instruct">To view Kristen's pedigree, <a href="#" onclick="MM_openBrWindow('pedigree_kristen.htm','KristenPed','scrollbars=yes,resizable=yes,width=630,height=610')">click here</a>. For a larger photo, click her thumbnail.</span></p>
      <div class="clear"></div>
 
New Code For .css:
 
@charset "UTF-8";
body {
	background: #FFFFFF;
	font: 1em Tahoma, serif, sans-serif, monospace;
	color: #EEEEEE;
	margin: 0px;
	padding: 0px;
}
a:link {
	color: #E69AFA;
	text-decoration: none;
}
a:visited {
	color: #E69AFA;
	text-decoration: none;
}
a:hover {
	color: #EEEEEE;
	text-decoration: none;
}
p {
	padding-left: 10px;
	font-size: .85em;
}
img {
	padding-bottom: 15px;
	border-style: none;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 1.4em;
	text-align: left;
	font-weight: normal;
	margin-left: 10px;
	padding: 0px;
	margin-top: 0px;
}
#container {
	margin: 0px auto;
	padding: 0px;
	width: 780px;
	background: #000000;
}
#header {
	margin: 0px;
	padding: 0px;
	height: 360px;
	width: 100%;
	background: url(images/header_bg.jpg) no-repeat center bottom;
}
#subheader {
	margin: 0px;
	padding: 0px;
	height: 180px;
	width: 100%;
	background: url(images/subheader_bg.jpg) no-repeat center bottom;
}
#nav {
	width: 640px;
	margin: 0px auto;
	padding: 130px 0px 0px;
	height: 45px;
}
#front #nav {
	padding-top: 315px;
}
#nav ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	text-indent: 0px;
}
#nav  li {
	float: left;
	text-align: center;
	width: 127.5px;
	margin: 0px;
	padding: 0px;
}
#nav   a:link {
	font-weight: bold;
	font-size: 0.85em;
	letter-spacing: 0.085em;
}
#nav a:visited {
	font-weight: bold;
	font-size: 0.85em;
	letter-spacing: 0.085em;
}
#content a:link {
	text-decoration: underline;
}
#content a:visited {
	text-decoration: underline;
}
#col1 {
	margin: 0px;
	float: left;
	width: 195px;
	height: 365px;
	padding: 15px 10px 10px 75px;
}
#col2 {
	margin: 0px;
	padding: 15px 10px 10px 20px;
	float: left;
	width: 190px;
	height: 365px;
}
#col3 {
	margin: 0px;
	float: left;
	width: 195px;
	height: 365px;
	padding: 15px 65px 10px 20px;
}
#divided {
	border-top: 1px dotted #777777;
	margin: 0px auto;
	width: 620px;
	border-bottom: 2px solid #4F336A;
	padding: 2px 0px;
}
#subcontent {
	margin: auto 90px auto 90px;
	padding-top: 2em;
	padding-bottom: 2em;
}
#subcontent a:link {
	text-decoration: underline;
}
#subcontent a:visited {
	text-decoration: underline;
}
#subcontent p {
	margin: 0px auto;
	padding: 0px;
	width: 500px;
}
#subcontent h2, h3, h4, h5, h6 {
	font-size: 1.2em;
	margin: 30px 0px 20px 50px;
	padding: 0px;
}
#divided   a img  {
	color: #000000;
	float: left;
	margin: 0px;
	padding: 10px 0px 0px;
}
#divided #shows {
	margin-right: 22px;
	margin-left: 22px;
}
#footer {
	font-size: 0.75em;
	margin: 15px 0px 20px;
	padding: 0px 0px 1.5em;
	width: 100%;
	text-align: center;
	line-height: 1.25em;
}
#flash {
	font-size: 0.5em;
	width: 480px;
	margin: 0px;
	padding: 30px 0px 10px 60px;
	text-align: center;
}
.instruct {
	font-size: .75em;
}
.dashed {
	height: 0.5em;
	width: 160px;
	border-top: 1px dotted #777777;
	display: block;
	margin-left: 10px;
}
.bullet   {
	padding-left: .75em;
	padding-bottom: 10px;
}
.intro {
	font-weight: bold;
}
.featured {
	margin-left: 60px;
	margin-top: 0px;
	margin-bottom: 20px;
	width: 480px;
	padding: 0px;
}
.featured2 {
	padding: 0px;
	margin: 0px 0px 20px 40px;
	float: right;
}
.clear {
	clear: both;
	float: none;
}

Open in new window

0
 
heykevinAuthor Commented:
Thanks guys - really appreciate the help.
0
 
myderrickCommented:
Glad it is fixed.

MD
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now