By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,676 Members | 1,773 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,676 IT Pros & Developers. It's quick & easy.

Problem with hover and IE6: shrinks page.

P: 3
I am having a difficult time solving a problem. Whenever I use :hover in a certain <div> the page shrinks in IE6. Of course, this problem does not exist with other browsers. It is even more vexing because this only happens in the <div> with the main content, not the <div> that contains the navigator with links to the content. Below I will append the pared down code.

Briefy, I want to create a page that has a very long article. That article will have subheads, footnotes and end notes. From the navigator one can go to each subhead or back to the top of the page. The navigator itself is fixed and the content scrolls. I have made it so that this latter feature works in IE6.

The :hover makes the text bold so that one knows one is on a link. As I said before, the :hover works fine in the navigator, but when I try to go from a footnote citation to the end note or vice versa, the page begins to shrink.

So how can a stop that?

Thanks for any help.

Tom

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.       <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  4.  <head>
  5.  
  6.         <title> Article One </title>
  7.         <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  8.   <style type="text/css">
  9.  /* Zero out browser styles */
  10.   body {margin: 0; padding: 0;}
  11.  
  12. /* Side bar styling */
  13.     #sidebar {position: absolute; top: 0; left: 0; width: 10em; height: 100%;}
  14.     body > #sidebar {position: fixed;}
  15.     #sidebar a {text-decoration: none;}
  16.  
  17.     #nav {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .8em; line-height: 1.5em; width: 150px; height:        auto; margin-left: 1em;  text-decoration: none; }
  18.     li {margin-left: -3em; list-style-type: none;}
  19.  
  20.  /* Side bar link styling */
  21.     a:link {color: #6600FF; }
  22.     a:visited {color: #CC33FF;}
  23.     a:hover {border: none; font-weight: bold; }
  24.  
  25. /* Main content stlying */
  26.         #main {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; line-height: 1.5em;  margin-left: 10em; padding-left: 1em; padding-right: 1em; padding-top: 0; }
  27.  
  28.   </style>
  29.     <!--[if IE 6]>
  30.         <style>
  31.             html {overflow: hidden;}
  32.             body {height: 100%; width: 100%; overflow: auto;}
  33.  
  34.         </style>
  35.     <![endif]-->
  36.  </head>
  37.  
  38.  <body>
  39.  <div id="sidebar">
  40.     <div id="nav">
  41.      <ul>
  42.         <li>Article contents:</li>
  43.         <li><a href="#Subhead1">Subhead one</a></li>
  44.         <li><a href="#Subhead2">Subhead two</a></li>
  45.         <li><a href="#Subhead3">Subhead three</a></li>
  46.         <li><a href="#EndNotes">End Notes</a></li>
  47.         <li><a href="#top">Back to top</a></li>
  48.     </ul>
  49.  </div> <!--nav -->
  50.  </div> <!--sidebar -->
  51.  <div id="main">
  52.     <a name="top"></a>
  53.  <h1>Ipso Facto</h1>
  54.  <h2>Muchos factos, ad absurbdum</h2>
  55.   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
  56.  
  57. <p>Praesent ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin volutpat. Duis id metus. Nunc facilisis, pede vitae facilisis accumsan, risus tortor porta nunc, et eleifend nulla odio ut justo. Curabitur pellentesque dignissim nulla. Curabitur tempor vulputate purus. Donec iaculis eros sit amet leo ullamcorper consectetuer. Fusce venenatis tortor quis lectus<a href="#endnote1">[1]</a><a name="note1"></a> "Donec sollicitudin," sapien sit amet ornare venenatis, sem nibh cursus justo, sed condimentum lorem tellus vel odio. Vestibulum dolor urna, ullamcorper et, rutrum aliquam, malesuada quis, magna. Pellentesque porttitor nisl non lacus.</p>
  58.  
  59. <p>Donec quis turpis. Integer dignissim posuere dolor. Quisque ultrices pellentesque eros. Mauris adipiscing eleifend dolor. Praesent non sem.  Nunc ac nunc.</p>
  60.  
  61. <a name="Subhead1"></a><h3>Subhead one</h3>
  62. <p>Maecenas scelerisque libero ac erat. Pellentesque leo. Aliquam erat volutpat. Ut vehicula ullamcorper eros. Donec turpis pede, hendrerit ut, sodales vel, faucibus eu, diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce mauris. Cras blandit, augue vitae suscipit aliquam, neque elit porta urna, a bibendum est pede vitae turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur adipiscing.</p>
  63.  
  64.  
  65. <p>Integer mauris. Pellentesque vel eros eu orci eleifend consectetuer. Aenean luctus. Pellentesque consectetuer malesuada sem.<a href="#endnote2">[2]</a><a name="note2"></a></p>
  66.  
  67. <p>Morbi non est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam neque leo, eleifend et, pellentesque nec, faucibus ac, libero.<a href="#endnote3">[3]</a><a name="note3"></a> Nullam convallis condimentum libero. Duis lectus nibh, cursus quis, sagittis at, nonummy eget, urna. Duis vitae diam sed nisi cursus varius.</p>
  68.  
  69. <p>Maecenas tempor rhoncus justo. Nam faucibus dolor vitae pede. Phasellus pellentesque, dui ac rhoncus laoreet, turpis dui suscipit diam, a luctus diam nulla a massa. Phasellus interdum leo vel tortor. Sed et diam eu purus laoreet malesuada. Nullam aliquam aliquet sapien. Nullam nisl. Nam velit. Nam leo lectus, condimentum et, congue non, vulputate ut, leo. Aliquam erat volutpat. Sed vitae justo.</p>
  70.  
  71. <a name="Subhead2"></a><h3>Subhead two</h3>
  72. <p>Curabitur ultrices dictum leo. Duis risus quam, hendrerit at, posuere nec, mollis sed, ipsum. Mauris feugiat elit sit amet felis. Pellentesque condimentum malesuada elit. Nulla blandit pellentesque quam. Duis ornare, lorem vitae porta faucibus, felis ipsum luctus magna, et blandit justo risus blandit nisi. Curabitur mattis enim accumsan neque. Nulla facilisi. Suspendisse vel metus. Proin in magna. Nunc at elit. Duis eu eros.</p>
  73.  
  74. <p>Praesent blandit, lorem ac elementum vehicula, orci magna semper massa, eget sagittis pede tellus bibendum odio. Ut vulputate dolor vel justo. Vivamus ac ligula feugiat tellus rhoncus tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc enim.</p>
  75.  
  76. <a name="Subhead3"></a><h3>Subhead three</h3>
  77. <p>Nulla nec velit. Curabitur auctor nulla ut ligula. Cras posuere magna et nibh. Pellentesque sit amet ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut ut nulla at nulla pharetra sollicitudin. Nullam ultricies. Etiam ut ante et erat tempus tempor. Sed ac neque. Praesent a felis ac elit eleifend suscipit. Donec sapien pede, cursus vel, egestas nec, adipiscing ut, nulla. Mauris blandit augue malesuada odio. In hac habitasse platea dictumst. Vestibulum id massa. Aliquam erat volutpat. Nulla rhoncus. Nam libero ante, vestibulum at, feugiat vel, viverra vulputate, mauris. Suspendisse potenti. In hac habitasse platea dictumst.</p>
  78.  
  79. <a name="EndNotes"></a><h3>End notes</h3>
  80. <div id="endnotessection">
  81.  
  82. <p><a name="endnote1"></a>1. Nulla sapien. Ice cream. Etiam mauris dolor, molestie sit amet, tempor cursus, pretium sit amet, nunc. <a href="#note1">Back to text.</a></p>
  83. <p><a name="endnote2"></a>2.  In sapien dolor, faucibus vitae, laoreet non, consequat id, metus. Curabitur in urna. Cras imperdiet, pede sed pharetra placerat, dui more ice cream, enim pretium dolor, eu congue orci sapien in dolor. Maecenas urna ante, luctus ut, viverra sit amet, commodo eget, enim. <a href="#note2">Back to text.</a></p>
  84. <p><a name="endnote3"></a>3. Curabitur in urna. Cras imperdiet, pede sed pharetra placerat, dui enim pretium dolor, eu congue orci sapien in dolor. Maecenas urna ante, luctus ut, viverra sit amet, commodo eget, enim. <a href="#note3">Back to text.</a></p> 
  85.  
  86. </div> <!--endnotessection-->
  87.  
  88. </div> <!--main-->
  89. </body>
  90. </html>
  91.  
Mar 6 '07 #1
Share this Question
Share on Google+
1 Reply


drhowarddrfine
Expert 5K+
P: 7,435
I could help but I'm between computers and don't have IE6 available. You've convinced me to drag an old box out and install Win just so I have one around but now I'm going out of town till Monday.
Mar 6 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.