Hey Guys I need some help.
I'm building a website for a promotoer friend of mine and I am having some issues with the P tag.
the page in question is:
www.hardkase.co.uk/events.html
if you view it on chrome the content inside the events information looks ok but the info under the date badge looks like it has a massive line height and in Firefox the problem is reversed although i can fix the events information as my main concern on firefox was that the <hr> tag was to close to the text but then i can just add an <br>... which will leave a larger gap when viewed in chrome
bellow is the css for the text under the date badge:
Code:
.event-frame .c1 p {
font-family: Arial, Helvetica, sans-serif;
}
.event-frame .night {
font-size: 18px;
color: #b1b1b1;
line-height: 20px;
}
.event-frame .place {
font-size: 14px;
color: #555555;
line-height: 16px;
}
.event-frame .time {
font-size: 14px;
color: #444444;
line-height: 16px;
}
.event-frame a.guestlist {
font-size: 14px;
color: #333333;
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
line-height: 16px;
}
.event-frame a.guestlist:hover {
color: #b1b1b1;
}
and this is the css for the <p>:
Code:
p {
font-family: Verdana, Geneva, sans-serif, Arial ;
color: #B0B0B0;
font-size: 12px;
letter-spacing: 2px;
line-height: 18px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
text-shadow: rgba(0,0,0,0) -1px 0, rgba(0,0,0,0) 0 -1px, rgba(0,0,0,0) 0 1px, rgba(0,0,0,0) -1px -2px;
}