By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,883 Members | 2,037 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,883 IT Pros & Developers. It's quick & easy.

CSS positioning problem with Firefox

P: 3
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
Share this Question
Share on Google+
4 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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
P: 4
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

P: 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">
<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
Expert 5K+
P: 7,435
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.