SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why is IE not recognizing margin-top?

    this page, www.deronsizemore.com/websites.php

    In Firefox it looks how I want it. IE screws with the margin-top set to the content div. Its not a really big deal I suppose, but its just messing with me. I've tried the *html hack for IE and still nothing. Basically the word at the top "websites" shouldn't be that close to the top.


    Thanks,
    Deron
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  2. #2
    SitePoint Addict Synaesthesiac's Avatar
    Join Date
    Aug 2004
    Posts
    359
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I might be missing something, but doesn't your content div have margin-top set at 2px?
    Danielion
    Imagine a world without hypothetical scenarios...

  3. #3
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes.

    Well maybe its Firefox not rendering right then? Either way if you check the site out in IE and then in Firefox the word "Websites" at the top of the page is closer to the top then it is in Firefox. I would like it to look in all browsers like it does in Firefox.

    -Deron
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  4. #4
    SitePoint Addict Synaesthesiac's Avatar
    Join Date
    Aug 2004
    Posts
    359
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks better in Firefox (with "websites" not so close to the top).

    Not sure where the descrepency is coming from, though... IE seems to be rendering it correctly (although I haven't gone through all of your CSS). You might need to do a bit of backtracking and/or double-checking your code to make sure you aren't overlooking something.
    Danielion
    Imagine a world without hypothetical scenarios...

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE has some bugs concerning collapsing margins. Margins on the first element in a container often get screwed up. You could set the top margin to 0 and use a top padding instead, that usually works better.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Zealot
    Join Date
    Sep 2003
    Location
    Michigan
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure if this is the problem. You had one to many closing div's.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
      <head>
      <title>deronsizemore.com - Deron Sizemore's personal portfolio site</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <link rel="stylesheet" href="style8.css" type="text/css" />
      </head>
      
     <body>
      <div id="outer"> 
        <div id="header"> 
     	 <div id="leftheader"> <img src="images/deronsizemorelogo.gif" alt="" title="deronsizemore.com logo" /> 
     	 </div>
     	 <div id="rightheader"> <a href="index.php">Home</a> | <a href="resume.php">Resume</a> 
     	   | <a href="portfolio.php">Portfolio</a> | <a href="services.php">Services</a> 
     	   | <a href="contact.php">Contact</a> </div>
        </div>
        <div id="picheader"> <img src="images/watersplash.jpg" alt="" title="water splash" /> 
        </div>
        <div id="content"> 
     	 <p><strong>Websites</strong></p>
     	 <div class="wrap"> 
     	   <div class="title"><strong>Natural Choices</strong></div>
     	   <div class="top"><span class="topleft"><a href="http://www.natural-choices.com" target="_blank">View 
     		 Website</a> | <a href="natchoicesscreenshot.php" target="_blank">View 
     		 Image</a></span></div>
     	   <img src="images/naturalchoicesthumb.jpg" alt="Screenshot for Natural-Choices website" class="pic" width="184" height="109" />	
     	   <div class="text"> 
     		 <p>Natural-Choices is a site dedicated to the work of Carol Perkins who 
     		   is a Naturopathic Physician (N.D.) located in Lexington, KY. She is 
     		   educated, trained, and specializes in natural medicine. </p>
     	   </div>
     	   <div class="clearer"></div>
     	 </div>
     	 <div class="wrap"> 
     	   <div class="title"><strong>Deronsizemore.com version 1.0</strong></div>
     	   <div class="top"><span class="topleft"><a href="dsizemov1screenshot.php" target="_blank">View 
     		 Image</a></span></div>
     	   <img src="images/dsizemov1thumb.gif" alt="Screenshot for deronsizemore.com v.1" class="pic" width="184" height="109" />	
     	   <div class="text"> 
     		 <p>Deronsizemore.com version 1.0 was never finished. While designing that 
     		   site, I had the idea for the current one, therefore stopped designs 
     		   on version 1.0. Although you cannot browse the site, feel free to check 
     		   out the image. </p>
     	   </div>
     	   <div class="clearer"></div>
     	 </div>
     	 <div class="wrap"> 
     	   <div class="title"><strong>The Amish Barn</strong></div>
     	   <div class="top"><span class="topleft"><a href="http://www.theamishbarn.com" target="_blank">View 
     		 Website</a> | <a href="theamishbarnscreenshot.php" target="_blank">View 
     		 Image</a></span></div>
     	   <img src="images/theamishbarnthumb.gif" alt="Screenshot for The Amish Barn website" class="pic"width="184" height="109" />	
     	   <div class="text"> 
     		 <p>The Amish Barn site was my senior project at Morehead State University. 
     		   This site was designed to give customers an idea of what the Amish Barn 
     		   has to offer as they have "The Best Amish Craftsmen in Three States" 
     		   making their funiture.</p> </div>
     	   <div class="clearer"></div>
     	 </div>
        </div>
        <div id="clearfooter"></div>
        <div id="footer"> Valid <a href="http://validator.w3.org/check?uri=referer" title="Valid XHTML Transitional">XHTML 
     	 1.0</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS">CSS</a></div>
      </div>
      </body>
      </html>
    Bill Rosa


  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You are all looking in the wrong place lol

    The space above the word website is due to mozilla applying a default 1em top margin to the p element. (Ie only applies bottom margin by default)

    Ie is applying the 2px margin-top you applied and if you color the background you will see that it shows.

    You simply need to give the p tag a margin equivalent to mozilla.
    Code:
    #content {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12px;
    width: 500px;
    margin-left: 99px;
    margin-top: 2px;
    clear: both;
    }
    #content p{margin-top:1em}
    That will make them both look the same.

    Paul

  8. #8
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Radar5756
    I'm not sure if this is the problem. You had one to many closing div's.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
      <head>
      <title>deronsizemore.com - Deron Sizemore's personal portfolio site</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <link rel="stylesheet" href="style8.css" type="text/css" />
      </head>
      
     <body>
      <div id="outer"> 
        <div id="header"> 
     	 <div id="leftheader"> <img src="images/deronsizemorelogo.gif" alt="" title="deronsizemore.com logo" /> 
     	 </div>
     	 <div id="rightheader"> <a href="index.php">Home</a> | <a href="resume.php">Resume</a> 
     	   | <a href="portfolio.php">Portfolio</a> | <a href="services.php">Services</a> 
     	   | <a href="contact.php">Contact</a> </div>
        </div>
        <div id="picheader"> <img src="images/watersplash.jpg" alt="" title="water splash" /> 
        </div>
        <div id="content"> 
     	 <p><strong>Websites</strong></p>
     	 <div class="wrap"> 
     	   <div class="title"><strong>Natural Choices</strong></div>
     	   <div class="top"><span class="topleft"><a href="http://www.natural-choices.com" target="_blank">View 
     		 Website</a> | <a href="natchoicesscreenshot.php" target="_blank">View 
     		 Image</a></span></div>
     	   <img src="images/naturalchoicesthumb.jpg" alt="Screenshot for Natural-Choices website" class="pic" width="184" height="109" />	
     	   <div class="text"> 
     		 <p>Natural-Choices is a site dedicated to the work of Carol Perkins who 
     		   is a Naturopathic Physician (N.D.) located in Lexington, KY. She is 
     		   educated, trained, and specializes in natural medicine. </p>
     	   </div>
     	   <div class="clearer"></div>
     	 </div>
     	 <div class="wrap"> 
     	   <div class="title"><strong>Deronsizemore.com version 1.0</strong></div>
     	   <div class="top"><span class="topleft"><a href="dsizemov1screenshot.php" target="_blank">View 
     		 Image</a></span></div>
     	   <img src="images/dsizemov1thumb.gif" alt="Screenshot for deronsizemore.com v.1" class="pic" width="184" height="109" />	
     	   <div class="text"> 
     		 <p>Deronsizemore.com version 1.0 was never finished. While designing that 
     		   site, I had the idea for the current one, therefore stopped designs 
     		   on version 1.0. Although you cannot browse the site, feel free to check 
     		   out the image. </p>
     	   </div>
     	   <div class="clearer"></div>
     	 </div>
     	 <div class="wrap"> 
     	   <div class="title"><strong>The Amish Barn</strong></div>
     	   <div class="top"><span class="topleft"><a href="http://www.theamishbarn.com" target="_blank">View 
     		 Website</a> | <a href="theamishbarnscreenshot.php" target="_blank">View 
     		 Image</a></span></div>
     	   <img src="images/theamishbarnthumb.gif" alt="Screenshot for The Amish Barn website" class="pic"width="184" height="109" />	
     	   <div class="text"> 
     		 <p>The Amish Barn site was my senior project at Morehead State University. 
     		   This site was designed to give customers an idea of what the Amish Barn 
     		   has to offer as they have "The Best Amish Craftsmen in Three States" 
     		   making their funiture.</p> </div>
     	   <div class="clearer"></div>
     	 </div>
        </div>
        <div id="clearfooter"></div>
        <div id="footer"> Valid <a href="http://validator.w3.org/check?uri=referer" title="Valid XHTML Transitional">XHTML 
     	 1.0</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS">CSS</a></div>
      </div>
      </body>
      </html>

    Thanks for pointing that out to me again. I did that the other day in an attempt to fix another problem I was having, but last realized that was completely wrong and never went back to fix it.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  9. #9
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    You are all looking in the wrong place lol

    The space above the word website is due to mozilla applying a default 1em top margin to the p element. (Ie only applies bottom margin by default)

    Ie is applying the 2px margin-top you applied and if you color the background you will see that it shows.

    You simply need to give the p tag a margin equivalent to mozilla.
    Code:
    #content {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12px;
    width: 500px;
    margin-left: 99px;
    margin-top: 2px;
    clear: both;
    }
    #content p{margin-top:1em}
    That will make them both look the same.

    Paul

    Hi Paul. Would another way to do this be to just set the margins to 0 in #content p and then make the margin-top bigger in the #content div?

    I'll probably end up doing it your way, just curious.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  10. #10
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it's a good idea to remove all default margins using the universal selector so that you can control them:

    Code:
    * {
    margin: 0;
    padding: 0;
    }

  11. #11
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by duuudie
    it's a good idea to remove all default margins using the universal selector so that you can control them:

    Code:
    * {
    margin: 0;
    padding: 0;
    }
    This takes all default margins off, but is like for only IE or is taht for all browsers?
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  12. #12
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by deronsizemore
    This takes all default margins off, but is like for only IE or is taht for all browsers?
    All browsers. * is shorthand for "every element".

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Paul. Would another way to do this be to just set the margins to 0 in #content p and then make the margin-top bigger in the #content div?

    I'll probably end up doing it your way, just curious.
    Same difference

    (Note that mozilla has a top margin-bug so sometimes you have to play around with the elements to get the margins to take effect.)

    Paul


Bookmarks

Posting Permissions

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