RSS
 

Posts Tagged ‘width’

Internet Explorer Legacy Issues — 100% width and horizontal scrolling

22 Jun

One of the beautiful idiosyncrasies (some calls ‘em bugs I call ‘em idiosyncrasies) of IE that I just had the pleasure of dealing with has to do with the use of the width: 100% property.

Basically, I fixated the html and body elements, then built a 100%, 100% height div (no padding, margins) inside it so that I could better control the scrolling of my page compared to other fixed objects.

At the top of that replacement div, I had 3 linear objects making a header.  One was 110px tall at the top, the next was 22px immediately below that (top: 110px), and the next was 10px, immediately below that (top: 132px).

Each of these elements was 100% width (entire width of the viewport).  For some bizare, wacky reason, I kept getting a horizontal scroll bar, even though everything fit on the page.

It was my top element, which made no sense to me because they were all 3 position: absolute; width: 100%; and fixed height, just with varied positioning.  In debugging, I was stumped, as it didn’t matter where I put the objects, in what order, etc.  That top div (the one that was originally on top) was always wider than the screen — in fact, it was wider by the width of the scrollbar.  For some reason, it was getting its width of the viewport from BEHIND the vertical scrollbar, whereas the other 2 for some reason did as they should and excluded the width of the vertical scrollbar in their calculations.

Then I realized, but “no it couldn’t be?!?” — the 2 divs that were working properly had a background image.  More specifically, their background was defined as background: #xxxxxx url(/file/location) repeat-x; but the other div simply had background-color: #111111; as its definition.

So for some reason, using background: vs. background-color: causes the always intelligent IE to change its interpretations.  Go figure right?

So the workaround?  Use background: instead.

background: #111111 url() no-repeat;

And voila, it was fixed.

I HATE YOU IE.

 
No Comments

Posted in Computers, How-To

 

CSS Vertical Centering on Variable Dimensions!

11 Feb

So maybe you’ve asked yourself, how in the HECK do I do vertical centering with variable width objects inside variable width objects?  It is insanely impossible.  Maybe you haven’t asked yourself the question, but you’re about to learn the answer.

Many people who wrote HTML back in the day remember the valign=”middle” tag from tables.  It was always easy to handle centering in tables.  In divs and boxes, however, it’s not so straight forward.  In face, the only somewhat relevant css tag is “vertical-align.”

Of course, many many people completely misunderstands what the vertical align tag is for.  It has nothing to do with vertical centering within an object.  It refers to how side-by-side objects center related to one another.

This article really has nothing to do with what vertical-align means, but it is certainly relevant to the above solution.  If you’re having trouble with vertical-align, google it and you’ll find a bajillions explanations.

So, the little snippet of brilliance I want you to see here is that, in fact, CSS DOES provide a way to do vertical centering.  What?  Didn’t you just say that it doesn’t?  I did.  But there is a pretty easy exploit, thanks to vertical-align.

So without any further buildup, here is the solution:

1.)  Use a strict doctype, because if you don’t, you’re an idiot.  ;)   j/k — if you don’t understand, check google.  I personally prefer HTML 1.0 strict, but use as you wish.

2.) Create a “div” element — any size, but definitely use a set width and height (px, em, % — it’s irrelevant).  It should have the css style “text-align: center; white-space: nowrap;” (I’m presuming, of course, that you want horizontal centering as well.  If not, substitute left or right — it makes no difference.)

3.) Create an element inside the div with the following style:  “vertical-align: middle”  Woohoo we’re done right??  No … not yet.  The object now has to be vertically centered to something.  And, intuitively, if somehow there were an object that is 100% in height and we were vertically centered to that, we’d be in business.

HEY WAIT A MINUTE!!!

4.) Now create a div inside your element with the following css style:  “display: inline-block; height: 100%; width: 0px; vertical-align: middle;”.

<div style="width: 150px; height: 90px; position: relative; text-align: center; background-color: pink; white-space: nowrap;">
<div style="display: inline-block; height: 100%; width: 0px; vertical-align: middle"></div>
<div style="width: 22%; height: 11%; background-color: skyblue; vertical-align: middle;"></div>
</div>

That will give you a blue box horizontally and vertically centered inside the main div.

You may ask yourself how it’s any better than just using margin-top: 44%; — and it’s not for a fixed width object, but it will work for a VARIABLE WIDTH OR HEIGHT object. (Think images!)

So there you go. That’s the solution. Exploit the one little vertical align ability CSS gives you — vertical align with the adjacent object that is 100% tall, bam — fluid vertical centering with variable dimension.

 
1 Comment

Posted in Programming