IE7 Img Problem - Webmaster Forum - Web Design, Programming and SEO forums

02-28-2008, 01:45 AM

CoryMathews

Status: I'm new around here
Join date: Feb 2008
Location:
Expertise:
Software:

Posts: 17

iTrader: 0 / 0%

CoryMathews is on a distinguished road

IE7 Img Problem

I have a wierd ie7 bug. Its easier to see what im talking about instead of trying to say it. Take a look here. It works in IE6, Opera, FF, and Safari. I have kind of narrowed it down a bit. The height of the date area determines the part of the image that is shown. Heres the html for the area

PHP Code:


			
<li>

  <span>

    <div class="guide">

      <div id="guide1">

        <h7>0</h7>

      </div>

      <h6>Soon to Come</h6>

    </div>

    <p>

      <a href="http://www.osguide.net/hdl.php?p=36" target="_blank">

        <h2>1. FileZilla - 3.0.7.1</h2>

      </a>

      <img src="http://www.osguide.net/images/software/filezilla.jpg" width="34px" height="34px" alt="FileZilla" align="left" />

      <b>Added: 2008-01-14 &nbsp;&nbsp;|&nbsp;&nbsp; Last Update: 2008-02-20</b>

      <br /><em>Windows</em> &raquo; <em>Linux</em> &raquo; <em>Mac</em> &raquo; <em>Internet</em>

    </p>

    <p><br />FileZilla Client...<br /></p>

    <p><br />

      <strong>Clicks</strong>: 21 &nbsp;|&nbsp; 

      <strong>License</strong>: GPL

    </p>

  </span>

</li>

and the css for this section

Code:

.programList ul {list-style:none; display:block; font-size:10px;}
.programList li {border-bottom:1px solid #f2f2f2; background-color:#DFDFDF; font-size:10px; color:#666; text-decoration:none;}
.programList h2{ font-size:14px; color:#666; text-decoration: none; font-weight:bold; padding:7px 0 3px 0; }
.programList img{ padding:0 2px; background-color:#DFDFDF; border:2px solid #DFDFDF; height:34px; width:34px; float:left;}
.programList a {font-size:10px; color:#666666; text-decoration:none;}
.programList em {font-size:12px; color:#666;}
.programList span{ outline:none; background-color:#DFDFDF; text-decoration:none; display:block; padding:0px 15px 10px 15px; border-bottom:1px solid #CCCCCC; color:#999; font-size:12px;}
.programList span p {margin-left:69px; display:block;}
.programList span b {font-size:10px; color:#999999; font-weight:normal; position:relative; line-height:1.75;}
/*.programList span b img {border:0;}*/
.programList span:hover { background-color:#EEEEEE; border-bottom:1px solid #BBB;color:#444;text-decoration:none;}
.programList span:hover h2 { color:#0099CC; background-color:#EEEEEE; }
.programList span:hover a {color:#0099CC; background-color:#EEE; }
.programList span:hover img { background-color:#EEEEEE; border:2px solid #EEEEEE; min-height:34px; height:34px; width:34px; }
.programList span:hover em {color:#FF9900;}
.programList span:hover b {font-size:10px; font-weight:normal; color:#0099CC; line-height:1.75; }
.guide { width:69px; text-align:center; display:block; float:left; padding:15px 0 15px 0; }
.guide h7 { display:block; font-size:24px; color:#FF9900;}
.guide h6 { display:block; cursor:hand; font-size:12px; margin-top:5px; color:#666;}

Any ideas what could be causing this?

02-28-2008, 03:40 AM

Awesome

Status: Pastafarian
Join date: May 2006
Location: Duct Taped to your Ceiling
Expertise:
Software:

Posts: 3,440

iTrader: 26 / 93%

Awesome is on a distinguished road

You know there is no such thing as an h7 tag right?

02-28-2008, 04:14 AM

VimF

Status: Junior Member
Join date: Jan 2008
Location: on CSS
Expertise:
Software:

Posts: 63

iTrader: 0 / 0%

VimF is on a distinguished road

hmm... I'm a bit surprised that the code even works in IE6.

02-28-2008, 05:17 AM

Szandor

Status: Junior Member
Join date: Jan 2008
Location: Växjö, Sweden
Expertise:
Software:

Posts: 45

iTrader: 0 / 0%

Szandor is on a distinguished road

First of all, make sure you specify the correct encoding in the head. That could mess up a whole bunch of stuff. Secondly, get to work on your code - it has a grand total of 141 HTML and 13 parsing errors in it (using Total Validator) and since XML can be quite unforgiving, you should at least clean up the most blatant ones, such as unclosed tags and tags in uppercase.

You have also set the height and width of your image in the tag. This should always be avoided and set through CSS, but apart from that you have also made a critical error. The value of the height and width shouldn't have any unit to it. So, instead of "34px" it should only say "34". This might solve your problem, but I still urge you to clean up your code.

02-28-2008, 08:15 AM

mikeroq

Status: Member
Join date: Feb 2006
Location: Ponca City, OK
Expertise: xHTML/CSS/PHP/Computer Tech
Software: Photoshop, Notepad++, Winamp

Posts: 332

iTrader: 5 / 100%

mikeroq is an unknown quantity at this point

The value of the height and width shouldn't have any unit to it

Wrong

You can either set percent or pixel value for the height and width attribute.

02-28-2008, 03:52 PM

CoryMathews

Status: I'm new around here
Join date: Feb 2008
Location:
Expertise:
Software:

Posts: 17

iTrader: 0 / 0%

CoryMathews is on a distinguished road

Humm, i had only taken the time to validate my css, i never even looked at the html validation yet. I didnt realize it was so.. bad lol. I will have to clean it up.

02-28-2008, 11:25 PM

Soul_Cliche

Status: Junior Member
Join date: Apr 2007
Location:
Expertise:
Software:

Posts: 51

iTrader: 0 / 0%

Soul_Cliche is on a distinguished road

to a post a bit above mine. it is invalid to not specify a unit to hight or width. this can screw up your browser and it could set a default and could possibly do the exact opposite of what you want, or cause even more problems.

02-28-2008, 11:27 PM

Wildhoney

Status: Request a custom title
Join date: Feb 2006
Location: Nottingham
Expertise:
Software:

Posts: 1,648

iTrader: 18 / 95%

Wildhoney is on a distinguished road

In the world of XML, nobody will be wrong!

<h1452>Swivel on this!</h1452>

03-01-2008, 08:45 AM

Szandor

Status: Junior Member
Join date: Jan 2008
Location: Växjö, Sweden
Expertise:
Software:

Posts: 45

iTrader: 0 / 0%

Szandor is on a distinguished road

Originally Posted by Mike Roq

Wrong

You can either set percent or pixel value for the height and width attribute.

Yes, but if you define it in pixels you can't write "px" after the value.

03-01-2008, 08:49 AM

#10

Szandor

Status: Junior Member
Join date: Jan 2008
Location: Växjö, Sweden
Expertise:
Software:

Posts: 45

iTrader: 0 / 0%

Szandor is on a distinguished road

Oh, and the errors have dropped by quite a bit! You have managed to loose a list element somewhere though, but apart from that your website is coming out fine. I take it some of the bugs have disappeared too?