[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Mozilla renders nested divs OUTSIDE parent div

Posted on 2004-08-22
6
Medium Priority
?
667 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
Independent Software Vendors: 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
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 Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses

650 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