Solved

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

Posted on 2014-03-22
11
514 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Flexbox in CSS3 2 40
Best Practice CSS floating images 2 33
How to change pointer icon to hand icon on mouseover 2 19
Why my select dropdown does not work? 8 26
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

920 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

15 Experts available now in Live!

Get 1:1 Help Now