6 replies [Last post]
Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 5 years 29 weeks ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

Well, I'm stumped by this one. I have an image which refuses to appear in IE, although it shows up fine in FF, Opera, and Safari. I've hunted through the code and can't seem to locate the problem.

http://www.digitalpawprint.com/respiraide/productline/productline_200T.html

Here's the html code:







RespirAide


@import "../respiraidestyle.css";

Product Line

200 T

200T

Multi-Stage Filters

The unit utilizes the two-stage Electronic cell combined with the Pre-filter (for large particles), the Activated carbon filter (for odors and gases, the UV germicidal lamps (killing airborne pathogen), the Photo Catalytic filter (VOC's) and the negative Ion generator.

Automatic Function

The unit automatically selects the appropriate fan speed depending on the air quality detected.

Safety Micro-switch

The safety Micro-switch will turn the unit off if you remove the front panel.

Easy Maintenance and Low cost

No tools required to change or clean any filters.

Specifications

  • Rated Power on high: 55W
  • Applicable Floor Surface:
    • 1 air exchanges p/h 2257 sq/ft
    • 2 air exchanges p/h 1129 sq/ft
    • 5 air exchanges p/h 451 sq/ft
  • Air Flow Fan Speed: H-300 M-135 L-88 cfm
  • Filtration: Pre-Filter, two-stage electronic precipitator, activated carbon filter, UV kill chamber, Photo catalytic filter.
  • Negative Ion output: 1.2x10pcs/cc
  • Remote Control: Yes
  • Dimensions: 18.9"W x 3.7"D x 32.2"H
  • Weight: 22.2 kg (49 lbs)

And here are the bits of css code that I think are related (I think I've got them all covered here, but if not, any others can be found under "respiraidestyle.css" on the site):
img.photo_productline_200T
{
text-indent: -9999px;
text-decoration: none;
width: 165px;
height: 220px;
margin: 0;
padding: 0;
}
.productline_subtitle
{
text-align: center;
padding: 20px 0 0 0;
font-weight: bold;
font-size: 120%;
}

#productline_container
{
width: 585px;
padding-bottom: 20px;
}

#productline_photo
{
width: 179px;
height: 245px;
float: left;
padding: 0 10px 0 0;
}

#productline_photo_200T
{
width: 165px;
height: 220px;
float: left;
padding: 0 10px 0 0;
}

#productline_main
{
width: 385px;
left: 200px;
position: absolute;
}

#productline_main2
{
margin-top: 290px;
left: 0;
}

#productline_main3
{
margin-top: 260px;
left: 0;
}

#content .follower
{
padding: 5px 0 0 0;
}

#content ul.product
{
list-style: none;
margin-left: 0;
padding-left: 0;
}

#content ul.product li ul
{
list-style: none;
}

#content ul.product li ul li
{
padding: 0;
}

#narrowtext
{
width: 200px;
left: 0;
}

#product_bluebox_container
{
top: 535px;
left: 215px;
width: 370px;
height: 235px;
padding: 0;
background-color: #fff;
border: 2px solid #000066;
color: #000066;
position: absolute;
}

#product_bluebox
{
margin: 0 auto;
margin-top: 2px;
width: 356px;
height: 221px;
padding: 5px;
background-color: #000066;
color: #fff;
}

#product_bluebox p
{
padding: 0 0 10px 0;
}

#product_bluebox_photo
{
width: 163px;
height: 132px;
float: right;
padding: 0 0 5px 5px;
}

Everything appears to validate fine. Any suggestions would be greatly appreciated!

ae36
ae36's picture
Offline
newbie
United States
Last seen: 11 years 29 weeks ago
United States
Timezone: GMT-5
Joined: 2007-10-24
Posts: 8
Points: 0

img.photo_productline_200T

what purpose does the text-indent serve? It may be putting your image off the screen in IE.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 18 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Not tested (in

Not tested (in IE—works in Firefox)

Why the AP placement? That may be the problem. Try this:

#productline_main {
  margin: 0 10px 0pt 200px;
  }

#productline_main3 {}

You might also look to your semantic values. Why the <p>s instead of proper headers, eg. <h3>?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 5 years 29 weeks ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

fixed!

Thanks Andrew ~ that did the job, removing the text indents. Can't remember why they were there in the first place but obviously they weren't needed or wanted. It now works in IE as well as all other browsers. Yay!

Gary, the reason I'm not using H3 or something similar is because those headings are already being used elsewhere in the site. This seems to work fine for everything else, so I figured it was okay. I appreciate your input. Let me know if you think I should be doing things differently.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 20 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

you can use the heading tags

you can use the heading tags on each page. and once you get down to h3ish i believe it is perfectly acceptable to begin using more then one per page.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 18 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Heading levels apply to the

Heading levels apply to the page they're on. <h1> is the top level. below that there may be any number of <h2>s, and each <h2> may have any number of <h3>s, etc.. Look at my sig link. Pay attention to the header levels as shown by the webdeveloper extension's show document outline.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 5 years 29 weeks ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

Now I get it!

Thanks for straightening that out for me.