SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Questions About IE Display

    I have two questions about how IE displays my site: http://baensidhe.net/aardfestival/

    1) Why does the Fall Festival header get displayed align top on IE and align middle on Mozilla? Is there any way I can easily get it aligned middle?

    2) Does anyone know where the big gap between the Fall Festival header and the rest of the page is coming from in IE when using 800x600? I basically copied Paul's header and footer part of his 3 column layout page and now I've somehow messed it up.

    Thanks!

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

    1) The h1 has a larger top margin in mozilla than in IE. Just set it to what you want. This will make it the same in both browsers.
    Code:
    h1 {margin:0;padding:0}
    2) Its ie's famous float drop caused by the safari min-height hack. As IE doesn't need that hack you can just hide it from IE anyway as follows.
    Code:
    html>body #minHeight
    {
     float: left;
     width: 0px;
     height: 100%;
     margin-bottom: -52px;
    } /*safari wrapper */
    /* * html #minHeight
    {
     margin-bottom: -50px;
    }
    */
    Hope that helps.

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul. That solved my problems.

    Now, on to new problems.

    I put backgrounds in on some of my pages (ex. http://baensidhe.net/aardfestival/perdition.html) and in IE, the margins/padding for the header is off. I'm assuming it has something to do with IE's broken box model, but I don't know enough about this stuff to figure out how to fix it without messing it up in other browsers.

    Thanks for the help.

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

    You could simplify the layout a bit by putting the hrader back in the flow.

    e.g.
    Code:
    #header{ text-align:center;}
    h2#heading
    {
     font-family: "Times New Roman", Verdana;
     font-size: 25pt;
     text-align: center;
     margin: 22px 0 0 0;
    }
    and arrange the html like this:

    Code:
    <body id="skeletons">
    <div id="minHeight"></div>
    <div id="outer"> 
      <h2 id="heading"><a href="http://perdition.atomic13.us/" target="_blank"><span class="bred">+ 
    	</span><span class="bwhite">P</span><span class="white">e</span><span class="bwhite">r</span><span class="white">d</span><span class="bwhite">i</span><span class="white">t</span><span class="bwhite">i</span><span class="white">o</span><span class="bwhite">n 
    	</span><span class="bred">+</span></a>
      </h2>
      <h4>Homepage: <a href="http://perdition.atomic13.us/" target="_blank">http://perdition.atomic13.us/</a></h4>
    That gets rid of an unnecessary div and puts the header back in the flpw and also gets rid of the clearheader div which isn't needed in this page now.

    I realise your other pages may be different and need the header styles so you'll have to check that they work with the cahnged styles and html.

    You should really use an h1 heading as your first heading on the page and not h2. Headings should follow logically. h1 is the main heading followed by h2 for sub headings etc.

    Paul

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All righty. I've made those changes and everything is all nicely aligned. However, now pages that don't have enough info to create a scrollbar has a scrollbar on Mozilla. What's strange is that when I add a border around the #outer div to help me figure out what's wrong, the amount of scrolling shrinks to around 1px! (It seems to be working fine in IE.)

    Sample: http://baensidhe.net/aardfestival/credits.html

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

    The problem in mozilla is caused by the default top margin on the h1. If you remove the margin then the page displays correctly. Adding a border causes collapsing margins so the effect is diminished. Mozilla has some strange behaviours with borders and margins and will also inherit the top margin of its first child in some cases. I think this is what happens here and that the body inherits the top margin of the h1 thus forcing the page to be longer than it should.

    Just remove the h1 margin.

    You may also want to adjust the height of the safari min-height hack to match the size of your footer.
    Code:
    html>body #minHeight
    {
     float: left;
     width: 0px;
     height: 100%;
     margin-bottom: -30px;
    } /*safari wrapper*/
    h1 {margin-top:0}
    Hope that helps.

    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
  •