3 replies [Last post]
norcalty
Offline
newbie
Last seen: 12 years 13 weeks ago
Joined: 2008-09-02
Posts: 2
Points: 0

I'm having a problem with the text in the main body area of the site. In IE it looks perfect (I'm using 7) in Firefox it pushes the main text down an inch and looks weird. I've tried changing things and it jacks it up and puts the body under the right flash file or moves other things around on the site. Please help.

I am using flash files on the top and side; right now they are just temporary holder flash files until I get the main site laid out.

You can see it here and bring it up in IE and Firefox.

http://www.tyslens.com/meghan/

Here is the CSS code and I'll also paste the HTML code for the index page.

* {
	margin: 0;
	padding: 0;
}
 
a {color: #99CC66;}
 
a:hover {color: #99CC66;}
 
body {
	background: #111 url(img/bg.gif);
	color: #fff;
	font: normal 62.5% "Lucida Sans Unicode",sans-serif;
	margin: 3% 0;
}
 
p,ul {
	padding-bottom: 1em;
}
 
ul {margin-left: 1.2em;}
 
li {list-style: none;}
.main li {list-style-image: url(img/li.gif);}
 
h1 {
	font-size: 1.2em;
	}
 
blockquote {
	background: #hhh;
	border-bottom: 1px solid #99CC66;
	border-top: 1px solid #99CC66;
	color: #333333;
	display: block;
	font-size: 0.9em;
	margin-bottom: 1.2em;
	padding: 6px 12px;
}
blockquote p {padding: 3px 0;}
 
h1,h2,h3 {color: #99CC66;}
 
/* misc */
.clearer {clear: both;}
 
.main .padded {padding: 18px 24px;}
.meta {font-size: 0.8em; color: #666;}
.left {float: left;}
.right {float: right;}
 
/* structure */
.container {
	font-size: 1.2em;
	background: url(img/bgcontainer.gif) repeat-y;
	margin: 0 auto;
	width: 840px;
	border: 12px solid #222;
}
 
/* header */
.header {
	float: left;
	width: 640px;
	font: normal 2.4em Verdana,sans-serif;
	line-height: 150px;
	text-align: center;	
}
 
/* structure */
.top {
	background: #111;
	color: #DDD;
	float: left;
	font: normal 1.4em Verdana;
	height: 50px;
	text-align: center;
	width: 639px;
}
.subnav {
	float: left;
	vertical-align:text-top
	width: 160px;
}
.main {
	float: right;
	width: 640px;
}
.main_right {
	float: right;
	width: 200px;
	color: #fff;
}
 
/* sub-navigation */
.subnav h1 {
	background: #111;
	color: #FFE;
	font: bold 1.1em Verdana,sans-serif;
	line-height: 24px;
	padding-left: 8px;
}
.subnav ul {margin: 0; padding: 0;}
.subnav li {
	border-bottom: 1px solid #696755;
	list-style: none;
}
.subnav li a {
	background: #111;	
	color: #fff;
	display: block;
	padding: 8px 0 8px 12px;
	width: 148px;
	text-decoration: none;
}
.subnav li a:hover {
	background: #111;
	color: #000;
}
 
/* footer */
.footer {
	background: url(img/bgfooter.gif) repeat-x;
	color: #CCC;
	font-size: 0.9em;
	line-height: 39px;
	width: 100%;
	text-align: center;
}
.footer .left,.footer .right {padding: 0 16px;}
.footer a {color: #111;}
.footer a:hover {color: #222;}

Here is the HTML index code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
 
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="description"/>
<meta name="keywords" content="keywords"/> 
<meta name="author" content="author"/> 
<link rel="stylesheet" type="text/css" href="default.css" media="screen"/>
<title>Meghan O'Brien - Funny, Smart and and Author too!</title>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
</head>
 
<body>
 
<div class="container">
 
	<div class="header">
	  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="640" height="200">
        <param name="movie" value="multimedia/top.swf" />
        <param name="quality" value="high" />
        <embed src="multimedia/top.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="640" height="200"></embed>
      </object>
	</div>
 
<div class="main_right">
 
	  <div class="padded">
 
		  <h1>
		    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="200" height="800">
              <param name="movie" value="multimedia/right.swf" />
              <param name="quality" value="high" />
              <embed src="multimedia/right.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="200" height="800"></embed>
	        </object>
		  </h1>
		</div>
 
	</div>
 
	<div class="subnav"></div>
<div class="main">
 
		<div class="padded">
 
			<h1>Porttitor posuere</h1>
			<p class="meta">October 24th, 2006 by Duis porttitor</p>
 
			<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, <a href="index.html">nunc eget pretium</a> porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>
 
			<blockquote><p class="style1">Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p>
		  </blockquote>
 
		  <p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p>
 
			<p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis <a href="index.html">quam aliquam</a> risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies.
			</p>
 
 
			<h1>Adipiscing</h1>
			<p class="meta">September 31st, 2006 by Mauris</p>
 
			<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam. Phasellus rutrum elit vel nisi. Cras mauris nulla, egestas quis, cursus at, venenatis ac, ante. Fusce accumsan enim et arcu. Duis sagittis libero at lacus. Suspendisse lacinia nulla eget urna.</p>
 
			<ul>
				<li>Tristique</li>
				<li>Aenean</li>
				<li>Pretium</li>
			</ul>
 
			<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est. Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus. Fusce eleifend, dui ut posuere auctor, justo elit posuere sapien, at blandit enim quam fringilla mi.</p>
 
		</div>
 
	</div>
 
	<div class="clearer"><span></span></div>
 
	<div class="footer">
 
		<span class="left">&copy; 2008 test - all rights reserved - test.com<a href="http://validator.w3.org/check?uri=referer"></a></span>
        <div class="clearer"><span></span></div>
 
	</div>
 
</div>
 
</body>
 
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 8 hours 22 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

It appears that .header is

It appears that .header is taller than expected. Make its bg color something different for clarity.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

norcalty
Offline
newbie
Last seen: 12 years 13 weeks ago
Joined: 2008-09-02
Posts: 2
Points: 0

So when you said this I went

So when you said this I went back and looked at my code and realized I put a line-height: 150px; in the header when I was originally doing a BG gif and text over it. Took it out and now it's perfect. Thanks for pushing me in the right direction!

hankt
Offline
newbie
Texas
Last seen: 11 years 50 weeks ago
Texas
Joined: 2008-12-15
Posts: 1
Points: 0

Meghan - nice creative website design

Great flash on your banner and incredible idea on your typewriter & letters. Good job.

Did you get a foundational design from somewhere or build it all from scratch?