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 SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

FF wont clear, this is weird

Status
Not open for further replies.
styleBunny

styleBunny

Technical User
Jun 20, 2002
133
0
0
AU
Hi guys, i have this code, it renders fine in ie6 and even well in ie4 (cept for the double margin) but ff 1.01 wont clear properly, i have tried all types of clearing but have had no success. It looks like a nested div in ff but it isnt, ie renders it correctly as two divs next to each other.

Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">

.div1{
	background-color:#00FF55;
	float:left;
	margin:0px 10px 10px 20px;
	width:50px;
	display:inline;
	}

.div2{
	background-color:#CCC;
	margin:0px 10px 10px 20px;
	width:150px;
	
	}
	
</style>
</head>

<body>

<div class="div1">
	<img src="[URL unfurl="true"]http://www.google.com.au/images/logo_sm.gif"[/URL] width="50" height="50">
</div>

<div class="div2">
		Blairgowrie <br />
		Blairgowrie  <br />
		Blairgowrie <br />
		Blairgowrie<br />



</div>



 <h1>Blairgowrie</h1>	
	  
	  <p>
		  BlairgowrieBlairgowrieBlairgowrieBlairgowrieBlairgowrieBlairgowrie
	  </p>
			
	  
</body>
</html>

Thanks for looking and helping as always,
sb.
 
Sort by date Sort by votes
If you put a valid DOCTYPE at the very top of your code:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

FF floats the text as you'd expect (albeit with the gray background still under the image).

Hope this helps,
Dan


The answers you get are only as good as the information you give!
 
Upvote 0 Downvote
I see nothing but expected behaviour from Mozilla (=FF) and not so expected from IE. Here's a good addition to Dan's suggestion of using a complete and valid doctype: In most cases it will be FF that renders the page correctly and IE that mocks it up. Let's review some aspects.

1. W3 claims the following:
W3 said:
With a value of 'left' or 'right', the element is treated as block-level (i.e. the 'display' property is ignored).
Click to expand...
Meaning that your display: inline; is completely wasted and in addition, you have trouble understanding what you're doing.

2. Block that is floated will be on left or right of the text that is not floated, while the not-floated text will run on top beside and at the bottom of it, depending on where the floated element is. Since you put your floated element before the other text, floated box will begin at the top. Non-floated elements will wrap beside the floated box until all of it is gone (width, padding, border and margin) and then continue in full available width. This is exactly what FF does.

3. If you need to not have this kind of effect, you need to float both boxes. That will make them both each own entity and they will run down similar. That way you get more of a table effect than floating.

4. To see more referrence on how floats should behave, check:
 
Upvote 0 Downvote
Hi Guys,

Thanks for the response. I added the doctype (I did have a 'loose' doctype declaration but i didnt post it in the code, oops) the strict hasnt changed anything tho. The div2 still appears nested inside div1 when viewed in ff, where as ie renders it as i would have imagined.

The display:inline is to combat a double margin problem in ie, but its not apparent in this simplified example.

I guess the real issue i am trying to solve here is how to make sure the text wont wrap underneath the image but rather stay to the images right, in a seperate column.

p.
 
Upvote 0 Downvote
1. Use table.
2. Float both elements, not just one.

Once again, your display: inline; does no job because display gets ignored when element is floated.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
156
bdwilcox
bdwilcox
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
62
tyutghf
tyutghf
PSchubert
  • Locked
  • Question
Data in db table cell not displayed in asp table cell -- a CSS issue?
Replies
2
Views
42
vacunita
vacunita
1DMF
  • Locked
  • Question
HTML5 number input - FF validatoin tooltip / control function
Replies
5
Views
80
1DMF
1DMF
1DMF
  • Locked
  • Question
Clear :invalid pseudo class from 'required' form fields when blanking form
Replies
4
Views
46
1DMF
1DMF

Part and Inventory Search

Sponsor

Back
Top