?
Solved

Mozilla renders nested divs OUTSIDE parent div

Posted on 2004-08-22
6
Medium Priority
?
666 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 400 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 400 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 1200 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses
Course of the Month15 days, 8 hours left to enroll

741 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