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 - <!-- m --><a class="postlink" href="http://www.graphics-tech.com/blah">http://www.graphics-tech.com/blah</a><!-- m -->
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.
#container
{
position: absolute;
left: 45%;
top: 45%;
margin-left: -339px;
margin-top: -300px;
}
Now, I've uploaded the same stuff but altered the css code a bit. The other version is here - <!-- m --><a class="postlink" href="http://www.graphics-tech.com/blah2">http://www.graphics-tech.com/blah2</a><!-- m -->
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.
#container
{
position: absolute;
left: 45%;
margin-left: -339px;
margin-top: -14px;
}
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,
BrandonIt'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.But the thing is... the image isn't cropped. It displays perfectly where it should.Originally posted by newdles
But the thing is... the image isn't cropped. It displays perfectly where it should. Maybe in IE but not in something running to spec.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.Of course it works great and just like it's supposed to 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.Sorry, like I said though... the code was changed.
<!-- m --><a class="postlink" href="http://www.graphics-tech.com/blah3">http://www.graphics-tech.com/blah3</a><!-- m -->
I just forgot to provide an updated link. The image isn't cropped.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.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?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.
Ok... I've taken the html, images, and css and uploaded it here - <!-- m --><a class="postlink" href="http://www.graphics-tech.com/blah">http://www.graphics-tech.com/blah</a><!-- m -->
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.
#container
{
position: absolute;
left: 45%;
top: 45%;
margin-left: -339px;
margin-top: -300px;
}
Now, I've uploaded the same stuff but altered the css code a bit. The other version is here - <!-- m --><a class="postlink" href="http://www.graphics-tech.com/blah2">http://www.graphics-tech.com/blah2</a><!-- m -->
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.
#container
{
position: absolute;
left: 45%;
margin-left: -339px;
margin-top: -14px;
}
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,
BrandonIt'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.But the thing is... the image isn't cropped. It displays perfectly where it should.Originally posted by newdles
But the thing is... the image isn't cropped. It displays perfectly where it should. Maybe in IE but not in something running to spec.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.Of course it works great and just like it's supposed to 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.Sorry, like I said though... the code was changed.
<!-- m --><a class="postlink" href="http://www.graphics-tech.com/blah3">http://www.graphics-tech.com/blah3</a><!-- m -->
I just forgot to provide an updated link. The image isn't cropped.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.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?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.