hover help

[kallywag]

I've got a page here:

http://stromengineering.com/new/

but if you view the page in IE, and you hover over the links in the archive box, as you near the bottom, the height of the box flickers back and forth. why is this? secondly, how do i apply the javascript so that the other boxes in the left nav change colors when hovered over like the archive box does? thanks.

 

[kallywag]

ok i figured out how to apply the color change to all and i updated it at

http://stromengineering.com/new

but there is still that bug in IE when you hover down the list of links inside the boxes, they resize. any ideas?

 

[BillyRayPreachersSon]

I know how to fix it (although not as you would want, I'm sure), but not why it occurs.

If you remove this line:

a:hover	{color: #2b2823}

the problem goes away... Although I have no idea why it's there - maybe an IE quirk?

That aside, you should also look at re-arranging the order of your A pseudo-classes from this:

a:link 	{color: #7f7565}
a:active	{color: #7f7565}
a:visited	{color: #7f7565}
a:hover	{color: #2b2823}

to this:

a:link    {color: #7f7565; }
a:visited {color: #7f7565; }
a:hover   {color: #2b2823; }
a:active  {color: #7f7565; }

Hope this helps,
Dan

 

[kallywag]

no i dont want to get rid of my hover attribute, and it doesn't resolve the problem for me when i remove it anyway. any other suggestions? what's weird is that when i remove the width:100% from the boxes, the problem disappears, but then i lose the ability to hover over anywhere on the div and have the colors change, only on the text. btw this works fine in netscape, as usual.

 

[theboyhope]

Stops moving if you either comment out your second line in the JS functions -- the one that changes the background colour -- or remove the background declaration from your li { ... } style. Based on that I would suggest it's a problem caused by using the shortened css background property and then changing it in JS.

Dan could well be right though. I'm not going back in there now to check.

 

[grtfercho]

that's some funky behavior right there. I'm intrigued myself. I'll give it a look and see what I find.

grtfercho çB^]\..
"Imagination is more important than Knowledge" A. Einstein
-----------------------------------------------

http://www.llajta.com

 

[grtfercho]

OK. I should be called mother Theresa, cause this was a labor of love....

this is going to be a long one....
[ol]

[li]
lets try to make the code a little more standard and add the </li> closing tag to all your <li>.
[/li]
[li]
Get rid of all your CSS definitions for #navbox[1-3] and #navbox_line[1-3]. just delete them.
replace those 6 lines with the following.

.navbox_reg {
	BORDER-RIGHT: #b0a590 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #b0a590 1px solid; DISPLAY: block; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 10px 0px; BORDER-LEFT: #b0a590 1px solid; WIDTH: 100%; PADDING-TOP: 0px; BORDER-BOTTOM: #b0a590 1px solid;
}
.navbox_dark {
	BORDER: #000000 1px solid; PADDING-RIGHT: 0px 0px 0px 0px; DISPLAY: block;WIDTH: 100%; MARGIN: 10px 0px;
}
.navbox_line_reg {
	PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 5px; FONT-WEIGHT: bold; BACKGROUND: #b0a590; PADDING-BOTTOM: 1px; COLOR: #f1e9da; PADDING-TOP: 1px;
}
.navbox_line_dark {
	PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 5px; FONT-WEIGHT: bold; BACKGROUND: #000000; PADDING-BOTTOM: 1px; COLOR: #f1e9da; PADDING-TOP: 1px;
}

[/li]

[ul]
[li]if you are not using specific styles for each one of the borders I suggest you use the 'global' notation for all 4 borders. THIS--->> border: #000000 1px solid; is more manageable than 4 separate declarations defining the same style.
[/li]
[/ul]

[li]
change your javascript to the following.

<SCRIPT language=JavaScript>

function change(objSrc){
document.getElementById(objSrc).className = "navbox_dark";
document.getElementById(objSrc + "_line").className = "navbox_line_dark";
}

function change_back(objSrc){
document.getElementById(objSrc).className = "navbox_reg";
document.getElementById(objSrc + "_line").className = "navbox_line_reg";
}

</SCRIPT>

[/li]
[li]
Add a class name to all your navbox divs and navbox_line spans.
You should have something like

 <DIV id=navbox1 [b]class="navbox_reg"[/b] onmouseover="change('navbox1')" onmouseout="change_back('navbox1')">
	    <SPAN id=navbox1_line [b]class="navbox_line_reg"[/b]>Archive</SPAN>

on all of them. Use the same class name with no trailing numbers for all three sections Archive,Links and CSS › Code
[/li]
[li] I suggest you minimize your CSS definition as much as possible and move it out of the HTML file and just link it.
If you are going to have the same style definition on every page it will be hell to manage it once you need to change something. BEsides having all the Style code on every page will increase download time. If you have all the style in a different file it will load once and then go to cache, making your contents load faster.
[/li]
[/ol]


wooow that was a long one... but it works I tested and there's no flickering anymore.

hope that helps. post back if you have questions.



grtfercho çB^]\..
"Imagination is more important than Knowledge" A. Einstein
-----------------------------------------------

http://www.llajta.com

 

[grtfercho]

I just noticed a little thing on the code posted before

PADDING-RIGHT: 0px 0px 0px 0px;

change that to

PADDING: 0px 0px 0px 0px;

good luck

grtfercho çB^]\..
"Imagination is more important than Knowledge" A. Einstein
-----------------------------------------------

http://www.llajta.com

 

[kallywag]

thanks for putting all that work into this, but im not sure i understand what's going on here. the first thing you say is to delete all my navbox1-3 and navbox_line1-3 ids from my CSS code, but you use them in the javascript (objSrc + "_line") and in the html <div id="navbox1" onmouseover="change('navbox1')". could you clear that up?

 

[grtfercho]

what you are doing on the Javascript is using the name of the Object inside your page not the CSS declaration.
Those are two different things.

A syntax like #navbox1 would affect only an element with that given name.
A syntax with .navbox_reg (see the dot) would create a CSS class that can be used with as many elements as necessary.

I left things unchanged as far as calling the Javascript functions and I only added the className attribute, cause I think the tweak you did works fine to get the objects (the DIV and the SPAN).

Hope I'm not confusing you anymore.
let me know.

grtfercho çB^]\..
"Imagination is more important than Knowledge" A. Einstein
-----------------------------------------------

http://www.llajta.com

 

[kallywag]

I figured it out now. Thanks for all your help.

Check it out:

http://www.stromengineering.com/new

 

[grtfercho]

much, much better. Code is cleaner, more understandble. looks good.
The CSS part looks completely fresh, way different from the initial page.

I would still consider taking the whole CSS definition into a separate file and linking to it. Just to separate content and presentation and probably improve on speed.

good luck.

grtfercho çB^]\..
"Imagination is more important than Knowledge" A. Einstein
-----------------------------------------------

http://www.llajta.com

 

[kallywag]

yeah i'll separate it eventually, it's just a pain in the ass to work with when you have to have two files open and saving it constantly so I merged them together again for now.