Solved

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

Posted on 2014-03-22
11
513 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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
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.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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 …

760 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

20 Experts available now in Live!

Get 1:1 Help Now