I'm trying to get to grips with CSS and finding it a bit of a nghtmare
with cross-browser problems. I am only testing IE6 and Firefox 1.5 so
I've hardly touched the surface of what problems I could come across
with other browsers and older versions but maybe you can help me with
this to get me started.
My markup is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>About</title>
<meta name="GENERATOR" content="Microsoft Visual Studio 7.0" />
<meta name="CODE_LANGUAGE" content="C#" />
<meta name="vs_defaultClientScript" content="JavaScript" />
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5" />
<link href="http://localhost/Sara/Styles.css" type="text/css"
rel="stylesheet" />
</head>
<body>
<form name="About" method="post" action="About.aspx" id="About">
<input type="hidden" name="__VIEWSTATE"
value="dDwxMTQ3NDM2NTQ2Ozs+qL7TAyNLMxV8vQ8zrE4ssxn 5wEs=" />
<h1>sara noël photography</h1>
<ul><li><span class="init">S</span>ara Noël is a contemporary image
maker.</li>
<li><span class="init">I</span> specialise in simple black and white
portraiture for newborns, babies, children and families.</li>
<li><span class="init">M</span>y images aim to capture a child's
personality and character, that special something that a parent sees
when they look into the eyes of their child.</li>
<li><span class="init">I</span> work in an unobtrusive and informal
style and sessions are fun and relaxed. Based in Cambridge, UK I
usually work in your home or places where your children feel
comfortable and relaxed.</li>
<li><span class="init">P</span>rices start at £75 for the
photographic session (included with two 8 x 6 prints in folders) and
print prices start from £15. I work with digital equipment so colour
images can also be supplied if preferred.</li>
<li><span class="init">M</span>ounting and framing service is also
available. Commissions can be undertaken for pre-schools, nurseries and
schools on a split fee basis.</li>
<li><span class="init">P</span>lease feel free to contact me for
further information.</li></ul>
</form>
</body>
</html>
My css is:
body
{
margin:10px;
padding:0;
}
form
{
width:1000px;
margin:0;
padding:0;
}
h1
{
font-family:"Century Gothic";
font-size:2em;
float:right;
margin:20px 0 0 0;
width:12em;
text-align:center;
}
#About ul
{
margin:120px 80px 0 80px;
padding:30px;
border:solid 1px black;
}
#About ul .init
{
font-size:1.5em;
}
#About li
{
list-style-type:none;
padding-bottom:20px;
}
WHY does the heading appear halfway down the page in Firefox but at the
top in IE? How can I get it to appear like IE in Firefox? If I can't
even get a simple thing like this working (or more importantly
understand what the problem is) ...... aaaaghhhh!!!.....
tia
Phil
PS I realise the content is not much to look at - I'll deal with that
later!
