12 replies [Last post]
awolock
Offline
Regular
michigan
Last seen: 16 years 35 weeks ago
michigan
Joined: 2005-11-02
Posts: 12
Points: 0

Hello-

My layout seems to work fine in all configurations except IE/PC 5, 5.5, & 6.

There is an unwanted gap between the top banner image and a one pixel border. As this will be a newsletter blast all the code is in this page. Can anyone please help.
http://www.keystonemedia.net/q/nustep/newsletter.html

Thank you in advance-

Annie[/url]

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 13 years 16 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

unwanted space in PC IE

Hi,

Try removing the <p> tags and apply '.class' to the image. I am not positive that the <p> tags are necessary in this instance. Laughing out loud

- r

awolock
Offline
Regular
michigan
Last seen: 16 years 35 weeks ago
michigan
Joined: 2005-11-02
Posts: 12
Points: 0

unwanted space in PC IE

a very good suggestion, but that didn't take the gap away. any other sugggestions?

cgustin
Offline
Regular
Last seen: 16 years 30 weeks ago
Joined: 2005-12-06
Posts: 29
Points: 0

unwanted space in PC IE

You have another error in IE for the mac, the page isn't centering....

But I looked at it on a PC and I see the space...IE handles the box model different. You need to hack it. Here is the best way to get the page to still validate.

In your html add this code before you get to your body:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endif]-->

In the middle of the comments, you can change this out to where ever it is that is giving you the gap.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 26 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

unwanted space in PC IE

Make the image display:block if that has knock on effects then target the specific image using descendent selectors or classes; or alternatively vertical-align:bottom should sort it out.
Your rule
img{display:inline} is largely redundant as img is an inline element anyway.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 26 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

unwanted space in PC IE

Lets concentrate on the problem in hand first Smile

For IE Mac (a Dodo) and all others except IE5.0/.5 try

margin-left:auto;
margin-right:auto;

for the element that needs centering and loose the horrible <center> tags.

text-align center on the body tag for IE5 and re-align to text-align left on the first child of body

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

awolock
Offline
Regular
michigan
Last seen: 16 years 35 weeks ago
michigan
Joined: 2005-11-02
Posts: 12
Points: 0

unwanted space in PC IE

Hi-

Well, I tried some of your solutions and still have that pesky gap.

but i don't understand what this means:
In your html add this code before you get to your body:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endif]-->

In the middle of the comments, you can change this out to where ever it is that is giving you the gap.

Also, this is a news blast, if that matters.

I am not so concerned about the MAC centering, but i had removed the center tags and did that. My real concern is getting rid of that gap.

thanks-

cgustin
Offline
Regular
Last seen: 16 years 30 weeks ago
Joined: 2005-12-06
Posts: 29
Points: 0

unwanted space in PC IE

This is what I have placed in my code right before the </head> tag:

<!--[if IE]>
<style>
#navigation {
margin-left: 6px;
}
</style>
<![endif]-->

This makes it so you don't have to use a IE hack, as some people are really against using hacks. Just one thought for you.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 26 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

unwanted space in PC IE

You do not need to use conditional comments to correct this sort of a problem it is overkill and totaly unnecessary!

The solutions I provided should work , you seem to have both img display:block and vertical-align:bottom what happens if you change back to img display:inline;

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 13 years 16 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

unwanted space in PC IE

cgustin wrote:

This makes it so you don't have to use a IE hack, as some people are really against using hacks. Just one thought for you.

I, for one, am not against IE hacks, just IE/Mac! Laughing out loud

Hugo wrote:
you seem to have both img display:block and vertical-align:bottom what happens if you change back to img display:inline;

Hugo's suggestion with display:inline and vertical-align works like a charm. I have been following this thread due to a similar issue. Thanks Hugo.

- r

awolock
Offline
Regular
michigan
Last seen: 16 years 35 weeks ago
michigan
Joined: 2005-11-02
Posts: 12
Points: 0

unwanted space in PC IE

yes. Thanks!!! this did indeed work. But now i am stumped again. This time for the IE 5./5.5 that seame pesky line is short 23 pixels. any other in sight?

for the record, i feel like i really know my way around css but it just seems like there are so many dang quirks with IE, Is there anyway / place that these are documented?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 35 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

unwanted space in PC IE

awolock wrote:
Is there anyway / place that these are documented?

Yes

www.positioniseverything.net

Your problem may be IE5's broken box model. If you combine either or

Heigth/Width

with either or

Padding/border

on the same element, IE 5 will get it wrong. You will need to tan hack the height and/or width.

I haven't looked at your css, but just scan through and see if you have done this.

Trevor

awolock
Offline
Regular
michigan
Last seen: 16 years 35 weeks ago
michigan
Joined: 2005-11-02
Posts: 12
Points: 0

unwanted space in PC IE

thank you all for your help!

i so appreciate you being here for when i get stuck!

a