3 replies [Last post]
thetincan
Offline
newbie
Last seen: 12 years 19 weeks ago
Joined: 2007-02-08
Posts: 8
Points: 0

This works on every browser except IE.

site: http://www.inkpdx.com
css: http://www.inkpdx.com/main.css

Ok I set up a simple image Rounded corners container.

Check the bottom of the container in Firefox, then in IE.

How can I fix this?

I know it's because I used in my css (top: -14px;) for the images, but that's only because they weren't showing up properly in Firefox without it.

Help please!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

If using floats it's vital

If using floats it's vital to understand how they work. Do a search on 'containing floated elements' for an understanding.

In this layout your .container is not containing your floated elements, this is correct! IE is wrong (you have set hasLayout through the use of dimensions thus triggering IE extremely bad behaviour in expanding elements to contain children)

Add overflow:hidden to .container and then try setting .bl/.br to bottom:0; instead of top:-15px;

Not sure how IE will take that though.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thetincan
Offline
newbie
Last seen: 12 years 19 weeks ago
Joined: 2007-02-08
Posts: 8
Points: 0

Thanks HUGO

the Overflow hidden was vital.

If not with floats what's a better way to align divs left and right (on the same line)?

Thanks for the help!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Floats is the standard way

Floats is the standard way to do it, you just have to clear them, is all Wink

Verschwindende wrote:
  • CSS doesn't make pies