Solved

Browserstack.com shows white area on left in IE8 and IE9

Posted on 2014-03-22
11
516 Views
Last Modified: 2014-03-23
Hello

Working on a page that is ok on modern browsers.

However I just looked at it in browserstack and I see that in IE7 and IE8 there is a white area on the left.

I think I have zeroed it down to a div, but I am unable to recolor the white area to match the body background color.

In my next comment I will post the URL of a test page, along with the div that I think needs to be recolored.

Thanks for any solution(s).

Thanks

Rowby
0
Comment
Question by:Rowby Goren
  • 6
  • 3
  • 2
11 Comments
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39948207
Hello

Here is the test page.  If you look it in browserstack or similar emulator you will see the problem in IE7 and IE8.  Or If you need a screen shot let me know.

Link to example page in IE7 and IE8

The misbehaving div (I think):  .container

If I can recolor the background of this div to #F5F5F5  I think that will fix it:  

Here's the existing  css
.container {
    background: none repeat scroll 0 0 #F5F5F5;
    padding-left: 120px;
    width: 1030px;
}

Open in new window


However, when I look at the above css in firebug the background code is crossed out -- resulting in a white background for about 120 px (I think) .

Something is overriding it but I can't figure out.

At least I think that is the issue.

Thanks

Rowby
0
 
LVL 34

Accepted Solution

by:
Dan Craciun earned 500 total points
ID: 39948270
Tried it in IE 8 on a VM and this appears to be the problem:

<!--[if lte IE 8]>
  	<style type="text/css">
  	#body > div.inner,#wrapper > div.inner,#banner > div.inner { behavior: url(/templates/drivehuber2/pie.htc) }

  	</style>

Open in new window


If I remove "div.inner,#wrapper >" from above the white rectangle disappears.

HTH,
Dan
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39948276
Thanks, Dan

I'm trying to figure out which stylesheet has that code.  Can't seem to find it.

Can you give me the stylesheet name

Thanks

Rowby
0
Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

 
LVL 34

Expert Comment

by:Dan Craciun
ID: 39948278
It's not in a stylesheet, it's in your document (lines 78-82)
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39948279
Just a few tiny validation errors but worth updating  http://validator.w3.org/check?uri=http%3A%2F%2Fnew.drivehubber.com%2Fabout-us&charset=%28detect+automatically%29&doctype=Inline&group=0
Error Line 93, Column 193: The charset attribute on the link element is obsolete. Use an HTTP Content-Type header on the linked resource instead.
…l="stylesheet" href="/Styles/stylesheet.css" type="text/css" charset="utf-8" />
¿
Error Line 141, Column 100: Bad value 0px for attribute width on element img: Expected a digit but saw p instead.
…/templates/drivehuber2/images/logo_fake.png" width="0px" height="0px" alt="" />
Syntax of non-negative integer:
One or more digits (0–9). For example: 42 and 0 are valid, but -273 is not.
Error Line 141, Column 100: Bad value 0px for attribute height on element img: Expected a digit but saw p instead.
…/templates/drivehuber2/images/logo_fake.png" width="0px" height="0px" alt="" />
Syntax of non-negative integer:
One or more digits (0–9). For example: 42 and 0 are valid, but -273 is not.

Open in new window


I wouldn't kill yourself trying to support these old browsers.

People still using ie8 and below probably make up 1% of your total userbase.  By now they expect certain things not to work perfect and if they are on windows xp, it is probably because their work computer was never upgraded but at home they have their ipad, smartphone and less and less time on whatever computer they have.  Google has given up on ie9 Oct 2013 https://support.google.com/a/answer/33864?hl=en.  

It is good you want to check every browser, I just wouldn't work too hard on it.  <<edit>> for older IE.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39948585
Hi  That fixed the issue.

I'm not looking for complete compatibility to the old browsers-- but that was the only major issue I found.  

I will run the site through the validator and fix those issues before relaunch

Thanks!

Rowby
0
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 39948586
Thanks, Dan, for the fix and the reminder to run it through the validator.

Rowby
0
 
LVL 34

Expert Comment

by:Dan Craciun
ID: 39948658
Glad I could help!
PS: it was Scott that put the page through the validator.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39948708
Thanks Scott.  I guess I should have given you some points too.  I'll try to make up for it 'next time".

Rowby
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39948768
No worries. That is just the most basic thing we forget to do.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39948819
Thanks, Scott :)
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

830 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