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.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Text break bottom of image in Firefox but not IE

    So I am having an issue. Oddly enough with something working in IE but not Firefox. My text bypasses the bottom of a repeated image.

    Here's my css.

    Code:
    /* CSS Document */
    a
    {
    font-size:10pt;
    text-decoration:none;
    color:black
    }
    
    a:hover
    {
    font-size:10pt;
    text-decoration:none;
    color:maroon
    }
    
    body
    {
    margin: 0 0 0 0;
    background:#424239;
    font-family:Arial, Helvetica, sans-serif;
    text-align:	center;
    }
    
    
    #main
    {
    width:780px;
    height:100%;
    text-align:	left;
    background:url(images/contentbg.jpg) repeat-y;
    }
    
    #top
    {
    background:url(images/mainbg.jpg) repeat-y;
    height:245px;
    }
    
    .left
    {
    float:left;
    height:100%;
    width:512px;
    }
    
    .right
    {
    float:left;
    height:100%;
    width:268px;
    }
    #logo
    {
    background:url(images/logo.jpg) no-repeat;
    height:34px;
    width:209px;
    }
    
    #tagline
    {
    background:url(images/tagline.jpg) no-repeat;
    height:18px;
    width:512px;
    text-align:right;
    font-weight:bold;
    font-size:11pt;
    font-family:Arial, Helvetica, sans-serif
    }
    
    #head
    {
    background:url(images/header.jpg) no-repeat;
    height:193px;
    width:512px;
    }
    
    
    .right  a
    {
    font-size:10pt;
    text-decoration:none;
    padding-left:19px;
    color:black
    }
    
    .right  a:hover
    {
    font-size:10pt;
    text-decoration:none;
    padding-left:19px;
    color:maroon
    }
    
    .home
    {
    background:url(images/home.jpg) no-repeat;
    height:16px;
    width:56px;
    margin-left:3px;
    }
    
    .sitemap
    {
    background:url(images/sitemap.jpg) no-repeat;
    height:16px;
    width:67px;
    }
    
    .contact
    {
    background:url(images/contact.jpg) no-repeat;
    height:16px;
    width:66px;
    }
    
    
    #menu
    {
    margin-top:32px;
    background:#FFA40F url(images/menubg.jpg) no-repeat;
    height:193px;
    width:268px;
    
    }
    
    .menu_l
    {
    padding-top:4px;
    height:22.5px;
    }
    
    .menu_l a
    {
    font-family:Arial, Helvetica, sans-serif;
    font-size:10pt;
    
    }
    
    .menu_l a:hover
    {
    font-family:Arial, Helvetica, sans-serif;
    font-size:10pt;
    color:red;
    }
    
    #content
    {
    height:100%;
    width:760px;
    }
    
    .left_c
    {
    float:left;
    height:100%;
    width:500px;
    padding-left:12px;
    }
    
    h1
    {
    color:#CE0101;
    font-size:20px;
    font-family:Arial, Helvetica, sans-serif;
    }
    .right_c
    {
    float:left;
    height:100%;
    width:190px;
    padding-left:10px;
    }
    .rhead
    {
    background:url(images/r_header.jpg) no-repeat;
    height:31px;
    width:190px;
    padding-top:5px;
    padding-LEFT:10px;
    margin-left:-10px;
    font-weight:bold;
    }
    .btn
    {
    background-color:#FF0000;
    color:white;
    border:solid 1px black;
    font-weight:bold
    }
    .rightm_c
    {
    float:right;
    background:url(images/gridalogy.jpg) no-repeat;
    width:46px;
    height:264px;
    }
    #footer
    {
    padding-left:120px;
    color:#000066
    }
    The page can be found at
    Code:
    http://www.gridalogy.com/new/

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    you may have to set an exact height, i dont like the 100%, it really never works that well for me

    Code:
    #content
    {
    height:400px;
    width:760px;
    }

  • Users who have thanked jcdevelopment for this post:

    ikabod00 (01-09-2008)

  • #3
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jcdevelopment View Post
    you may have to set an exact height, i dont like the 100%, it really never works that well for me

    Code:
    #content
    {
    height:400px;
    width:760px;
    }
    That works beautifully, thank you so much
    Last edited by ikabod00; 01-09-2008 at 10:57 PM.

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    no problem

  • #5
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jcdevelopment View Post
    no problem

    Oh, but the other issue is this page is going to be a template for all the other pages in the site. So I can't really set a size, i need it to be able to span for different amounts of text.

  • #6
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    ok im stumped about this, i know its probably an easy answer but i cant think of it. If anyone can answer this i am interested in knowing how to do this. i thought not putting a height on the div would let it expand or atleast an inherit property. None of those seem to work though!!

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by jcdevelopment View Post
    ok im stumped about this, i know its probably an easy answer but i cant think of it. If anyone can answer this i am interested in knowing how to do this. i thought not putting a height on the div would let it expand or atleast an inherit property. None of those seem to work though!!
    Try making these changes:
    Code:
    #main
    {
    width:780px;
    text-align:	left;
    background:url(images/contentbg.jpg) repeat-y;
    }
    
    #top
    {
    background:url(images/mainbg.jpg) repeat-y;
    height:245px;
    }
    #content
    {
    width:760px;
    overflow: auto;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • The Following 2 Users Say Thank You to Excavator For This Useful Post:

    ikabod00 (01-10-2008), jcdevelopment (01-10-2008)

  • #8
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Try making these changes:
    Code:
    #main
    {
    width:780px;
    text-align:	left;
    background:url(images/contentbg.jpg) repeat-y;
    }
    
    #top
    {
    background:url(images/mainbg.jpg) repeat-y;
    height:245px;
    }
    #content
    {
    width:760px;
    overflow: auto;
    }
    Very awesome, works exactly how i need it too. Thanks. The only thing is when the page is empty the stuff from the right side comes over to the left and again, it only does this on Firefox and not IE. But as long as I have text on the page, it works fine. If there is a way around this, that would be great. If not, this works awesome, thank you very much.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by ikabod00 View Post
    Very awesome, works exactly how i need it too. Thanks. The only thing is when the page is empty the stuff from the right side comes over to the left and again, it only does this on Firefox and not IE. But as long as I have text on the page, it works fine. If there is a way around this, that would be great. If not, this works awesome, thank you very much.
    Try this:
    Code:
    .right
    {
    float:right;
    height:100%;
    width:268px;
    }
    You may need to re-arrange your markup for that to work, I didn't check.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Try this:
    Code:
    .right
    {
    float:right;
    height:100%;
    width:268px;
    }
    You may need to re-arrange your markup for that to work, I didn't check.

    That didn't work right away. It may require some rearranging. For now, I need to work on just getting the site up and running. And as long as there is anything in the left column everything looks good. So I think for now I am going to leave it, as I will not have any pages that are complete void of anything in the left column. Thanks for all the help


  •  

    Posting Permissions

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