473,721 Members | 2,030 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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.dt d">
<html>
<head>
<title>About</title>
<meta name="GENERATOR " content="Micros oft Visual Studio 7.0" />
<meta name="CODE_LANG UAGE" content="C#" />
<meta name="vs_defaul tClientScript" content="JavaSc ript" />
<meta name="vs_target Schema"
content="http://schemas.microso ft.com/intellisense/ie5" />
<link href="http://localhost/Sara/Styles.css" type="text/css"
rel="stylesheet " />
</head>
<body>
<form name="About" method="post" action="About.a spx" id="About">
<input type="hidden" name="__VIEWSTA TE"
value="dDwxMTQ3 NDM2NTQ2Ozs+qL7 TAyNLMxV8vQ8zrE 4ssxn5wEs=" />
<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 1472
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_LANG UAGE" 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
1699
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 advantages as a chromeless window else it really wouldn''t help. You see the idea is that the chromeless window forces a client to make a choice. It cannot be closed until a choice is made. If the user decides not to allow the chromeless window to...
3
3898
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, temporarily altering the margins of text that may flow on either side of the object. </CITE> What does it mean "text" and "margins of text" here? Can I describe text as sequence of words taken from consequent paragraphs,
18
5717
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 background color and text color that differ from the rest of the page, and I'd like them to be positioned from the right edge of the rightmost image div, to the right edge of the browser window. In other words, if the browser window is 800 pixels...
31
3674
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. However, they generate slightly different results for floating point numbers. Are they really supposed to generate exactly the same results? I guess so because both platforms are supposed to be IEEE floating point standard (754?) compliant. ...
6
26066
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 always stay in view would work but I just need the few lines of code to keep it positioned a certain x and y pix location from the window top left corner... Thanks!
3
9247
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 http://boxover.swazz.org. There is a demo there as well.
13
2923
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 = float(d); if (f2 < f) puts("huh 2?");
3
1450
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 comparing a NaN with itself. Although surprising, I imagine it could also be correct since NaN is not a number. But is it correct? Notice the result of comparing c with itself in the following Python 2.5 session (it works the same on Python...
6
2525
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 this? Really, I only need to support ie6+ but cross browser is always nice.
0
8847
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, weíll explore What is ONU, What Is Router, ONU & Routerís main usage, and What is the difference between ONU and Router. Letís take a closer look ! Part I. Meaning of...
0
9225
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9137
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9071
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8013
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development projectóplanning, coding, testing, and deploymentówithout human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6675
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Duprť who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4758
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3197
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2581
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.