space between image and link and why is my header moved over?

A link to your site would help.

Carolyn,

Welcome and don’t worry about asking too many questions!

Try

border=”0″

instead of

border: 0;”

and also try putting a space between the image and the link code (a href):

like:

<li><img src="https://carolynchappellhome.com/wp-content/themes/techpress/images/rss.gif" alt="rss" title="rss feed" style="border: 0;" />&#160<a href="https://carolynchappellhome.com/feed/" title="Subscribe to my posts using RSS" class="feed">Subscribe</a></li>

this will put a small space between your RSS image and your subscribe link.

BNJ

Thanks so much, I got the space between. Now how do I control how high or low the image sits compared to the word beside it?

Oh, and sorry, my test site is: https://carolynchappellhome.com. Thanks for finding it, Frenchtowner.

Actually, now with it set as border=”0″ I’m getting errors. How is that style thing supposed to work? Is it just like putting css in the html? Where does the semicolon go?

Sorry, Frenchtowner. I completely disagree with your solution. Padding text over using inserted whitespace is a really bad idea as there’s no way of knowing how each browser will render that space. Or even if it will render.

Far better to apply a class to the enclosing <li> so that the image and link inside can be positioned more accurately via CSS. Or go even 1 step further – make the image the background to the text link thereby making the image clickable and the markup lighter. At the moment, users will try to click on that image – yet it’s not a link.

Alternative Lite Solution:

MARKUP:
<li class="feedlink"><a class="feed" title="Subscribe to my posts using RSS" href="https://carolynchappellhome.com/feed/">Subscribe</a></li>

CSS:

.feedlink a {
height:27px;
margin:0;
padding:0 0 0 32px;
background:url(images/rss.gif) no-repeat left center;
}

Esmi,

That’s OK, but I don’t think having Carolyn add that code to her stylesheet is exactly a light solution.

I don’t think you need the style or the ;

just border=”0″

BNJ

I agree that my solution takes two edits whilst yours takes just one. But then I got the impression that Carolyn wanted to learn about theme customisation and CSS. Wouldn’t it be better to show her the best solutions rather than the easiest? After all, with XHTML, all presentational aspects are supposed to be moved out of the markup and into the CSS.

Esmi,

I got the impression that Carolyn was just getting started and might not want to tackle feeding the tigers right now. I think she might want to start with feeding the pigeons.

I agree your solution is the ideal one.

BNJ

Thank you both so much, I’m just so grateful you are willing to take the time to help me!

I am trying to learn how to do things the best way. Sometimes I think I know a little bit about all this stuff (I did design my current layout at simplymother.com), but then I get into a new design and feel so inadequate.

I went through a tutorial by Small Potato at wpdesigner.com and it was so helpful–even though I’ve already picked up most of it just from all the tweaking I’ve done, it was really useful to have it put into english so I could understand the why behind everything.

Still, it didn’t address a lot of design questions. Like how do I get my navigational menu words to show up right where those circles are? And how do I work that in when they overlap with the header image? Should I make the header image smaller so it only encompasses the words, and use a background image for the header, and then make the nav menu its own div? If so, is it okay to have one div on top of another, and how do I get it there?

How do I make my blog title clickable when it is an image, if I don’t want the entire image clickable (since my navmenu will be overlapping it, and those need to be clickable themselves).

Why is there so much space above my header? My syndicate class is only 40px and I tried changing it to 27 (what Esmi used for the feedlink class), and it only took out the space below Subscribe. There’s extra space above everything and I can’t find anything that is creating it.

Related: When I use my web developer toolbar and make it outline block level elements, it shows that everything except the footer extends a little bit to the right. Why?? And the footer, why is it out to the left? And my third column? Why is it way the heck down there by the footer?

It’s all voodoo to me. I don’t expect answers to all these questions (though any and all would be welcomed with a thousand cupcakes), just needed to get this out there. I don’t have anybody to talk to about web design. Thanks!

Simply,

I read your other post and now I realize that you are further into this than I thought you were. [you are way past feeding the pigeons]

What base are you using for this design? Is it the WPDesigner.com one that you designed from scratch? If it is maybe you should go back and look at the original design and see if the footer is correctly placed in that design. If it is, compare the two files and see what the difference is.

I think you might have some problems with floats but I am not sure. I think that may be why the footer is misaligned. Or is there a wrapper that holds in the header, body and footer? or is the wrapper only containing the header and the body? These are some random suggestions to check out for yourself.

BNJ

Well, I’ve made some progress! http:carolynchappellhome.com

• But I’m really stuck on getting the topmenu list to align with those circles. See how the first two (about & archives) are too much to the left while the second two (books and links) are a bit too far to the right? If I fix one side, the other side gets worse.

  What’s the best way to fix this? I could maybe make 2 separate ul’s with different classes, right? One for each side? I would go ahead and try that except, oh man, then I looked at what’s going on in IE. The words are lined up completely differently! I’m afraid the way I’m doing this, my list is going to be all over the place, depending on what browser people are using!

  Is there a better way to line these up?

• In IE, the white space above my header is too scrunched, but if I make it bigger, it’s too big in firefox. Is there a way to fix something JUST for Internet Explorer? Or do the people who insist on using that blasted thing just deserve to be punished by an ugly web?
• In Firefox, there’s an itty bitty white space on the right side of my header. I’m just using a background color for that gray, not an image anymore. It is set to 900px and when I maximize my browser, it looks fine, but when I make it smaller, there’s that space. What the ?
• My html is validating but CSS is showing one parsing error. But I can’t find it, and when I run my stylesheet through the validator, it passes. It’s just when I CSS validating link from my blog that it gives me the error. I am so puzzled.

What do you think? Anyone want to help me? Any ideas?