i'm having a problem displaying my title. Possible IE, Firefox conflict.

My title and subtitle display fine in IE (picture 1), but seem to be shifted down a line or so in mozilla (picture 2)....



In this second picture, I drew a green line under the subtitle (in white).


Here's some relevant code....

.top {
width: auto;
height: 98px;
background-color: #06C;
color: #fff;
font-size: 36px;
padding: 10px;
}

Code (markup):

<div class="top">
  <p>Overruled.org</p>
  <p class="style1">Because there will be more laws tomorrow than there are today. </p>
</div>

Code (markup):

I've been dealing with this problem for over 3 months now. I'm desperate for help. Thanks.

 

You could try adding

margin: 0;

to your CSS.

T

 

if you meant this .....

.top {
width: auto;
height: 98px;
background-color: #06C;
color: #fff;
font-size: 36px;
padding: 10px;
[COLOR="Red"]margin: 0;[/COLOR]
}

Code (markup):

I didn't notice any change...

 

I'm still haven't figured this out... Help?

 

The problem is FireFox and IE create different paragraph heights. Not noticeable with smaller fonts sizes, at 36px it's causing trouble. You can test that by creating a page that has nothing on it but the following two paragraphs:

<p style="font-size: 36px;">Overruled.org</p>
<p style="font-size: 18px;">Because there will be more laws tomorrow than there are today.</p>

Change the <p> tags to <div> tags and try it again. With <div> tags the line heights are the same in both browsers.

 

awesome man..... awesome.
you earned yourself a green.

 

No sweat.

 

Good job Bum; Jim... what I would do in the future if you can - learn to use DIVs and CSS fully - It will make a big difference.

A trick I use in my CSS to keep things generally "clean":

*html {
margin: 0;
padding: 0;
}