Solved

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

Posted on 2014-03-22
11
518 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 35

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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 35

Expert Comment

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

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 35

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 53

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
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…
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

717 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