PDA

View Full Version : IE interpreting my measurements differently



echofactory
Jan 22nd, 2009, 07:39 PM
Seems like a simple fix, however i've looked through everything and haven't figured it out. I'm just missing it.
My web page looks fine in FF, and Safari, but in IE 7 it's pushing my main content div down by a few pixels and not lining up at the bottom with my navigation buttons. Here's a link:
MSP (http://schafferphotography.com/beta/index.html)

My guess would be an issue with the margins and padding, or i'm calculating the pixel dimensions wrong.
Seems like everytime I think I understand what's going on, i am quickly reminded I know very little, and mess something else up. anyway thanks in advance for any time and help you can give.

Rowsdower!
Jan 22nd, 2009, 09:38 PM
Hello and welcome to the forums!

Yep, IE handles padding and margins differently than other browsers. It's good that you're developing and debugging with FF, now is the time to adjust minor issues for IE. Try adding a conditional statement with a second external CSS file with your IE tweaks. This tweaking file should be very short (should only contain the differences you need to implement in IE).

In this case you'd be looking for this in the HTML, just under your existing linked CSS file:
<!--[if IE]>
<link rel="stylesheet" media="all" type="text/css" href="main_ie.css" />
<![endif]-->

And this (possibly ONLY this) in a CSS file named "main_ie.css":
#nav {
margin-top: 157px;
}

Is this what you're looking for?

echofactory
Jan 22nd, 2009, 11:19 PM
Hello and welcome to the forums!

Yep, IE handles padding and margins differently than other browsers. It's good that you're developing and debugging with FF, now is the time to adjust minor issues for IE. Try adding a conditional statement with a second external CSS file with your IE tweaks. This tweaking file should be very short (should only contain the differences you need to implement in IE).

In this case you'd be looking for this in the HTML, just under your existing linked CSS file:
<!--[if IE]>
<link rel="stylesheet" media="all" type="text/css" href="main_ie.css" />
<![endif]-->

And this (possibly ONLY this) in a CSS file named "main_ie.css":
#nav {
margin-top: 157px;
}

Is this what you're looking for?

Yeah that was it. works great. Thanks so much. (IE 6 still doesn't work on the pages without a flash file, but i don't think i'm as concerned with IE 6, so i'll probably fix that a little later when there is time).

So the descrepincy was 15px? How did you figure it? I was looking through my margins and padding but couldn't figure it out.
Thanks again for your help.

Rowsdower!
Jan 23rd, 2009, 01:24 PM
Yeah that was it. works great. Thanks so much. (IE 6 still doesn't work on the pages without a flash file, but i don't think i'm as concerned with IE 6, so i'll probably fix that a little later when there is time).

So the descrepincy was 15px? How did you figure it? I was looking through my margins and padding but couldn't figure it out.
Thanks again for your help.

I just "eyeballed" it and tried 15px. Got lucky on my first guess, too. Score! Also, just to put it out there for you a lot of people still use IE6 so you may want to bump that fix up a little in your priorities. I'd be far less concerned with buillds of IE below 6, but it's still too soon to write off the IE6 crowd IMO. :thumbsup:

I don't have IE6 so I can't help you do that, but remember that there are conditional statement "hacks" you can use to patch it up if you need to.

Best of luck!

echofactory
Jan 24th, 2009, 12:11 AM
I just "eyeballed" it and tried 15px. Got lucky on my first guess, too. Score! Also, just to put it out there for you a lot of people still use IE6 so you may want to bump that fix up a little in your priorities. I'd be far less concerned with buillds of IE below 6, but it's still too soon to write off the IE6 crowd IMO. :thumbsup:

I don't have IE6 so I can't help you do that, but remember that there are conditional statement "hacks" you can use to patch it up if you need to.

Best of luck!

yeah i've actually fixed the height issue in IE 6 now too, i noticed while i was repairing the other part that i had some pretty large pixel heights set which when combined with the padding and margins made IE freak out. IE 7 displayed it just fine but after looking at my code, technically those heights shouldn't have worked it seemed in any browser, anyway i got that corrected only thing i have left to do is either remove the transparent pngs or hack it for IE 6 so they work transparently.