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 -
<!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>
-
1  1975 
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.
Sign in to post your reply or Sign up for a free account.
Similar topics | |
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 he accesses the site,
everything appears fine. If he activates "New Products", everything works
fine and if he uses the menu link to go "Home", everything works fine.
But, if he goes from "New Products" to "Home" using the Back button on the
IE6...
|
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:
|
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...
Check out the web page in question...
http://clientserver.home.comcast.net/research.html
Firefox handles this code fine as does Opera, Mozilla, and Netscape 7.
|
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 and style, while
the hover class has a different color and style. I have the entries:
a:link .image {
border-color: #151515;
border-style: solid;
border-width: 2px;
}
|
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.
here is the site I am having trouble with.
http://www.866hdrental.com/new_site/index.htm
here is the navigation css:
.moveover {
text-align: left;
| | |
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">
<ul>
<a href="#">Home page</a>
<a href="#">What's new</a>
|
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.
I've almost got this working, except for some reason, the highlighted
background block isn't quite covering the full area of the menu item.
For example, see this beta page (via TinyURL): http://tinyurl.com/2bk78a
|
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 clue of how the css works in this one.
Can any one help out?=
link
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>...
|
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 vertically instead.
And this only happens when I don't give the LI in the menu list and fixed width, which I don't want because if I have a fixed width the menu list get's too long due to some words being longer than others and then it doesn't fit on the...
|
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| | |
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
