Another IE quirk question

[lisan28]

Hello everybody!

I’ve got a layout I’m currently toiling away at that’s working just fine in Firefox, Safari, and Chrome but is giving me grief in IE. Have a look at the following link in your choice in the above working browsers, and then in IE.
http://lisa-noble.com/test/redo.html

Why the heck is IE sticking that blank space in the bottom left side? :?

Here is the CSS related to the bottom left corner and footer:

Code:

div#bottom_filler {
background: url(images/bottom_slice_sm.png) repeat-x bottom #50182d;
width: 100%;
height: 76px;
position: absolute;
bottom: 0px;
}

div#bottom_left {
height: 175px;
width: 175px;
background: url(images/left_bottom_corner_sm.png) bottom no-repeat;
position: absolute;
bottom: 0px;
left: 0px;
}

Any ideas? IE is basically the bane of my existance right now. First a virus got in through it (I don’t even use it for browsing at all, just testing pages!) and now its being quirky with my CSS. LOL

[tomwalters5678]

Okay, well after thinking about this for a bit, I think the best way to fix this is by creating those boxes differently. Your problem is not just in IE, it’s in FF too, if you resize your browser your box gets resized too. I downloaded the page and played around for a while, I came up with a solution but to be honest it is kinda stupid to do it. I would simply suggest doing it a different way – like this.

The concept is explain in Chris’s Rounded edge boxes screencast, and here is my preferred method.

The HTML:

Code:

Content goes here…

And the CSS:

Code:

#top { margin-left:auto; margin-right:auto; width:500px; padding:0px; }

#bottom { margin-left:auto; margin-right:auto; width:500px; padding:0px; }

#box { margin-left:auto; margin-right:auto; width:500px; background-image:url(box-middle.png) repeat-y; }

This method means that the height of the box is dependant on the content within it, if you wanted to specify a height, just jump inside the #box div and add one.

Let me know if this works for you – trust me the way you are doing it is the long way round, and this way is far simpler.

[lisan28]

Thanks Tom, I see what you mean about doing it backwards, I’ll give this a try when I get home from work tonight. :)

[lisan28]

I watched the whole rounded corners screencast that Chris did, great stuff!

I think that method#2 that he did would work for me but the issue that I’m running into is that I need the site to be fully liquid, it needs to be able to expand and contract vertically and horizontally. The client wants it to look like there is a frame around the page at all times, they don’t want that frame to ever move, and they want the content to scroll in the middle of that.

So the problem is that I need the graphic slice from the top and bottom of the frame to repeat-x, the left and right ones to repeat-y, and then the corners should stay stuck in the corners. I like the way that Chris affixed the corners in his example for box 2, but since I’m not just putting a border around the rest of the box but need to tile 4 graphics slices I’m a bit stuck. I could tile one as the body background, one as the page wrap background, one as the box background but then…I ran out of boxes. LOL

I suppose I could just make another one that is the same size, it would kind of be like layers. Hm, I’ll go play around with that and report back. :)

[lisan28]

Ahahaha….well this is what happened:
http://www.lisa-noble.com/test/redo3.html

Is it possible to make this work? What happened to the bottom of my frame? LOL Also the bottom right corner is gone. Hmmm…

[Author]

Posts