...

View Full Version : I must have changed something, but I don't know what... images moving...



WebKitty
01-21-2012, 04:44 AM
If you go to my journal (http://opalcat.livejournal.com) and mouseover the top menu (the one that says Home, Gallery, Journal, etc) you will see that they change color but don't actually move. This is what they're supposed to do.

I've been mucking about in my homepage (non-livejournal) and am not sure at what point this change was introduced, but I can't track it down...

If you go to http://opalcat.com/ and mouseover the same menu, you'll see that each one drops down by like... one pixel.. when you mouseover it. I can't figure out why. Maybe someone can help me find the problem??

Thanks for trying, should you take on the task...

Arbitrator
01-21-2012, 05:41 AM
If you go to http://opalcat.com/ and mouseover the same menu, you'll see that each one drops down by like... one pixel.. when you mouseover it. I can't figure out why. Maybe someone can help me find the problem??Can you please specify the browser and version you're seeing the problem in? I don't see it.

WebKitty
01-21-2012, 11:02 PM
I'm using Google Chrome 16.0.912.75 m on Windows Vista Business... sorry for not saying.

teedoff
01-21-2012, 11:23 PM
Have you resolved this? I dont see this issue in Chrome or IE.

Crake
01-21-2012, 11:49 PM
I dont see a issue with FF

Have you tried deleting cookies? you may have resolved it before posting :) :thumbsup:

WebKitty
01-22-2012, 12:31 AM
Nope, still happening in Chrome for me :( The graphic shifts down by about a pixel. It's subtle but it's gonna bug me!!

teedoff
01-22-2012, 12:39 AM
Nope, still happening in Chrome for me :( The graphic shifts down by about a pixel. It's subtle but it's gonna bug me!!

This page?

http://opalcat.com/

There is no graphic shift for me at all in the top menu under your logo

Home, Gallery, Journal, Shop,....

MAke sure you aren't viewing a cached version. Hit control + F5 to hard refresh your browser.

WebKitty
01-22-2012, 12:45 AM
Here is a screenshot that shows the shift:
http://opalcat.com/temp/opalcatcomdownshift.jpg

teedoff
01-22-2012, 12:51 AM
Did you refresh your browser?

Again, I dont see that, so if I cant recreate the problem I dont see how I can help.

WebKitty
01-22-2012, 02:06 AM
Yes, I've refreshed my browser with F5 and everything for a couple of days now, including a few reboots. It keeps doing it.

Arbitrator
01-22-2012, 06:23 AM
I'm using Google Chrome 16.0.912.75 m on Windows Vista Business... sorry for not saying.The version of Chrome I have installed is 18.0.1010.1 dev-m (Chrome Dev Channel) on Win. 7. I don't see the issue in your screen shot in that browser.

I do see 30 CSS errors and one script error (in Opera Dragonfly). Might try looking into those.


Yes, I've refreshed my browser with F5 and everything for a couple of days now, including a few reboots. It keeps doing it.Whenever you try to solve an issue with a refresh, make sure you do a hard refresh (Ctrl+F5 in most browsers) so that the cache isn't used. Alternatively, clear the (entire) cache; in my version of Chrome, the "Empty the Cache" option is found under "Tools": "Clear Browsing Data."

(It's worth noting that your server isn't serving resource expiration information that tells the browser when it should use caching and when it should re-download files.)

WebKitty
01-22-2012, 05:49 PM
Yes, I've refreshed the browser with F5 several times and cleared the cache--I guess I should be happy that you can't see it LOL... This website really needs to be cleaned up.... it's all done through templates of two kinds: page templates and "form" templates" that it assembles Frankenstein-style and I've been adding to the CSS piecemeal for years... it's probably due for a validation check and an overhaul. I want it to look the same but be coded cleaner...

As an example, here is what one of my article page templates looks like:


<txp:output_form form="online_users" />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<txp:output_form form="head_tags" />

</head>
<body onload="displayDiv()">
<!-- div for popup images -->
<txp:output_form form="image_popup_div" />
<!-- accessibility -->
<div id="accessibility">
<ul>
<li><a href="#content"><txp:text item="go_content" /></a></li>
<li><a href="#sidebar-1"><txp:text item="go_nav" /></a></li>
<li><a href="#sidebar-2"><txp:text item="go_search" /></a></li>
</ul>
</div>
<div id="leftcolumn">
<img src="/images/nav/corner-portrait.png" alt="portrait" border="0" />

<!-- menus begin -->

<div id="leftmenu">
<!-- left menus begin -->
<txp:output_form form="menu_searchbox" />
<txp:output_form form="category_menu" />
<txp:output_form form="random_gallery_left" />
<txp:output_form form="cam_update" />
<txp:output_form form="google_ad_menu" />
<txp:output_form form="barcode_menu" />

</div>

</div>
<!-- end leftcolumn div -->


<!-- top menu begins -->
<txp:output_form form="top_menu" />

<!-- main content area -->
<!--XXXXXXXAmazon_CLS_IM_START-->
<div id="mainbox">
<div id="content">
<!--print-->
<txp:output_form form="print_this_page" />

<!-- breadcrumb -->
<txp:output_form form="breadcrumb" />

<!-- article or list -->

<!-- tag section --> <txp:if_section name="tag">
<txp:tru_tags_handler form="tag_results" sortby="Posted" limit="1000" />
<txp:else />

<!-- Creative Writing -->
<txp:if_category name="creative-writing">
<txp:article listform="excerpt" />
<txp:article form="excerpt" listform="excerpt" category="essays" />
<txp:article form="excerpt" listform="excerpt" category="stories" />
<txp:article form="poem_list" listform="poem_list" category="poetry"

/>
</txp:if_category>

<!-- Web/Geeky -->
<txp:if_category name="Web">
<txp:article listform="excerpt" />
<txp:article form="excerpt" category="Geeky" />
</txp:if_category>

<!-- Category -->
<txp:if_category>
<txp:article form="default" listform="excerpt" limit="5" pageby="10" />
<txp:output_form form="google468x60ad" />
<txp:article form="default" listform="excerpt" limit="25" offset="5"

pageby="10" />
<txp:else />

<!-- Main Article -->
<txp:article form="default" listform="excerpt" limit="1" />

</txp:if_category>

</txp:if_section>
<p><!--gap--></p><p><!--gap--></p>

<div id="morebox">

<!-- previous and next article links -->

<txp:if_individual_article>
<p>Next: <a href="<txp:link_to_next />" title="<txp:next_title />"

class="orange"><txp:next_title /></a><br />
Previous: <a href="<txp:link_to_prev />" title="<txp:prev_title />"

class="orange"><txp:prev_title /></a>
</p>
<txp:else />
<p>
<txp:older><txp:text item="older" /></txp:older> <br />
<txp:newer><txp:text item="newer" /></txp:newer>
</p>
</txp:if_individual_article>
</div>
<!--XXXXXXAmazon_CLS_IM_END-->

<!-- link exchange -->
<txp:output_form form="random_link" />
<p><!-- --></p>

<!-- copyright -->
<txp:output_form form="copyright" />
<txp:output_form form="print_only_title_url" />

<!-- counter -->
<p class="fadedtext2" style="text-align:center;"><span class="x-small">[<script
language="Javascript" src="http://www.opalcat.com/counter/counter.php?
page=allpages"><!--
//--></script> hits on articles since reset on 08/07/11]</span><br />

<!-- online users -->
<txp:output_form form="online_users_count" /></p>




</div>

<!-- footer content -->

<div id="foot"><!-- --></div>

</div>
<!-- end mainbox div -->

<!-- Google Analytics -->
<txp:output_form form="google-analytics" />
<!--txp:output_form form="amazon_context_links" / -->
</body>
</html>


You can see all the calls to other templates ("forms") which are other snips of html or php or "txp" tags (I use Textpattern as my CMS and it has a ton of proprietary tags).

(I only post that code so you can see what a tangle it is going to be to validate. I will start with validating the CSS... btw, does anyone know how to tell if a certain css class or id isn't being used on any pages? Do I just do a "search" on the sourcecode of all the pages and check? or has some genius written a handy web tool? Because I know I've got bloat in my CSS...)

Arbitrator
01-23-2012, 07:04 AM
btw, does anyone know how to tell if a certain css class or id isn't being used on any pages? Do I just do a "search" on the sourcecode of all the pages and check? or has some genius written a handy web tool? Because I know I've got bloat in my CSS...In the (free) Notepad++ program, you can use the "Find in files" command to search/replace ID/class information in all files within a directory using a string literal or a regular expression.

I tried Windows 7's built-in search tool, but apparently it has special handling for HTML files that ignores all of the markup and only searches element content, so that won't work.

WebKitty
01-23-2012, 04:02 PM
In the (free) Notepad++ program, you can use the "Find in files" command to search/replace ID/class information in all files within a directory using a string literal or a regular expression.

I tried Windows 7's built-in search tool, but apparently it has special handling for HTML files that ignores all of the markup and only searches element content, so that won't work.

I don't have Windows 7 at home so that wouldn't have helped anyway lol. I actually have Notepad++ on my system, I just never use it. I didn't know it could do that and that is a VERY cool tool. I think I'll do that when I get home from work because I need to clean out some of my "experimental" css so that all that's left is stuff that's actually being used in the pages, you know?

Anyway, back to the main problem--I'm at work now on my work computer running Windows 7 Enterprise (I run Vista Business at home) and I looked in Firefox, Chrome, and IE and I didn't see the drop-down-one-pixel problem in any of them. Yet I see it in Chrome at home... I wonder if it's a Windows Vista thing? Anyone reading this (all 3 of you LOL) have Vista and want to have a peek? I guess if it isn't showing up on other computers I shouldn't spend too much time pulling my hair out over it... but it's one of those little things that's going to make me go "hmmmmm!!" for a while!

teedoff
01-23-2012, 04:59 PM
Vista? uggghh...lol nope sorry dont have it.

Arbitrator
01-25-2012, 04:49 AM
I don't have Windows 7 at home so that wouldn't have helped anyway lol.If I'm not mistaken, Vista and 7 are, for the most part, the same under the hood, so presumably the search functionality works similarly if not the same.


but it's one of those little things that's going to make me go "hmmmmm!!" for a while!You might try downloading and switching to the Chrome beta or dev channel:

https://www.google.com/chrome/eula.html?extra=betachannel
https://www.google.com/chrome/eula.html?extra=devchannel

The beta channel is one version ahead and the dev channel is two versions ahead of the release channel. I don't use Chrome as my primary browser, but, of what I've seen, the dev channel seems to be unusually stable for what's effectively an alpha release.

You might also try uninstalling, disabling, or updating all of your Chrome extensions and/or plugins if you're using any.

If Chrome isn't your primary browser, I'd also try uninstalling it and deleting all of your preferences.

And, of course, again there are errors on the site itself. I'm not seeing 42 errors for your home page in Opera.

WebKitty
01-25-2012, 05:09 AM
Yeah as I said I need to go in and overhaul all of the templates and forms that the website is assembled out of to make it validate. It's just finding the time to do it... it's so many pieces, like a puzzle.

Chrome is my primary browser and I really don't have much in the way of extensions...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum