0

I have one "back to top" arrow almost to the footer of the website and I have a border-bottom to that div. So far everything's good, my only issue is that I'd like to remove any border around that triangle I did with CSS, no border-bottom because it looks ugly..

URL is: http://teothemes.com/wp/

I tried changing the border-bottom for the divs inside but it didn't work

FinalDestiny
  • 1,148
  • 3
  • 15
  • 26

3 Answers3

2

As long as you as are asking for a "hack", then yes: simply add another div to your HTML, with :before and :after pseudo-elements. Move the border-bottom to these elements and give them widths that look right.

Of course, this requires an extra HTML element with no semantic value -- though wrapping all three of those content divs in another would make sense, and you could add the properties to that.

Nested or multiple pseudo-elements, if they become supported, would be a better way.

Unfortunately, just adding a bottom-border to the :before and :after styles won't work (they will still extend too far), because of the way CSS borders are rendered -- to see this make the borders thicker and of different colors. The answers to this question also illustrate this.

Community
  • 1
  • 1
Lack
  • 1,625
  • 1
  • 17
  • 29
  • OK. If you are planning on making "top quality wordpress themes", consider reading up on some HTML5 semantic elements. – Lack Jul 08 '12 at 23:02
1

I'm not sure I fully understand the issue, as it looks rather simple to me.

If you were to omit the border-bottom: 1px solid #c6c5c5 style to the #backtotop div, this would remove the issue - no?

One other way would be to change the arrow element so that it is a whole image rather than the ::before and ::after elements you're doing. But then you would need to match the pattern background.

I don't see another way, especially one that would work in multiple browsers.

Kate
  • 1,638
  • 1
  • 14
  • 15
1

It appears that your Arrow is an <a> tag with a CSS background.

So far everything's good, my only issue is that I'd like to remove any border around that triangle I did with CSS, no border-bottom because it looks ugly..

Upon inspection in Chrome, there is no border bottom being applied to it. In fact, it's an absolutely positioned element, and so borders won't work as spacing-givers. Just adjust your top property a little bit (maybe to 6px or 9px) and your positioning should be perfected.

Aditya M P
  • 5,127
  • 7
  • 41
  • 72