/    Sign up×
Community /Pin to ProfileBookmark

CSS Rounded Boxes / IE6 Vertical Space

Copy linkTweet thisAlerts:
Aug 16.2007

Hi,

I have created a quirky rounded div box for a project i am working on and it displays fine in everything but IE6 – suprise, suprise.

What is happening is the box is adding vertical space and making the background break.

Here is the code for the box

[CODE] .action { position: relative; width: 217px; }
.actionBody { padding: 14px; }

.type1 { background: #f3841f url(top.gif) no-repeat top; }

.type1Close { background: #f3841f url(bottom.gif) no-repeat bottom; position: absolute; bottom: 0; left: 0; width: 217px; height: 10px; }
[/CODE]

And below is the html:

[code=html] <div class=”action type1″>
<div class=”actionBody”>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec non erat. Mauris vitae nibh. <a href=”#” title=”#”>Body copy link</a></p>
</div>

<div class=”type1Close”></div>
</div>[/code]

Here is a link to how they look on different browsers:
[URL=”http://img230.imageshack.us/img230/7340/screenboxun1.gif”]http://img230.imageshack.us/img230/7340/screenboxun1.gif[/URL]

Basically I have a long top image which is in a div positioned relative with the background aligned top and then a closing div with the bottom 10px closing image in positioned absolute.

Can anyone help me on why this is happening?

Many thanks

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@DisfunctionalauthorAug 16.2007 — Ok strangely I've figured out taking the background color makes the box full but still doesn't explain the extra run on at the bottom, anyone know why that would appear?

It fixes it if I give the box a height, but the box needs to be dynamic etc

Any ideas?
Copy linkTweet thisAlerts:
@skrillazAug 16.2007 — Hi,

I can't reproduce the glitch from your code... Could you possibly link to the page so it may be easier to diagnose?

One possible reason that is happening could be the height of the type1Close class you have set at 10px. I don't think IE will draw a div height under 12px. You could try using the code below to shrink that div a bit.

[CODE]<div class="type1Close"><p style="line-height: 0px;"></p></div>[/CODE]

or try to define line-height: 0; to your type1Close class.
Copy linkTweet thisAlerts:
@DisfunctionalauthorAug 16.2007 — Hi,

I have included the html as an attachment.

Using that line-height did not work, i even increased the bottom div to 15px and still no luck.

Thanks for any help

[upl-file uuid=ef68d422-8a63-4eb6-a86a-69e4396e1a4c size=17kB]test_box.zip[/upl-file]
Copy linkTweet thisAlerts:
@KDLAAug 16.2007 — I've had that problem before, and I *think* I solved it by adding font-size: 1px, or something like that.
Copy linkTweet thisAlerts:
@skrillazAug 16.2007 — font-size - that seems to work better. Thanks KDLA.

Disfunctional, replace your .type1Class css line with this:

[CODE].type1Close { width: 217px; height: 10px; background: url(images/box_act_bot_or.gif) no-repeat;font-size:1px; }[/CODE]

You will need that font-size: 1px to take care of the IE minimum div height glitch.

You don't need the [I]position: absolute;[/I] because that div will sit right under the actionBody div.
Copy linkTweet thisAlerts:
@DisfunctionalauthorAug 17.2007 — Wow thanks that worked perfectly ?

Does IE have problems with Div's under a certain height then?

Also just wondered if there was a cleaner way of doing the above box without having to use a blank div to close?

I've seen lots of techniques for using divs and rounded corner backgrounds but a lot of them seem over complicated.

Many thanks again ?
Copy linkTweet thisAlerts:
@skrillazAug 17.2007 — 
Does IE have problems with Div's under a certain height then?
[/QUOTE]

I think it is 12px... but I'm not certain.


Also just wondered if there was a cleaner way of doing the above box without having to use a blank div to close?
[/QUOTE]

There could be, but I thought the way you did it looked pretty clean ?
×

Success!

Help @Disfunctional 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.19,
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,
)...