• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

node nodeInfo styling

gldtn

Well-known member
#1
I'm having a hard time understanding why my css code is generating this..

I applied to EXTRA.CSS:
Code:
/* ============= */
/* = forumlist = */
/* ============= */

.node:first-child .nodeInfo {
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.node:last-child .nodeInfo {
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.node .nodeInfo {
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
Some of the nodes are fine, but random ones are messed up, so I'm not sure where to begin; here are some screenshots:

001.jpg 002.jpg 003.jpg 004.jpg

Does anyone have a clue as to what might be happening?

Thanks!
 

Jake Bunce

XenForo moderator
Staff member
#2
I played with this for a while. This works:

Code:
/* ============= */
/* = forumlist = */
/* ============= */

li.forum:first-child .nodeInfo, li.category_forum:first-child .nodeInfo {
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

li.forum:last-child .nodeInfo, li.category_forum:last-child .nodeInfo {
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.node .nodeInfo {
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
I had to specify li.node:first-child instead of just .node:first-child. And I also had to be more specific than .node so I changed that to specify the specific types of nodes, li.forum:first-child and li.category_forum:first-child.

For reference:

http://www.w3schools.com/css/css_pseudo_classes.asp