Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2014-03-22
11
Medium Priority
?
522 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 2000 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 54

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 54

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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
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 style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

609 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