3 Replies - 4580 Views - Last Post: 25 January 2011 - 09:29 PM

#1 staindromeo  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 155
  • Joined: 21-October 10

Horizontal Rule with Box-Shadow element

Posted 25 January 2011 - 09:08 PM

Hello everyone!

I am trying to create a horizontal rule line with a shadow effect at the bottom of the line. I have tried the box-shadow method & it doesn't seem to be working. I defined the vertical offset & kept the horizontal offset at 0px since I only want the shadow at the bottom of the horizontal line. For the Blur sharpness I specified it at 1px, but still nothing. Am I maybe overlooking something? Does this only work in browsers such as Safari and Firefox or does IE support it as well. I basically am trying to get a red horizontal line of 3px size, with a gray box-shadow effect.

Hope someone can help me out.

Cheers!

Is This A Good Question/Topic? 0
  • +

Replies To: Horizontal Rule with Box-Shadow element

#2 Fungle  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 263
  • View blog
  • Posts: 337
  • Joined: 06-March 10

Re: Horizontal Rule with Box-Shadow element

Posted 25 January 2011 - 09:22 PM

You can get the line quite easily, by giving the horizontal rule a height that you can see, and setting it's background-color to a red hex color.

As for the box-shadow, IE9+ Supports it and all other modern browsers also support the box-shadow property.

As for IE 6,7,8 I am unsure in terms of the rules in horizontal rules since I do not see them used much :P But there is always the possibility of using an image of a shadow effect for outdated browsers.
Was This Post Helpful? 1
  • +
  • -

#3 staindromeo  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 155
  • Joined: 21-October 10

Re: Horizontal Rule with Box-Shadow element

Posted 25 January 2011 - 09:26 PM

Fungle,

Thanks for your response, I just tested my code with Firefox & it works so I guess it's just an IE thing. As this point in time I think I might have to go with your suggestion & use an image for outdated browsers. Or I'll have to find some kind of alternative within IE.

Thanks
Was This Post Helpful? 0
  • +
  • -

#4 Fungle  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 263
  • View blog
  • Posts: 337
  • Joined: 06-March 10

Re: Horizontal Rule with Box-Shadow element

Posted 25 January 2011 - 09:29 PM

View Poststaindromeo, on 26 January 2011 - 04:26 AM, said:

So I guess it's just an IE thing.


Everything seems to be an IE thing these days D:
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1