Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Absolute Position in Firefox Not Correct

Posted on 2008-10-30
9
581 Views
Last Modified: 2012-05-05
Hi all:
I am a newbe to CSS, and am trying to follow along in a "Dummies" book trying to learn.  I wrote the following simple code to make two divisions on my browser.  It works correctly in IE7 on the Windows side of my Mac (via Parralels) - the graphic is positioned relatively and there is a 10px gap between the sidebar and the maintext divs.  However, the maintext does not separate by 10px, nor is the graphic "relative" to the maintext on Firefox using the OSX side of my mac.

I've attached a picture of my browser window using Firefox.

Any ideas?
<html>
 
<head>
 
<style >
 
div.sidebar {position: absolute; background-color: cornflowerblue; top: 0; left: 0; width: 100px;  height: 75%; padding-left: 6px; padding-right: 4px; padding-top: 6px; font-size: 16pt;}
 
div.maintext {position: absolute;  background-color: darkkhaki; top: 0; left: 110px; height: 75%;
 
width: 75%;}
 
img.relative {position: relative; left = 35%; top = 20%}
 
</style>
 
</head>
 
<body>
 
<div class="sidebar"> HERE is a sidebar. You can fill it with links, text, whatever... </div>
 
<div class="maintext">   
 
<IMG class="relative" height="351" width="300" src="giantapple.png">
 
</div>
 
</body>
 
</html>

Open in new window

Picture-1.png
0
Comment
Question by:sully1958
  • 5
  • 3
9 Comments
 

Author Comment

by:sully1958
ID: 22846343
I forgot to add a snapshot of the same screen in IE7 on the Parallels side of my Mac.  Here it is.
Picture-2.png
0
 

Author Comment

by:sully1958
ID: 22846350
By the way, I just downloaded Firefox for Windows to my Windows side and tried to display the page.  It looks the same as the Firefox on my Mac.  So this seems to be a problem with Firefox as opposed to a problem with the operating systems.
0
 
LVL 42

Expert Comment

by:David S.
ID: 22846590
Your code has errors. Apparently IE guessed correctly what you meant, but how can you expect Firefox to guess the same thing?

You used the "=" sign instead of the ":" in this rule:

img.relative {position: relative; left = 35%; top = 20%}

change it to

img.relative {position: relative; left: 35%; top: 20%}

Also your document lacks a doctype, so IE7 will render it in quirks mode, which is not a good thing.

http://dev.opera.com/articles/view/14-choosing-the-right-doctype-for-your/

0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:sully1958
ID: 22846664
Thanks Kravimir.  That fixed the relative positioning of the graphic.  I also added a doctype, However, it is still not positioning the maintext 110px from the left, and as you can see from the picture, it is not filling 75% of the screen with the maintext like it does with the sidebar (they are not even on the bottom like they are in IE7.  Any thoughts on this?
0
 
LVL 42

Expert Comment

by:David S.
ID: 22846704
> it is still not positioning the maintext 110px from the left

Please post your updated code.

> it is not filling 75% of the screen with the maintext like it does with the sidebar (they are not even on the bottom like they are in IE7.

Their bottoms won't be even because you put some top padding on one but not the other.

I recommend you read up on how the box models work: http://www.dynamicsitesolutions.com/css/box-models/
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22846880
div.maintext {position: absolute;  background-color: darkkhaki; top: 0; left: 110px; height: 75%;

try this --

div.maintext {position: absolute;  top: 0px; left: 110px; height: 75%; background-color: darkkhaki; }

0
 

Author Comment

by:sully1958
ID: 22851102
Thanks Kravimir, by adding padding to the maintext, the bottoms now line up.  However, the maintext is still not aligned 110px from the left, but rather right up against the sidebar @ 100px.  I've attached the code as it stands now, as well as a screen shot of the page in Firefox.

scrathcyboy:  your revised line did not help the solution.  Sorry.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
 
<head>
 
<style >
 
div.sidebar {position: absolute; background-color: cornflowerblue; top: 0; left: 0; width: 100px;  height: 75%; padding-left: 6px; padding-right: 4px; padding-top: 6px; font-size: 16pt;}
 
div.maintext {position: absolute;  background-color: darkkhaki; top: 0; left: 110px; height: 75%;
 
width: 75%; padding-left: 6px; padding right: 4px; padding-top: 6px;}
 
img.relative {position: relative; left : 35%; top : 20%}
 
</style>
 
</head>
 
<body>
 
<div class="sidebar"> HERE is a sidebar. You can fill it with links, text, whatever... </div>
 
<div class="maintext">   
 
<IMG class="relative" height="351" width="300" src="giantapple.png">
 
</div>
 
</body>
 
</html>

Open in new window

Picture-3.png
0
 

Author Comment

by:sully1958
ID: 22851183
The problem seems to be associated with the "padding-right" command for the sidebar.  If I take that command away, the 5px space between the two columns shows up.  Interesting how IE7 appears to reduce the field with the padding command, where Firefox, Safari and Opera all seem to add the padding to the field size (in Firefox, Safari and Opera, the padding command appears to increase the size of the column rather than reduce the usable space within the fixed column width).
0
 
LVL 42

Accepted Solution

by:
David S. earned 250 total points
ID: 22852806
Yes, the left and right padding add to the total width of the sidebar, so its total width is 110px. Read up on the box models like I suggested earlier for more information.

The screenshot taken in IE7 was of IE7 in quirks mode, which among other things means it uses the non-CSS2 box model.
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
SharePoint 2013 Searchbox Branding 11 113
How do I set diff properties in a table row? 3 27
Create CSS Animation for Page Transitions 4 38
tiny glitch in my main slider 3 39
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question