Hello,
I'm new to css, at my level of css authoring from scratch comes nothing good, so I tried to use
Pragmatic template, chopping code to receive 1 or 2 columns (for different pages) by trial and error.
While result looks acceptable in Firefox, IE6 moves text and images far left, behind the screen.
http://defineyourreef.freehostia.com...s/percula.html
More of that - the other page, that uses same css file, looks more or less normal even in IE6:
http://defineyourreef.freehostia.com...s/chromis.html
What can I do to make the page visible?
Sorry about my level of css amd xml knowledge - read a lot, but theory and good-looking practice don't want come close to each other in my mind
Css file:
---------------------------------------
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons
Attribution 2.5 License
*/
/* Basic */
*
{
margin: 0em;
padding: 0em;
}
h1,h2
{
}
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.76em;
text-align: justify;
background-color: #fff;
color: #555;
}
a
{
color: #007788;
text-decoration: underline;
}
a:hover
{
text-decoration: none;
}
.clear
{
clear: both;
}
/* Outer */
#outer
{
position: relative;
margin: 2em;
}
/* Menu */
#menu {
float: center;
padding: 5px 0 0 15em;
background: #fff url('images/x2.gif') top left
repeat-x;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
height: 10px;
padding: 0 7px 0 13px;
text-decoration: none;
color: #aaaaaa;
}
#menu a:hover {
text-decoration: underline;
color: #cccccc;
}
#menu .first a {
background: none;
}
/* Content */
#content
{
line-height: 1.5em;
padding-top: 8px;
}
#content p
{
margin-bottom: 1em;
}
#content h1
{
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 100%;
position: relative;
left: 8em;
margin: 0em -22px 1.2em 0em;
color: #007788;
padding: 1.1em 14px 0em 14px;
font-size: 1.7em;
}
#content h2
{
width: 100%;
position: relative;
left: -14px;
margin: 0em -22px 1.2em 0em;
color: #333;
padding: 1.1em 14px 0.0em 14px;
font-size: 1.1em;
background: #fff url('images/x2.gif') top left
repeat-x;
}
#content h3
{
width: 100%;
position: relative;
left: -14px;
margin: 1em -22px 1em 1.3em;
color: #333;
font-size: 1em;
}
#content h1 span, #content h2 span
{
position: absolute;
top: 0em;
right: 0em;
background: #fff url('images/x1.gif') top right
no-repeat;
width: 16px;
height: 28px;
}
#content ul
{
font-style: italic;
margin-bottom: 1.5em;
padding-left: 7em;
}
#content blockquote
{
font-style: italic;
border: double #BFB793;
padding: 1em;
margin-bottom: 1.5em;
}
#content blockquote p
{
margin-bottom: 0em;
}
/* Primary Content */
#primaryContentContainer
{
position: relative;
float: center;
margin-right: -36em;
width: 100%;
}
#primaryContent
{
margin: 0em 2em 0em 4em;
padding: 1em;
}
/* Footer */
#footer
{
margin-left: 9em;
padding: 1.3em;
}
-------------------------------------
html file for bad page:
----------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Percula Clownfish</title>
<meta name="keywords" content="saltwater, marine, aquarium, fish, nano tank, care sheet, percula clown" />
<meta name="description" content="Keeping percula clown in marine aquarium" />
<link href="refpages.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outer">
<div id="menu">
<ul>
<li class="first"><a href="
http://defineyourreef.freehostia.com/index.html" accesskey="1" title="">Home</a></li>
<li><a href="
http://defineyourreef.freehostia.com/phpBB2/" accesskey="2" title="">Forum</a></li>
<li><a href="
http://defineyourreef.freehostia.com/refindex.html" accesskey="3" title="">Reference</a></li>
<!--<li><li><a href="#" accesskey="4" title="">Services</a></li>
<li><a href="#" accesskey="5" title="">Contact Us</a></li>-->
</ul>
<div class="clear"></div>
</div>
<div id="content">
<div id="primaryContentContainer">
<div id="primaryContent">
<p><img src="fishrefimg/percula/percula1.jpg" alt="Percula clown, side" width="600" height="342" border="3" color="grey"/></p>
<h1>Percula Clownfish</h1>
<p>Beauty of the tank, <strong>Amphiprion percula</strong> is a relatively small (2 1/4" or 5.5 cm long after 1yr.), one of the most colorful marine fishes. Has bizarre wiggling manner, although it can swim straight. Reef safe, no special requirements. </p>
<p>Fish of choice to add color to the tank - very few other are comparable by the intensity of color, independent from the intensity and direction of lighting, in other words, it always looks bright. Not much of personality, at least mine, but a splash of color in the drab world. Worth to have even only because of this.</p>
<p>4x more expensive than chromises here - but at the level of the most widely available fishes, like neon goby, red scooter, mandarin and baby lion.</p>
<img src="fishrefimg/percula/percula2.jpg" alt="Percula, side face" width="300" height="341" border="3" color="grey"/><img src="fishrefimg/percula/percula4.jpg" alt="Percula, face" width="250" height="290" border="3" color="grey"/>
<h3>Positive sides: </h3>
<ul>
<li>bright expressive color, independent from light,</li>
<li>size and swimming manner - small and slow enough for a nano-tank, big enough to draw attention in the big tank,</li>
<li>reef safe,</li>
<li>with few exceptions, trouble free, no special care.</li>
</ul>
<img src="fishrefimg/percula/percula3.jpg" alt="Percula near xenia, light through" width="300" height="233" border="3" color="grey"/><img src="fishrefimg/percula/percula9.jpg" alt="Percula near sun coral" width="300" height="239" border="1" color="grey"/>
<h3>Negative sides: </h3>
<p>(as everything else, in my humble experience, add yours)</p>
<ul>
<li>not much personality and interaction,</li>
<li>wiggling motions,</li>
<li>may have troubles with starting eating,</li>
<li>territorial and mildly aggressive toward smaller relatives, disrupting idyll of a peacefully shoaling fish.</li>
</ul>
<h3>Feeding</h3>
<p>On arrival, the young was most difficult to be made to eat, comparing to my other fish (including true cleaner wrasse and lionfishes). Whatever was given - flakes, small soaked pellets, finely chopped raw seafood to fit the mouth - all was rejected. It lasted maybe for two weeks, then I could see it eating. Fortunately, there are fishes in the tank (file and puffer), spitting out the chewed food, so fine pieces were always available. Seems to be frequent sutuation for the clowns at beginning.</p>
<p>Eventually ended eating the defrozen mysis, brine shrimp, Marine Cuisine, grocery shrimp, salmon and other fish of saltwater origin. The food is just dropped in the tank, everybody eats as much as they want, trice daily (because of the other fish feeding requirements - many reefers are feeding their clowns by pellets only, size to fit the mouth, once every second day).</p>
<p>Below - juvenile percula and the adult, yawning:</p>
<img src="fishrefimg/percula/perculasm.jpg" alt="Juvenile percula" width="300" height="290" border="3" color="grey"/><img src="fishrefimg/percula/percula10.jpg" alt="Adult percula, yawning" width="300" height="185" border="3" color="grey"/>
<h3>Territoriality</h3>
<p>Becomes territorial, when matures, chases away the smaller shoaling fish and bull-nosing out the hermit crabs from the chosen territory.</p>
<p>I have the only one, but if you plan to have more - it's generally recommended to introduce them very young and at the same time, or have a mated pair. Other way, aggression to the own kind is possible.</p>
<p>Mine didn't host any of the corals (like frogspawn), but adopted the fuzzy rock and coraline covered plastic board, and wiggles on them.</p>
<p>Sleeps in the small cave above this territory. First months I worried, if it sleeps at all - always swimming in the top corner of the high tank with hiding places only at the bottom. No problem now.</p>
<img src="fishrefimg/percula/perculacave.jpg" alt="Pecula in the cave" width="300" height="225" border="1" color="grey"/><img src="fishrefimg/percula/percula5.jpg" alt="Percula attacks damsel" width="323" height="357" border="1" color="grey"/>
<h3>Behavior</h3>
<p>Not much to see, swims here and there, wiggles at fuzzy stone (egg laying pattern?), attacks smaller shoaling fish, driving them away from its territory in 90g tank. In 10g with a lot of rock clown almost never missed the target, pinched and damaged their scales, so had to move clown to another, the bigger tank. At new place tried to keep close all the time to the fish of comparable size, shoaling before or just behind it for a months. So was with cleaner wrasse, and after that with valentini puffer (small sharp nosed puffer).</p>
<img src="fishrefimg/percula/percula20xh.jpg" alt="Small clown swimming together with cleaner wrasse" width="300" height="335" border="1" color="grey"/><img src="fishrefimg/percula/percula7.jpg" alt="With valentini puffer" width="309" height="403" border="1" color="grey"/>
<h3>Regeneration of the tail fin</h3>
<p>Being a solitary fish, puffer didn't appreciate clown's company, especially with red tail, wiggling under its nose, and bit it a couple of times, the second time very slightly. Clown stopped forwarding before puffer, but continued to follow him behind. The tail fin restored in a 1.5 - 2 months, no infection or signs of severe distress, clown just become a little more cautious. Healed fin - see on the first photo of the page.</p>
<img src="fishrefimg/percula/perculav1.jpg" alt="Clown and valentini puffer" width="311" height="140" border="1" color="grey"/><img src="fishrefimg/percula/perculatail.jpg" alt="Damaged tail fin" width="295" height="205" border="1" color="grey"/>
<h3>Tank size</h3>
<p>Percula grows much bigger and fatter, than chromises, and if one or two perculas can fit in 10g with treadmill of flow for exercise, I have impression, that 20g long tank will be more convenient. Didn't kept clown in such tank, 10g and 90g only. Still small on the photos:</p>
<img src="fishrefimg/percula/10g.jpg" alt="In 10g tank" width="600" height="401" border="1" color="grey"/> <img src="fishrefimg/percula/90ga.jpg" alt="In 90g" width="592" height="368" border="3" color="grey"/>
<h3>Compatibility</h3>
<p>My percula don't bother corals or tankmates, other than chromises and 4-striped damsel. Lived and lives now together with lionfish (volitan, then mombassa), chaetodermis filefish, valentini puffer, mandarin and scooter dragonets, cleaner wrasse. They generally ignore the clown, except the puffer a couple of times (see about regeneration above).</p>
<h3>Links<span></span></h3>
<ul>
<li><a href="
http://www.flmnh.ufl.edu/fish/Galler...ClAnemone.html
">Florida Museum of Natural history</a></li>
<li><a href="<A href="http://www.amonline.net.au/fishes/fishfacts/fish/apercula.htm">Australian">http://www.amonline.net.au/fishes/fishfacts/fish/apercula.htm">Australian Museum Fish Site</a></li>
<li><a href="<A href="http://www.fishlore.com/clownfishanemonechart.htm">Clownfish">http://www.fishlore.com/clownfishanemonechart.htm">Clownfish Anemone Compatibility Chart
</a></li>
<li><a href="
http://www.malawicichlidhomepage.com...on_percula.htm
">Bob Fenner's article</a></li>
<li><a href="<A href="http://www.google.ca/search?hl=en&q=percula+clown+%22hunger+strike%22&b tnG=Search&meta=">Google">http://www.google.ca/search?hl=en&q=percula+clown+%22hunger+strike%22&b tnG=Search&meta=">Google on percula clown on hunger strike
</a></li>
<li><a href="
http://www.google.ca/search?q=%22whi...&start=10&sa=N
">Google on sign of internal parasites</a></li>
<li><a href="<A href="http://animaldiversity.ummz.umich.edu/site/accounts/information/Amphiprion_percula.html">Metamorphosis">http://animaldiversity.ummz.umich.edu/site/accounts/information/Amphiprion_percula.html">Metamorphosis from male to female and monogamous pair bond</a></li>
</ul>
<h3>All above was seen in these tanks<span></span></h3>
<blockquote>
<p>10g basic mixed reef, bare bottom, artificial salt mix in tap water, good water parameters with alkalinity on lower side, 79F, 1.026. Medium PC and sun light. </p>
<a href="<A href="http://defineyourreef.freehostia.com/phpBB2/viewtopic.php?t=4">In">http://defineyourreef.freehostia.com/phpBB2/viewtopic.php?t=4">In Members Tanks</a> and on the photos above.
<p>90g predators tank, bare bottom, artificial salt mix in tap water, medium nitrates, high phospates, medium alkalinity, 79F, 1.026. Low light.</p>
<p><strong>Timeframe</strong></p>
<p>Feb 2006 - present time, Jun 2007. Since Aug 06 - in 90g.</p>
</blockquote>
</div>
<div id="menu">
<ul>
<li class="first"><a href="
http://defineyourreef.freehostia.com/index.html" accesskey="1" title="">Home</a></li>
<li><a href="
http://defineyourreef.freehostia.com/phpBB2/" accesskey="2" title="">Forum</a></li>
<li><a href="
http://defineyourreef.freehostia.com/refindex.html" accesskey="3" title="">Reference</a></li>
<!--<li><li><a href="#" accesskey="4" title="">Services</a></li>
<li><a href="#" accesskey="5" title="">Contact Us</a></li>-->
</ul>
</div>
<div class="clear"></div>
</div>
<div id="footer">
<p>Copyright © 2006 Define Your Reef. Designed by <a href="<A href="http://www.freecsstemplates.org">Free">http://www.freecsstemplates.org">Free CSS Templates</a></p>
</div>
</div>
</body>
</html>
-----------------------
Sorry about my incompetence, I stuck on this for two weeks and can't find the solution.
Thank you.
