Absolute positioning vs. float: Neither works for me!

[chuckdesign]

I'm struggling to get a page template so that the items line up in all browsers. The pages are supposed to look like this:

http://www.sullivancreative.com/paa-05-7-19/services.jpg

If I use absolute positoning on the right-hand photo and quotation paragraph, it looks OK in IE/Windows, but the graphic overlaps the navigation in Netscape/Win and in all Mac browsers.
My absolute positioning example:

http://www.sullivancreative.com/paa-05-7-19/bios.html

If I use a float: left style, I have success lining up the photo in Firefox, Safari, and Netscape, but IE makes mincemeat of it.
My float example:

http://www.sullivancreative.com/paa-05-7-19/services.html

There's gotta be a way to do this that will work in all browsers, yes?

And if I use the float example, how in heck do I tuck the body text under the word "Services"? I can't use absolute positioning for that, because doing so will throw off the location of my footer paragraph. I tried using "float: left" for that paragraph, but then it puts it at the far right in some browsers.

Any advice you can offer would be appreciated.

-- Chuckdesign

 

[BillyRayPreachersSon]

There's gotta be a way to do this that will work in all browsers, yes?

Yes - probably many. However, I think you've already found one possible solution - you just don't know it yet.

If you have a solution that works for IE, and a solution that works for all other browsers - and you don't want to spend too much time tryig to get one set of CSS that reliably work in both, consider using either:

1. The underscore hack to get IE using absolute positioning while the other browsers use floating, or

2. Use IE-only conditional comments to override the floataing style sheet for IE.

Option 2 is preferable if you want your CSS to validate, so I'd go with that, personally.

Hope this helps,
Dan




[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]