Solved

Making my site Internet Explorer compatible

Posted on 2008-11-02
38
282 Views
Last Modified: 2013-11-19
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
Comment
Question by:MaliaK
  • 17
  • 12
  • 7
  • +2
38 Comments
 
LVL 6

Expert Comment

by:dwaynecharrington
ID: 22864385
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
 

Author Comment

by:MaliaK
ID: 22864409
Now my gray outline box and #left_content #right_content have disappeared
0
 
LVL 42

Expert Comment

by:David S.
ID: 22864665
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
 
LVL 42

Expert Comment

by:David S.
ID: 22864681
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
 

Author Comment

by:MaliaK
ID: 22864899
Well, I've updated with those changes... it still isn't working.

www.maliakillings.com/sandbox/sandbox.html
0
 
LVL 42

Expert Comment

by:David S.
ID: 22864999
It looks like you only changed the #wrapper rule?
0
 

Author Comment

by:MaliaK
ID: 22865164
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
 
LVL 42

Expert Comment

by:David S.
ID: 22865217
So why don't you go back and try what I originally suggested?

Why did you remove #shim anyway?
0
 

Author Comment

by:MaliaK
ID: 22865299
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
 
LVL 17

Expert Comment

by:nanharbison
ID: 22866258
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
 
LVL 42

Expert Comment

by:David S.
ID: 22869394
*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
 

Author Comment

by:MaliaK
ID: 22869992
Okay those changes are up.  The URL is now: www.maliakillings.com/sandbox/sandbox4.html
0
 
LVL 42

Expert Comment

by:David S.
ID: 22870034
Give #copyright left:0 and remove the overflow:hidden declarations from both #wrapper and #gray_box
0
 

Author Comment

by:MaliaK
ID: 22870107
Okay, I did that.
0
 

Author Comment

by:MaliaK
ID: 22870153
Why am I having image issues?  The script used to work just fine in IE... now its not displaying at all.
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 22870273
There are problems in IE 6 and IE7.  No text showing at all on IE7. Would you like a screen shot for IE7?
0
 

Author Comment

by:MaliaK
ID: 22870322
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
 
LVL 17

Expert Comment

by:nanharbison
ID: 22870477
here it is. It is a very beautiful design in FF!

maliak.jpg
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 22870511
wow, I just did the net renderer, it was NOTHING like what it looks like in IE7!
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 42

Expert Comment

by:David S.
ID: 22870759
Yeah, it looks fine in IE7 now, but it's much worse in IE6.

Try adding this rule:

* html #photoholder {
  float: none;
}
0
 

Author Comment

by:MaliaK
ID: 22870816
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
 
LVL 42

Expert Comment

by:David S.
ID: 22870990
It seems to look fine in IE6 now.

By the way, you should set a background-color in the "html, body" rule.
0
 

Author Comment

by:MaliaK
ID: 22871022
Okay, background ffffff set.

It looks good in IE6 and IE7?
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 22871056
yup, looks perfect in both. Did you design it or just build it according to specs? I LOVE the design!
0
 
LVL 42

Expert Comment

by:David S.
ID: 22871095
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
 

Author Comment

by:MaliaK
ID: 22871097
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
 
LVL 42

Expert Comment

by:David S.
ID: 22871316
Stop worrying about it. Those two issues don't seem to cause any problems in this page.
0
 

Author Comment

by:MaliaK
ID: 22871354
Any ideas on how to fix that?

In terms of the z-index, I want the #gray_box to be overlapping the #photoholder
0
 
LVL 42

Expert Comment

by:David S.
ID: 22871484
#gray_box is overlapping #photoholder
0
 

Author Comment

by:MaliaK
ID: 22871508
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
 
LVL 42

Expert Comment

by:David S.
ID: 22871610
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
 

Author Comment

by:MaliaK
ID: 22871654
It is a tool.

Thank you for your help.  I'm going to have to find myself a PC and check it out.
0
 

Author Comment

by:MaliaK
ID: 22871705
To answer nanharbison's earlier question: yes I designed it for my clients and now I'm going through the coding process.  I
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 22872023
DreamWeaver itself often doesn't display CSS the way it should display. Don't count on it for layout!
0
 

Author Comment

by:MaliaK
ID: 22872069
I don't use the "display" WYSIWYG mode.  I work all in code mode.
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 22872131
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
 

Author Comment

by:MaliaK
ID: 22872158
Thank you
0
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 500 total points
ID: 22872987
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now