asked on

CSS issues for IE6 only - DIV

In Internet Explorer 6, on the following page, my images shift "down & left":
http://www.pamelafugate.com/work.html

This is my CSS
http://www.pamelafugate.com/style/721.css

Could anybody shed some light on this for me please?
Thank you for your time in advance.

Gurvinder Pal Singh

you problem looks similar to this
http://csscreator.com/node/1393

Please check and let me know if it was helpful

kblumen

ASKER

I added the recommended code to one div, then a few divs, then eventually all the divs.
The result was the same unfortunately.

* html div#content-wrapper {
	height: 10%;
	}
* html div#precontent {
	height: 10%;
	}
* html div#maincontentwork {
	height: 10%;
	}
* html div#previews {
	height: 10%;
	}
* html div#galleries {
	height: 10%;
	}
* html div#controls {
	height: 10%;
	}
* html div#transport {
	height: 10%;
	}
* html div#thumbnails {
	height: 10%;
	}
* html div#wrap {
	height: 10%;
	}
* html div#picture {
	height: 10%;
	}
* html div#mainimageoutline {
	height: 10%;
	}
* html div#mainimage {
	height: 10%;
	}

Open in new window

kblumen

ASKER

Let me just amend to this showing my other CSS stylesheet, just in case.

http://www.pamelafugate.com/style/screen.css

so the the three files in question are:

1. http://www.pamelafugate.com/work.html
2. http://www.pamelafugate.com/style/721.css
3. http://www.pamelafugate.com/style/screen.css

Thank you again for your efforts.

kblumen

ASKER

Ok it seems I see the culprit in here:
OLD CODE:
#maincontentwork {
      background-color: #FFFFFF;
      color: #fff;
      width: 668px;
      float: left;
      height: auto;
}

adding a ridiculous amount of width seems to make it work, however it isn't aligned with my NavBar in IE6 anymore. IE7/8, Firefox and Safari all stay aligned.

NEW CODE:

#maincontentwork {
      background-color: #FFFFFF;
      color: #fff;
      width: 1400px;
      float: left;
      height: auto;
}

Is there anyway around this for IE6 (alignment with NavBar)?

kblumen

ASKER

Does anyone have any ideas on this? I noticed on my iPhone it gives a ton of space to the right on Safari.

Mark Steggles

Hello,

First of all, from a design standpoint, it looks weird to have the site centered on the page and then you work images sticking out to the site causing scrollbars. The site would look better if the images were smaller or the site was left aligned.

Regarding the ie6 issue. I'm sure we can get this fixed. The first thing to try would be to use a strict doctype, there is no reason to use a transitional doctype. Second, try fixing these errors http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.pamelafugate.com%2Fwork.html

Let me know what happens and then we can try other things

Thanks

kblumen

ASKER

I will take a look.. I also noticed this article regarding doc types for Adobe's Spry Framework:

https://www.experts-exchange.com/questions/24136514/XHTML-page-with-Spry-won't-validate.html

Could you please let me know if this changes your opinion regarding the doc type?
I will make sure all the rest validates in the meantime.

Thank you so much for your time!

Mark Steggles

Hmm... this page http://livedocs.adobe.com/en_US/Spry/SDG/help.html?content=WS56A0E49C-7801-43bb-B0B1-1DDCE23322BA.html says that you can use this code:

[
<!ENTITY % SPRY SYSTEM "http://www.adobe.com/dtd/spry.dtd">
%SPRY;
]>

in your doctype to help the validator understand your spry code. However, it also says that:

"To ensure validation, add the entity extension to your code as outlined. Then, for the page to appear correctly, remove the entity extension before posting your page to the server. Remember, this custom DTD is only required if you need the page to validate and you are using Spry attributes. If you are not using Spry attributes, or you are only using Spry effects and Spry widgets, this custom DTD is not required."

Do you have the ability to remove that code above server side? If not then dont worry about this abobe spry dtd stuff.

Still use the strict doctype whatever you do.

kblumen

ASKER

remove the code on Adobe's servers? No, just code on my site.

So, use strict even with this statement?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
<!ENTITY % SPRY SYSTEM "http://www.adobe.com/dtd/spry.dtd">
%SPRY;
]>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
...
</html>

So, it would look like this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[
<!ENTITY % SPRY SYSTEM "http://www.adobe.com/dtd/spry.dtd">
%SPRY;
]>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
...
</html>

Should I remove something after validation or ?

Mark Steggles

Ok, you only need this when you are validating the page

[
<!ENTITY % SPRY SYSTEM "http://www.adobe.com/dtd/spry.dtd">
%SPRY;
]>

it helps the w3 validator understand the spry code. So, you only need that line when you checking the validation of the page. Otherwise remove it.

yes strict is good.

Did adding that [
<!ENTITY % SPRY SYSTEM "http://www.adobe.com/dtd/spry.dtd">
%SPRY;
]>
clear up the errors in the validator or have you cleared them up yet? Then we can move onto the next stage of trying to get this fixed

kblumen

ASKER

When I add:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[
<!ENTITY % SPRY SYSTEM "http://www.adobe.com/dtd/spry.dtd">
%SPRY;
]>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">

I am left with these validation errors:

Validation Output:  12 Errors

   1. Error Line 12, Column 52: Attribute "type-" is not a valid attribute. Did you mean "enctype" or "codetype"?

      <link rel="shortcut icon" href="favicon.ico" type-="image/x-icon">

      ¿

      You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

      This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

      How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.
   2. Error Line 12, Column 67: end tag for "link" omitted, but OMITTAG NO was specified

      …="favicon.ico" type-="image/x-ico…

      ¿

      You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
   3. Info Line 12: start tag was here

      ><link rel="shortcut icon" href="favicon.ico" type-="image/x-icon">

   4. Error Line 30, Column 81: Attribute "target" exists, but can not be used for this element.

      …w.twitter.com/pamelafugate/" target="_blank"><img src="images/pfd_tw_green.jp

      ¿

      You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

      This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

      How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.
   5. Error Line 30, Column 126: required attribute "alt" not specified

      …<img src="images/pfd_tw_green.jpg" /></a></div>

      ¿

      The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

      Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.
   6. Error Line 31, Column 130: required attribute "alt" not specified

      …<img src="images/pfd_li_green.jpg" /></a></div>

      ¿

      The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

      Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.
   7. Error Line 32, Column 134: required attribute "alt" not specified

      …<img src="images/pfd_fb_green.jpg" /></a></div>

      ¿

      The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

      Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.
   8. Error Line 64, Column 263: character "{" is not allowed in the value of attribute "id"

      …sByTagName('img')[0]);"> <img id="tn{ds_RowID}" alt="thumbnail for {@thumbpat

      ¿

      It is possible that you violated the naming convention for this attribute. For example, id and name attributes must begin with a letter, not a digit.
   9. Error Line 70, Column 107: required attribute "src" not specified

      …mg id="mainImage" alt="main image" /></div>

      ¿

      The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

      Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.
  10. Error Line 75, Column 6: end tag for element "div" which is not open

      </div>

      ¿

      The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

      If this error occurred in a script section of your document, you should probably read this FAQ entry.
  11. Error Line 24, Column 7: XML Parsing Error: Opening and ending tag mismatch: link line 12 and head

      </head>

      ¿
  12. Error Line 75, Column 6: XML Parsing Error: Opening and ending tag mismatch: body line 25 and div

      </div>

      ¿
  13. Error Line 82, Column 7: XML Parsing Error: Opening and ending tag mismatch: head line 8 and body

      </body>

Open in new window

Mark Steggles

hello,

1. type-= should be type=
2. In xhtml all self closing elements should be self closed...

<link rel="shortcut icon" href="favicon.ico" type-="image/x-icon">

should be

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

4. Dont worry about target for now

5, 6 &7. all img tags need an alt="" (alternative text in case the image doesnt load.. alt="" can be empty.. you just need to have alt="")

kblumen

ASKER

thank you. ok this is what I have left:

#  Error  Line 30, Column 81: Attribute "target" exists, but can not be used for this element.

…w.twitter.com/pamelafugate/" target="_blank"><img src="images/pfd_tw_green.jp

¿

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.
# Error Line 64, Column 263: character "{" is not allowed in the value of attribute "id"

…sByTagName('img')[0]);"> <img id="tn{ds_RowID}" alt="thumbnail for {@thumbpat

¿

It is possible that you violated the naming convention for this attribute. For example, id and name attributes must begin with a letter, not a digit.
# Error Line 70, Column 107: required attribute "src" not specified

…mg id="mainImage" alt="main image" /></div>

¿

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.
# Error Line 75, Column 6: end tag for element "div" which is not open

</div>

¿

The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

If this error occurred in a script section of your document, you should probably read this FAQ entry.
# Error Line 75, Column 6: XML Parsing Error: Opening and ending tag mismatch: body line 25 and div

</div>

¿
# Error Line 82, Column 7: XML Parsing Error: Opening and ending tag mismatch: html line 7 and body

</body>

Open in new window

Mark Steggles

Please follow the instructions the validator is giving you

kblumen

ASKER

I cannot use the blank attribute?

Mark Steggles

You can use target for now.. its not a big deal. Lets move on to getting this fixed in ie6

Mark Steggles

It looks like you have an extra </div>

<div id="wrap">
<div id="picture">
<div id="mainImageOutline" style="width: 0px; height: 0px;"><img id="mainImage" alt="main image" /></div>

</div>
</div>
</div>
</div>
</div> <-------------

I dont think this is the problem but :)

kblumen

ASKER

extra div is gone and you are correct it doesn't seem to be the issue with IE6

kblumen

ASKER

This is mainly adobe SPRY-framework code that is left throwing errors. I will double check this tonight.
This is all I am left with:

1.   Error  Line 30, Column 81: Attribute "target" exists, but can not be used for this element.

      …w.twitter.com/pamelafugate/" target="_blank"><img src="images/pfd_tw_green.jp

      ¿

      You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

      This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

      How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.
   2. Error Line 64, Column 263: character "{" is not allowed in the value of attribute "id"

      …sByTagName('img')[0]);"> <img id="tn{ds_RowID}" alt="thumbnail for {@thumbpat

      ¿

      It is possible that you violated the naming convention for this attribute. For example, id and name attributes must begin with a letter, not a digit.
   3. Error Line 70, Column 107: required attribute "src" not specified

      …mg id="mainImage" alt="main image" /></div>

      ¿

      The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

      Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

Open in new window

kblumen

ASKER

It appears there may be another version of the framework that makes the code more modular. I will try to incorporate it.

kblumen

ASKER

..in the meantime, is there a logical reason why this is occurring? I haven't had time to incorporate the new code.
On other site's code (not necessarily other site's with Adobe's Spry framework), I have seen extra empty div's "<!---- remarked as, for IE6 ----!>" ... could that be what I am missing here?

I would hate to change to the new framework, only to find the same issue.

Thoughts?

ASKER CERTIFIED SOLUTION

Mark Steggles

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

kblumen

ASKER

That statement has me a bit confused on where to start commenting...
I have attached the code from the page... what are would you start to comment out?

As an example... that would help me get started... thanks so much!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="description" content="Atlanta Graphic Design and Web Design" />
<title>Atlanta Graphic Design</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="style/721.css" type="text/css" />
<link rel="stylesheet" href="style/screen.css" type="text/css" />
<script type="text/javascript" src="includes/xpath.js"></script>
<script type="text/javascript" src="includes/SpryData.js"></script>
<script type="text/javascript" src="includes/SpryEffects.js"></script>
<script type="text/javascript">
var dsGalleries = new Spry.Data.XMLDataSet("galleries/galleries.xml", "galleries/gallery");
var dsGallery = new Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}", "gallery");
var dsPhotos = new Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}", "gallery/photos/photo");
</script>
<script src="includes/gallery.js"  type="text/javascript"></script>
</head>
<body>
<div id="header-wrap" style="margin-bottom: 4px;">
  <div id="header-images">
    <div id="header"></div>
    <div id="header-right">
      <div class="social"><a href="http://www.twitter.com/pamelafugate/" target="_blank"><img src="images/pfd_tw_green.jpg" alt="" /></a></div>
      <div class="social"><a href="http://www.linkedin.com/in/pamelafugate/" target="_blank"><img src="images/pfd_li_green.jpg" alt="" /></a></div>
      <div class="social"><a href="http://www.facebook.com/pamelafugatedesigns/" target="_blank"><img src="images/pfd_fb_green.jpg" alt="" /></a></div>
    </div>
  </div>
  <div id="header-menu">
    <ul id="header-menu-list">
      <li><a href="http://www.pamelafugate.com/" class="inactive">HOME</a></li>
      <li><a href="http://www.pamelafugate.com/about.html" class="inactive">ABOUT</a></li>
      <li><a href="http://www.pamelafugate.com/work.html">WORK</a></li>
      <li><a href="http://www.cafepress.com/pamelafugate/" target="_blank" class="inactive">SHOP</a></li>
      <li><a href="http://www.pamelafugate.com/contact.html"  class="inactive" style="border-right: none; width: 136px;">CONTACT</a></li>
    </ul>
  </div>
</div>
<div id="content-wrapper">
  <div id="precontent"></div>
  <div id="maincontentwork">
    <div id="previews">
      <div id="galleries" spry:region="dsGalleries">
        <label for="gallerySelect">View:</label>
        <select spry:repeatchildren="dsGalleries" id="gallerySelect" onchange="dsGalleries.setCurrentRowNumber(this.selectedIndex);">
          <option spry:if="{ds_RowNumber} == {ds_CurrentRowNumber}" selected="selected">{sitename}</option>
          <option spry:if="{ds_RowNumber} != {ds_CurrentRowNumber}">{sitename}</option>
        </select>
      </div>
      <div id="controls">
        <ul id="transport">
          <li><a href="#" onclick="StopSlideShow(); AdvanceToNextImage(true);" title="Previous">Previous</a></li>
          <li class="pausebtn"><a href="#" onclick="if (gSlideShowTimer) StopSlideShow(); else StartSlideShow();" title="Play/Pause" id="playLabel">Play</a></li>
          <li><a href="#" onclick="StopSlideShow(); AdvanceToNextImage();" title="Next">Next</a></li>
        </ul>
      </div>
      <div id="thumbnails" spry:region="dsPhotos dsGalleries dsGallery">
        <div spry:repeat="dsPhotos" onclick="HandleThumbnailClick('{ds_RowID}');" onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0], '{@thumbwidth}', '{@thumbheight}');" onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);"> <img id="tn{ds_RowID}" alt="thumbnail for {@thumbpath}" src="galleries/{dsGalleries::@base}{dsGallery::thumbnail/@base}{@thumbpath}" width="24" height="24" style="left: 0px; right: 0px;" /> </div>
        <p class="ClearAll"></p>
      </div>
    </div>
    <div id="wrap">
      <div id="picture">
        <div id="mainImageOutline" style="width: 0px; height: 0px;"><img id="mainImage" alt="main image" /></div>
      </div>
    </div>
  </div>
</div>
<div id="footer">
  <div id="footer-content">
    <div id="footerc">404.287.0957 P | 206.203.1000 F | <a href="mailto:pamela@pamelafugate.com">pamela@pamelafugate.com</a> | www.pamelafugate.com</div>
    <div id="footerd">facebook: <strong><a href="http://www.facebook.com/pamelafugatedesigns" target="_blank">pamelafugatedesigns</a></strong> | linkedin: <strong><a href="http://www.linkedin.com/in/pamelafugate" target="_blank">pamelafugate</a></strong> | twitter: <strong><a href="http://www.twitter.com/pamelafugate" target="_blank">pamelafugate</a></strong></div>
  </div>
</div>
</body>
</html>

Open in new window