/    Sign up×
Community /Pin to ProfileBookmark

Background image gone in IE6,. Negative margin??

Copy linkTweet thisAlerts:
Sep 07.2006

I’ve got two problems with disappearing backgrounds in IE6.
One is a background image on a p element which disappears as soon as a link inside it is hovered.
It appears to be caused by the p’s negative top-margin. Yet the negative margin needs to be there for layout reasons. I couldn’t find any info about this iIE issue, thus far.

The second problem is the body’s background image which doesn’t show up at all in IE, for no apparent good reason. The path and file names are correct. It works fine in FF. But in IE the body’s background picture seems to not exist.

relevant html code:

[CODE]
<body>

<p class=”ph2″>
blahhhhhhhhhhhhhh. Blaahhhhhhhhhh. Blaahhhhhhhhhh.
</p>

</div>[/CODE]

relevant CSS code:

[CODE]
body {
font: 0.9em verdana, arial, sans-serif;
text-align: center;
margin: 0; padding: 1px; /*attempt at giving it “LayOut” for IE*/
background: url(../bg/body-upgr.jpg) repeat-x;/*invisible in IE*/
}

.ph2 {
font: bold italic 0.8em helvetica, arial, sans-serif;
text-align: center;
padding: 5px 20px 0 0;
margin-top: -5px; /*seems to cause the problem for this element*/
background: url(../bg/blst.jpg) 100% 0 repeat-y;
}[/CODE]

Any help will be appreciated [RIGHT]:mad:[/RIGHT]

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@nataliemacSep 08.2006 — I need some clarification.

If you remove the negative margin from your <p> element, then the issue with hover is resolved?

Negative margins can be pretty problematic, it's best to avoid them. I'm not sure that I understand why the negative margin is needed for your layout.

Can you provide a link to a page so I can see these problems in action? There might be some other conflict between styles or layout that doesn't show in the small snippet you've included.
Copy linkTweet thisAlerts:
@WebJoelSep 08.2006 — I'm not sure why you'd want any background image or for that matter, a y-axis ("vertical-tiling") background image, on a <p> element anyways, because <p> is going to be governed by line-height, reserved for text elements. It sort of makes no sence to fill what is supposed to be "text" with "background image". Maybe for a <li> "button" a background image would be neat, but for [I]regular text[/I]? Hmm..

Seems as if creating a <div></div> with the cited tiling background image is smarter, and populating [I]it[/I] with the <p></p> [I]sans[/I] the background image. It would circumvent the problem that you will encounter if you have a second instance of <p></p>, which will give you a 'gap' between it and the <p></p> above it...

But I'd like to see for myself what you are saying, -to see if a resolution can be found. ?
Copy linkTweet thisAlerts:
@augustauthorSep 11.2006 — Thanks for your input.

By providing that input, I figured out one of the problems. The negative margin wasn't needed (it's the stress ?)

But the body's background image still doesn't show up in IE, which seems strange.



As for that p. The html was chosen by others as a basic template, and I had to change the layout & look quickly and so didn't have time to replace all the bad elements. That p would probably normally have been a div.

Also, the page is on a local server so I can't show it yet (don't have control of the publishing)

I appreciate your help.
×

Success!

Help @august spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...