2 replies [Last post]
VaRiX
Offline
newbie
Maryland, USA
Last seen: 17 years 37 weeks ago
Maryland, USA
Timezone: GMT-5
Joined: 2004-01-08
Posts: 5
Points: 0

I am using a negative-margin style image replacement technique for an H1 on my corporate redesign's subpage. [1] Everything works as expected in Mozilla, Netscape and other browsers (the ones my audience uses) but in all versions of IE Win there is a 2-3 pixel gap [2 - page 2] on the left side of the image.

The CSS and XHTML are valid and I have tried all sorts of things to get it fixed in IE with no luck.

Does anyone know what is causing this unsightly gap? (I also still have that odd navigation display in IE 5.2 Mac too.)

Thanks in advance for any suggestions or comments,
Ian

Links:
[1] http://199.33.137.86/About/
[2] http://www.browsercam.com/public.aspx?proj_id=39128

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 17 years 47 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

IE 5-6 Win Issues With Image Replacement Technique

Replace the "#sectionname h1" rule block in sub_style.css with:

#sectionname  {
 padding: 67px 0 0 0;
 margin: 0;
 background: #00146a url("/images/headers/aboutus.gif") no-repeat top right;
}

#sectionname  h1 {
visibility: hidden;
height: 0px;
font-size: 0px;
line-height: 0px;
margin: 0;
}

The height rules for the h1 were critical, as those were triggering
the IE 3px bug. See this page for details:

http://www.positioniseverything.net/explorer/threepxtest.html

Now the BG'd element has no dimension to trigger the bug.

HTH

http//www.positioniseverything.net/

VaRiX
Offline
newbie
Maryland, USA
Last seen: 17 years 37 weeks ago
Maryland, USA
Timezone: GMT-5
Joined: 2004-01-08
Posts: 5
Points: 0

IE 5-6 Win Issues With Image Replacement Technique

BigJohn, thanks for the hint!

The reason I didn't want to use 'visibility:hidden;' or 'display:none;' was for accessiblity reasons related to the aural browsers and screen readers. By setting overflow to hidden and padding the text out of view, it's still readable by those browsers.

What I ended up doing was to apply the background image to #sectionname as well as the h1, effectively hiding the issue visually.

I did notice that the IE 3px Jog bug reared it's ugly head in my body text area.. and that just wasn't acceptable. (I discovered it before reading this post) I have fixed it by serving a different style to the div that wraps my main page content:

.inside {padding: 1em; margin:0;}
* html .inside {padding: 1em; margin: 0 0 0 -3px;}

As I'm sure you know (you're famous in the CSS circles) the * html is only applied by IE/Win. I took the cheezy way out and negative-margined-out the IE error.

Do you hate IE as much as I do? It's a shame such a popular browser (95% in my audience) is abandoned by its developers. The Mozilla team is amazingly quick and consistent with their releases.

One last question... can you please contact me via email about opening a PO so that I can use your CSS expertise whenever I run into a snag with this redesign? I can't afford wasting the time trying to solve these browser bug issues with my extremely tight timeline. Do you only work with Molly or do you work alone as well? Contact me at Ian UNDERSCORE Pitts AT g1 DOT com.

Thanks again,
Ian[/code]