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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    2 Centre Columns Different width in Firefox and IE. Hack needed please.

    Okay after ripping my hair out i'll get right to it. I've been around in circles with this annoyance now for several days.

    The width of the centre content column is different in IE and Firefox, the thing is I have no idea why. Its probably to do with the padding which IE likes and Firefox doesn't or something, if you have a hack for padding please send it my way.


    Here is the site:
    http://www.debtloaninvest.com/test.html

    You'll need to open this up in IE then firefox to see what I am talking about.
    Firefox is out IE is lined up correctly.

    Ignore the footer comment that is fine now unless i have to alter it again


    Here is the html code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <link type="text/css" rel="stylesheet" href="styles/mainstyle.css">
    <title>test page</title>


    </head>


    <body>



    <div id="wrap">

    <div class="headcol">
    <p><img src="images/debtloaninvestbusinesssuccess.gif" width="760" height="155"></p>
    </div>


    <div class="headsep"> <img src="images/whitespace.gif" width="760" height="49">
    </div>

    <div id="innerwrap">




    <div class="leftcol" >
    <p> <br>
    <br>
    <br>
    Text goes here</p>
    </div>

    <div class="maincol">
    <p><br>
    <br>
    <br>
    Text Goes here...
    </div>

    </div>

    <div id="clearwrap">
    </div>

    <div class="footer" >

    <p align="left"><br>
    &lt;Bottom Links here.&gt;<br>
    This is the troubled footer, which I have had to make the same color as the
    main page as it extended behind the other columns...<br>
    </p>

    </div>

    </div>

    </body>
    </html>


    Here is the Css Code.


    body{
    background-color:#333366;
    margin:0;
    padding:0;
    text-align:center;
    }

    #pagewidth{ }


    #wrap {
    width:760px;
    margin:0 auto;
    text-align:left;
    }



    #innerwrap {

    width:760px;
    float:none;
    margin:0 auto;

    }

    #clearwrap {
    float:left;
    margin:0 auto;
    }


    div.headcol{
    width:760px;
    top:17px;
    height:155px;
    }

    div.headsep{
    background-color: #FFFFFF;
    height:40px;
    width:760px;
    }


    div.footer{

    background-color:#FFFFCC;
    float:left;
    padding:2px;
    width:100%;
    }

    div.leftcol{
    background-color: #F8F1D7;
    color: #333366 ;
    width:150px;
    float:left;
    padding:2px;
    }




    div.maincol{
    background-color: #FFFFFF;
    padding:2px;
    width:610px;
    float:right;
    }






    I won't alter this so the bug stays the same when you view it, i'll alter a seperate test sheet.

    Thank you for your time.




    -Edit tried to sort the spacing out so its easier to read but the forum doesn't like it
    Last edited by markmid; 11-28-2005 at 10:24 AM.

  • #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
    Use the [ code][ /code] to make code more readable on the forums. Now to your problem well you have a partial doctype, this isn't good for IE, it is now rendering the padding/margin incorrectly. Change this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    to this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    See if that fixes anything. Remember overall width DOES include padding. Currently your left column is 154px wide. 150px + 2px + 2px and your maincol is 614px wide 610 + 2px + 2px so total width of your leftcol and maincol is 768 not 760 make your maincol 602px for the width. Use this for your footer CSS
    Code:
    div.footer{
    	background-color:#FFFFCC;
    	padding:2px;
     }
    A block level element like a div will expand to fit the element it is in unless it is floated. No need to set a width.
    Last edited by _Aerospace_Eng_; 11-28-2005 at 10:53 AM.

  • #3
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you, the pages are virtually identical now. The transitional document is something I actually didn't know about, I got the original code from a website that generated some of it so I had no idea.

    http://www.debtloaninvest.com/newtest.html

    The above is the new page showing the changes, I will leave both of them up a couple of days so people can see the difference, for anyone having a similiar coding problem.

    The only thing now I don't understand is the small space below the text, in the main columns, showing up in firefox and not in IE. It just seems strange, any idea's as to the cause? Probably padding again but it would be nice to know

    There is also minor shrink in the overall margins in IE over firefox but they are both things I can play with or at the very least, being a bit of a perfectionist , accept as being the browser rather than my code.

    Thank you again,
    Mark

    -Edit I made sure the missing </p> was added in the html but the extra line is still there.
    Last edited by markmid; 11-28-2005 at 11:20 AM.

  • #4
    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
    Paragraphs have default margins and padding. It varies among browsers.
    Code:
    .leftcol p, .maincol p {
    margin:0;
    padding:0;
    }
    Something I do often is add this at the top of my CSS
    Code:
    * {
    margin:0;
    padding:0;
    }
    The above will set all padding and margin on all elements to 0. Then you will need to add in margin and padding where needed. This just takes care of the inconsistency between margin and padding among different browsers.

  • #5
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks the problem is making more logical sense now.

    For anyone copying the code, I did have to align the footer to the right, else it was sitting behind the left column, because its trying to align underneath the main one heh.

    Thank you again for the help, I am all set now and can tweak away.


  •  

    Posting Permissions

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