Page 1 of 1

nested box in Firefox appears behind mainbox - not IE

Posted: Sat Jan 27, 2007 7:52 pm
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]

Posted: Sat Jan 27, 2007 11:24 pm
by superdezign
Can you tell me why you're using absolute positioning?

Posted: Sun Jan 28, 2007 12:01 am
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

Posted: Sun Jan 28, 2007 12:13 am
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.