Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Line Height Discrepancy: IE vs. FF

    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)

    Code:
    .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;
    }

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    The following code seems to solve your problem. I only tested it in Firefox 2.0.

    Code:
    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. 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 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 and here’s the code:

    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 &amp; 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>
    		<!--[if IE]>
    			<style type="text/css">
    				#container { position: relative; top: auto; right: auto; bottom: auto; left: auto; margin: 0 auto; }
    			</style>
    		<![endif]-->
    
    	</head>
    	<body>
    
    		<div id="container">
    			<h1><img alt="Music &amp; Brand Connection" width="1000" height="750" src="CF113809.jpeg"></h1>
    			<div id="content">
    				<h2>Who We Are</h2>
    				<p>Music &amp; 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 &amp; Management</li>
    					<li>Project Management &amp; Activation</li>
    					<li>Content Creation</li>
    				</ul>
    				<p>Music &amp; 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>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New Coder
    Join Date
    May 2007
    Location
    Atlanta, GA
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't say enough how much I would recommend you/everyone downloading FireFox and using the extension "FireBug".


  •  

    Posting Permissions

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