943,840 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > IE problem, can't get 2 divs to show side by side
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Apr 5th, 2008
0

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

Expand Post »
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.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Light Poster
poslanik is offline Offline
26 posts
since Feb 2007
Permalink
Apr 6th, 2008
0

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

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.
Reputation Points: 63
Solved Threads: 12
Posting Pro in Training
autocrat is offline Offline
427 posts
since Feb 2005
Permalink
Apr 7th, 2008
0

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

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
Reputation Points: 10
Solved Threads: 0
Light Poster
poslanik is offline Offline
26 posts
since Feb 2007
Permalink
Apr 7th, 2008
0

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

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.
Reputation Points: 63
Solved Threads: 12
Posting Pro in Training
autocrat is offline Offline
427 posts
since Feb 2005
Permalink
Apr 7th, 2008
0

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

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/
Last edited by poslanik; Apr 7th, 2008 at 5:54 pm.
Reputation Points: 10
Solved Threads: 0
Light Poster
poslanik is offline Offline
26 posts
since Feb 2007
Permalink
Apr 7th, 2008
0

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

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?
Reputation Points: 63
Solved Threads: 12
Posting Pro in Training
autocrat is offline Offline
427 posts
since Feb 2005
Permalink
Apr 12th, 2008
0

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

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.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Permalink
Apr 12th, 2008
0

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

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:

HTML and CSS Syntax (Toggle Plain Text)
  1. #right-col {float:right; width: 19%; padding:5px;}
  2. .ul-menu {margin-top: 8px; margin-bottom: 8px; border: solid 1px #cccccc; border-bottom: solid 3px #cccccc; color: #666666;}
  3. ul.ul-menu {margin: 0; padding-left: 1px; list-style: none;}
  4. /* ul.ul-menu li {border-bottom:1px solid #cccccc;} */
  5. ul.ul-menu a {margin-left: 5px; color: #666666; text-decoration: none;}
  6. ul.ul-menu a:hover {color: #cc0000;}
  7.  
  8. span.slide {float: right; margin-right: 3px;}
  9.  
  10. .info {margin-top: 5px; margin-bottom: 5px; background-color: #777777; padding: 5px;}
  11. .info h4 {margin: 0; color: #cc0000;}
  12. .info p {margin: 0; margin-top: 3px; margin-bottom: 3px;}
  13. .info ul {margin: 0; padding: 5px;}
  14. .info li {list-style: none;}
  15. .info a {color: #cc0000; text-decoration: underline;}
  16. .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?
Reputation Points: 10
Solved Threads: 0
Light Poster
poslanik is offline Offline
26 posts
since Feb 2007
Permalink
Apr 12th, 2008
0

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

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
Reputation Points: 10
Solved Threads: 0
Light Poster
poslanik is offline Offline
26 posts
since Feb 2007
Permalink
Apr 12th, 2008
0

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

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.).

???
Reputation Points: 63
Solved Threads: 12
Posting Pro in Training
autocrat is offline Offline
427 posts
since Feb 2005

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Page working in IE7/8b, Opera9, Safari3, but NOT Firefox2/3b5
Next Thread in HTML and CSS Forum Timeline: Very annoying gap...





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC