[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 284
  • Last Modified:

absolute positioning different in IE and firefox

Hi,

I'm trying to place some DIVs next to eachother using absolute placement. It looks like IE and firefox interpret the positioning differently, is this correct? It looks like there's a one pixel discrepency. Anyway to fix this? I've got php generating the page at the moment like:

for ($i = 0; $i < 10; $i++) {

    for ($j = 0; $j < 10; $j++) {

        ?>
        <div id = "next" style = "posiition:absolute; top: ipx; left: jpx">
        <?php

    }
}

So in IE the boxes will come out perfectly overlapping eachother's edges, but firefox will get some spillage past the borders

Thanks
0
minnirok
Asked:
minnirok
  • 9
  • 6
  • 5
1 Solution
 
JohnModigCommented:
1. Have you any borders, margins or padding specified? Try to specify those ("border: none; margin: 0px; padding: 0px;") and see if it helps. Also try to specify width and height. If you want them to be automatic, use "width: auto;".

2. Are you using any "special" or "new" CSS? There are some CSS that IE is still not getting, like "min-width" for example.

3. What version of IE are you using? Versions prior to 6.0 misinterprets the CSS1 "box model" (it adds padding, margin and border to width and height). Here is the workaround: http://www.tantek.com/CSS/Examples/boxmodelhack.html

4. Also, there is a typo in your code: "posiition" should be "position".

5. If all fails and you still wnat to write CSS that only IE "can see" then use the "star hack". Your code will still validate. Example:
--------------------------

/* for FF, NS and Opera */
#container { min-height: 500px; }

 /* for IE only (a.k.a. the star hack) */
* html #container { height: 500px; }

--------------------------


Regards,
John
0
 
minnirokAuthor Commented:
Here I wrote a small bit that exhibits the behaviour, please copy and paste it into an html file to see if you get the same results as me. In IE, you'll see a 1px gap between divs, but in firefox there is no gap. I tried setting margins etc to 0. The border I left on at 1px so we can see the box. Please let me know what you find, thanks!:


<html>
<body>


<div id = "div1" style = "width:100; height:100; border:1px solid black; position:absolute; background-color:white; top:100px; left:100px; margin:0px; padding:0px;"></div>

<div id = "div2" style = "width:100; height:100; border:1px solid black; position:absolute; background-color:white; top:100px; left:201px; margin:0px; padding:0px;"></div>


</body>
</html>

0
 
wlfsCommented:
The problem is not about positioning but about the WIDTH of the divs. The positions of the top left corners of both divs are exactly the same in both browsers.
Firefox makes the *inner* width (without borders) 100px, while IE makes the *outer* width (including borders) 100px. Thus, the actutal width of the div including the borders becomes 102px in FF, which makes them nicely overlap. In IE the total width is 100px only, which gives a gap of 1px between the divs.

Try the following code, which doesn't use borders but background colors to visualize the divs. It looks exactly the same in both browsers, showing a correct gap of 1px. If you wander about the gap: the left div ranges from horiz. pixel 100 to 199 (width of 100). The second ranges from pixel 201 to 300. This leaves pixel 200 as a gap.
<div id = "div1" style = "width:100; height:100; border:0px none black; position:absolute; background-color:white; top:100px; left:100px; margin:0px; padding:0px; background-color: red;"></div>
<div id = "div2" style = "width:100; height:100; border:0px none black; position:absolute; background-color:white; top:100px; left:201px; margin:0px; padding:0px; background-color: blue;"></div>

If you want divs *with* border that behave the same in both browsers, you have to do the following workaround: Specify an outer div, where you specify the border and positioning but no size. Inside this, place an inner div, where you specify the size but no borders or positioning. This way, the inner width is specified by the inner div tag and the outer width is always inner width + border, in all browsers.
<div id = "div1_outer" style = "border:1px solid black; position:absolute; top:100px; left:100px; margin:0px; padding:0px;">
  <div id = "div1_inner" style = "width:100; height:100; background-color:white; margin:0px;"></div>
</div>
<div id = "div2_outer" style = "border:1px solid black; position:absolute; top:100px; left:201px; margin:0px; padding:0px;">
  <div id = "div2_inner" style = "width:100; height:100; background-color:white; margin:0px;"></div>
</div>
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
wlfsCommented:
IMHO, the reason for the discrepancy is a major flaw in the CSS specification. It simply doesn't state whether the width property should refer to the inner or the outer widht of an element (same with height). This is up to the browser.
Other experts, please correct me if I missed the respective part of the CSS specification.
0
 
JohnModigCommented:
>> Other experts, please correct me if I missed the respective part of the CSS specification.

Well, sice you asked for it :)
http://www.w3.org/TR/CSS2/box.htm

Width of the div should always be without the borders. This is clearly stated in the CSS specifications by W3C. However, that does not mean that all browser will interpret it right, though. Like I said before IE prior to 6.0 had major problems with this. Please see my previous post for workarounds.

Back to topic. Minnirok, I still do not know what version of IE you are refering to. Please post the version and I see what I can do to help. Also are you using a proper DOCTYPE so the browser knows how to interpret your code? More about doctypes here:
http://www.alistapart.com/articles/doctype/
0
 
minnirokAuthor Commented:
Ahh ok I see.

@John
Sorry I failed to mention browser version etc - I am using IE 6, firefox 1.5.0.1. I am not using any DOCTYPE items - is that something I should be defining?

@wlfs
Your second example would work, it's just annoying that we have to spend more resources with creating an extra div inside each because they interpret the meaning differently. Right now I have about 40 of these divs, would putting another div in each of these (totaling 80 divs) start straining resources - or does it not even really matter?

Thanks
0
 
wlfsCommented:
Thanks JohnModig for the info.
At first glance I still didn't find it, but due to your post I kept looking for it and succeeded finally :)
0
 
wlfsCommented:
Well, you are very much correct minnirok that the extra div is quite annoying. However, this is the only solution I have worked out for this problem (long before your post) which works in all current browsers. Of course, other experts might be smarter than me :)

As far as resources are concerned, none of my pages showed any loss of performance due to the extra divs. If we are talking about 40 of these divs, don't worry about resources. IMHO, the extra load is completely negligible.
0
 
JohnModigCommented:
>> I am not using any DOCTYPE items - is that something I should be defining?

OH, definately! If you don't then there is a possibility that your site doesn’t look or work as it should in the latest browsers. DOCTYPE (short for “document type declaration”) informs the validator which version of (X)HTML you’re using, and must appear at the very top of every web page. DOCTYPES are also essential to the proper rendering and functioning of web documents in compliant browsers like Mozilla, IE5/Mac, and IE6/Win. Please read this article carefully and you will understand:
http://www.alistapart.com/articles/doctype/
0
 
minnirokAuthor Commented:
Hmm ok I read the page on the doctypes, a bit confusing, but I included the following at the head of the html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head></head>
    <body><body>
</html>

Is that the correct usage? Including this didn't solve the spacing problem, I guess each browser just really does have its own interpretation, sadly!
I increased the points, can someone just verify the doctype usage?

Thanks
0
 
JohnModigCommented:
Your doctype is almost correct, but not quiet. You should inklude a link to the scheme, preferbly. This is what it should look like for HTML transitional:

-------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head></head>
<body>
</body>
</html>
0
 
JohnModigCommented:
Btw, it sounds like you do not check your pages for validation. HTML validation allows authors to check their HTML syntax. It also checks that your HTML are in line with a formal Standard, such as those published by the Worldwide Web Consortium (W3C). Valid HTML is less likely to cause problems with different browsers and more likely to survive the next browser release.  Try to validate your code, by posting it on this page (just the HTML, not the PHP):

http://validator.w3.org/

If there are any errors, try to correct them or ask here at EE how to solve them :)

John
0
 
minnirokAuthor Commented:
Hi John,

Thanks for your help. I tried pasting:

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">

into that code sample I have, so now it exactly looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
</head>

<html>

<body>
<div id = "div1" style = "width:100; height:100; border:1px solid black; position:absolute; background-color:white; top:100px; left:100px; margin:0px; padding:0px;"></div>

<div id = "div2" style = "width:100; height:100; border:1px solid black; position:absolute; background-color:white; top:100px; left:201px; margin:0px; padding:0px;"></div>

</body>
</html>

but now instead of the two divs as boxes being rendered, I see two dots in their place! If I remove the hyperlink line, it renders as expected. Is this just because I put the link on a separate line, should it all be on one line?

Thanks


0
 
JohnModigCommented:
I think I need to see some of your code here. Cause if your site is coded right, it is definitely not the borders that messes things up. IE 6.0 interprets those correctly. Consider the following simple code:
-----------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Box test</title>
<style type="text/css" title="currentStyle" media="all">
#box1 {
width: 10px;
height: 10px;
background-color: red;
border: 1px solid #000;
}
#box2 {
width: 10px;
height: 10px;
background-color: red;
border: none;
}
</style>
</head>
<body>

<div id="box1"><!-- --></div>

<div id="box2"><!-- --></div>

</body>
</html>

-----------------------------
The page above looks excactly the same in IE 6.0 and FF 1.5. The first box is 2px wider (1px border on all sides) than the second (that has no border) in both browsers. So no, it is not the border that is your problem :)

John
0
 
JohnModigCommented:
Oh, posting at the same time :D

Anyway, I saw your code. It is missing the increment on the width and height CSS.

"width:100;"

100 what? 100cm? 100em? 100pt? No, but probably 100px? So change to:

"width: 100px;"

Same goes for the height.
0
 
JohnModigCommented:
...and that now looks the same in both IE 6.0 and FF 1.5.
0
 
wlfsCommented:
Hi JohnModig,

thanks for your explanation. I learned an essential new thing, that the link to the scheme is very important. I didn't include that into my doctype declarations.
Of course, you are right and it's not the borders! :)
Now I also got it all working the same with one div.

Because you helped me a lot, I'd like to award you some points. To this end, I posted a question just now, awaiting a short answer from you in order to collect your points:
http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_21801598.html

@minnirok: Sorry for misleading you here. I should have left the field for JohnModig. I will the next time :)
0
 
minnirokAuthor Commented:
Ahh my days of agony are at last at an end. Once I put the 'px' in there as well as the doctype header, it is working perfectly.Thanks so much for your patience with this.
0
 
minnirokAuthor Commented:
@wlfs

No problem, this stuff is most annoying! I wish we had a compiler.
0
 
JohnModigCommented:
Well people, Im glad that we could sort this one out. In a way, I wish that there were no needs for us to fight so hard to make websites look the same in all browsers. But over the last two years the browsers have actually made real progress in CSS and web standards interpretation. I have learned that as long as you follow these steps your website will most likely render the same way in all modern browsers:

1. Keep your code valid using W3Cs validator service, http://validator.w3.org/
2. Staying away from using table for layout, http://phrogz.net/CSS/WhyTablesAreBadForLayout.html
3. Following web standards set by W3C, http://www.webstandards.org/learn/faq/
4. Making a good HTML structure based on logic, order, and using semantically correct markup, http://brainstormsandraves.com/articles/semantics/structure/
5. Separating content from presentation using CSS, http://www.alistapart.com/articles/separationdilemma

...and of course to use the proper DOCTYPE. Anyway, thank you both for the grade and nice feedback. Keep up the good work!

Regards,
John
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 9
  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now