Firefox container div not expanding

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • AndrewMcLellan
    New Member
    • Feb 2009
    • 9
    #1

    Firefox container div not expanding

    Hello there, hoping for a little hand with my problem here.....

    I have a HTML and CSS page I'm creating and the container div (the outer blue div) does not expand. I have a maincontent div inside this and therefore the container should expand when this div has info in it. Which it does, a copule of news items which make it scroll down the page. But of course the container div doesn't go past a certain stage. I have uploaded the HTML and CSS, very small files. http://www.sendspace.com/file/lr59ob

    Could someone please tell me why it is doing this?

    ps. In IE and GC it acts weird in different ways. GC the maincontent at the bottom isn't visible and in IE the same where it moves the div out of place slightly too.


    It's a very small page and won't take much to look at. I hope you can help.

    Thanks

    Andrew
    Tags: None
    • David Laakso
      Recognized Expert Contributor
      • Aug 2008
      • 397
      #2
      Can't speak for anyone else on this forum, but I would not download off sendspace.com if you paid me. Put it on your own host/server and provide a clickable link to it in your post. If you don't have a host /server, provide the entire html and css in your post using code tags.

        Comment

        • drhowarddrfine
          Recognized Expert Expert
          • Sep 2006
          • 7434
          #3
          Originally posted by AndrewMcLellan
          I have a maincontent div inside this and therefore the container should expand when this div has info in it.
          It should not. As always, Firefox is performing correctly while IE is acting at its worst. Never, ever trust IE to do anything correctly. Always, always judge your markup by a modern browser like Firefox/Opera/Safari/Chrome.

          Elements/containers are never to expand to contain floated elements. What you are witnessing is one of a million bugs that make up IE. To get the much more advanced browsers to imitate IEs bug, add overflow:hidden to the container div.

          In addition, you aren't using a doctype. This puts IE into quirks mode and makes it not attempt to perform like the more advanced browsers. Add this to your first line:
          <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd">

          But the misery may not end there because adding that may change IEs behavior so that it won't look the same. Another reason you should never look at it while coding except after you have things working in the modern browsers.

          To add to the injury, you are using XHTML end tags - /> - but have declared HTML. Remove the slashes.

          After all that, validate your html and css for those lists of errors that need correcting and let's see where we stand.

            Comment

            • AndrewMcLellan
              New Member
              • Feb 2009
              • 9
              #4
              Hi Howard, thanks for the reply.

              It seems I had 3 d's in hidden so that was why it wouldn't expand.

              I want XHTML so I have put:
              Code:
              <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
              I have also validated the XHTML and CSS now.

              With that now done, the div expands but only to a certain extent; my read more div doesn't show. Do you know how to fix this?

              Here's the updated code: http://www.sendspace.com/file/0cbnq7

              Thanks again

              ps. David, sendspace is a very well known and trustworthy host. But when I get my own host I will do it via that next time. Thanks.

                Comment

                • David Laakso
                  Recognized Expert Contributor
                  • Aug 2008
                  • 397
                  #5
                  Originally posted by AndrewMcLellan
                  ps. David, sendspace is a very well known and trustworthy host. But when I get my own host I will do it via that next time. Thanks.
                  Yes, I know. Some say Internet Explorer is a well known and trustworthy browser, too (among other things, I suffer from paranoia).

                  Seriously: Good luck for a successful conclusion to your endeavor. You are in good hands...

                    Comment

                    • Dormilich
                      Recognized Expert Expert
                      • Aug 2008
                      • 8694
                      #6
                      Originally posted by AndrewMcLellan
                      I want XHTML so I have put:
                      be aware that Internet Explorer doesn't understand 'real' XHTML (i.e. XHTML with the MIME type "applicatio n/xhtml+xml")

                        Comment

                        • drhowarddrfine
                          Recognized Expert Expert
                          • Sep 2006
                          • 7434
                          #7
                          Also, transitional is never for new pages. Use strict only.

                          Change overflow:hidden to overflow:auto. My mistake but it won't fix this.

                          The problem you are having is using floats for everything. This removes those elements from the normal flow. That's why the bottom pulled up before. I don't know why "Read More" has to be in its own div. And don't use spacer divs. Use margin and padding. spacer divs are relics of the 90s.

                          So it's a matter of rearranging some of this, I think, but I don't have time to look right now.

                            Comment

                            • AndrewMcLellan
                              New Member
                              • Feb 2009
                              • 9
                              #8
                              Hi again, thanks for reply.

                              I stopped floating so much and fixed some margins here and there and it all seems good now. Thanks for your help.

                              :D

                                Comment

                                Previous template Next
                                Working...