/    Sign up×
Community /Pin to ProfileBookmark

Freaky IE behavior; shifting absolute positions, padless padding??

Copy linkTweet thisAlerts:
Jan 20.2009

Hi, I’m trying to figure out what’s up with this site. It’s currently still under development; I can’t figure out why it looks so different under IE7 though.

[url]http://www.accountingtechnologynews.com/NPTech[/url]

You’ll notice that under IE; the front page is lacking when it comes to padding. The odd thing is that if you look at it again under pretty much any browser; you’ll immediately be able to tell the difference. There’s padding between the menu and top article; also between the actual borders.

Even stranger, if you load up the page under IE7; “More in From the Top” will consistently shift positions higher and lower when you continually refresh the page. I didn’t know what was causing it until I realized that the image itself will somehow push the text down when it’s not cached. It’s weird because I used absolute positioning for that text along with “More in Reviews” yet I only experience it will that left side. Both sections are surrounded by an element with relative positioning set. Anyone have any ideas on this?

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangJan 20.2009 — Looks like collapsing margins: http://www.satzansatz.de/cssd/onhavinglayout.html
Copy linkTweet thisAlerts:
@MrTripiauthorJan 21.2009 — I'm not sure I understand; I thought float removes collapsed borders :/
Copy linkTweet thisAlerts:
@FangJan 21.2009 — I had a quick look, adding [COLOR="SeaGreen"]* {zoom:1;}[/COLOR] (hasLayout), will give the document the required 'padding' in IE.

Adding the property to all elements is incorrect,; it only needs to be added to a few elements.
Copy linkTweet thisAlerts:
@MrTripiauthorJan 21.2009 — still no luck. I tried adding zoom:1 to both the #center and #featured elements
Copy linkTweet thisAlerts:
@FangJan 21.2009 — Seems it's simpler:h4.gk_news_show_news_header{
font-size: 12px;
[COLOR="Blue"]margin-top:1em;[/COLOR]
}
Copy linkTweet thisAlerts:
@MrTripiauthorJan 21.2009 — lol! it worked
Copy linkTweet thisAlerts:
@MrTripiauthorJan 26.2009 — Hey thanks a lot for your help man,

I'm still having trouble understanding why the "More in" text continues to shift whenever the image is no longer loaded into cache though. It's weird, and it only seems to occur in IE7. Both of the sections beneath featured are wrapped within the same element who's position is set to relative; I'm not sure why it only occurs on the left side. Any Guru advice?
×

Success!

Help @MrTripi 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.16,
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,
)...