AHHHHH! what is wrong with this link?

CMS & WordPress
1

OK, so i’ve been messing about developing my first WordPress theme for a blog i’m setting up for my course (we have to set up a blog to post up what we have been researching etc and i figured it would be a good reason to dabble in theme development)… If someone could take a look at this link for me and check out the “older posts” link at the bottom… WHY is it indented like that? it makes no sense, it has no margin or padding left, ive tried clear:both;, ive tried bringing the links down more with margin-top, but its still indented… At the minute all that is on it is a float: left; and margin-top of 40px;

the URL to the page is http://www.jonathanwallace.co.uk/

Don’t mind the “design” at the minute its totally basic and bare-bones, i was more interested in actually getting something working than how it looks… Didnt go into photoshop or anything first obviously (lol) was just straight into html and css (kinda regretting that now but its been good practice with the wordpress php tags anyhow)

I would have also liked to have the “read more” links on the right hand side but it causes problems with overlaps in the actual posts because of the “tweet” and “home” buttons which i want to keep parallell… :mad::mad::mad:

Is it just me or does it seem that CSS seems to act differently in a theme than a static site?

2

It could be because you have <li> tags set to margin:20px and the older posts link is nested in a <li> inside an <ul> inside an <li> inside a <ol>!



li {
    list-style: none;   
    margin: 20px;
}
3

Thanks man il look into that, altho if that is it how come the new posts link (when you click on older posts) doesnt have a margin right of 20px? Been looking at it too long i think, time for a break lol

4

Nope, took the margin: 20px off the li’s and still no difference, the newer posts link is positioned correctly on the right side and it has the exact same properties as the older posts link except its floated right instead of left. baffled. it was sitting correctly last night and then i dont know what ive done to it :confused:

5

Because it’s floated, it is “snagging” on the Read more text above, even though it appears to be below that text (the top margin pushes it down). Just do this to fix it:

#older {
  clear: left;
}

An alternative would be to unfloat the read more link.

6

that was it, thanks man :slight_smile: i had a feeling it had something to do with the read more text although id tried “clear: both;” rather than clear: left; Gonna look into the clear function more now ive only really needed to start considering it recently