1 pixel giving me grief!

[pagetta]

I know it sounds like a really picky thing, but it is driving me nuts on the new site I am working on.

If you go to 'contact' using the top menu, the left hand menu sits as it should, but then if you click on 'general enquiry' the text on the menu moves 1 pixel to the left. The green arrow doesn't move, nor does anything else, but the text moves a pixel to the left! It is driving me mad as no other menu options do this. Any suggestions most welcome, ta

[ADAM Web Design]

I'm not seeing the behaviour myself, but you do have a Javascript error on that contact page.

"flashholder" is undefined.

Try fixing that and see if it solves your problem.

[pagetta]

thanks the java error is due to the flashholder being removed at the minute.

[cMcMillan]

Yea, I don't see the error, just that the picture on the contact page does not load and that there's a JS error. What browser are you using?

Or is the problem already fixed?

P.S. Nice layout btw.

[roguenroll]

(edit) ok I see. hmm yeah.

contact details to general enquiry it does it,
general detail to feedback also, and back,
but not feedback to directions and back.

I think Ive had this happen. I would take for example the directions or feedback page, and copy the info from the gen iq, and contact, and make two new pages from a working template.

IF it still does it, it must be something like the forms in one that doing soemthing. but that should solve your problem.

[GiftsForYouBiz]

Originally Posted by roguenroll

looks like once a link is clicked it goes bold, thereby the items next will have to move as the bold text is larger.

That was my observation too; with the bold. I think IE just does a little font or space formatting because it's just slightly getting cramped. Else, if it were more cramped, it would (or should) wrap the text like you'd see with FireFox (I didn't test with NS or Opera).

Try changing 'general enquiry' to 'gen. enquiry' and you'll probably see the shift disappear. Perhaps you could even try widening the column width by a few pixels.

Some also might not see it in some browsers, like IE, because it's so barely noticeable. And unless you have a way to keep track of what was where (like putting a little piece of paper on your monitor), it's even more difficult to see because of the page reload.

[roguenroll]

[quote="GiftsForYouBiz"]

Originally Posted by roguenroll

looks like once a link is clicked it goes bold, thereby the items next will have to move as the bold text is larger.

I did an edit, I was thinking top nav text when I said that, but the bold still maybe the issue there as well, it is for the two longest words, the vertical column may be too narrow.

trial and error :)

[roguenroll]

also missing the flash animation on the contact header page

[Evic]

Using IE, didn't notice the 1px move at all.

[DrTandem1]

I see it. The problem is with the CSS:

.menu { font-family: verdana, arial, helvetica, sans-serif;
color:#3e5c0b;
position: absolute;
left: 327px;
top: 48px;
font-size: 10.2px;
font-weight: bold;
text-decoration: none;
}
.menu A:link,
.menu A:visited,
.menu A:active { color: #3e5c0b;
font-weight: normal;
text-decoration: none;
}
.menu A:hover { color: #909090;
font-weight: normal;
text-decoration: none;
}

You have the font bold for the text that is not a link. Instead of changing font-weight to bold for non-links, why not just change the color? The bold weight takes up more space than the normal weight. That is why you are seeing the text jump.

[TesToh]

The reason for the jump is that you did not fix the width of the 3rd column of that table. try fixing the width to 117 on all the 4 pages.

eg.
<td width="117" class="left">Contact Details</td>

or

<td width="117" class="left">Contact Details</td>

When you don't fix the width for each column in a multiple columns table, the width of the table will be distributed among each column depending on the content width of each column.

When you bold the words 'General Enquiry', the content width of that column increased and the browser will allocate more width (1px in this case) for that column, resulting in the visual jump.

[pagetta]

thanks for the tips - I will try them all and see what happens. Bolding up the word has to stay as it is consistent with our other sites

BTW GiftsForYouBiz

Some also might not see it in some browsers, like IE, because it's so barely noticeable. And unless you have a way to keep track of what was where (like putting a little piece of paper on your monitor), it's even more difficult to see because of the page reload.

my boss does put a little piece of paper on my screen - no joke! Otherwise it is something I could live with!

[wsmeyer]

I see one problem that might cause it:

<tr>
  <td width="15" rowspan="2">[img]../images/pixel.gif[/img]</td>
            <td></td>
            <td class="left">Contact Details</td>
          </tr>

          <tr>
            <td>[img]../images/newarrow.gif[/img]</td>
            <td class="left">General Enquiry</td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td class="left">Feedback</td>

          </tr>
          <tr>
            <td></td>
            <td></td>
            <td class="left">Directions</td>
          </tr>

The general inquiry row only has 2 divisions and the others have three.