473,856 Members | 1,631 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">
<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 " />
<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
<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>

My css is:


font-family:"Century Gothic";
margin:20px 0 0 0;
#About ul
margin:120px 80px 0 80px;
border:solid 1px black;

#About ul .init

#About li
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!!!... ..


PS I realise the content is not much to look at - I'll deal with that

Feb 1 '06 #1
2 1481
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#" />

Anyway, the relevant parts are:
<h1>sara noŽl photography</h1>
<ul><li><span class="init">S</span>ara NoŽl is a h1 {
margin:20px 0 0 0;
ul {
margin:120px 80px 0 80px;
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";
text-align: right;
margin:20px 0 0 0;


Feb 1 '06 #2

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

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...
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,
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...
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. ...
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!
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.
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?");
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...
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.
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...
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
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...
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...
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...
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
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
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.