Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2011
    Thanked 0 Times in 0 Posts

    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:

    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:

    .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>:

    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;
    Last edited by VIPStephan; 12-24-2011 at 12:35 AM. Reason: removed duplicate content

  2. #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Thanked 1,874 Times in 1,858 Posts
    Hello itsrron,
    I've seen double posts before but not like this one

    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  3. Users who have thanked Excavator for this post:

    itsrron (01-06-2012)


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts