469,951 Members | 2,727 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

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

CSS positioning problem with Firefox

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 3599
7,435 Expert 4TB
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
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
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">
<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">

<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>


Sep 27 '06 #4
7,435 Expert 4TB
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

Post your reply

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

Similar topics

17 posts views Thread by pasdecrap | last post: by
2 posts views Thread by TheCruelPanda | last post: by
reply views Thread by slaterino | last post: by
3 posts views Thread by LayneMitch | last post: by
3 posts views Thread by vunet | last post: by
14 posts views Thread by Fistro | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.