?
Solved

CSS issues for IE6 only - DIV

Posted on 2010-01-11
24
Medium Priority
?
251 Views
Last Modified: 2013-11-19
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.
0
Comment
Question by:kblumen
[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
  • 14
  • 8
24 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 26283265
you problem looks similar to this
http://csscreator.com/node/1393

Please check and let me know if it was helpful
0
 
LVL 3

Author Comment

by:kblumen
ID: 26283461
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

0
 
LVL 3

Author Comment

by:kblumen
ID: 26283553
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.
0
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
LVL 3

Author Comment

by:kblumen
ID: 26285051
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)?
0
 
LVL 3

Author Comment

by:kblumen
ID: 26335379
Does anyone have any ideas on this?  I noticed on my iPhone it gives a ton of space to the right on Safari.
0
 
LVL 30

Expert Comment

by:Steggs
ID: 26345456
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
0
 
LVL 3

Author Comment

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

http://www.experts-exchange.com/Programming/Languages/Scripting/Q_24136514.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!
0
 
LVL 30

Expert Comment

by:Steggs
ID: 26346045
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.
0
 
LVL 3

Author Comment

by:kblumen
ID: 26346264
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 ?
0
 
LVL 30

Expert Comment

by:Steggs
ID: 26350603
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
0
 
LVL 3

Author Comment

by:kblumen
ID: 26359651
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

0
 
LVL 30

Expert Comment

by:Steggs
ID: 26361581
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="")

0
 
LVL 3

Author Comment

by:kblumen
ID: 26362000
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

0
 
LVL 30

Expert Comment

by:Steggs
ID: 26362074
Please follow the instructions the validator is giving you
0
 
LVL 3

Author Comment

by:kblumen
ID: 26362328
I cannot use the blank attribute?
0
 
LVL 30

Expert Comment

by:Steggs
ID: 26362388
You can use target for now.. its not a big deal. Lets move on to getting this fixed in ie6
0
 
LVL 30

Expert Comment

by:Steggs
ID: 26362959
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 :)
0
 
LVL 3

Author Comment

by:kblumen
ID: 26363692
extra div is gone and you are correct it doesn't seem to be the issue with IE6
0
 
LVL 3

Author Comment

by:kblumen
ID: 26364920
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

0
 
LVL 3

Author Comment

by:kblumen
ID: 26370485
It appears there may be another version of the framework that makes the code more modular.  I will try to incorporate it.
0
 
LVL 3

Author Comment

by:kblumen
ID: 26413919
..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?

0
 
LVL 30

Accepted Solution

by:
Steggs earned 2000 total points
ID: 26414002
You need to debug the page for ie6... comment out all the elements of the content and then add them back in one by one until you find exactly what is breaking the page. You may want to add different background colors to different containers to help you see what part of the layout is breaking
0
 
LVL 3

Author Comment

by:kblumen
ID: 26476809
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

0

Featured Post

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

741 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