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

Strange CSS difference between IE and FF 1

Status
Not open for further replies.
seaport

seaport

MIS
Jan 5, 2000
923
US
The following code behaves differently between IE and FF.
Code: 
    <div>
      <div style="width: 85px; float: left">
        <div style="position: relative">
          <div style="position: absolute">
            aaaa
          </div>
        </div>
      </div>
      <div style="width: 300px; float: left">
        <div style="position: relative">
          <div style="position: absolute">
            bbbb
          </div>
        </div>
      </div>
    </div>
You can see effect in IE is what I want. Some additional notes:
1. The code for relative and absolute positioning is for me to position a pop-up css box, which will cover text on the page ("aaaa" and "bbbb").
2. If I use a two-column table rather than two floating css boxes, the code works the same in IE and FF.

Could someone explain to me why the difference?

Thanks in advance.

Seaport
 
Sort by date Sort by votes
And what exactly is the difference between the IE and FF. I suppose I could copy the code and test it but it would really be easier if you would tell us what is failing rather than make us test your code.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Dan and Vragabond,

The doctype is
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
In IE, "aaaa" and "bbbb" appear apart in the same line.

In FF, "aaaa" and "bbbb" appear overlapping together.

The effect in IE is what I need.

Basically, I want to use CSS box to get a two-column/one row table, which is used for positioning pop-ups. But somehow it does not work well in FF.

I do not know CSS much so I now decide to just use HTML Table, rather than CSS for positioning purpose. Table works well in both IE and FF. Besides, table is also part of CSS2 specification and I do not expect it will become obsolete in near future.

Seaport
 
Upvote 0 Downvote
You can fix the problem by giving your containers a height / min-height as well as a width.

Ultimately, however, you should not need to absolutely position the inner DIVs... in gfact, you do not need them at all. This would be far better:

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

<body>
	<div>
		<div style="width: 85px; float: left;">
			aaaa
		</div>
		<div style="width: 300px; float: left;">
			bbbb
		</div>
	</div>
</body>
</html>

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Dan,

I apologize that I did not respond to you sooner. Adding height does fix the problem.

You are right that my example does not need absolute positioning. However, I need the absolute positioning (which has to be wrapped in a relative position DIV) because I want this DIV to cover text below the current line. In other word, the DIV for "aaaa" and "bbbb" are "Google-Suggest" like dropdownlists, which are invisible most of time and appear in need.

Thanks.

Seaport



 
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
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
770
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
745
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
597
PeDa
PeDa
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
203
lmcate
lmcate

Part and Inventory Search

Sponsor

Back
Top