<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Mark Headrick&#039;s Blog &#187; CSS</title>
	<atom:link href="http://blog.markheadrick.com/category/website-update/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.markheadrick.com</link>
	<description>My ramblings about what&#039;s new on my website and whatever else comes to mind.</description>
	<lastBuildDate>Mon, 26 Jul 2010 12:30:11 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Blog has been upgraded to WordPress v3.0!</title>
		<link>http://blog.markheadrick.com/2010/06/20/blog-has-been-upgraded-to-wordpress-v3-0/</link>
		<comments>http://blog.markheadrick.com/2010/06/20/blog-has-been-upgraded-to-wordpress-v3-0/#comments</comments>
		<pubDate>Mon, 21 Jun 2010 04:30:23 +0000</pubDate>
		<dc:creator>MarkRH</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Website Update]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://blog.markheadrick.com/?p=758</guid>
		<description><![CDATA[I have upgraded my blog to WordPress v3.0 which was just released a couple days ago. As I always do, I backed-up all my files and database before proceeding. I have a local copy of my blog on the PC &#8230; <a href="http://blog.markheadrick.com/2010/06/20/blog-has-been-upgraded-to-wordpress-v3-0/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>I have upgraded my blog to <a title="WordPress v3.0" href="http://wordpress.org/development/2010/06/thelonious/" target="_blank">WordPress v3.0</a> which was just released a couple days ago. As I always do, I backed-up all my files and database before proceeding. I have a local copy of my blog on the PC so I upgraded it first. I did the auto upgrade option again which seemed to have worked well.  Even so, once again I had to edit the <strong>/wp-includes/vars.php</strong> file to force <strong>$is_apache</strong> to <strong>true</strong> (see below) since the SERVER_SOFTWARE variable comes back as WebServerX instead of Apache.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// Server detection</span>
&nbsp;
<span style="color: #009933; font-style: italic;">/**
 * Whether the server software is Apache or something else
 * @global bool $is_apache
 */</span>
<span style="color: #666666; font-style: italic;">//$is_apache = ((strpos($_SERVER['SERVER_SOFTWARE'], 'Apache') !== false) || (strpos($_SERVER['SERVER_SOFTWARE'], 'LiteSpeed') !== false)) ? true : false;</span>
<span style="color: #000088;">$is_apache</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #339933;">;</span>
<span style="color: #009933; font-style: italic;">/**
 * Whether the server software is IIS or something else
 * @global bool $is_IIS
 */</span>
<span style="color: #000088;">$is_IIS</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">strpos</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$_SERVER</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'SERVER_SOFTWARE'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'Microsoft-IIS'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">!==</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span> ? <span style="color: #009900; font-weight: bold;">true</span> <span style="color: #339933;">:</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">;</span></pre></div></div>

<p>I also had to edit the <strong>/wp-login.php</strong> file and add session_start(); at the beginning for the Register Plus plug-in to work properly as PHP sessions are not automatically started at my webhost (I could make them auto-start if I wanted but I&#8217;d rather have control of it via my scripts):</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #990000;">session_start</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #666666; font-style: italic;">/**
 * WordPress User Page</span></pre></div></div>

<p>Now I could have stopped here; however, I wanted to use the new default WordPress theme, <strong>Twenty Ten</strong> which had a wider footprint and additional functionality beyond the previous default theme. I also figured it would be the most stable and up-to-date theme to work with the new WordPress version.  I made of a copy of the theme and placed it into its own directory, giving it my own name.</p>
<p>Since this was a new theme, I had to modify some of the PHP files to add my custom code. All I really had to do was add a JavaScript code snippet to the <strong>/mytheme/header.php</strong> file that some of my archived pages use to show and hide parts of their content. I also had to add a piece of code to the <strong>/mytheme/comments.php</strong> file for the <strong><a title="Math Comment Spam Protection" href="http://wordpress.org/extend/plugins/math-comment-spam-protection/" target="_blank">Math Comment Spam Protection</a></strong> plugin to function; however, this theme&#8217;s coding of the comment form was much different and from what I could tell would have to do a lot of hacking around with the code to get it to work. So, I decided to look for something else. I came across the <strong><a title="Block-Spam-By-Math" href="http://wordpress.org/extend/plugins/block-spam-by-math/" target="_blank">Block-Spam-By-Math</a></strong> plugin. This one worked with the new theme and I didn&#8217;t have to add any additional code anywhere to make it work! During this time frame where I did not have a functioning Math protection plugin, <strong><a title="Akismet Plugin" href="http://wordpress.org/extend/plugins/akismet/" target="_blank">Akismet</a></strong> caught around 55 spam comments! This was in less than a day and a half. Since adding in the new plugin, Akismet has only seen one new spam comment. This just proves how many spam comments a plugin like this will stop.</p>
<p>At this stage all I&#8217;m really doing is playing around with CSS styles to get the blog to appear how I want. This is where things like <strong><a title="Firebug" href="https://addons.mozilla.org/en-US/firefox/addon/1843/" target="_blank">Firebug</a></strong> for <a title="Firefox web browser" href="http://en-us.www.mozilla.com/en-US/firefox/" target="_blank">Firefox</a> come in real handy by telling me where an element is getting its style from. It will tell you about the element&#8217;s inheritance, which file(s) contain the CSS, and the line numbers within those files. By the way, I found the <a title="CSS Tutorial at W3Schools" href="http://www.w3schools.com/css/default.asp" target="_blank">CSS Tutorials</a> at <a title="W3Schools" href="http://www.w3schools.com/default.asp" target="_blank">W3Schools</a> to be rather helpful in testing out various font-size and line-height combinations which this theme seems to use heavily. I may change its use of fixed pixel sized line-heights in favor of relative values so that they scale properly with changes in font size, we&#8217;ll see. <img src='http://blog.markheadrick.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Before I close and while there&#8217;s still 30 minutes left in the day, I just wanted to wish my dad and all the other dads out there a <strong>Happy Father&#8217;s Day!!</strong> <img src='http://blog.markheadrick.com/wp-includes/images/smilies/icon_biggrin.gif' alt=':-D' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://blog.markheadrick.com/2010/06/20/blog-has-been-upgraded-to-wordpress-v3-0/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Websites being converted to Standards mode and my struggles with it.</title>
		<link>http://blog.markheadrick.com/2007/04/07/websites-being-converted-to-standards-mode-and-my-struggles-with-it/</link>
		<comments>http://blog.markheadrick.com/2007/04/07/websites-being-converted-to-standards-mode-and-my-struggles-with-it/#comments</comments>
		<pubDate>Sat, 07 Apr 2007 07:56:08 +0000</pubDate>
		<dc:creator>MarkRH</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Pelicar]]></category>
		<category><![CDATA[Website Update]]></category>
		<category><![CDATA[www.pelicar.info]]></category>

		<guid isPermaLink="false">http://blog.markheadrick.com/index.php/2007/04/07/websites-being-converted-to-standards-mode-and-my-struggles-with-it/</guid>
		<description><![CDATA[Websites being converted to Standards mode and my struggles with it. <a href="http://blog.markheadrick.com/2007/04/07/websites-being-converted-to-standards-mode-and-my-struggles-with-it/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Well, (why I do I start everything I start talking about with &#8220;Well&#8221;..  well, I don&#8217;t know) I decided this week to try and convert the <a href="http://www.pelicar.info">www.pelicar.info</a> site from using frames for its presentation to DIV containers and CSS to achieve the same thing as best I could.  In the end, I think I have achieved this.  The website still has a left-hand menu that stays in place while scrolling the main contents.  Also, the address bar will actually show the proper URL for the page and if you do a browser refresh, the current page will display again and not go back to the home page.  Before, to refresh the main content, you had right-click within that frame and then choose refresh.  Most folks are not accustomed to doing that, however.  This also makes bookmarking a specific page much easier and is a bit more compatible with search engines.</p>
<p>Luckily, no-one is using older browsers such as IE5 or at least very few.  When they scroll on the page the menu will go up along with everything else.  Another thing that changes are some layout/rendering differences.  The reason.. it has to do with the difference between Quirks and Standards mode.  In fact, depending on the DOCTYPE of the page, IE6 and 7 can be made to function in Quirks mode or Standards mode.  Following are a couple resources that explain the differences:</p>
<p><a href="http://www.webmasterworld.com/forum21/7975.htm">Quirks Mode vs Standards Mode &#8211; overview</a><br />
<a href="http://www.webmasterworld.com/forum83/7345.htm">The Box Models &#8211; Standard vs Quirks</a></p>
<p>So, in Quirks mode the border and padding are inside the Width you give an element which means you are giving it the width that everything should take up, while in Standards mode the border and padding are outside the Width you give to an element.  Here you are specifying the width of the content only.  </p>
<p>This difference in the box model caused some issues dealing with paragraphs that contain italicized text. I kept noticing some pages had a horizontal scroll bar at the bottom of the page for apparently no reason that would only scroll for a couple pixels&#8230; nothing was extending past the right edge.  I was going nuts <img src="http://forum.pelicar.info/Smileys/pelicar/loco.gif" alt="loco" />.  I also noticed that as I narrowed the browser window where a paragraph contained some italics and was flowing around a picture, the picture would sometimes jump below the paragraph! (<a href="http://www.pelicar.info/whatispelicar.shtml">Here&#8217;s that page</a>)  Googling around, I stumbled upon this article: <a href="http://www.positioniseverything.net/explorer/italicbug-ie.html">IE and Italics</a>. I had to add a style to combat it:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">/* Doing overflow:hidden to correct IE and italics rendering issues */</span>
P <span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>There might be a better way as this does cause it to chop the text off.. but it stopped the weird behavior for now.  Changing the padding on my divs might solve it but I was tired of messing with it after that worked.</p>
<p>Another thing I changed was to use relative font sizing instead of fixed point or pt sizing.  Well, this opened up another can of worms I wasn&#8217;t expecting.  There was a page that contained several table (the <a href="http://www.pelicar.info/guild/creatures.shtml">New Creatures</a> page) and I had defined the TD element with this style:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">TD<span style="color: #00AA00;">,</span> TH <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #00AA00;">:</span> Arial<span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">0.80em</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Which makes the font 80% smaller than the main body font which is 1.0em (by the way em refers to the size that a capitol letter &#8220;M&#8221; takes up).  But, the text in one table looked much smaller than it should.  Well, as it turns out, that table had a table within a table on the left, and the right had text explaining the items in the table.  The text everywhere was too small.  Turned out to be a problem of inheritance.  This page explains it: <a href="http://www.maxdesign.com.au/presentation/relative/">Relative font sizes and inheritance</a>.  Since the font of the first TD was reduced by 80%, that is now considered the base font size for everything in that element.  The nested table caused its text to be further reduced another 20%.  I fixed the problem with the nested table by doing the following:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">TD<span style="color: #00AA00;">,</span> TH <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #00AA00;">:</span> Arial<span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">0.80em</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span> 
TD TD<span style="color: #00AA00;">,</span> TD TH <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1.0em</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>This keeps the nested TD element with the same base TD size of 0.80em instead of reducing it again.  To fix the normal text that I did not want to be reduced in size by the initial 80% I made its TD element like this:</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;td STYLE=&quot;font-family: Times New Roman; font-size:1.0em;&quot;&gt;</pre></div></div>

<p>Problems solved!   <img src='http://blog.markheadrick.com/wp-includes/images/smilies/icon_biggrin.gif' alt=':grin:' class='wp-smiley' />  </p>
<p>I am also in the middle of changing my main website to run in Standards mode as well and cleaning up some of the 15 year old coding in some places&#8230; like closing paragraph tags and other things LOL.  I don&#8217;t know if I can keep it looking the same if I get rid of the frames, namely due to the embedded media player in the bottom-left frame. Just don&#8217;t think there&#8217;s a way without frames to keep a song playing around while browsing, unless the player is loaded in a separate pop-up or browser window which I don&#8217;t really like.  Hmmmm..  Anyway, all for now I guess.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.markheadrick.com/2007/04/07/websites-being-converted-to-standards-mode-and-my-struggles-with-it/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
