17 replies [Last post]
zentropy
Offline
newbie
Last seen: 13 years 49 weeks ago
Timezone: GMT-4
Joined: 2007-10-17
Posts: 10
Points: 0

The top of an image on a page which is vertically centered is clipped off the page when one makes the browser window smaller. (overflow is not set to hidden)
The following CSS code is used to center the image:

.mainDiv { position: absolute; top: 50%; left: 50%; margin-left: -397px; margin-top: -374px; z-index: 1; }

Triumph (not verified)
Anonymous's picture
Guru

Your site looks good to me.

Your site looks good to me.

zentropy
Offline
newbie
Last seen: 13 years 49 weeks ago
Timezone: GMT-4
Joined: 2007-10-17
Posts: 10
Points: 0

To further elaborate. One

To further elaborate. One cannot scroll any further up to see the top part of the image, because the scroll bar is already at the top of the browser window. It's as if the overflow of that image is hidden and one cannot scroll any further up to see that overflow, because it falls behind the tabs and url bar of the browser.

Does anyone know this issue?

zentropy
Offline
newbie
Last seen: 13 years 49 weeks ago
Timezone: GMT-4
Joined: 2007-10-17
Posts: 10
Points: 0

It only occurs when one

It only occurs when one makes the browser window smaller. When the browser is maximized there is no problem.

zentropy
Offline
newbie
Last seen: 13 years 49 weeks ago
Timezone: GMT-4
Joined: 2007-10-17
Posts: 10
Points: 0

Also the image is placed

Also the image is placed within div tags and it is actually the div that is centered.
The attributes one sees in the posted CSS code are part of a class that is added to the div tag that encloses the image.

Thus like such:

Triumph (not verified)
Anonymous's picture
Guru

zentropy wrote:To further

zentropy wrote:
To further elaborate. ...

No point in that. Are you going to show us the problem or not?

zentropy
Offline
newbie
Last seen: 13 years 49 weeks ago
Timezone: GMT-4
Joined: 2007-10-17
Posts: 10
Points: 0

To see what happens go to

To see what happens go to the following page and make the browser window smaller. The smaller you make the browser window, the more of the top of the page becomes clipped and unreachable.
The top part contains the menu, so it's important people can reach it by scrolling even when the window is small.

http://tinyurl.com/2px2tn

Triumph (not verified)
Anonymous's picture
Guru

zentropy wrote:To see what

zentropy wrote:
To see what happens go to the following page and make the browser window smaller. The smaller you make the browser window, the more of the top of the page becomes clipped and unreachable.
The top part contains the menu, so it's important people can reach it by scrolling even when the window is small.

http://tinyurl.com/2px2tn
OK, good. First thing to do is to take the style attribute out of the HTML tag. It's not valid.

Next, you are using absolute positioning in an improper manner. That is what is causing your problem and it will most likely cause problems in the other parts of the page that aren't included in your example but are also positioned absolutely.

Unless you have a proper reason for using absolute positioning (you don't in this case as far as I can see) then it is best avoided. You are unnecessarily complicating your layout and in the process making it unusable.

You can try to go to the top of the page here and click on the "Tools" tab and try out the layout generator to give you a start with laying out your page in a much nicer and definitely simpler way.

zentropy
Offline
newbie
Last seen: 13 years 49 weeks ago
Timezone: GMT-4
Joined: 2007-10-17
Posts: 10
Points: 0

I don't have time to redo

I would try the tool, but right now don't have time to redo everything. If it's possible i simply want to fix this issue within the current framework.

PS: What style attribute are you referring to and why is it invalid?

PPS: What other cross-browser and cross-OS compatible way do you suggest for centering an element? (That is the reason that absolute positioning is used like that in the page)

Triumph (not verified)
Anonymous's picture
Guru

zentropy wrote:... If it's

zentropy wrote:
... If it's possible i simply want to fix this issue within the current framework. ...

Sorry, I can not in good conscience help you to do things improperly. If you have read any of this forum you will notice that we enforce strictly valid and semantic coding. We believe it is a matter of integrity. We believe that it is a matter of making the internet a better place. If you don't have time to do things correctly then I would ask for more time, but that's just me. I'm not here to preach a sermon (but I have a few if you'd like to hear them sometime).

zentropy wrote:
PS: What style attribute are you referring to and why is it invalid?
We ask that you run your code through the validator before asking why things do not work properly. It's been said here that "there is not standard for applying CSS to invalid code" or something to that effect. The validator would have told you where the error is and actually, I told you where it was in my last post.
zentropy wrote:
PPS: What other cross-browser and cross-OS compatible way do you suggest for centering an element? (That is the reason that absolute positioning is used like that in the page)
Centering a layout is the number one asked question here. Take a look around. Absolute positioning is a poor centering device (as you found out for yourself).

I'd suggest reading the sticky topics at the top of the forums first.

zentropy
Offline
newbie
Last seen: 13 years 49 weeks ago
Timezone: GMT-4
Joined: 2007-10-17
Posts: 10
Points: 0

The W3C CSS validator gives

The W3C CSS validator gives 0 errors and 0 warnings. The centering solution which is used was recommended on many websites as it is cross-browser and cross-OS compatible and is mentioned as the industry standard.
The only issue there is, is when making the browser window smaller.
I understand your point of view and agree though.

Triumph (not verified)
Anonymous's picture
Guru

zentropy wrote:The W3C CSS

zentropy wrote:
The W3C CSS validator gives 0 errors and 0 warnings.

Ahem? How about the markup as I mentioned above?

zentropy wrote:
The centering solution which is used was recommended on many websites as it is cross-browser and cross-OS compatible and is mentioned as the industry standard.

Could you show us a link or two? Are you talking about vertical centering or horizontal centering? Either way I want a link that is calling this "industry standard". My argument is that vertical centering is mostly useless on the internet and horizontal centering is done using margins set to auto. I just disagree.

Triumph (not verified)
Anonymous's picture
Guru

Yikes

Yikes :scared:

I just took a deeper look at your markup and it looks like you have taken a tables based layout with a bunch of sliced up images and just changed table cells into divs. Way too convoluted for me to understand. I don't know how to help you with that one. You can do the same thing with about 1/4th the markup I'd estimate. That's just a quick guess though.

zentropy
Offline
newbie
Last seen: 13 years 49 weeks ago
Timezone: GMT-4
Joined: 2007-10-17
Posts: 10
Points: 0

The entire layout is

The entire layout is enclosed within a div tag and that tag is centered horizontally and vertically the same way.(So the complexity within that particular div tag probably doesn't matter when centering the layout)
I suspect it is the vertical centering method that causes the clipping issue. Browsers or CSS itself seem to not handle it correctly, no matter if the style(overflow) attribute is there or not.
Something needs to be added, substracted or changed from the method with which the layout is now vertically centered in order to prevent the clipping. Or an alternative vertical centering method is required.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 30 weeks 23 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

zentropy wrote:The top of an

zentropy wrote:
The top of an image on a page which is vertically centered is clipped off the page when one makes the browser window smaller. (overflow is not set to hidden)
The following CSS code is used to center the image:

.mainDiv { position: absolute; top: 50%; left: 50%; margin-left: -397px; margin-top: -374px; z-index: 1; <== unnecessary—have compelling reason before adding a property to the ruleset. } That's the way it works. One-half the excess is clipped from the left and top, while the other half is scrollable on the right and bottom.

The use of absolute positioning as a major layout method is rife with large-toothed carnivorous gotchas looking for the careless or less skilled coder's butt from which to remove a large chunk.

Go to my sig link. From there, check out either of the vertical [page] centering demos. One uses a single celled table, which may be more comfortable for you, and the other uses pure css, including the needed IE hacks (IE has very poor support for css2.1).

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Triumph (not verified)
Anonymous's picture
Guru

zentropy wrote:... Or an

zentropy wrote:
... Or an alternative vertical centering method is required.

What's the point of vertical centering when the page is larger than the viewport? Put the top of the page at the top of the window as it should be.

Still waiting for links.

zentropy
Offline
newbie
Last seen: 13 years 49 weeks ago
Timezone: GMT-4
Joined: 2007-10-17
Posts: 10
Points: 0

Alright i'll take your

Allright i'll take your advice and implement it that way. Thanks guys.

@Triumph:
Don't remember the links/url's.

Triumph (not verified)
Anonymous's picture
Guru

zentropy wrote:...

zentropy wrote:
... @Triumph:
Don't remember the links/url's.

Awwwww. I already had a scathing email ready to fire off to the various authors. Wink