473,480 Members | 2,157 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

CSS positioning problem with Firefox

3 New Member
Using relative positioning I have not been able to get Firefox to respond to the following:
<div style="position: relative; top: 10%; left: 5%; border: 2px green solid;">

It works in IE.

I have tried this with an image as well. In Firefox left responds as prescribed but I can not get the division nor the image to move down from the top.

Any tips will be appreciated.
Sep 25 '06 #1
4 3678
drhowarddrfine
7,435 Recognized Expert Expert
Need a link or the complete code.

Remember this rule: If it works in IE but not Firefox, IE is wrong so your code has an error.
Sep 27 '06 #2
Marty1963
4 New Member
IE and other browsers read differently .. but if put a doc type statement at the top of your page .. IE will behave better.

The issue is IE. IE reads style sheets in a non-standardized way. Newer versions of IE will conform to CSS standards but older versions render differently specifically any type of box. Firefox, Opera, and Safari will all behave much the same.

In a nutshell, IE adds padding and margins and border to the width you have for that element. All other browsers subtract it so a 100px wide box with 10px margin and 10px padding and 2px border will render a box as 144px in IE in any other browser the box will remain 100px and the margin padding and boder are within in doctype should fix that but not everything

Try this Doc Type and it SHOULD fix your issues:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Sep 27 '06 #3
gstick
3 New Member
I did substitute the doctype declaration per Marty's suggestion.

Below is a simplified version of what I was using without the images. Firefox behaves quite the same as it did with the original.

The Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>PlanningPier Home</title>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="A complete new business creation process involving self-direction">
<meta http-equiv="keywords" content="business planning,business plans,start a business, my own business,market research,financial feasibility study,">

<style type="text/css">
<!--
-->
</style>
</head>

<body>
<div style="position: relative; top: 30%; bottom: 0; left: 10%; right: 0; border: 2px green solid;">
<p>Now is the time for all good men to come to the aid of their party</p>
<p>The quick red fox jumped right over the lazy brown dog.</p>
</div>


</body>

</html>
Sep 27 '06 #4
drhowarddrfine
7,435 Recognized Expert Expert
I added my comment to your other post. New pages have no need for a transitional doctype. Use strict. Better yet, use html strict.
Oct 2 '06 #5

Sign in to post your reply or Sign up for a free account.

Similar topics

17
14352
by: pasdecrap | last post by:
The following code will produce similar results in IE6 and firefox 1.0.4 however the left margin in FF is 4 pixels and in IE it is 5. Can anyone see why this is happening? I can't seem to figure...
4
7794
by: TheCeej | last post by:
I'm sorry to post what is ultimately a myspace problem, but I'm sure I'd still be having this problem with any html/css document, so the answer would more than likely be able to help anyone out. I'm...
8
6722
by: jamesrharper | last post by:
hi everyone i got into the old browser compatability issues because i wanted to make my site centred. now i dont know a great deal about html and css to be quite honest but i found what i needed...
2
16393
by: nino9stars | last post by:
Hello, I have just started messing with absolute positioning on webpages, and it definitely let's you do some creative things. Well, after much searching and help, I got the images I was using...
2
1916
by: TheCruelPanda | last post by:
Hey there. My name is Rowan, and it's been three weeks since I last used tables for an HTML design. Okay, I'm rather new to CSS and I have a big positioning problem here. It might not be a...
3
8952
by: mikewse | last post by:
I have a strange problem where it seems IE is doing the correct layout but Firefox and Safari isn't. I think I'm probably wrong, and there is something in the standards that say behaviour should be...
0
2023
by: slaterino | last post by:
Hi, I am in the process of creating a web site at the following address: http://www.cca-ltd.co.uk/New/en/index.html At the moment when you hover over the navigation links a list appears on the...
3
3597
by: LayneMitch | last post by:
Hello everyone. I'm designing a site for a friend of mine and I'm having a few issues. First off, I'm noticing that there is a difference between the default line- heights of IE and...
3
3478
by: vunet | last post by:
When I use image as a bullet within LI element I have different image positioning results in Firefox and IE6. IE6 puts the image on top and far from left LI's border. Firefox puts it nicely in the...
14
3280
by: Fistro | last post by:
I'm trying to find a design that would allow me to build web pages without having to worry about compatibility issues (not too much, in any case,,,) I've came across this CSS layout technique:...
0
7055
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,...
0
7060
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
7106
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...
1
6760
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...
0
7022
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...
0
5365
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,...
1
4799
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...
0
4501
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...
0
3013
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

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.