IE problem, can't get 2 divs to show side by side

[poslanik]

Hello,

I've recently started work on a website that's basically going to be a huge gallery of pictures.

I've downloaded a web template from oswd.org and started implementing my gallery (I'm using Plogger).

In Firefox, Opera, Safari and IE7 everything works fine but in IE6 the 2 columns, one with the gallery and the second with an ad block (which is currently a picture that represents the ad), won't display side by side. I know quite a bit of CSS and I tried poking at the code but haven't found a solution.

Could you please help me get this page to work in IE6? I'd really appreciate it.

Oh, almost forgot. Before I added Plogger, the page looked fine in IE too. So I'm guessing it's something to do with the code that Plogger added.

Current page: http://galerija.myartsonline.com/
The page before I put Plogger: http://learn-croatian.com/svasta/index.php
Plogger's CSS files (gallery.css is the only file that matters, the problem must be in there):
http://galerija.myartsonline.com/css/gallery.css
http://galerija.myartsonline.com/css/admin.css
http://galerija.myartsonline.com/css/greybox.css
http://galerija.myartsonline.com/css/lightbox.css
http://galerija.myartsonline.com/css/tabs.css

NOTE: The pages aren't the same because I've continued work on the 'live' version but essentially they're the same, meaning I haven't added any 'important' code, just made it look better by changing colours and adding some background pictures. Anyways, the problem was present from the beginning.

[autocrat]

Not being funny... but if you look at it in IE6 and then in a more compliant browser, the answer is staring you in the face.

Look at the Width of the left content in IE6... then look at how it has "wrapped" in the other browsers.
I'm going to guess you have the common Float Drop problem.

So I can only suggest that you go through the CSS file and comment out things like Padding and Margins and then see what happens when you reload.

You may find that a few pixels difference is what is causing the problem.

[poslanik]

Maybe it's obvious to you but I'm not that good with CSS and I can't find the error. I've tried doing as you said, removing padding and margins in a couple of important Plogger's CSS classes but that hasn't helped.

Here, this is another page I made to demonstrate that the problem must be in one of Plogger's CSS files. I'll continue looking but so far I haven't found the problem.

http://galerija.myartsonline.com/index_1.php

[autocrat]

Chances are it is Width.
Is there a wrapper around those images?
If so, does it have a width set?
Does it have any Margins/Padding set?
Is it (or the contents) floated?

I know it's frustrating when starting with CSS... but you need to learn all the bugs, and figure how to handle them.
This could be the FLoat Drop problem, it could be the 3px job, it could be the doubled margin bug.
Or it could simply be that you cannot count (or the css style sheet), and where compliant browsers will "wrap", IE simply drops.

So, the only thing I can recommend is commenting out all the styles.
Then going through and uncommenting them one at a time.
That way you should beable to locate what area is causing hte conflict... and once you know what and how, you can then figure a way to fix it.

[poslanik]

I've managed to make improvement.

I've changed the width on the divs from px to % and now when you load the site in IE6 it appears to look 'fine'. But when you hover over one of the links bellow the header, the main div where Plogger is quickly shifts down where it was before, below the right div. What the hell is this? How can this be?

You can see this be visiting the live version http://galerija.myartsonline.com/

[autocrat]

It doesn't help with the tables in there.

Still, try applying one of the standard IE fixes to the parent container and/or the items (the image wraps)...

position: relative;
zoom: 1;
display: block (or display:inline if floated).

Did you try removing all the styles and building up a bit at a time?

[MidiMagic]

Never put size styles (width, height) in the same tag or style as surrounding styles (margin, border, padding). IE nests them in the wrong order (surrounds inside sizes). Other browsers obey the standard, and nest sizes inside surrounds.

To use both, nest two divs, with sizes in one, and surrounds in the other. Now you set the order for all browsers.

[poslanik]

But I don't use width in the left div. Only on the right and there are no width and padding/margin style put together.

Here:

#right-col {float:right; width: 19%; padding:5px;}
.ul-menu {margin-top: 8px; margin-bottom: 8px; border: solid 1px #cccccc; border-bottom: solid 3px #cccccc; color: #666666;}
ul.ul-menu {margin: 0; padding-left: 1px; list-style: none;}
/* ul.ul-menu li {border-bottom:1px solid #cccccc;} */
ul.ul-menu a {margin-left: 5px; color: #666666; text-decoration: none;}
ul.ul-menu a:hover {color: #cc0000;}

span.slide {float: right; margin-right: 3px;}

.info {margin-top: 5px; margin-bottom: 5px; background-color: #777777; padding: 5px;}
.info h4 {margin: 0; color: #cc0000;}
.info p {margin: 0; margin-top: 3px; margin-bottom: 3px;}
.info ul {margin: 0; padding: 5px;}
.info li {list-style: none;}
.info a {color: #cc0000; text-decoration: underline;}
.info a:hover {color: #cc0000;}

Also please check my last post please: http://www.daniweb.com/forums/post579538-5.html

What could be causing that?

[poslanik]

Autocraft, I've tried applying your fix and there is some improvement. The images now don't display below the right div but somehow that right div sticks out of the main container.

http://galerija.myartsonline.com

[autocrat]

So what page are we meant to be looking at now????

As when I look at
http://galerija.myartsonline.com/
in IE6 or MFF it seems to be the same (works with window resize, link hover etc.).

???

[poslanik]

Yes, that's the link you should be looking at. It's the page where I'm making improvements and trying to fix the problem.

Strange, it doesn't look the same to me. In IE6 the right div sticks out of the main container. Here, I've taken screenshots:

FF: http://img.photobucket.com/albums/v163/Poslanik/Screenshots/ff.jpg
IE6: http://img.photobucket.com/albums/v163/Poslanik/Screenshots/ie6.jpg

[peter_budo]

Please do not link screenshots to external resources that will get deleted over the time, use options available by this forum.
Use "Manage Attachments" button, that can be found bellow text area for new post once you pressed "Go Advanced" button.