I have the following problem. I

[Sedai]

I have the following problem.

I am using an onMouseOver event to change the style of some text. The new style has set 1-pixel wide left and right borders. the font size is unchanged.

However, the text moves everytime the new styles is applied (the mouse goes over it) and falls back into place when the mouse pointer moves out. I know that this is normal if I change the font size...and obviously if I have some elements added, such as 2-pixel worth of borders
is there a way to suppress the 'adjustment' of the text. As I have a row of text, whenever an item is highlighted the whole line moves to one side.... ugly.
ur help is much appreciated. thank you.
Avendeval

 

[Boomerang]

I assume you used javascript for this, so I think this is more a question for the JS-forum. But if you post some code, I'm sure there are some people here who can help you.

Erik

 

[gerrygerry]

Post it and I'll help you!

 

[jmcpher]

When you set the border size to 1 pixel, also set the value of left to -1 and top to -1, with relative positioning this should not move the text. Thanks
John

johnmc@mvmills.com

 

[Sedai]

The styles on my toolbar are as follows
.toolbar { FONT: normal 11px/normal Verdana, Arial, Helvetica, sans-serif; COLOR: #99CCFF; text-decoration: none ; cursor:

hand}
.toolbarOn { FONT: lighter normal 11px/normal Verdana, Arial, Helvetica, sans-serif; COLOR: #FFFFFF; text-decoration: none ;
background-color: #3366CC; cursor: hand; border-color: black #FFCC00; position: relative; left:-1; border-style: solid;}


<span onMouseOver=&quot;javascript: popUp('elMenu4',event);switchOn();&quot; onMouseOut=&quot;javascript: el4 = event.srcElement;popDown('elMenu4', el4, event);&quot; onClick=&quot;return false&quot; class=&quot;toolbar&quot;> Getting Started </span>
<span onMouseOver=&quot;javascript: popUp('elMenu1',event);switchOn();&quot; onMouseOut=&quot;javascript: el1 = event.srcElement;popDown('elMenu1', el1, event);&quot; onClick=&quot;return false&quot; class=&quot;toolbar&quot;> General </span>
<span onMouseOver=&quot;javascript: popUp('elMenu2',event);switchOn();&quot; onMouseOut=&quot;javascript: el2 = event.srcElement;popDown('elMenu2', el2, event);&quot; onClick=&quot;return false&quot; class=&quot;toolbar&quot;> Programs </span>
<span onMouseOver=&quot;javascript: popUp('elMenu3',event);switchOn();&quot; onMouseOut=&quot;javascript: el3 = event.srcElement;popDown('elMenu3', el3, event);&quot; onClick=&quot;return false&quot; class=&quot;toolbar&quot;> Students </span>

the function switchOn/Off actually triggers the change in the style attributes
it is a s follows

function switchOn(){
el = event.srcElement;
el.className==&quot;toolbar&quot; ? el.className = &quot;toolbarOn&quot;:el.className = &quot;toolbarHeavyOn&quot;;
}
function switchOff(el){
el.className = &quot;toolbar&quot;;
}
the switchOff one I actually incorporated into another script.
this is an IE page so do not need to worry about NS compat.

Hope that's clear enough.
i tried the relative positioning but it still moves the whole bar of text to the left.
Avendeval

 

[Sedai]

im sry, i posted an old version of my styles.
the actual styles are

.toolbar{
FONT: normal 11px/normal Verdana, Arial, Helvetica, sans-serif;
COLOR: #99CCFF;
text-decoration: none;
cursor: hand
}

.toolbarOn{
FONT: lighter normal 11px/normal Verdana, Arial, Helvetica, sans-serif;
COLOR: #FFFFFF;
text-decoration: none;
background-color: #3366CC;
cursor: hand;
border-color: black #FFCC00;
position: relative; left:-1;
border-style: solid;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 1px
} Avendeval