Any CSS gurus here?

Move along, nothing to see here!
Post Reply
jacob
Site Admin
Posts: 15907
Joined: Fri Jun 28, 2013 8:38 pm
Location: USA, Zone 5b, Koppen Dfa, Elev. 620ft, Walkscore 77
Contact:

Post by jacob »

As you may have noted, I just added a 2x2 block of ads in the lower right corner of the forum pages. I hope it's not annoying---feel free to click on them; it's paid by impression and not by click, so frivolous clicking won't mess things up unlike with google adsense.
Anyway, the problem is that it doesn't exactly present itself at 2x2 but more like 2 by blank-1 by 1-blank. ARGH! I have been messing with it for over two hours now.
Here's the (what I think is) relevant code:
The blocks are 125x125 pixels.

The sidebar container is 310px wide.
You can get the html by viewing the source code.
css stuff from the forum template
.sidebarad{
margin:auto;
padding:15px;
}
css stuff from the adserver template (I have little control here, but I can change the following).
Anchor style:

display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 15px 15px 0;text-align:center;text-decoration:none;overflow:hidden;float:left;
Image style:

border:0;clear:right;
Ad here style: (These are the Advertise Here fields)

color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;
Ad here hoover style:

border:1px solid #999;background:#ddd;color:#333;
I can't control the html from the adserver. I presume it presents one long horizontal line of text or images, one after each other.
I need my CSS, the CSS I control, to break it into 2x2 in the proper way.
Any ideas?


S
Posts: 288
Joined: Thu Jul 22, 2010 8:02 pm

Post by S »

Put this in style.css:
html > body .sidebar .sidebarad a.adhere{
width: 124px;
height: 124px;
}

jacob
Site Admin
Posts: 15907
Joined: Fri Jun 28, 2013 8:38 pm
Location: USA, Zone 5b, Koppen Dfa, Elev. 620ft, Walkscore 77
Contact:

Post by jacob »

Oh noes, that turned it into a long line
X
X
X
X
I need
XX
XX
and before I had

XX
X
X
(I don't know if it makes a difference in debugging, but when I had 4 "Advertise here" spots, the 2x2 format worked nicely.)


S
Posts: 288
Joined: Thu Jul 22, 2010 8:02 pm

Post by S »

The problem you're seeing is because the css for a.adhere specifies the size as 123px, but the img inside is specified as 125px. I just poked around with the css again and it looks like you actually only need to declare a height in the rule I pasted above. Not sure if it matters, but I put it at the bottom of the css file.
Btw, the Firebug extension for FireFox is immensely helpful with debugging CSS issues.


jacob
Site Admin
Posts: 15907
Joined: Fri Jun 28, 2013 8:38 pm
Location: USA, Zone 5b, Koppen Dfa, Elev. 620ft, Walkscore 77
Contact:

Post by jacob »

YES!!! Thank you!
(I didn't know about firebug.)


Post Reply