469,342 Members | 5,285 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,342 developers. It's quick & easy.

floating inconsistency between browsers

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!

Feb 1 '06 #1
2 1368
de**@2bytes.co.uk wrote:
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:
A URL would be a lot easier for us. We wouldn't need to cut and paste
your code in order to see what you're talking about.
<meta name="CODE_LANGUAGE" content="C#" />
Huh?

Anyway, the relevant parts are:
<h1>sara noŽl photography</h1>
<ul><li><span class="init">S</span>ara NoŽl is a h1 {
float:right;
margin:20px 0 0 0;
width:12em;
}
ul {
margin:120px 80px 0 80px;
padding:30px;
border:solid 1px black;
}
WHY does the heading appear halfway down the page in Firefox but at the
top in IE?
Because IE is wrong. A floated element should appear with its top
aligned with the top of the first line of text in the non-floated text
that follows. Because of the large top margin on the ul this means that
the h1 should appear quite low down the page. IE gets this wrong. It
also gets the margin collapsing wrong which compounds the issue.
How can I get it to appear like IE in Firefox?


Apply clear: right to your ul.

Or don't float the h1 - if you don't want the following text to be
alongside the heading there's no need to float it in the first place.

h1 {
font-family:"Century Gothic";
font-size:2em;
text-align: right;
margin:20px 0 0 0;
}

cheers,
Steve

Feb 1 '06 #2
thanks.

you're right I thought about putting a link up but only after I'd done
the post - the page is obviously not "live" yet.

Both your solutions will work and the reason I'll use the clear one is
that I already have the h1 floating on a different page (though I
realise I could overrirde it for this one). However this is not an
entire solution - it happens to work because my top margin in effect
puts the text below the header but assume I want it pushed lower than
the top of the h1 but not below it i.e margin say 40px - then how would
I get it done so both browsers looked the same.

Thanks for info..

Feb 1 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Andrew Fedoniouk | last post: by
6 posts views Thread by Simon Wigzell | last post: by
3 posts views Thread by Oliver Bryant | last post: by
13 posts views Thread by Dylan Nicholson | last post: by
3 posts views Thread by prouleau001 | last post: by
6 posts views Thread by Jeremy | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.