Cleaning up text using PHP – remove line breaks and paragraphs and tabs and replace with an empty space

Cannot see new version of website – updates not showing – sticky cache

1) Control-R (or Command-R) – Control – F5 does the same thing on Windows

2) Go through your options and empty the cache manually

3) Try another browser

Users do not normally notice the old website hasn’t changed because they are not talking to the developers and wouldn’t know when the website really has been updated. This happens all the time.

Most likely you have a “sticky cache” on your computer.

Here’s the trick: Whether you get to http://yourwebsite.com by clicking this link, or by going through google, once you see http://yourwebsite.com in the top line of Internet Explorer, Firefox or Chrome (The URL or Location bar), do a hard refresh.

Hard refresh is done when you are supposed to be seeing the new webpage that you are having trouble with, and reaching out to your keyboard, while holding the “control” key, tap and letup on the “r” key, then let go of the “control” key. (Ctrl-r)

This dumps the old cached page that is sitting on your computer and tells it to go load the new one from the internet.

This insures that you are seeing the latest changes to your website.

The “sticky cache” issue is common when developing new websites. Usually people don’t notice changed pages so much because they don’t know the page should have changed. It happens more often than people realize.

Note: If you have an alternate web browser installed that you haven’t used lately, just view the website in it, you should see the latest version automatically, since it’s not been “cached” lately. Browsers do not share each other’s cache.

—-

If you have a really sticky cache:

Log out of WordPress, clear your browser cache, quit and restart the browser and try again. If that does not work, there may be a caching proxy or network cache somewhere between you and your host. You may need to wait for a few hours until this cache expires.

—-

Note: CSS changes can cause a really sticky cache when background images are changed, they tend not to update unless you clear your cache.

My css tips and tricks

Absmiddle in css. There is no absmiddle for vertical alignment in css like there is with HTML and the img align=”absmiddle”.

from: http://code2design.com/forums/another_way_to_do_absmiddle_with_css. What really makes me smile is that after this wise person posted the following tip, two others thanked him, one saying “THANK YOU. You seem to be the first, and only, person on the entire internet to figure this one out. It was the .25em trick that did it.”

This is an equivalent:
IMG.absmiddle {
vertical-align: middle;
margin-bottom: .25em;
}

Vertical-align:middle puts the center of an image at 1/4 em above the text baseline, not at the center of the line height. The margin-bottom:.25em; pushes the alignment up of the text next to the image. You might be tempted to adjust the top margin by -.25em so as not to muck with the line height, but this can cause problems with elements above, such as lines in tables, so I don’t do it.

Class and ID:
.myselector is a class, you can use it more than once on the same page. Use it like this in the stylesheet .myselector, and use it like this in the page <span class=”myselector”>.

#myselector is an id, you can only use it once on a page. Use it like this in the stylesheet #myselector, and use it like this in the page <span id=”myselector”>.

This works for css to suppress spaces between images:

Lines too close together – line spacing farther apart:
When you cannot set the space between the lines using line-height, if it’s the line distance between the paragraphs, then you want to set the margin-top instead.

p { margin-top: 0.5em; }

This will do the same but only for a paragraph following a paragraph:

p + p { margin-top: 0.5em; }

If you still have too much space between paragraphs or h1, h2, h3 h4, h5, or h6 tags, you can use a margin-top: -0.5em; This was a yay! moment when I found it after two hours of pouring through line height adjustments in a 737 line stylesheet.css

Sometimes Internet Explorer ignores margin-bottom or margin-top unless you specify line-height in the same tag!
—-

Firefox has extra space at margin-top when Internet Explorer does not have extra space at the top of an element:
If you do not specify a span<span> at the beginning of your element, Firefox inserts a paragraph <p> without you actually using a paragraph. A workaround is to explicitly set a paragraph or span inside your div and wrap that paragraph or span around your content, then Firefox will not force a p around your content. Ideally both Firefox and IE will have the same top spacing inside your div, however this one is intermittent.

Here is my simplest workaround for IE extra top margin not in Firefox:

margin-top: -16px; *margin-top: 0px;

This forces IE to honor the * css directive whereas Firefox ignores the asterisk (rightly so) and only reads the first top margin space.

—-

Extra space after a table, cell, or block level element:
If it’s css, like extra space after a

or or

you can set your margin-bottom: 0px;
it it’s a table cell , then refer to my html tips and tricks

Spaces between elements when hiding with css:
Make sure you’re using display:none rather than visibility:hidden to keep
your hidden div from pushing items around on the page or taking extra space even though you don’t see them. If you mistakenly use visibility: hidden, the page would be layed out as if it was still there occupying space even though it wouldn’t actually display.

Centered image latest technique:

img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Image Centering – Aligning an image to the middle (horizontally)
There is no HTML img align=”middle” for horizontal alignment!
You can create a center tag and place the image inside that, but the tag is now deprecated. Same goes for image alignment, but they will not go away anytime soon, if ever. The most future proof way is to use CSS to center align the image.
An image is an inline element, not block, therefore it cannot be centered. Forcing it to be a block element may work but not be consistently honored by various browsers.
Create a css style for it and apply the style in the page:
Create a style class and add it to the HEAD section of your page. Even better, add it to your external style sheet and use it on every page!

.centeredImage
{
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}

Then, apply the class to the container element:

That’s slightly more trouble than just applying align=”center” to the paragraph tag, but it has the added benefit of giving you more control over the spacing around the image. In the example, the margin and padding values are set to zero pixels to avoid extra spacing that may push other content farther down the page.

—-

Centering a div, which can be used to align images, text, flash and the entire body of the page in the middle. Instead of centering the text and images inside the container (text-align:center;), this will center the entire container on the page-> margin: 0 auto; You must declare a width, and must set each margin to auto so that they will be forced to be equal margins in Firefox and Internet Explorer. This technique is future proof in that it doesn’t use the deprecated <center> tag in HTML and it is properly displayed in Internet Explorer 6, 7 and Firefox.

#content {
  width: 700px ;
  margin-left: auto ;
  margin-right: auto ;
}

--

If you find that setting a width breaks the centering, you can nest a forced width paragraph inside a centered div instead of trying to declare all of this in one tag.

.centered
{
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}
.content {
 width: 400px ;
 margin-left: auto ;
 margin-right: auto ;
 text-align:center;
}

If you still are having trouble centering a div, here’s a great exhaustive set of examples:

http://haslayout.net/css-tuts/Horizontal-Centering

—-

If the stylesheet body properties are not working but the other elements are working, odd inconsistencies can be caused by two stylesheet declarations in the same document without closing the first one!

Another possibility is that you are using ID tags instead of Class tags,  Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

CSS Line Positioning Reference at my favorite CSS learning resource

—-

How to create custom code for Internet Explorer using just css:Browser detection for Internet Explorer, this no longer works with IE7 and Internet Explorer 8!

To send different CSS rules to IE, we can use the child selector command which IE can’t understand. The child selector command involves two elements, one of which is the child of the other. So, html>body refers to the child, body, contained within the parent, html.

Using the example of the header margin, our CSS command would be:

#header {margin-bottom: 3em;}
html>body #header {margin-bottom: 1em;}

IE can’t understand the second CSS rule due to the html>body CSS command so will ignore it and use the first rule. All other browsers will use the second rule.

—-

Posted in css tips. No Comments »