Topic: Adjacent DIV Problem Pages that link to <a href="https://ozoneasylum.com/backlink?for=11073" title="Pages that link to Topic: Adjacent DIV Problem" rel="nofollow" >Topic: Adjacent DIV Problem\

 
Author Thread
Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

IP logged posted posted 10-12-2003 19:19 Edit Quote

I've searched and experimented, and experimented and searched. I can't make this DIV behave the way I want it to.

In IE, it looks fine. In Opera 7, the yellow DIV wraps below the photo. If I remove the 100%, it won't wrap, but the yellow box will extend underneath the photo in both browsers.

I've tried position, float and width in every configuration I can think of and I can't solve the problem.


Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 10-12-2003 19:41 Edit Quote

Wes: Opera will do this for you but there are issues:

1. Your page code is liable to cause some browsers considerable distress - get that meta tag inside the HEAD tag.

2. If your CSS isn't working the first thing to do is check what DOCTYPE you are using to make sure it isn't upsetting some browsers. As you aren't using one............

3. My guess is that you need to adjust for IE/Win's poor implementation of the box model. The fact that it works in IE but breaks in Opera doesn't mean much - try to get it to work in Opera and see how it looks in IE/Win. I'd imagine if you want pixel perfect positioning then you will have to go for a Box Model hack.

If that doesn't work then strip things down and start with a simpler version an add stlying in and keep testing cross-browser. If you buil for just one browser and then test it in others you have the possibility of being rather disappointed.

___________________
Emps

The Emperor dot org

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

IP logged posted posted 10-12-2003 20:26 Edit Quote

That META tag was just a mistake and has been moved.

I added ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

... where it should go, but doesn't fix anything. (Not sure I'm using the right one, anyway.)

quote:
try to get it to work in Opera and see how it looks in IE/Win


Everything I'm trying is an attempt to get it to work in Opera. Nothing so far has been able to do that, regardless of what it does in IE.

I started converting this whole thing from tables and it worked fine until I wanted to add that yellow DIV to the right. I've read postings around the Web from people having a similar problem, but no one seems to have a working solution.

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 10-12-2003 20:40 Edit Quote

Wes: It now works in Op7 but not IE6/Win

Have you also tried floating the larry-photos left too?

quote:
I've read postings around the Web from people having a similar problem, but no one seems to have a working solution.



It can't be that difficult to get right

Those are just the tips I'd try to try and get things to work if none of them work and no one has fixed it I'll run up an example and see how I fare.

___________________
Emps

The Emperor dot org

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

IP logged posted posted 10-12-2003 21:06 Edit Quote

It's working in Op7 for you? I'm not seeing it. The yellow DIV is still below the photo.

I tried floating the larry-photos (the yellow DIV) to the left:

In Op7, I get the same -- yellow DIV below the photo, body text below the yellow DIV.

In IE, I get the body text to the right of the photo, the yellow DIV below the photo.


DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 10-12-2003 22:28 Edit Quote

The page you have up looks the same in Opera and in Mozilla, with the yellow div butted up against the photo, and filling the space to the right.

In IE, the div is down below the photo instead.

I made some minor changes to the markup, and changed from a tranitional to a strict doctype, and the it looks identical in all 3 browsers -
http://in-dented.com/temp/test.html

But I can't find a way to make it look the way I imagine you want it to in mozilla or opera.

How strange....

I think what you might have to settle for is putting the yellow div above the photo.


[This message has been edited by DL-44 (edited 10-12-2003).]

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

IP logged posted posted 10-13-2003 01:53 Edit Quote

OK, it looks the same in Op7 and IE to me now, although if you watch it before the image displays (or change the image reference to a non-existent file), you'll notice that the yellow DIV isn't butted up against it, it's actually behind it.

I find it insane that having two DIVs next to each other like this is impossible.

Maybe I'll try making my yellow box out of a table instead. And I thought I would be able to drop tables for stuff like this.

Thanks for trying.


Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 10-13-2003 02:06 Edit Quote

Have you tried putting the both of them inside a container div? I have noticed that some browsers, when just confronted two seperate 1st level divs will automatically put a linebreak between them, yet if you put them inside another div, thus taking them out of the 1st nesting level, you can basically align however you want. I've emailed you an edited version of DL's version to show you what I mean

[This message has been edited by Skaarjj (edited 10-13-2003).]

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 10-13-2003 04:04 Edit Quote

Skaarj - the same problem will still persist.

It's an issue with floating and unspecified widths. 100% doesn't do what it used to unfortunately.

You'll notice that if you add a border or background color to the paragraphs, they actually extend behind the photograph as well - that's the way it works with a floated element.
So, if you just nest the divs, it will continue to work the same way.

The problem arises when Mozilla or Opera are presented with another floated object with no width specified. It doesn't know how large to make it, and so it makes it fill all the available space (which in this case, because the photo-left div is floated, is the whole screen width, and it bumps it down). It is a very illogical reaction all in all...

There are solutions involving 2 columns, but I assume this is a test of items that will be incorparated into a non-columned layout....

How a table will react in this situation I am not sure. Logic would say that it too will extend behind the photo, but tables act differently than other elements, so it might work out ok.



Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 10-13-2003 04:28 Edit Quote

It seems to work fine in the version I made up...we'll see

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 10-13-2003 05:23 Edit Quote

what changes did you make exactly?

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 10-13-2003 11:24 Edit Quote

I just put the two div's (photo/caption and text div) inside another, empty, blank div, with no styles spplied to it. From there I simply did float:left and left it at that.

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 10-13-2003 20:28 Edit Quote

Skaarjj: Can we see it?

___________________
Emps

The Emperor dot org

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 10-14-2003 02:16 Edit Quote

if I had somewhere to host it, sure...you could...just let me see whom I can borrow a couple of kilobytes off of...

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 10-14-2003 04:28 Edit Quote

Here we go: http://www.zeloutis.com/skaarjj/test2.htm

The lovely Miss Lacuna was kind enough to host it for me

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 10-14-2003 05:47 Edit Quote

Have you checked it in something other than IE?

In mozilla it has the same problem I spoke of above....


Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 10-14-2003 06:26 Edit Quote

hmmm...my version of mozilla showed it correctly.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 10-14-2003 14:37 Edit Quote

I've looked in both 1.3.1 and 1.4, and the yellow div is below the photo and the paragraphs.

I'm stumped at the moment...


Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 10-14-2003 14:59 Edit Quote

Skaarjj: It doesn't work in Opera 7 either.

___________________
Emps

The Emperor dot org

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 10-14-2003 15:08 Edit Quote

Dagnabit....

Ok...I upgraded to the latest Mozilla, and now it doesn't display properly here either...

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

IP logged posted posted 10-14-2003 19:46 Edit Quote

Dunno if this is exactly useful (not sure if it was what you were trying to achieve) but here is my 5 minutes worth:
http://www.cryokinesis.co.uk/test2.htm

Be quick, it's only temporarily available!

It uses floats and margins - and old trick

It will probably need tweaking, but the principle is there if it is what you were trying to do, there are many ways to achieve this look tho, so it depends on how you actually want it be written and how precisely you want it to work - check out liquid layouts on sites like www.glish.com and www.bluerobot.com and others too (meyerweb has some I think). I hope I got those links right, didn't check - if they are wrong then use the good old googling contraption.

Regards,

Jon

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 10-14-2003 20:48 Edit Quote

odd...I could have sworn I tried it that way too. Must have only thought about it.

Looks perfect in Mozilla 1.3.1

If it works in the others, it would certainly do what you need wes - it just means adding a margin for each instance in which you will have this div next to a photo. Inconvenient, but....

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 10-14-2003 21:01 Edit Quote

smonkey: Good work we are getting there - it works in Op7 and is nearl there in IE6/Win but where the right hand column ends it cuts the left hand content off. I suspect this might just require a bi of clear or some such but that is nearly it. Nice work

___________________
Emps

The Emperor dot org

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

IP logged posted posted 10-15-2003 14:16 Edit Quote

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

IP logged posted posted 10-19-2003 19:49 Edit Quote

Well, whattaya know ... I guess no matter how flexible markup gets, we'll always have to incorporate these little hacks.

Since using this little yellow box will be rare, I don't mind having to add the margin measurement so much. And if it does, I can create a common class for all the other attributes and just add an inline style to each box just for the margin.

Thanks, everyone!

BTW, Emp, I'm not seeing anything with left-hand content being cut off. Can you post a screenshot of that?

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 10-19-2003 20:08 Edit Quote

Strange - I also saw this problem in IE 6...but only once, and as soon as I scrolled it went away, and I can't duplicate it.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu