nested box in Firefox appears behind mainbox - not IE

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
chaser7016
Forum Commoner
Posts: 34
Joined: Sat Nov 04, 2006 3:22 pm

nested box in Firefox appears behind mainbox - not IE

Post by chaser7016 »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Please see http://www.ryanspahn.net/FireFox.jpg for Firefox version and http://www.ryanspahn.net/IE.jpg .

Notice in the Firefox in the second box the two radio button forms appear behind the box.  In the first box(top box) they appear fine within that box.

Here is my .css

 [syntax="css"]
div.customizebox {
	background-color: #FFF8DC;
	width: 700px;
	height: 1900px;
	}

	#pingbox {
	position: absolute;
	top:100px;
        left:95px;
	width:650px;
    	height:260px;
	background-color: #FFFFFF;
	border: solid 3px #000000;
	line-height:17px;
	}	


	#pbox {
	float: left;
	width:200px;
    	height:250px;
	background-color: #FFFFFF;
	}

	#lrmbox {
	float: left;
	width:250px;
    	height:250px;
	background-color: #FFFFFF;
    }

   	#randombox {
	float: left;
	width:200px;
    	height:250px;
	background-color: #FFFFFF;
    }

        
        #boxrming {
	position: absolute;
	top:285px;
        left:-3px;
	width:650px;
    	height:260px;
	background-color: #FFFFFF;
	border: solid 3px #000000;
	line-height:17px;
	}

	#boxspl {
	float:left;
	width:200px;
    	height:250px;
	background-color: #FFFFFF;
	
	}

	
	#boxlrm {
        float:right;
        width: 200px;
    	height:250px;
	background-color: #FFFFFF;
	
        }

        #boxrandom {
        float:right;
    	width:200px;
    	height:250px;
	background-color: #FFFFFF;
	
        }
        
Anyone ever seen this? Can anyone offer a suggestion on how to fix it? Do I need to clear floats or something for those two boxes to appear on top and not behind the box?



Thanks,
Ryan


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Can you tell me why you're using absolute positioning?
chaser7016
Forum Commoner
Posts: 34
Joined: Sat Nov 04, 2006 3:22 pm

Post by chaser7016 »

Well cause I dont know what Im doing to be honest.

I have been playing with this all day and absolute positioning seemed to work the best, minus these two boxes not appearing properly in FireFox...arggh.

I need a CSS instant message tutor........anyone interested? Ten bucks per question you help me with and school me on!

Send me a PM. Please no DreamWeaver site designers or web site building apps as such. Im learning via trial and error using NotePad. Oh the agony........but I want to becomc a hard core web designer who knows the ins and outs of HTML, XHTML and CSS.


Ryan
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

You don't need to have Dreamweaver or anything. Dreamweaver is like having a cheatsheet without having to actually look at it.

And if you need help, I'm willing to do so. I won't do it FOR you, but I won't charge you either. PM me your contact info.
Post Reply