css IE problem [solved]

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
herbshirt
Forum Members
Forum Members
Posts: 145
Joined: Thu Jul 26, 2007 3:47 am

css IE problem [solved]

Post by herbshirt »

ok all you css buffs out there. I've tried and tried for days and I need help...

Can anyone tel me why this page falls apart in IE?
http://www.cruickshanks.com.au/index.ph ... ommodation
and this
http://www.cruickshanks.com.au/index.ph ... t-the-farm

I've looked at it in Dreamweaver/PS Pad/TopSTyle... you name it but I just can't figure out what the problem is. :(

Anyones input greatly appreciated.
(Thank for your help so far Mark)
Last edited by herbshirt on Mon Nov 12, 2007 1:21 am, edited 1 time in total.
ameagher
Forum Members
Forum Members
Posts: 39
Joined: Sun Aug 12, 2007 4:01 pm

Re: css IE problem

Post by ameagher »

Hi,

Site looks great in Firefox and IE to me! Really nice use of cmsms!!

Is it an issue with the version of IE you're using? I'm using 7.0.

Anthony
KO
Power Poster
Power Poster
Posts: 562
Joined: Mon Nov 06, 2006 7:55 pm

Re: css IE problem

Post by KO »

With IE6 it has problem.

It has something to do with last 2 images getting side by side and not having enought space to with their margins. You might want to make img classes with right and left so that they only have margin (or was it padding it img classes) on one side only depending where you want to place them. Or position them differently.

br, K
herbshirt
Forum Members
Forum Members
Posts: 145
Joined: Thu Jul 26, 2007 3:47 am

Re: css IE problem

Post by herbshirt »

I've now removed all images except 1. (It looks fine without images)

I'm not great with css.

Here's what I had...

.imgpad
{
  margin: 10px;
  border: 2px solid #737235;
}

Now I have...

.imgpadleft
{
  margin: 10px;
  border: 2px solid #737235;
  align:left;
}

and I still get the problem. As soon as I insert the img and align it to the left (css or just html) I get the problem.
KO
Power Poster
Power Poster
Posts: 562
Joined: Mon Nov 06, 2006 7:55 pm

Re: css IE problem

Post by KO »

Create...

.imgpadleft
{
  margin: 10px 10px 10px 0; /* No margin at left as you want to align image to left */
  border: 2px solid #737235;
  align:left;
}

This only give bit more space for image to fit but if you put larger image you might still end up with same problem

IE6 seems so stupid that it tries to fit 2 images side by side even if they don't fit. If you have one floated left another goes it's right side.

There might be some other ways to play with overflow-x:hidden style for some containing divs. This might be problem for big images cutting one side out.
herbshirt
Forum Members
Forum Members
Posts: 145
Joined: Thu Jul 26, 2007 3:47 am

Re: css IE problem

Post by herbshirt »

Thanks KO. Great help!

It seems to be behaving for me now. Even using IE6. Does it look ok your end?

I only have one more issue (IE of course) to sort out and I can release.

Everytime I try to load the page I have to hit OK on a pop up.... "Press OK to continure loading the content of this page".

I think it considers Flash to be 'unsafe'.

I've nbever been plagued with so many IE problems.  :'(
KO
Power Poster
Power Poster
Posts: 562
Joined: Mon Nov 06, 2006 7:55 pm

Re: css IE problem

Post by KO »

One thing I noticed in "your Accomodation" page with IE6. First time you load that page (happens probably on many other pages) image is shifted right. If you hover on top of links image shiftes back to it's real position.

As this is very common IE6 no-layout problem it can be fixed given #content eighter height or width. Usual solution is to give height:1%. Try it and see if it causes some other problems. Best would be conditional styles for IE&. Search IE6 Float bug in google.

No problem with popups in IE6. It could be different depending are you looking online or your local computer files. Othervice page looks nice. I really like this design.

br, K
Post Reply

Return to “Layout and Design (CSS & HTML)”