/    Sign up×
Community /Pin to ProfileBookmark

Why/how this works…

Copy linkTweet thisAlerts:
May 03.2004

I’ve been messing around with css for a bit now and understand that it’s quite universal. I also understand there are many ways to do certain things with various code. However, I don’t understand how this below works.

Ok… I’ve taken the html, images, and css and uploaded it here – [url]http://www.graphics-tech.com/blah[/url]

Below is the code to the css where I centered the page horizontally and made the page align flush with the top of the browser edge.

[code]#container
{
position: absolute;
left: 45%;
top: 45%;
margin-left: -339px;
margin-top: -300px;
}[/code]

Now, I’ve uploaded the same stuff but altered the css code a bit. The other version is here – [url]http://www.graphics-tech.com/blah2[/url]

Below is the edited code where I centered the page horizontally and made the page align flush with the top of the browser edge…. again.

[code]#container
{
position: absolute;
left: 45%;
margin-left: -339px;
margin-top: -14px;
}[/code]

What I’d like to know is… how is this working? I’d also like to know how the difference in code results the same effects.

Thanks,
Brandon

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326May 04.2004 — It's just simple math related to your top positioning and your image size. In one you push the image down 45% then pull it back up 300px. In the other you let the image sit a the top and then pull it up another 14px. In either case the top of your image is cropped off because you're pushing it above the top of the window.
Copy linkTweet thisAlerts:
@newdlesauthorMay 04.2004 — But the thing is... the image isn't cropped. It displays perfectly where it should.
Copy linkTweet thisAlerts:
@ray326May 04.2004 — [i]Originally posted by newdles [/i]

[B]But the thing is... the image isn't cropped. It displays perfectly where it should. [/B][/QUOTE] Maybe in IE but not in something running to spec.
Copy linkTweet thisAlerts:
@newdlesauthorMay 04.2004 — I changed a few bits of the code. According to several people on another forum, it works great and just like it's supposed to in the following browsers -

Opera 7.23

Opera 7.50

IE 5.01

IE 5.5

IE 6.0

Firefox

Netscap 4.7 goes nuts with it... like I care about that browser as it's almost impossible to work with css then.
Copy linkTweet thisAlerts:
@ray326May 05.2004 — Of course it works great and just like it's supposed to[/QUOTE] is highly dependent on the definition of "supposed to" so that must include the fact that the top 1/4" or so of the graphic is chopped off the top. All you have to do is disable the absolute positioning in #container to see what I mean. That image is absolutely cropped across the top in Firefox, I don't care what the other folks say.
Copy linkTweet thisAlerts:
@newdlesauthorMay 05.2004 — Sorry, like I said though... the code was changed.

http://www.graphics-tech.com/blah3

I just forgot to provide an updated link. The image isn't cropped.
Copy linkTweet thisAlerts:
@ray326May 05.2004 — When the header graphic is shoved up so far that only the bottom half of the "GT" is visible, I call that "cropping" and here's the culprit:

#container

{

position: absolute;

left: 43%;

margin-left: -334px;

margin-top: -50px;

text-align: left;

}

You need to either ditch the absolute positioning or the -50px margin-top.
Copy linkTweet thisAlerts:
@newdlesauthorMay 06.2004 — Very true and I knew that much. Thanks for pointing it out though.

What works great in Firefox doesn't in IE and vice versa. If it cuts off the top half in Firefox, it's dead aligned in IE. If it is dead aligned in Firefox, it's about 50 pixels or so down the page in IE before the page actually even starts.

Is there a way to solve this so that it aligns the page horizontally centered and aligns the page flush vertically to the top edge of the browser and still work the same in both browsers?
Copy linkTweet thisAlerts:
@ray326May 06.2004 — I just realized your "header" image is sliced up. I guess I'd rethink the design using a single image (in the background) for the first two logical rows of your heading then a list with background images for the nav row.
×

Success!

Help @newdles 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.12,
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,
)...