5 replies [Last post]
behnkem
Offline
newbie
Last seen: 17 years 13 weeks ago
Joined: 2005-03-28
Posts: 7
Points: 0

I am tring to float two images to the right and in FF, when I go to the page the text on the left in the first paragraph acts like it doesn't know the image is there at all. Then the second paragraph wraps just fine around the first and second img. Two puzzling things: it works fine one I refresh the page one or two times and it is just fine in IE 6.0. It always works fine with only 1 image also, only messing up when there are 2.

Also, the page is loaded dynamically off a imagemap with a case selector (PHP) based on which state is clicked.

The float CSS looks lik this:

.statemap {
  margin: 2px 0 2px 7px;
  float: right;
  display: inline;
  clear: both;
}

The URL I am working on is:

http://www.dogsacrossamerica.org/states.php?st=WA

It doesn't break all the time, which is really frustrating me as I try and track this bug down. I figure it's something really simple.

One other related thing - I had the H2 signup link at the top centered with an align="center" in the html tag, and it would overlap the image as well. I "fixed" that by removing the center align and adding a couple spaces to the first line. That had always worked fine in IE also, but not in FF. It worked fine in FF when only one image was floated, but 2 messed it up.

Any help is appreciated. I'm off to bed and will check in tomorrow after work.

Thanks,
Mike

behnkem
Offline
newbie
Last seen: 17 years 13 weeks ago
Joined: 2005-03-28
Posts: 7
Points: 0

Text overlapping Floating images in FF

I uploaded a screenshot of the problem in case it can't be recreated:

http://www.dogsacrossamerica.org/images/scrnshot-overlapping-text.jpg

Mike

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 40 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Text overlapping Floating images in FF

Page works fine for me.

You should really fix up the page, give it a doctype and ensure it validates. That will simplify things if you are looking for where possible problems could occur.

behnkem
Offline
newbie
Last seen: 17 years 13 weeks ago
Joined: 2005-03-28
Posts: 7
Points: 0

Text overlapping Floating images in FF

The page only gives warnings, but nothing that is invalid, I don't believe, according to the Tidy validator extension on FF. The page does include a doctype as well.

It looks like it renders fine the first time I go to it, and then if I refresh it is wrong, and if I refresh again it is still wrong, and then when I refresh a third time it is ok again and starts over. I don't know what could be changing from one refresh to the next.

Mike

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 40 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Text overlapping Floating images in FF

The doctype is incomplete, try...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Don't just rely on html tidy, also use the w3c validator, which currently won't even process your page.

PS. I still can't get the page to fail as you describe after countless refreshes, FF1.0.6/WinXPsp2

behnkem
Offline
newbie
Last seen: 17 years 13 weeks ago
Joined: 2005-03-28
Posts: 7
Points: 0

Text overlapping Floating images in FF

Thanks for taking the time. I'll have to go back and start looking into why it won't validate and also what is going on in my browser that is causing the overlapping. If you aren't getting it I have to assume that it is a fairly isolated bug. Myabe I'll just put it back to one image for now, and go to two once I figure it out.

Thanks!
Mike