• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 297
  • Last Modified:

Making my site Internet Explorer compatible

My web site is working in all browsers except Internet Explorer... of course.

Here is the dreamweaver error I get:If a container (including the browser window itself) is not wide enough to accommodate both a float with a specified width and any content with a specified width that follows it, the content after the float will drop below the float rather than wrapping around it.

Affects: Internet Explorer 6.0, 7.0
Likelihood: Likely

I don't know if this is the root of my problem. I've tried tweaking my wrapper width down to 800px and that doesn't help either.  

it can be viewed at: www.maliakillings.com/sandbox/sandbox.html
0
MaliaK
Asked:
MaliaK
  • 17
  • 12
  • 7
  • +2
1 Solution
 
dwaynecharringtonCommented:
Try adding overflow: hidden; to your containers that have the floated elements. This will add a hasLayout to IE and make it contain the elements. There are of course other ways you can do this, but this works fine.
0
 
MaliaKAuthor Commented:
Now my gray outline box and #left_content #right_content have disappeared
0
 
David S.Commented:
Change

#wrapper {
      width: 1000px;
      height: 800px;
      clear: both;
      position: relative;
      top: -391px;
      position: static;
      padding-left: 50px;
      overflow: hidden;
 }

to

#wrapper {
      width: 1000px;
      height: 800px;
      clear: both;
      position: relative;
      padding-left: 50px;
overflow: hidden;
}

And

#gray_box{
    height: 482px;
    width: 996px;
    border: 2px solid #CCCCCC;
    position: absolute;
    z-index:2;
    margin-top: 143px;
    overflow: hidden;
}

to

#gray_box{
    height: 482px;
    width: 996px;
    border: 2px solid #CCCCCC;
    position: absolute;
    z-index:2;
    left:50px
    top: 143px;
    overflow: hidden;
}

What happens if the amount of content changes or the font-size changes?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
David S.Commented:
I suppose I should explain the changes a bit.

IE often computes left:auto and top:auto incorrectly, so it's best to set those properties explicitly when using absolute positioning. By giving #wrapper position:relative, #gray_box will be positioned based on its position instead of <body>'s.

Also as you probably know, the top, left, right, bottom, and z-index properties have no affect on elements that have position:static (which is the default value for that property).
0
 
MaliaKAuthor Commented:
Well, I've updated with those changes... it still isn't working.

www.maliakillings.com/sandbox/sandbox.html
0
 
David S.Commented:
It looks like you only changed the #wrapper rule?
0
 
MaliaKAuthor Commented:
I'm sorry, I must have copied and pasted the wrong one... well it seems like I'm having an image problem now too.

I tried entering the coding from a different direction.  This way eliminates the vertical alignment (although I would like to keep that feature.) but with this way I'm having Image issues too:

www.maliakillings.com/sandbox/sandbox3.html
0
 
David S.Commented:
So why don't you go back and try what I originally suggested?

Why did you remove #shim anyway?
0
 
MaliaKAuthor Commented:
Okay, back to square one.  I've re-instated my original code with your changes you originally suggested.  We've got the #shim back.  And to answer an earlier question resizing the font was working smoothly because the whole page would re-size.  In terms of content, my client wanted to have no scrolling and so they decided to just be concise on each page.

So, with your original suggestion on my original code we're left with this:
www.maliakillings.com/sandbox/sandbox.html

Thanks for all the help thus far!
0
 
nanharbisonCommented:
Everyone who designs websites should read this article:
http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/

and use conditional style sheets. When I start a new website, I immediately create a style sheet and then one specifically for versions of IE. At least Micro$oft admits that IE doesn't behave by the rules by allowing conditional style sheets, here is their article on how to set up the correct conditions:
http://msdn.microsoft.com/en-us/library/ms537512.aspx

I suppose now that IE 8 is in beta testing, we will need an additional style sheet to deal with its bugs!
0
 
David S.Commented:
*sigh* I missed a semicolon in the last rule I posted. Here it is again  with the correction:

#gray_box{
    height: 482px;
    width: 996px;
    border: 2px solid #CCCCCC;
    position: absolute;
    z-index:2;
    left:50px;
    top: 143px;
    overflow: hidden;
}

@nanharbison

While knowing how the box models work is very important, they aren't causing the issues here because IE6+ is in "standards mode".

Also conditional comments are useful, but I think we can solve this without them.

Have you read http://www.alistapart.com/issues/270/ ?


0
 
MaliaKAuthor Commented:
Okay those changes are up.  The URL is now: www.maliakillings.com/sandbox/sandbox4.html
0
 
David S.Commented:
Give #copyright left:0 and remove the overflow:hidden declarations from both #wrapper and #gray_box
0
 
MaliaKAuthor Commented:
Okay, I did that.
0
 
MaliaKAuthor Commented:
Why am I having image issues?  The script used to work just fine in IE... now its not displaying at all.
0
 
nanharbisonCommented:
There are problems in IE 6 and IE7.  No text showing at all on IE7. Would you like a screen shot for IE7?
0
 
MaliaKAuthor Commented:
Sure.

I've been using http://ipinfo.info/netrenderer/index.php to get screen shots, but maybe they're inaccurate.  According to them the everyting shows up except the image.
0
 
nanharbisonCommented:
here it is. It is a very beautiful design in FF!

maliak.jpg
0
 
nanharbisonCommented:
wow, I just did the net renderer, it was NOTHING like what it looks like in IE7!
0
 
David S.Commented:
Yeah, it looks fine in IE7 now, but it's much worse in IE6.

Try adding this rule:

* html #photoholder {
  float: none;
}
0
 
MaliaKAuthor Commented:
Kravimir I made that change.

nanharbison, could you try is with the URL: www.maliakillings.com/sandbox/sandbox4.html

That's the file we're working with now.
0
 
David S.Commented:
It seems to look fine in IE6 now.

By the way, you should set a background-color in the "html, body" rule.
0
 
MaliaKAuthor Commented:
Okay, background ffffff set.

It looks good in IE6 and IE7?
0
 
nanharbisonCommented:
yup, looks perfect in both. Did you design it or just build it according to specs? I LOVE the design!
0
 
David S.Commented:
Yes, it looks fine now.

By the way, are you aware that your page contains a few XHTML and CSS errors?
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
0
 
MaliaKAuthor Commented:
I just did a browser compatibility test in dreamweaver and it has a few problems:

For #wrapper and #photoholder: Float drop problem: If a container (including the browser window itself) is not wide enough to accommodate both a float with a specified width and any content with a specified width that follows it, the content after the float will drop below the float rather than wrapping around it.
Affects: Internet Explorer 6.0, 7.0
Likelihood: Likely

For #photoholder and #gray_box: Z-index bug: Positioned containers define a new stacking order, even when the computed z-index of the container is auto. This can cause positioned children of the container to appear above other positioned elements on the page when they should not.
Affects: Internet Explorer 6.0, 7.0
Likelihood: Likely
0
 
David S.Commented:
Stop worrying about it. Those two issues don't seem to cause any problems in this page.
0
 
MaliaKAuthor Commented:
Any ideas on how to fix that?

In terms of the z-index, I want the #gray_box to be overlapping the #photoholder
0
 
David S.Commented:
#gray_box is overlapping #photoholder
0
 
MaliaKAuthor Commented:
I know, that's the way I like it... but the "Z-index bug" doesn't seem to like it.  Is this a bug we can ignore since it is working the way it should?
0
 
David S.Commented:
Yes, you can ignore it. I already said that. :p

DW is just a tool. It can't really tell if you've got a problem or not. It can be helpful sometimes, but highly experienced developers (like myself) are much better than it.
0
 
MaliaKAuthor Commented:
It is a tool.

Thank you for your help.  I'm going to have to find myself a PC and check it out.
0
 
MaliaKAuthor Commented:
To answer nanharbison's earlier question: yes I designed it for my clients and now I'm going through the coding process.  I
0
 
nanharbisonCommented:
DreamWeaver itself often doesn't display CSS the way it should display. Don't count on it for layout!
0
 
MaliaKAuthor Commented:
I don't use the "display" WYSIWYG mode.  I work all in code mode.
0
 
nanharbisonCommented:
good idea! I hope the Berea Street article helps you in the future. Even though you didn't need it here, it is good to understand about the differences in browsers.
0
 
MaliaKAuthor Commented:
Thank you
0
 
scrathcyboyCommented:
getting back to the original question --

"If a container (including the browser window itself) is not wide enough to accommodate both a float with a specified width and any content with a specified width that follows it, the content after the float will drop below the float rather than wrapping around it."

That is exactly what IE6 and sometimes IE7 will do.  The only way to fix this is to make sure that the container DIV is wider than the width of the FLOAT and the fixed width container, INCLUDING any padding and margins.  So if the float is 350 and the fixed width is 650, then the container of the two will have to be AT LEAST 1050 for IE NOT to wrap it to the next line.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 17
  • 12
  • 7
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now