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
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    extra space appearing in IE and not FF

    Hi,

    I know this is a small positioning, display, or other minor issue but i'm getting an odd 15px padding or margin appearance occurring in IE and not FF.

    you can see it here: www.enviromark.ca/head/

    the relevant code is:
    Code:
    /* CSS Document */
    * {
    padding: 0;
    margin: 0;
    outline: 0;
    }
    html, body {
    height:100%;
    font-family: "verdana", trebuchet ms, arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    }
    * html #pageContainer {
    height:100%;
    }
    #pageContainer {
    min-height: 100%;
    }
    .clear {
    clear:both;
    font-size:0;
    line-height:0px;
    }
    #topBorder {
    position: relative;
    display: block;
    margin-top:75px;
    margin-left: 75px;
    }
    #links_BW {
    float: left;
    position: relative;
    display: inline;
    margin-left: 75px;
    width: 70px;
    }
    
    /*#info_BW, YPP_BW, social_BW, med_BW, legal_BW, J2K_BW, street_BW {
    padding-bottom: 15px
    } --- I may want to do this later but for now it is doing it on it's own...*/

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Testing</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" href="css/main.css" type="text/css">
    </head>
    
    <body>
    <div id="pageContainer">
    	<div id="topBorder"><img src="images/head&hands_color.gif"></div>
    	<div id="links_BW">
    		<img src="images/logoButtons/info_BW.jpg" id="info_BW">
    		<br>
    		<img src="images/logoButtons/YPP_BW.jpg" id="YPP_BW">
    		<br>
    		<img src="images/logoButtons/social_BW.jpg" id="social_BW">
    		<br>
    		<img src="images/logoButtons/med_BW.jpg" id="med_BW">
    		<br>
    		<img src="images/logoButtons/legal_BW.jpg" id="legal_BW">
    		<br>
    		<img src="images/logoButtons/J2K_BW.jpg" id="J2K_BW">
    		<br>
    		<img src="images/logoButtons/street_BW.jpg" id="street_BW">
    	</div>
    </div>
    
    </body>
    </html>
    I'm just starting out with the page so feel free to make any other suggestions --> the middle part will be an Iframe (i would rather use my div toggler but the community organization who will be editing the content later wont be able to sift through my code so they want to simply have "accessible html files"

    Thanks a lot
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    Hey,
    Sorry, i dont have time too look at your code right now but im preaty sure i know the problem.
    it can be one of 2 things.

    1 - If you have margins in the same derection as a float then IE6 will 2bl the margin.
    ex: if u have "#content {flot: left; margin-left: 10px;}" Then IE6 will use a 20px margin.
    This problem is very easy to fix, simple put into the code "display:inline". This will get rid of the 2ble margin and not effect firefox.
    now my example code will look like "#content {flot: left; margin-left: 10px;display:inline;}"

    2- IE6 will add a 3px gap between floated elements and non-floated elements.

    To solve this problem u must put your code fixes in IE only style.
    The Fix:
    *html #non-floated-div {margin-left:0px;}
    *html #floated-div {margin-right: -3px;}


    Hope this helps! And even if it does not it is good to know anyway!
    Last edited by srule_; 07-06-2007 at 02:29 AM.

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Thanks, I am trying them now.

    I almost didn't submit this post owing to the fact that Aero has answered this question for me in the past, unfortunately I haven't made a page in a while and was unable to apply the code he gave me before to solve this problem
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #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
    Get rid of the br tags in the following code.
    Code:
    	<div id="links_BW">
    		<img src="images/logoButtons/info_BW.jpg" id="info_BW">
    		<br>
    		<img src="images/logoButtons/YPP_BW.jpg" id="YPP_BW">
    		<br>
    		<img src="images/logoButtons/social_BW.jpg" id="social_BW">
    		<br>
    		<img src="images/logoButtons/med_BW.jpg" id="med_BW">
    		<br>
    		<img src="images/logoButtons/legal_BW.jpg" id="legal_BW">
    		<br>
    		<img src="images/logoButtons/J2K_BW.jpg" id="J2K_BW">
    		<br>
    		<img src="images/logoButtons/street_BW.jpg" id="street_BW">
    	</div>
    They aren't necessary. After doing that add this to your CSS
    Code:
    #links_BW img {
    display:block;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Thanks!

    97% fixed... I still seem to have about a 2px border between them in IE and not FF. (I uploaded it again for viewing purposes: http://www.enviromark.ca/head/)

    Thanks Aero... you will probably see a lot of me in the next little bit, I accepted to remodel a local youth community outreach program's website before my September term starts

    here's the code with your changes:

    Code:
    /* CSS Document */
    * {
    padding: 0;
    margin: 0;
    outline: 0;
    }
    html, body {
    height:100%;
    font-family: "verdana", trebuchet ms, arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    }
    * html #pageContainer {
    height:100%;
    }
    #pageContainer {
    min-height: 100%;
    }
    .clear {
    clear:both;
    font-size:0;
    line-height:0px;
    }
    #topBorder {
    position: relative;
    display: block;
    margin-top:75px;
    margin-left: 75px;
    }
    #links_BW {
    float: left;
    position: absolute;
    display: block;
    margin-left: 75px;
    width: 70px;
    }
    
    /*#info_BW, YPP_BW, social_BW, med_BW, legal_BW, J2K_BW, street_BW {
    padding-bottom: 15px
    } --- I may want to do this later but for now it is doing it on it's own...*/
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Testing</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" href="css/main.css" type="text/css">
    </head>
    
    <body>
    <div id="pageContainer">
    	<div id="topBorder"><img src="images/head&hands_color.gif"></div>
    	<div id="links_BW">
    		<img src="images/logoButtons/info_BW.jpg" id="info_BW">
    		<img src="images/logoButtons/YPP_BW.jpg" id="YPP_BW">
    		<img src="images/logoButtons/social_BW.jpg" id="social_BW">
    		<img src="images/logoButtons/med_BW.jpg" id="med_BW">
    		<img src="images/logoButtons/legal_BW.jpg" id="legal_BW">
    		<img src="images/logoButtons/J2K_BW.jpg" id="J2K_BW">
    		<img src="images/logoButtons/street_BW.jpg" id="street_BW">
    	</div>
    </div>
    
    </body>
    </html>
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #6
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    on a small, but relevant to avoid future unnecessary posts, note: do you have any suggestions regarding doctype, CSS i am currently using, or any other suggestions I should implement before I continue to keep things displaying properly across browsers, resolutions, etc.

    I guess what I'm asking is when you make a website from scratch, do you have a 'css template' that you slap in and build from, or do you start from scratch each time?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #7
    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
    I start from scratch each time. The only thing about your code is your doctype. You continue to use a partial doctype that is putting IE6 into quirks mode. This will be the last time I tell you this because I've been repeating myself over and over. You never listen. Use a FULL doctype. I'm pretty sure DW isn't the one giving you that doctype because every new document I've created with dreamweaver has a full doctype with it. As to your CSS, a div is already a block level element, no need to make it display:block. And default is position:static but position:relative works almost the same way so need to add that either unless positioning an element that is to be absolute. As to your issue, I would actually use an unordered list or ordered list. Doing so would be semantical. No need for that div either.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Thanks Aero,

    I will correct you on one aspect: that is in fact the default doctype added by DW, and I have just verified that myself, although perhaps it is my version of DW (MX). I will change it now.

    Thanks for the suggestions, I will make them now
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #9
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    I have changed it to <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    I do assume this is what you meant by a full doctype... judging by what I just read in the sticky on doctypes anyways

    unless you suggest another apart from loose...

    [edit]
    I will try changing the div into a list, although I don't see why that would work better. Will that impede my ability to turn those links into rollovers later?

    going to bed
    Last edited by canadianjameson; 07-06-2007 at 05:37 AM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #10
    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
    Quote Originally Posted by canadianjameson View Post
    I have changed it to <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    I do assume this is what you meant by a full doctype... judging by what I just read in the sticky on doctypes anyways

    unless you suggest another apart from loose...

    [edit]
    I will try changing the div into a list, although I don't see why that would work better. Will that impede my ability to turn those links into rollovers later?

    going to bed
    No it won't impede your ability to turn them into rollovers later. I suggest you read about semantic html (do a google search for semantic html).
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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