11worth

Okay, I’ll weigh into this one.

Your site looks okay in IE8 and Firefox, but breaks in IE7.

First of all, a check of your site via the W3C HTML Validator reveals 15 errors, and the use of the deprecated align=left in your iframe is at the top of the list.

You also are using XHTML 1.0 Strict, which doesn’t support some attributes that are displayed in the iframe.

Finally, you didn’t close a <p> tag at the end of your iframe.

All of the errors seem to stem from the above iframe. So…what to do…

What I would do is this:

1. Consider using XHTML 1.0 Transitional rather than XHTML 1.0 Strict as a DOCTYPE. It’s more forgiving when working with deprecated elements.

2. Lose the <p> tags and wrap the iframe in a <div>, such as <div class="photoiframe"><iframe...></iframe></div>. Make sure all tags are closed.

3. In the stylesheet, use a float: left; instead of the align=left in the opening iframe tag. Do it this way:

.photoiframe {
  float: left;
}

This should do the trick. Let me know if this helps!

Nothing to be sorry about, that’s a good question! While we’re looking at this again, let’s try it two ways:

Before you start, it’s a good idea to add height and width values to your image tag, like this, the width value in particular to aid in centering the image:

<img src="https://physioworksnantucket.com/wp-content/logo_banner.jpg" width="612px" height="154px" alt="Physioworks Nantucket - Physical Therapy & Sports Medicine" />

included is an alt description for SEO. You can copy this image tag to replace the one in your header.php.

1) The first (and preferred) way is to set the margin-right and left to auto, so hypothetically it should center itself. The code you add to the style.css should be exactly like this, and you can put it in just below the blog title references:

.sb_logo img {
  margin: 0 auto 0;
}

2) If that doesn’t work, try it this way:

.sb_logo img {
  margin-left: 50px; /* You can add or subtract from this 50px value to slide the image further to the right or left until it's centered */
}

Let me know if this works, or if you have any further questions!

Okay, this is good…

In the sidebar.php, change this:

<?php wp_list_categories('show_count=1&title_li=<a href="#">categories</a>'); ?>

			<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>

		</ul>
		<div id="fill"></div>
		<div id="search"><?php get_search_form(); ?></div>

		<?php } ?>

	</div>

To this:

<?php wp_list_categories('show_count=1&title_li=<a href="#">categories</a>'); ?>

		</ul>
		<div id="fill"></div>
		<div id="search"><?php get_search_form(); ?></div>

	</div>

We just removed the conditional start and end tags on either side of the search form that restricted the form’s display to the ‘home’ page, and ‘page’ pages. It excluded category and archive pages. By removing the tag, it doesn’t restrict anything, which is I think what you want.

It also takes care of the missing </ul> end tag, which was originally marooned along with the search box inside the conditional tags.

Let me know if this worked!

Sorry about that. We all started somewhere, and I’m still learning!

This link should point you to some good XHTML/CSS learning resources. I know you’ve already Googled some resources, but this WordPress link is close to home and you may have missed it.

If you decide to make ANY changes, again, make a backup copy of your style.css in case it doesn’t work and you need to go back.

What I’ll do is show you first what you need to replace in style.css:

a,.entry-content a em,.entry-content a strong,.entry-content em a,.entry-content strong a{color:#06c;outline:none !important;}
a:hover{color:#f30;}
ul li{list-style-type:square;}
.fw{width:100% !important;float:none;

You need to completely replace it totally with this following new code:

a:link {
  color: #008080;
  text-decoration: none;
}

a:visited {
  color: #008080;
  text-decoration: none;
}

a:hover (
  color: #ff3300;
  text-decoration: none;
}

a:active {
  color: #008080;
  text-decoration: none;
)

.entry-content a em,.entry-content a strong,.entry-content em a,.entry-content strong a{color:#06c;outline:none !important;}
ul li{list-style-type:square;}
.fw{width:100% !important;float:none;}

I set the link color to “teal”, and the hover is “red”, with no underlines. You can change those later if you wish.

Now, if you don’t feel comfortable doing this, you’re probably better off keeping your links the way they are. A lot of world-class sites still use the blue-underlines, and no one says anything about it! You can certainly tell where the links are…

Good luck!

Hi,

In your style.css, you have this:

a,.entry-content a em,.entry-content a strong,.entry-content em a,.entry-content strong a{color:#06c;outline:none !important;}
a:hover{color:#f30;}
ul li{list-style-type:square;}
.fw{width:100% !important;float:none;}

The color #06c (you probably already know this) is short for #0066cc, which is your default blue. There’s no text-decoration property, so by default it is “underline”.

It’s the “a” at the beginning…that’s <a> for your entire site, unless otherwise selected.

So what you can try is set up another <a> selection and put it in style.css (above the original code, minus the “a”) as follows:
Note: First back up your style.css in case there’s a need to go back

a:link {
  color: ; /* your desired color */
  text-decoration: ; /* select 'none' if you want no underline */
}

a:visited {
  color: ; /* your desired color, more than likely the same as a:link */
  text-decoration: ; /* again, 'none' if you want no underline */
}

a:hover (
  color: ; /* this is the default red, #f30 (#ff3300), you can choose another */
  text-decoration: ; /* again, 'none' if you want no underline */
}

a:active {
  color: ; /* set as you wish, probably same as a:visited */
  text-decoration: ; /* probably same as a:visited * /
)

.entry-content a em,.entry-content a strong,.entry-content em a,.entry-content strong a{color:#06c;outline:none !important;}
a:hover{color:#f30;}
ul li{list-style-type:square;}
.fw{width:100% !important;float:none;}

You can shorten the “a” part up for brevity, but I left it in long version for clarity and ease of modification.

Apologies if you’ve already tried this…

Good job! It looks okay in my IE8, and IE8 compatability mode. Do you remember what you did to correct the problem? It would be nice to know.

As far as the body text, that as well looks okay in IE. Can you specify where it’s not correct?

You can assign margins to your header image by adding to your style.css as follows:

.sb_logo img {
  margin: /* place your values here */
}

Not sure what else you have going on with your theme, maybe a simple left margin to get your image placed where you want it may suffice.

Or, specifically, where you have your code for <div id="sidbar">.

Hey,

I looked at the source code for your Main page and the Categories Archive page (/test/blog/?cat=1).

The source code for the Main page is this:

<div id="sideBar">
		<ul id="sideNav">

			<li class="noLink"></li>

			<!--deleted li with php calls to remove p from ul-->

			<li><a href="index.php">main</a></li>

			<li class="pagenav"><a href="#">pages</a><ul><li class="page_item page-item-2"><a href="https://www.visualcraftsman.com/test/blog/?page_id=2" title="About">About</a></li>
</ul></li>
			<li><a href="#">archives</a>
				<ul>
					<li><a href='https://www.visualcraftsman.com/test/blog/?m=200902' title='February 2009'>February 2009</a></li>
				</ul>
			</li>

			<li class="categories"><a href="#">categories</a><ul>	<li class="cat-item cat-item-1"><a href="https://www.visualcraftsman.com/test/blog/?cat=1" title="View all posts filed under Uncategorized">Uncategorized</a> (1)
</li>
</ul></li>

		</ul>
		<div id="fill"></div>
		<div id="search"><form method="get" id="searchForm" action="https://www.visualcraftsman.com/test/blog/" >
	<label class="hidden" for="s">Search for:</label>
	<div><input type="text" value="" name="s" id="s" />
	<input type="submit" id="searchSubmit" value="search" />
	</div>
	</form></div>

	</div>

The source code for your Categories Archive page is this:

<div id="sideBar">
		<ul id="sideNav">

			<li class="noLink"></li>

			<!--deleted li with php calls to remove p from ul-->

			<li><a href="index.php">main</a></li>

			<li class="pagenav"><a href="#">pages</a><ul><li class="page_item page-item-2"><a href="https://www.visualcraftsman.com/test/blog/?page_id=2" title="About">About</a></li>
</ul></li>
			<li><a href="#">archives</a>
				<ul>
					<li><a href='https://www.visualcraftsman.com/test/blog/?m=200902' title='February 2009'>February 2009</a></li>
				</ul>
			</li>

			<li class="categories"><a href="#">categories</a><ul>	<li class="cat-item cat-item-1 current-cat"><a href="https://www.visualcraftsman.com/test/blog/?cat=1" title="View all posts filed under Uncategorized">Uncategorized</a> (1)
</li>
</ul></li>

	</div>

The difference in the latter is you don’t have the closing </ul> tag prior to where you want your search form to appear. This would possibly explain why it won’t appear on an archive page, but is okay on the Main page.

Most likely all you need to do is look at your sidebar.php code and make sure the <ul> tags are placed appropriately in relation to the categories function tag.

If you need to go further, post your sidebar.php code.

Hope this helps!

Can you please post the contents of your theme’s header.php?

Hi,

It looks like the searchform appears in IE8 (that’s what I use), but isn’t visible in compatability mode (for IE7 and below). You may have to continue further if you want IE7 compatiblity…

I looked at the source code, and it appears the searchform <div id="search"> is wrapped in <div id="menu"><ul>, yet isn’t an <li> element. The <ul> and <div id="menu"> closes after <div id="search">. This is invalid XHTML, since a <div> can’t be inside a <ul> unless it’s in an <li>. A W3c HTML validation check hits on this as well.

There are a couple of ways you could go. For now, in header.php, try this:

<body>

<div id="wrapper">

<div id="menu">

<li class="page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>">/" title="Home">Home
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
<li><?php include (TEMPLATEPATH . '/searchform.php'); ?></li> /* changes made */
</div>

<div class="clear"></div>
<div id="top">
<?php include (TEMPLATEPATH . '/headbanner.php'); ?>
</div>

<div id="catmenucontainer">

<div id="catmenu">

<?php wp_list_categories('sort_column=name&title_li=&depth=4'); ?>
</div>

</div>

Hopefully this helps…

With the info given, my two cents worth:

1. Your tag <table bgcolor=> is HTML 3.2 (in other words, it’s “deprecated” or out of current use), and not intended to work with the WordPress DOCTYPE, which is XHTML 1.0. Are you cutting and pasting old code from an ancient site?

2. That having been said, you may have a missing <a> closing tag somewhere, which may be causing a background color change on hover much like hovering over a link.

Visit the W3c website and use their HTML Validator. You’ll probably have some errors, and will have a better idea where to start making corrections.

Hi,

Your theme Floristica uses a background image for the header picture. The name of the image is “body-back.jpg”, it’s 780px wide, 235px high, and 66.9kb.

The background image is assigned in your style.css as follows:

#root{
    width:780px;
    margin:0 auto;
    border-top:0;
    border-bottom:0;
    background:url(images/body-back.jpg) 0 32px no-repeat;
}

The path for the image (where it’s kept in your WordPress directory) is “images/body-back.jpg”. This is most likely your theme’s images folder.

The easiest way to do this is:

1) Create a new image to your liking of the same size as the original (height, width, and overall file size), and name it the same, “body-back.jpg”.

2) Save the original somewhere in case you want it back later.

3) Replace the original image with your new image in the images folder. You don’t have to mess with anything in style.css, as long as your new image has the same name and size as the original image.

The new image should appear in the same manner as the original!

Good luck!

I’ll take a shot at it. Can you post a link to your site?

You did it! I figured there was more to the equation than just the header.php.

Now, in k2-header.php, if you want to re-do the blog-title, I would comment out the following (just like you did before):

<?php echo "<$block class='blog-title'>"; ?>
	<a href="<?php echo get_option('home'); ?>/" accesskey="1"><?php bloginfo('name'); ?></a>
<?php echo "</$block>"; ?>

This outputs your blog-title, colors, link, and all.

And replace it with:

<h1 class='blog-title'><a href="https://www.rawfoodbodybuilder.com/blog/" accesskey="1">Raw Food Bodybuilder</a>
</h1>

This gives you the same as before, but you have total control without having to use the interface. The style.css still controls the look.

Here you can keep the <a href> link and text, or you can omit the link, just have text, and use the <span></span> like this between the <h1 class='blog-title'>Text <span class="yourcolor">mycolor</span></h1> to do the colored words there as well.