The Weekend Chef – New & Improved!

First, you need to clean up the errors in your code and then the site will pretty on the inside and outside. It’s a long list, but take it one step at a time.

The colors are very deserty/ice creamy. You’ve worked hard (or the theme author) to make the background static while the post area scrolls, but it moves very slowly because you have so many posts. Cleaning up the errors might help this, but this feature really works best when the background is interesting enough to STAY there while the post moves across it. There is nothing interesting there to look at and it looks odd to see the post scroll past the black bars across the top. I keep wanting to see them move so we see the background’s gradiant color move to white. It’s a personal thing, but if you had food photographs or something that were interesting to frame the content area, then we’d be saying something different here.

For those with eye problems, the orangey-red text in the sidebars might be too light and lack enough contrast. You might want to run this through some of the online accessibility testers to make sure. I think I have a list of some on my site.

The ads you have running on the left side don’t move well with the scrolling content, but that might clean up with the error fixes.

So let us know when you’ve fixed up the errors and we’ll look again.

Some of these recipes look very tasty!

Erm. Wow. Thanks. I’m still kind of an amateur as far as the code validation, but I sure will look at these errors and attempt to fix them. I certainly can’t show that to my CSS teacher now, can I? ??

As for the static background…that is part of the original identification band theme I tweaked. I just changed the colors.

I really struggled with the colors and the background. It’s very hard to find graphics for a cooking site that don’t cost and arm and a leg — or maybe I just don’t know where to look. I did try to darken up the orange on the side. Maybe I’ll go back to Visibone and try a more red/orange. I did notice at work this morning that the orange seems darker on my work computer and the nifty corners area is more yellow too.

One thing I’ve been considering is just putting the “headlines” on the main page to make it look a little cleaner because it really isn’t exactly a blog.

I do appreciate any advice anyone has to offer. I really have high hopes for this site since I’ve given up my dream of publishing a cookbook. ?? I’d like at some point to get more contributers and have something more like The Skinny Daily or Hungry-Girl.com but focused on cooking and such.

I’ve resolved all but an issue with the <div> and that appears to be the result of the_excerpt_reloaded plugin which apparently is “fixing” the unclosed tags after the <div> instead of before it and therefore it makes the page XHTML invalid. ?? Anyone know how to resolve this?

TIA!

Here’s the fix, in case anyone wants to know how to fix this in the future:

Open the-excerpt-reloaded.php file in your plugins directory and find this line:
$excerpt .= "<div class=\"more-link\"> <a href=\"". get_permalink() . "#more-$id\">$more_link_text</a></div>";

and change it to:
`$excerpt .= "<span class=\"more-link\"> $more_link_text</span>";'


The drawback is that it doesn’t put the more link text on a new line, but you might be able to add a
before the <span> to resolve that if you need to.

cute logo at the top ??

Really? Thanks. I got that from some icon collection; I’m looking to hire someone to make me an original logo. ??

You have just a little problem in Mac browsers that is easy to fix. The middle column gets shunted down below the sidebars—I think it’s from widening your content and/or your menu areas, as that is the same thing that happened when I adjusted widths on my site.

Here is a screen shot of your site in Safari, but it looks exactly the same in Mac Firefox.

But Mac Explorer is the worst, as you can see in this screen shot.

I hate Explorer.

I’ve been thinking about this for a couple of days, but I’m not sure how to fix this since I don’t have a Mac to twiddle and try until it’s right.

How did you fix yours?

I had column-shifting problems whenever I fiddled with three-column themes, specifically Devenir en Gris and Vesuvius. It never seemed to be a problem with two-column themes.

When I tried to adjust column/content widths, often the result would be that one of the columns would get shifted down below. I just kept adjusting widths in the sidebars and the content until everybody played nice in every browser.

You are probably better with CSS than I–it certainly looks like you’ve done a lot of work on your style sheet! So forgive me if I’m stating the obvious or the erroneous. It just may be that I stumbled onto getting my 3-columns to work, but only THOUGHT widths had anything to do with it.

Regarding the Explorer issue; one thing that messed up my images in Explorer was using quotation marks when I didn’t need them. In your stylesheet, you’ve got stuff like

header } background: url('images/background-top.png')

Perhaps if you take out those single quotation marks, that will solve the Explorer problem.

Hmmm…interesting. I’ve taken those single quotes out and am making a mental note to change the notes from my CSS class. ??

I basically designed the whole site while in a 6 class CSS course so I can’t say I’m good at CSS. I find it challenging and fascinating and frustrating all at once.

If you could check it and get back to me, I’d appreciate it.

Ah, I have a dream of a world where all browsers show websites the same…

I just looked at it in Explorer, and it looks much, much better now… all of the colors are there as they should be. Those quotation marks must’ve been the cause for the grey blog look, just as they caused my image problems with my two-column site.

But you’ve still got a problem with the middle column dropping down. It looks like you shortened the area between the sidebars, the part that holds the content. I’m not looking at your stylesheet right now, but sometimes it’s called the “main”. I’ll try looking at it again later.

I am self-taught in CSS myself, which is probably why I’m so bad at it. But one trick I have is putting a 1px border in different colors around each of the major blocks: green for the header, red for the content, blue for the sidebars, etc., so that I can see how adjusting widths and positions affect each block.

It also helps me with padding and margins, which I can never keep straight. It’s hard to do it live, though, when your adjustments are viewed by the world.

I just learned how to make a test site by creating a new database and a new WordPress install, with a lot of help from Podz’ WordPress guides. The non-public test site makes testing and adjusting much less stressful.

Oh, I have set up a sandbox, though it won’t help me because it all looks fine on my home and work PCs; I can’t actually see what it’s doing on the Mac.

However, here’s what I got:

The wrapper is 740 with 2px padding.
The right column is 160 plus 8px for padding which equals 168.
The left column is 160 plus 8px for padding which equals 168.
The content is 372 plus 16px for padding which equals 388.
The total apparently is 724px which should technically work, but you say it’s being pushed down in the Mac browswer.

I take that back. It’s 8px (padding) + 160px + 8px (padding) + 8px (padding) +382px + 8px (padding) + 8px (padding) + 160px + 8px (padding), which does equal 740px.

(Am currently going on 21+ hours awake and 19+ hours at work.)

I hope you had a chance to get some sleep.

This is where I wish my CSS were up to snuff. I think your Mac browser problems may be resulting from any adjustments you may have made to the #rap and #content values, based on my bumbling experiences with three-column themes.

I took a picture of your site in Mac Firefox. See how the right column is a little too far to the left? Perhaps that is what is pushing the middle column down.

Other than that sorry little piece of opinion, I hope someone like MacManX can chime in here, or another one of the Mac-using WordPress Gurus.

Nmallory, I took a look at your site in Firefox, and it’s just as RosieMBanks said. I was able to temporarily make it work correctly by lowering #content’s width to 310px:

#content {
float: left;
width: 310px;
margin: 16px 8px 20px 8px;
overflow: hidden;
text-align: left;
}

Unfortunately, I can’t figure out how to move that right sidebar over.

To check your site in multiple browsers, stop by the mother of all screenshot sites: https://browsercam.com/ BrowserCam is commercial, but you can register for a free 24 hour period.

To check only Safari and MacIE: https://www.danvine.com/icapture/

To check every version of IE: https://www.danvine.com/iecapture/