Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
IE6 Hiding my Floated Image
Old 09-08-2008, 11:49 PM IE6 Hiding my Floated Image
Novice Talker

Posts: 9
Trades: 0
I have a site where I used a floated image inside a div element. I wanted the image to appear slightly above the container (while having the text in the container wrap around the bottom of the image) so I have used a negative top margin on the floater...

Code:
<div class="text">
    <p><img src="images/round-float-home.png" width="200" height="200" class="floater" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
and from the css file..

Code:
.floater {
    float: left;
    margin-top: -125px;
    margin-right: 25px;
    margin-bottom: 5px;
}
By moving the floater up like this, I intended to have it overlap the previous div that was higher up on the page. It works correctly on Firefox 2 & 3, Opera 6, IE7 and Safari on OSX. If you look at it on IE6 the portion of the floated image that is above the containing float has moved "behind" the background image of the above div.

You can see the site at http://test.zeidelicious.com/index2.html

Is there any way to force floats to move "forward" in IE6, sort of analogously to the was Z-index works?
labiere is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 09-09-2008, 04:11 PM Re: IE6 Hiding my Floated Image
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
IE6 has major problems with absolute positioning. The problem stems from your absolute positioning on #logo and the positioned divs inside it. I don't see why you need all that positioning either.

It's NOT the float that's the problem here. Get rid of the positioning and use the document flow to your advantage.

Setting #floater to position:relative will get the image on top, but you wouldn't necessarily need it if you didn't have all those absolutes.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE


Last edited by LadynRed; 09-09-2008 at 04:14 PM..
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 09-09-2008, 07:12 PM Re: IE6 Hiding my Floated Image
Novice Talker

Posts: 9
Trades: 0
position: relative fixed the issue for me... But what is the stylistic faux-pas of using absolutes? I know I use them because they are easy to work with; absolute elements tend to behave more predictably across browsers than what I have experienced with relative elements. I realize that this is my own shortcoming and if I understood CSS better I'm sure everything would seem to behave predictably -- but if I am going to try and learn more about stylesheets I would like to know the benefit over what I have been making use of thus far.
labiere is offline
Reply With Quote
View Public Profile
 
Old 09-09-2008, 08:54 PM Re: IE6 Hiding my Floated Image
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
It's not stylistic, it's IE's BUGS that are the issue with absolutes:

http://www.positioniseverything.net/posbugs.html
http://www.positioniseverything.net/abs_relbugs.html

Using all absolutes is just not the best way to do a layout, although there are some who do nothing else - and I don't envy them one bit. I only use positioning in very particular situations in a layout, other than that, I don't need them and I have no problems controlling my layouts cross-browser
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to IE6 Hiding my Floated Image
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 1.37207 seconds with 12 queries