PDA

View Full Version : Margin and/or Padding Issue in IE?



PRT
12-14-2007, 03:43 AM
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

TimFA
12-14-2007, 08:26 AM
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.

PRT
12-14-2007, 03:35 PM
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

TimFA
12-14-2007, 07:03 PM
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.

PRT
12-14-2007, 07:11 PM
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!

TimFA
12-14-2007, 07:15 PM
Thats fine, you have a looksy. I'm going to mow .... bleck .... back later.

PRT
12-14-2007, 09:28 PM
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!