Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div's overlap in Firefox, Netscape, look great in IE

    I am new to the board and new to css for layouts. I spent considerable time creating a page that I thought looked great in IE, only to find it looks nothing like what it should in Netscape or Firefox.

    This is the page:
    http://www.findgolfpro.com/test.html
    and the css for that page is:
    http://www.findgolfpro.com/products.css

    Please ignore the broken images - this is just for testing and debugging purposes. In IE the container div acts like I thought it should, and you can see the border for that container goes all the way to the bottom of the page. In the other browsers is stops near the top of the page and everything else just spills out underneath it. Also, I had set specific heights for the columns which worked great in IE - if the content was too big, then the columns just got longer, but in NS and FF the content spilled out of the div's. So, I changed the height from a specific height to a min-height which now works great in NS and FF but as you can see in IE the min-height is not working.

    Sorry for making my first post here so long winded... I have been searching for answers to this all day with no success. Any help would be greatly appreciated!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    the gecko browsers need the height applied to the html attribute also
    change this
    Code:
    body {
    	background-color: #FFFFFF;
    	margin: 0px;
    	color: #000000;
    	height: 100%;
    	}
    to this
    Code:
    html {height:100%;}
            body {
    	background-color: #FFFFFF;
    	margin: 0px;
    	color: #000000;
    	height: 100%;
    	}
    and as far as min height, well IE doesn't like it, when you float anything or use absolute positioning like you are u need to use defined heights

  • #3
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok thanks. If I use defined heights though, then the text spills out in Netscape and Firefox... is there a way to do both?

    Also, the body and div height set at 100% - is that necessary? I didn't have that before in the css and it still worked great in IE (the container div grew as the content inside it grew). I just put it in to see if it fixed the problem in Netscape. Do div's with nested div's inside not grow so that the nested divs and content fit inside? It looks like they do in IE, but not the other browsers? Is there a different way I should be doing it so that the "container" div just grows depending on what is inside? I hope what I am asking is making sense....

    Thanks!

    Dave

  • #4
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I played around with setting html to 100% and it looks a bit better in netscape but it's still not right. I added a couple more divs inside the container to illustrate my problem better.

    http://www.findgolfpro.com/test.html

    It does exactly what I want in IE but if you scroll down in netscape you'll see the borders don't expand to contain all the divs. Also it seems to push the 4 contained divs up higher somehow... I might have to go back to tables.

    Does anyone have any suggestions as to what I'm doing wrong? Could it be because the div's are floating?

    Thanks everyone!

  • #5
    New Coder
    Join Date
    Aug 2004
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I haven't checked the page yet, but it sounds like you need to add a clearing div.

    <div style="clear: both;"></div>

    Add that before the end of the div that is holding the floating divs and you should be okay.

    I will check the page a little later. No time right now. Hope that steers you in the right direction.

  • #6
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the tip. I tried it out but unfortunately it didn't change anything in Netscape or Firefox.

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    Try this:

    Code:
    body, html {
       padding: 0;
       margin: 0;
       height: 100%;
       width: 100%;
    }
    
    [...]
    
    #container {
    	position: relative;
    	border-left: 3px #000000 solid;
    	border-right: 3px #000000 solid;
    	border-bottom: 3px #000000 solid;
            border-top: 0px #000000 solid;
    	width: 750px;
    	height: 100%;
    	margin: 0 auto;
    	padding-bottom: 5px;
    	}
    I think that that'll sort it for you.
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #8
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks I already had all that in the css except the 0px top border and the html width. Tried the code exactly as you specified and that didn't change anything in netscape either.

    Any other suggestions?

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    Have you tried viewing the page with an image where it should be?

    I think the problem is the fact that the image isn't there and therefore the page isn't rendering properly.
    However i have found this fix for it as it stands at the moment. Add the following code to your CSS:

    Code:
    #pageheader {
    	padding: 0;
    	border: none;
    	margin: 0;
    }
    
    
    #pageheader h1 {
    	margin-top: 0;
    	padding-top: 0;
    }
    But really there should be an image. If you don't want the header butt up against the image box, then change the value of the padding-top in the #pageheader h1 section and this'll move it down from the top

    Hope this helps the problem.
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #10
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah yes, thanks. I was so wrapped up in fixing the container border problem....

    http://www.findgolfpro.com/test.html

    So now it looks better in Netscape and Firefox, but I still have the original problem of that container not expanding to fit all nested divs inside. It's 100% height of the window, but if you scroll down (at least in 1024x768 or lower) the content still spills out underneath.

    Am I stuck with defining a set height for the container and changing it everytime the content inside it changes?

    Thanks everyone for all your help!

  • #11
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    Yeah you need to replace the container css with the following (I think) although I haven't tested this yet.

    Code:
    #container {
    	position: relative;
    	border-left: 3px #000000 solid;
    	border-right: 3px #000000 solid;
    	border-bottom: 3px #000000 solid;
    	width: 750px;
    	height: auto;
    	margin: 0 auto;
    	padding-bottom: 5px;
    	}
    However if your content is less than the height of the screen, then the border won't expand to the bottom. Not sure whether this is a problem for you.
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #12
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    WOOHOO! That did it, thanks! Now to get started on regrowing all the hair I pulled out over the past few days!

    Thanks again for all the help!

  • #13
    New Coder
    Join Date
    Nov 2007
    Location
    Spain
    Posts
    28
    Thanks
    1
    Thanked 0 Times in 0 Posts
    i have a similar problem. the site looks fine in ie... but in firefox... have a look:

    http://www.carparkcruisers.co.uk/techtalk-allloys.html

    CSS:

    http://www.carparkcruisers.co.uk/template/cpc/style.css
    http://www.carparkcruisers.co.uk/tem...tabcontent.css

    any ideas?

    Daniel

  • #14
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    mob4ui,

    I've had a look at your code and think I've narrowed down the search. It's to do with the tab menu you have and the JavaScript that runs it.

    As the html code hides the first 'pages' text and only leaves "Chrome" viewable, the parent divs are sized to match that. As this is one of the smaller divs when you change tab the text overflows the div, and the parent divs are not resized.

    Edit: The solution to the problem as far as I can tell is to search your code for the following text:
    Code:
    <div style="border-top: 5px solid rgb(117, 66, 66); padding: 15px 0px 5px; width: 100%; height: 250px; background-color: rgb(255, 255, 255);">
    and replace it with:
    Code:
    <div style="border-top: 5px solid rgb(117, 66, 66); padding: 15px 0px 5px; width: 100%; height: auto; background-color: rgb(255, 255, 255);">


    On a slight aside, you may want to do some house keeping on your code, it's rather difficult to read and understand and tidying things up would help you and us debug it for you.
    Last edited by Badman3k; 11-20-2007 at 05:40 PM. Reason: Possible solution
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • Users who have thanked Badman3k for this post:

    mob4u1 (11-21-2007)

  • #15
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •