Problem with hover and IE6: shrinks page.

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

 
<!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" lang="en" xml:lang="en">

 <head>
 
        <title> Article One </title>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

  <style type="text/css">

 /* Zero out browser styles */

  body {margin: 0; padding: 0;}
 
/* Side bar styling */

    #sidebar {position: absolute; top: 0; left: 0; width: 10em; height: 100%;}

    body > #sidebar {position: fixed;}

    #sidebar a {text-decoration: none;}
 
    #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; }

    li {margin-left: -3em; list-style-type: none;}
 
 /* Side bar link styling */

    a:link {color: #6600FF; }

    a:visited {color: #CC33FF;}

    a:hover {border: none; font-weight: bold; }
 
/* Main content stlying */

        #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; }
 
  </style>

    <!--[if IE 6]>

        <style>

            html {overflow: hidden;}

            body {height: 100%; width: 100%; overflow: auto;}
 
        </style>

    <![endif]-->

 </head>
 
 <body>

 <div id="sidebar">

    <div id="nav">

     <ul>

        <li>Article contents:</li>

        <li><a href="#Subhead1">Subhead one</a></li>

        <li><a href="#Subhead2">Subhead two</a></li>

        <li><a href="#Subhead3">Subhead three</a></li>

        <li><a href="#EndNotes">End Notes</a></li>

        <li><a href="#top">Back to top</a></li>

    </ul>

 </div> <!--nav -->

 </div> <!--sidebar -->

 <div id="main">

    <a name="top"></a>

 <h1>Ipso Facto</h1>

 <h2>Muchos factos, ad absurbdum</h2>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
 
<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>
 
<p>Donec quis turpis. Integer dignissim posuere dolor. Quisque ultrices pellentesque eros. Mauris adipiscing eleifend dolor. Praesent non sem.  Nunc ac nunc.</p>
 
<a name="Subhead1"></a><h3>Subhead one</h3>

<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>
 
<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>
 
<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>
 
<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>
 
<a name="Subhead2"></a><h3>Subhead two</h3>

<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>
 
<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>
 
<a name="Subhead3"></a><h3>Subhead three</h3>

<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>
 
<a name="EndNotes"></a><h3>End notes</h3>

<div id="endnotessection">
 
<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>

<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>

<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> 
 
</div> <!--endnotessection-->
 
</div> <!--main-->

</body>

</html>

Mar 6 '07 #1

Subscribe Post Reply

1848

drhowarddrfine

7,435

Expert 4TB

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

Similar topics

IE6 CSS Menu Problem

by: Leonard Blaisdell | last post by:

I have a test page at <http://web0.greatbasin.net/~leo/test/>. The only link that works is "New Products". I did this on a Mac and do not have access to it with WinIE6. My customer states that if...

HTML / CSS

IE6 margin problem with <li> element

by: NWhite | last post by:

Hi all, I'm trying to indent <li> items using: li { margin: 0 0 0 50px;} So I expect something like the following to indent 50 pixels from the left margin:

HTML / CSS

An IE 6.0 link twitching problem

by: SeaPlusPlus | last post by:

I've got a problem... IE 6.0 twitches when I hover over a link then it won't twitch again for that group of links but will twitch the first time on the next group... and the next group... etc... ...

HTML / CSS

image class with hover

by: JLahm | last post by:

I have defined a class for my images called .image that specifies the default border color, width and style. I'd like to be able to have the pseudo elements link, visited and active have one color...

HTML / CSS

HELP!!!! CSS Menu problem in IE6 only

by: tonsi | last post by:

I have a css menu that works great in IE7 and other browser but when you check it in IE 6 it only shows the first dropdown. I am not that great at css but ANY help would be greatly appreciated. ...

HTML / CSS

Navcontainer and IE6 problem

by: tricky76 | last post by:

Hi, I've built this navigation using CSS Navcontainer (with Pbmod's help) and it works perfect in every browser and platform apart from IE6! Here is the HTML <div id="navcontainer"> ...

HTML / CSS

CSS Menu Highlighting Problem

by: Ste | last post by:

Hi there, I'm using CSS to highlight main navigation items in a 'suckerfish menu' for the currently loaded page, i.e. when on the home page, the 'home' navigation item should be highlighted. ...

HTML / CSS

hover layout

by: darkzone | last post by:

Hi I saw this layout and wanted to try some thing similar, but I am unable to change the position of the vertical menu with out changing the position of the hole document and I don't really have a...

HTML / CSS

Problem with horizonal dropdown css menu in IE6...

by: jerry101 | last post by:

Hi, I've been working on a horizontal drop down menu today, and I can get it to display perfectly in everything bar IE6. Basically instead of them lining up horizontally, they line up...

HTML / CSS

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing