Solved

Mozilla renders nested divs OUTSIDE parent div

Posted on 2004-08-22
6
662 Views
Last Modified: 2012-06-27
On this page: http://www.aurafellows.net/aura/research3.asp

in the subnav area (the narrow navbarimmediately below the main top navbar), I have links inside divs that are nested inside the subnav div:  
<div id="subnav">
<div id="subnavFloatleft"> <a href="index.asp" id="home">home</a> </div>
<div id="subnavFloatRight"> <a href="email_updates.asp" id="emailupdate">email updates</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="contact.asp" id="contact">contact</a>
</div>
</div>

They look fine in IE and Opera. But in Mozilla FireFox, the links appear outside the subnav div. Anyone knows why?  Thanks in advance.

Here's the CSS:

#subnav {
     width: 95%;       margin: 1%;
      background-color: white;
      padding:5px;
      font-size:75%;
      color:#666666;
      border: solid #ccc 1px;
     }
#subnavFloatleft {
float:left;
      }

#subnavFloatRight {
      float:right;
      
      } /* so the CONTACT and other buttons float right */

      
#subnav a:link, #subnav a:visited, #subnav a:active {
      font-variant:small-caps;
            /*padding: 6px 10px 8px; */
      background: #fff;
      color: #666;
      text-decoration:none;

      }      

#subnav a:hover {
      font-variant:small-caps;
            /*padding: 6px 10px 8px; */
      background: #b5474a;
            color: white;
      text-decoration:none;
      }
0
Comment
Question by:polaatx
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 36

Assisted Solution

by:Zyloch
Zyloch earned 100 total points
ID: 11867174
This is actually caused because float is not supposed to take up space, so IE is actually rendering it incorrectly (even though it might seem more convenient for your example). You can try this:

<div id="subnav">
<div id="subnavFloatleft"> <a href="index.asp" id="home">home</a> </div>
<div id="subnavFloatRight"> <a href="email_updates.asp" id="emailupdate">email updates</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="contact.asp" id="contact">contact</a>
</div>
<span>&nbsp;</span>
</div>
0
 
LVL 17

Assisted Solution

by:mreuring
mreuring earned 100 total points
ID: 11867800
Smaal adition to above code, you do need to make certain the span is accually render below the floats:
<div id="subnav">
<div id="subnavFloatleft"> <a href="index.asp" id="home">home</a> </div>
<div id="subnavFloatRight"> <a href="email_updates.asp" id="emailupdate">email updates</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="contact.asp" id="contact">contact</a>
</div>
<span style="clear: both;">&nbsp;</span>
</div>
0
 
LVL 11

Accepted Solution

by:
neester earned 300 total points
ID: 11868998
There are a few options here...

You could simply make these changes:

1) REMOVE THE FLOAT LEFT DIV!
2) PUT THE RIGHT FLOATED TEXT BEFORE THE HOME LINK...
3) IT WILL WORK JUST FINE!


Here is teh new CODE:


<div id="subnav">
<div id="subnavFloatRight"> <a href="email_updates.asp" id="emailupdate">email updates</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="contact.asp" id="contact">contact</a> </div>
<a href="index.asp" id="home">home</a>
</div>



You WONT NEED Any Extra Spaces etc...
And it should render 100% fine everywhere!
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 11

Expert Comment

by:neester
ID: 11869007
To Explain why I said that...

You have the Main Div for the navigation...

Inside that, the text will be LEFT aligned ANWAY.
So...
If you float the text to the right, it will be right aligned...
Then the normal Div text, will fill the spot its meant to, ignoring the right floated text inline with it... Since the floated text - is floated!!

You dont need two floats - unneeded...
You dont need any spaces - thats a waste of HTML and its a bit of a Hack, whereas this is the proper way around the issue.

If you have any problems let me know!

Cheers!
0
 

Author Comment

by:polaatx
ID: 11870044
Thank you all.

Neester, your solution is the most elegant of all. I couldn't believe how simple you made it. If only I could get the same thing going for the stuff below the subnav div (http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_21102601.html)

0
 
LVL 11

Expert Comment

by:neester
ID: 11870096
Glad I could help!

I am checking out the other thread now!

If I can help I will leave a message in there in the next 20 minutes!
:)
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question