fierdor Posted June 23, 2010 Share Posted June 23, 2010 I have two divs one nested inside the other...I apply a border to both divs.... In IE6 I see a border around the entire parent div and a border around the child div In Firefox I see 2 disjoint divs,both bordering the respective text in the divs.. I have attached images Sample code: <div id="parent" style="border:1px solid #456" Some text <div id="child" style="border:1px solid #456"> Some text </div> </div> So is there a solution to the IE6 problem? [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
haku Posted June 23, 2010 Share Posted June 23, 2010 You didn't finish your opening div tag. Quote Link to comment Share on other sites More sharing options...
fierdor Posted June 23, 2010 Author Share Posted June 23, 2010 I did not get you...They are nested..So the opening parent div closes after the child div Or am I missing something ? Quote Link to comment Share on other sites More sharing options...
haku Posted June 24, 2010 Share Posted June 24, 2010 You didn't finish the opening div tag. Not close, finish. <div id="parent" style="border:1px solid #456" Quote Link to comment Share on other sites More sharing options...
fierdor Posted June 24, 2010 Author Share Posted June 24, 2010 I have closed it in my code..But still that issue is there... Quote Link to comment Share on other sites More sharing options...
haku Posted June 24, 2010 Share Posted June 24, 2010 So show us your actual code. No use showing us code that isn't the real code. It wastes all our time! Quote Link to comment Share on other sites More sharing options...
fierdor Posted June 24, 2010 Author Share Posted June 24, 2010 Ok here it is: <html> <head> <style> #wrapper { width:856px; background-color: #ffffff; height:700px; margin:auto; } #child1 { position:relative; width:360px; height:250px; left:-20px; color:#000; text-align:center; } #parent{ width:400px; height:250px; float:left; position:relative; left:50px; border:1px solid #06f; } #child2 { float:left; width:400px; position:relative; border:1px solid #06f; } </style> </head> <body> <div id="wrapper"> <div id="parent"> <h4>Parent</h4> <div id="child1"> Child 1</div> <div id="child2"> <h4>Child 2</h4> </div> </div> </div> </body> I was just trying to post the relevant code previously.. Anyways now i am beginning to understand the nuances of CSS and how some properties affect others drastically.. Will keep that in mind before posting in the future.. Sorry if I have wasted your time The above code recreates my exact problem... Quote Link to comment Share on other sites More sharing options...
haku Posted June 24, 2010 Share Posted June 24, 2010 You're missing a closing div tag now. You have four opening tags, and three closing tags. Quote Link to comment Share on other sites More sharing options...
fierdor Posted June 24, 2010 Author Share Posted June 24, 2010 No I have..See near child 1.. I have indented the code here: <html> <head> <style> #wrapper { width:856px; background-color: #ffffff; height:700px; margin:auto; } #child1 { position:relative; width:360px; height:250px; left:-20px; color:#000; text-align:center; } #parent{ width:400px; height:250px; float:left; position:relative; left:50px; border:1px solid #06f; } #child2 { float:left; width:400px; position:relative; border:1px solid #06f; } </style> </head> <body> <div id="wrapper"> <div id="parent"> <h4>Parent</h4> <div id="child1"> Child 1 </div> <div id="child2"> <h4>Child 2</h4> </div> </div> </div> </body> Quote Link to comment Share on other sites More sharing options...
haku Posted June 24, 2010 Share Posted June 24, 2010 Alright, now that we've got your code, you want IE6 to look like firefox I'm guessing? First thing, get rid of all the relative positioning. Use left margins if you want a left margin. You can get rid of your left declarations as well, since they won't have any effect once the positioning is not relative anymore. That should probably do it for you. Quote Link to comment Share on other sites More sharing options...
fierdor Posted June 24, 2010 Author Share Posted June 24, 2010 Ok I tried that...The problem persists..My code now looks like this: <html> <head> <style> #wrapper { width:856px; background-color: #ffffff; height:700px; margin:auto; } #child1 { width:360px; height:250px; color:#000; text-align:center; } #parent{ width:400px; height:250px; margin-left:50px; border:1px solid #06f; } #child2 { width:400px; border:1px solid #06f; } </style> </head> <body> <div id="wrapper"> <div id="parent"> <h4>Parent</h4> <div id="child1"> Child 1 </div> <div id="child2"> <h4>Child 2</h4> </div> </div> </div> </body> Quote Link to comment Share on other sites More sharing options...
haku Posted June 25, 2010 Share Posted June 25, 2010 I think I'm not clear on how you want it to look. Quote Link to comment Share on other sites More sharing options...
fierdor Posted June 25, 2010 Author Share Posted June 25, 2010 I want it to look like the way it does in Firefox.. Two disjointed boxes..No overlapping.. Quote Link to comment Share on other sites More sharing options...
haku Posted June 25, 2010 Share Posted June 25, 2010 <div class="box"> <h2>Header of box 1</h2> <p>Content of box 1</p> </div> [code]<div class="box"> <h2>Header of box 2</h2> <p>Content of box 2</p> </div> .box { border:solid black 1px; }[/code] Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.