Advanced Search

Results 1 to 7 of 7

Thread: Margin and/or Padding Issue in IE?

  1. #1
    Join Date
    Nov 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Margin and/or Padding Issue in IE?

    At http://www.psgga.com/NEW/index.html

    The HEADER H1, H2, and P are being pushed down in IE.
    Works properly in Firefox, Safari, Camino but not IE

    I'm pretty sure it is a IE -/+ MARGIN issue, but not sure HOW to correct.
    And still have the text line up properly over the background image.

    HTML
    <h1>PREMIER</h1>
    <h2>SERVICES GROUP</h2>
    <p class="motto">Protecting the Life Of Your Business is Our Mission</p>

    CSS: (http://psgga.com/NEW/css/psg.css)

    body {
    margin:0;
    padding:0;
    font-family: tahoma, verdana, sans-serif;
    font-size: .9em;
    background-image: url(../media/bg.png);
    background-position: 0px +0px;
    background-repeat: repeat-x;
    color: #333333;
    margin-top: 12px; }

    #header {
    margin: 0 auto 0 auto;
    width:910px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../media/psglogo3.png);
    height: 102px;
    }

    #header h1 {clear: none;
    font-family: "Times New Roman", serif;
    font-size: 2.5em;
    letter-spacing: .80em;
    color: #ffffff;
    padding-left: 74px;
    padding-bottom: 3px;
    padding-top: 6px;
    margin-top: -6px; }

    #header h2 {clear: none;
    font-family: "Times New Roman", serif;
    font-weight: 400;
    font-size: 1.6em;
    letter-spacing: .45em;
    padding-left: 74px;
    padding-top: 0em;
    margin-top: -23px; }

    .motto {font-size: 1.4em;
    color: #800000;
    font-stretch: wider;
    font-family: "Times New Roman", serif;
    font-weight: 400;
    font-style: italic;
    padding-left: 420px;
    margin-top: -66px; }

    Any suggestions would be appreciated.

    Oh and by the way, I HATE IE

  2. #2
    Join Date
    Mar 2007
    Location
    Tarboro, NC
    Posts
    290
    Thanks
    8
    Thanked 2 Times in 2 Posts

    Default

    I can't see anything, try not using *quite* as much padding and margins, IE chokes on those...also check out if you may have accidentally not closed something in your HTML, while FF and others will automatically ignore this, IE throws a huge fit.

  3. #3
    Join Date
    Nov 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by TimFA View Post
    I can't see anything, try not using *quite* as much padding and margins, IE chokes on those...also check out if you may have accidentally not closed something in your HTML, while FF and others will automatically ignore this, IE throws a huge fit.
    Checked to see if I left something open or closed, and didn't see anything. I only see this problem in IE, so SOMETHING is causing the margin and/or padding to push down my <h1> content. In the Header there is a sliding door tab menu, <h1>, <h2> and a <P> the images are background and seem to display properly in all browsers

  4. #4
    Join Date
    Mar 2007
    Location
    Tarboro, NC
    Posts
    290
    Thanks
    8
    Thanked 2 Times in 2 Posts

    Default

    Sliding door ? Do you mean it slides down or something? If thats what you mean, then IE may be doing it because that.

    also something you can do is try using a DIV system to instead of padding. It may or may not work, I was thinking though that will tell us if its something else or paddings and margins.

  5. #5
    Join Date
    Nov 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by TimFA View Post
    Sliding door ? Do you mean it slides down or something? If thats what you mean, then IE may be doing it because that.

    also something you can do is try using a DIV system to instead of padding. It may or may not work, I was thinking though that will tell us if its something else or paddings and margins.
    Hmmm, you may be on to something here. The bg images for Sliding door have a height of 249px. Let me investigate further. However I am using the same script for the SERVICES menu below and the bg images for that effect has height of 200px and the content below is NOT being pushed down. BOTH menus use the same js file.

    I'm beginning to think it is a ID10T Programmer error!

  6. #6
    Join Date
    Mar 2007
    Location
    Tarboro, NC
    Posts
    290
    Thanks
    8
    Thanked 2 Times in 2 Posts

    Default

    Thats fine, you have a looksy. I'm going to mow .... bleck .... back later.

  7. #7
    Join Date
    Nov 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by TimFA View Post
    Thats fine, you have a looksy. I'm going to mow .... bleck .... back later.
    It was an ID-10-T Programmer error!

    In CSS I set the margin and width of the Header ID to

    #header {
    margin: 0 auto 0 auto;
    width:910px; /*to set width & center the header on the page*/

    Which wrapped the Sliding Doors Site Menu, & my header: h1, h2 & p
    But had redundantly also set the margin & width set to

    margin: 0 auto 0 auto;
    width:910px; in the <div id="slidemenu" class="slidetabsmenu">

    All browsers IGNORED the redundancy except IE which caused all the content to push down.

    Eliminating the width and margins in the WRAPPED DIV seemed to fix the problem.

    Also I was trying to line up h1 above a line background image, and a h2 below the line, but found it easier to JUST text decorate the h2 with an OVERLINE since each browser seems to adjust the text differently making it very difficult perfectly straddle the line.

    Now I'll have to tweak the text positions to find the right cross browser balance.

    Thanks for your suggestions!

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
  •