473,324 Members | 2,501 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

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 1453
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: George Hester | last post by:
At the time this suggestion was made I didn't have the wherewithall to even attempt it. But over time I learned enough to make a stab at it. Let just say the foating DIV had to provide the same...
3
by: Andrew Fedoniouk | last post by:
<CITE src="http://www.w3.org/TR/html401/present/graphics.html#h-15.1.3"> 15.1.3 Floating objects Images and objects may appear directly "in-line" or may be floated to one side of the page,...
18
by: day | last post by:
I know I've seen this issue described before, but I can't find it, or the solution now that I need it. I have some css-specified floating divs that contain images or text. The text divs have a...
31
by: JS | last post by:
We have the same floating point intensive C++ program that runs on Windows on Intel chip and on Sun Solaris on SPARC chips. The program reads the exactly the same input files on the two platforms....
6
by: Simon Wigzell | last post by:
How do a create a floating div that will always stay in the same place relative to the browser window as the user scrolls the main page? I guess an adaptation of one of these floating menus that...
3
by: Oliver Bryant | last post by:
I just finished developing a javascipt component allowing floating captions to appear over HTML elements. If anyone wants to check it out you can see specs and download it from...
13
by: Dylan Nicholson | last post by:
I just posted regarding a possible floating point error (not sure where), and have since discovered that: float f = 5.15002; double d = 5.15002; if (float(d) < f) puts("huh 1?"); float f2 =...
3
by: prouleau001 | last post by:
Hi all, While trying to use simplejson under Python 2.4.3 I have been investigating the handling of special floating point values and found that both Python 2.4 and 2.5 return False when...
6
by: Jeremy | last post by:
I've got a floating div which becomes visible when a link is clicked. I want the div to be hidden when the user clicks anywhere on the page except for whithin the div. What is the best way to do...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.