/    Sign up×
Community /Pin to ProfileBookmark

image positioning – IE and Fx differences

Copy linkTweet thisAlerts:
Aug 22.2006

[url]http://kdla.ky.gov/_test/homepage.htm[/url]

I’m trying to position an image in the banner area. In Fx, it’s fine. In IE, there’s about a 1px vertical misalignment, that (of course) is obvious. Can anyone figure out what’s wrong?

[code] <div style=”position: absolute; margin-top: -24px; margin-left: 0; padding-left: 50px; width: 140px; z-index: 1000; display: block;”>
<img src=”../images/banners/sept-ban.gif” width=”140″ height=”216″ style=”margin: 0; padding: 0;” alt=”lady with book”/>
</div>[/code]

Thanks,
KDLA

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelAug 22.2006 — I'm not a big fan of using "negative margins' to position an "absolute"-positioned anything. I'd go "position:absolute: top:whatever;" and have the banner's margin be "0" and avoid IE's misunderstanding of the margin.

I will mention that for IE, the following should always be added:

<style>

border:0; padding:0; margin:0;

</style>

because IE 'assumes' a pixel or three for these values, whereas other browsers assume "zero". This re-sets IE to the normal, and you won't keep picking-up that extra pixel or two later on, as IE inherits these it seems.

Also, you're not going acheive a z-index greater than "default" with "absolute" positioning (which based upon your / user's screen). Only "relative" postioning acheives greater-than-one z-index values. A work-around is to put a relative-positioned whatever inside of a absolute-postioned something...

If the wanna-position image is "lady with book", I do not see it with Firefox. I do see it with IE.
Copy linkTweet thisAlerts:
@KDLAauthorAug 22.2006 — Thanks. I'm just playing with it. The wild z-index was thrown in there out of frustration. I'll remove it.

The negative margin was the only way to work around our template, which we're not allowed to change. I tried the absolute positioning, first, but in IE, everything was pushed over. (everything under the image was pushed to the right of the image) Nothing I did seemed to overcome this. Do you know of a way to position (absolutely) without effecting the rest of the page?
Copy linkTweet thisAlerts:
@WebJoelAug 22.2006 — I'll look into it. ? It may be as simple as 'absolute-postioning' the IMAGE, not the DIV that contains it...

(back)

Without using the four(?, -I didn't count them) stylesheets), I removed the container DIV and just let the 'abs-position' of the image take over... try:

<!-- Start of the Entity Branding (Banner) Component -->

[B]<img alt="lady with book" src="../images/banners/sept-ban.gif" width="140" height="216" style="position:absolute; left:25px; top:10px; margin: 0; padding: 0;" /> [/B]


<div class="ky-brnd">

<div class="ky-brnd-pre"></div>

<div class="ky-brnd-content">

<p class="kdla_identification_home">Kentucky Department for Libraries and Archives</p>

</div>

<div class="ky-brnd-post"></div>

</div>

<!-- End of the Entity Branding (Banner) Component -->[/QUOTE]

and adjust accordingly the left and the top values
×

Success!

Help @KDLA 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 6.17,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...