Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Problem IE vs Netscape... I am stumped... 3

Status
Not open for further replies.
rockyroad

rockyroad

Programmer
Feb 22, 2003
191
US
Hi,

I have this simple content block code. This appears ok in IE6, but in Netscape 7.1, it appears such that the image is protuding past the height of the div. I have tried both "auto" and "inherit" for this height attribute. What I ultimately want is that the div will grow in height to accompany the content, including the image. What am I doing wrong? Here is my code:

Code: 
<html>
<head>
<style type="text/css">

.Content {
	text-align: left;
	background-color: #f7f7f7;
	width: 100%;
	margin-top: 8px;
	margin-right: 8px;
	margin-bottom: 8px;
	margin-left: 8px;
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 4px;
	padding-bottom: 4px;
	border: 1px solid #CCCCCC;
	vertical-align: middle;
	height: auto;
	
}

.ContentImage {
	border: 1px solid #999999;
}
h1 {
	font-family: Arial, sans-serif;
	font-size: 125%;
	/*color: #006699;*/
	/* color: #000000; */
	 color: #ff0000; 
	font-weight: bold;
	margin: 6px 0px 6px 8px;
}


h2 {
	font-family: Tahoma, Arial, sans-serif;
	font-size: 105%;
	 color: #000000; 
	/*color: #006699;*/
	font-weight: bold;
	margin-top: 4px;
	padding-left: 4px;
	margin-bottom: 14px;
}


 p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 70%;
	color: #666666;
	padding-left: 8px;
	padding-right: 6px;
	/* margin-top: -11px; */
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>


 				 <div class="Content"> 
	  <img src="images/ArmyPic2.jpg" alt="Placeholder" width="150" height="117" hspace="4" vspace="4" align="left" class="ContentImage">
        <h2>Test</h2>
	    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
          nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat 
          volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution 
          ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>
        <p class="strongLink"><a href="test.cfm">test</a></p>
</div>


</body>
</html>

Thanks! RR [yinyang]
 
Sort by date Sort by votes
First, add a complete doctype to the code. This will make the page look bad in IE too, thus making it more cross-browser compliant. List of valid doctypes (I would suggest one of the xhtml ones for this code):

Aligning picture is similar to floating it and that takes it out of document's natural flow, thus making it not expand the parent element. Add a div before your closing div with:
<div style="clear: both;"></div>
to get rid of that.
 
Upvote 0 Downvote
Hi actually I had this DocType already in my code, but didn't include in the post:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
should that one have been the correct one to force IE to comply as Netscape is or should I be using a different doc type.

I will try your suggestion -- do you mean that I should wrap my content <div> with the

<div style="clear: both;"></div>

declaration?

Could I also create a new div id in the stylesheet with this attribute, rather than declare directly in the div?

THANKS!!!!
 
Upvote 0 Downvote
i believe loose is the same as quirks mode.

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
 
Upvote 0 Downvote
You should declare it in a stylesheet. I just made an example how to do it. You'd stick it in:
Code: 
<p class="strongLink"><a href="test.cfm">test</a></p>
[b]<div id="clearer" style="clear: both;"></div>[/b]
</div>
Just move the style declaration to stylesheet when you're ready for publishing.
 
Upvote 0 Downvote
i believe loose is the same as quirks mode.
Click to expand...
You believe wrong, at least for the most commonly used browsers (IE, NS, FF, Opera, Safari) are concerned. There's a good guide to which doctypes engage which mode at .

There's a detailed description of float behaviour, and a way to make it work how you want it to without adding an extra <div> at
-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
816
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
643
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
696
PeDa
PeDa
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
820
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top