Line Height Discrepancy: IE vs. FF [Archive]

GOAT2G

05-08-2007, 10:35 PM

Hi, I'm a new member here. I joined up because my expertise in CSS is rather limited to say the least.

I'm currently working on a site in Dreamweaver but I am having some problems regarding line height - it differs substantially between IE7 and Firefox. Take a look for yourselves:

http://www.admasu.karoo.net/mbconnection/main.html

The first line is much lower in FF than it is in IE7. Is anyone able to offer any help?

Here's the CSS code:

(".bodytext1_headings" applies to the first line of text that I am having trouble with)

.backdrop {
horizontal-align: middle;
margin-top: -375px;
margin-left: -500px;
position: absolute;
left: 50%;
top: 50%;
}
.bodytext1 {
font-family: Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
margin-top: -110px;
margin-left: -317px;
position: absolute;
left: 50%;
top: 50%;
height: 279px;
width: 500px;
overflow-y: auto;
overflow-x: hidden;
font-size: 12px;
}
.bodytext1_headings {
font-size: 20px;
font-weight: bold;
}

.background {
background-color: #000000;
}

BODY {
overflow-y: hidden;
scrollbar-base-color: #808080;
scrollbar-face-color: #808080;
scrollbar-track-color: BACKGROUND;
scrollbar-highlight-color: LIGHT;
scrollbar-3dlight-color: #808080;
scrollbar-shadow-color: DARK;
scrollbar-darkshadow-color: #808080;
scrollbar-arrow-color: #EFEFEF;
}

Arbitrator

05-09-2007, 01:19 AM

The following code seems to solve your problem. I only tested it in Firefox 2.0.

p:first-child { margin-top: 0; }

This does not, however, address the fact that you’re misusing the p element. The element represents a paragraph, not a header. There are several elements intended for use as headers, such as h1, h2, h3, h4, h5, and h6, that would be more appropriate. Using elements according to their meaning is called semantics.

You may also notice that your list is missing bullets. That’s due to errors 7, 8, 10, and 12 as listed here (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.admasu.karoo.net%2Fmbconnection%2Fmain.html). Those li elements should be contained within a ul element.

The odd character shown after “These include:” in Internet Explorer 7 is an invalid character that should be removed. It’s error 6 in the previously referenced resource. Unfortunately, you may not even be able to see the character unless you open up your document in something like Notepad++.

You may want to fix the other errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.admasu.karoo.net%2Fmbconnection%2Fmain.html) too.

Here’s a rewrite of your code in case you’re interested in having code that’s semantic, accessible, valid, and cross‐browser compatible. There is one cross‐browser difference: the layout is centered vertically except in Internet Explorer (where it degrades gracefully). Here’s a live copy (http://www.jsgp.us/demos/CF113809.html) and here’s the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">

<html lang="en-Latn">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Music & Brand Connection</title>
<style type="text/css">
* { margin: 0; padding: 0; }
html { background: black; color: white; font: 12px Georgia, "Times New Roman", Times, serif; }
#container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 1000px; height: 750px; margin: auto; }
h1 { position: absolute; top: 0; right: 0; left: 0; text-align: center; line-height: 261px; }
h1 img { display: block; }
#content { position: absolute; z-index: 1; top: 261px; left: 173px; width: 518px; height: 290px; overflow: auto; }
#content h2 { margin: 0.6em; font-size: 20px; }
#content p { margin: 1em; }
#content ul { list-style: inside; margin: 1em; }
#content em { font-style: normal; text-transform: capitalize; }
</style>


</head>
<body>

<div id="container">
<h1><img alt="Music & Brand Connection" width="1000" height="750" src="CF113809.jpeg"></h1>
<div id="content">
<h2>Who We Are</h2>
<p>Music & Brand Connection exists to provide brands and agencies that use music in their marketing strategy with expert advice on the music industry by working with <em>managers</em>, <em>labels</em>, and <em>publishers</em> on your behalf.</p>
<p>We offer all of our services on an individual project basis or as a fully integrated solution for your music properties. These include:</p>
<ul>
<li>Strategic Planning</li>
<li>Relationship Brokering & Management</li>
<li>Project Management & Activation</li>
<li>Content Creation</li>
</ul>
<p>Music & Brand Connection creates and finds music properties and solutions that deliver to your requirements whether their focus is endorsement, content, or experimental.</p>
</div>
</div>

</body>
</html>