CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)
-   -   Problems with my P tag in firefox and chrome (http://www.codingforums.com/showthread.php?t=247030)

itsrron 12-23-2011 10:34 PM
Problems with my P tag in firefox and chrome
 
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;
}

Excavator 12-23-2011 10:45 PM
Hello itsrron,
I've seen double posts before but not like this one :thumbsup:

You have a few errors with text styling tags that would be easy to fix - http://validator.w3.org/check?verbos...%2Fevents.html

You should not style your content by adding markup, the <br /> tag is for making a line break in text, not for making a space. Add a margin from your CSS instead.

The p text on the left has font-size 18px/14px and line-height 20px/16px
The p text on the right has font-size 12px and line-height 18px
In FF9 those text look like they should according to how you've styled them.


All times are GMT +1. The time now is 11:44 PM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.