Member Avatar for colweb

Hi everybody,

I have a strange Firefox related problem (the strange thing is, it WORKS in IE6 & IE7). The problem is this, created a wrapper div with margin-left en right both 5%. Inside the wrapper there are 2 divs, both floating (left and right). The left div width is 240px. The width of the right div is calculated with javascript.
For those who wonder how, look in your javascript manual by;
document.getElementById(divname).offsetWidth and
document.getElementById(divname).style.width

Everything works if the 5% margin turns out to be a round number. But when it is say 68.78px the wrapper still looks like to have a round number of pixels, but firebug tells it has 1237.44px. As soon as this is the case, the right div will always go down under the left div but stays on the right site of the wrapper div. It simply drops down, like it has a top-margin that is the same as the height of the left div. Both divs stay on the same level as the width of the wrapper is a round number of pixels (both in the javascript function and in firebug).

In IE6 and 7 this problem doesn't exist. Both divs always stay at the save level at the top of the wrapper div.:'( Why ?? And why not in Firefox ??

TIA,
Colweb

  • 4 Contributors
  • 8 Replies
  • 201 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by colweb
Member Avatar for colweb

Hi,

I have solved it. If you look here you can see what I have done. The code isn't big, but the upload speed isn't great either :|

This page works always in IE6 & 7 without ever showing a red line anywhere. But in Firefox you sometimes see a red vertical line just right of the orange block. It depends on the window size of your Firefox window.
Without the innercontainer div (please see the source code), it still works in IE6 & 7, but in Firefox it only works when you don't see the vertical red line. As soon as the red line appears the div wrapperright goes down and parks itself still on the right site under the wrapperleft div.
It seems the only way to fix this in Firefox is with this innercontainer div. The html code validates without error, the css part contains IE specific tricks and will not validate. The current colors used are only there so I could see where all the divs are going.

If anybody sees a better way of doing what I did, please let me know. I'm always open to learn more...

greatings,
Colweb

Member Avatar for ingeva

I've never had this problem. If one div is 5% wide, shouldn't the other just be 95%? No need to calculate!

I do something like this in several of my own sites. I also usually size objects in % (and sometimes em) and never in px (except the basic font size).
All my sites resize automatically by just adjusting the font size of <body>, and nearly all objects are sized using em or %.
Very easy, the width of the window is always filled correctly, and if the font is not the right size, just resize the window.

Member Avatar for colweb

Hello ingeva,

Well, the main problem is that some parts needs to have a fixed width. I agree that there is no problem when you use % or em all the time. Mixing % with px that gives the problems and that requires that you calculate the width of some div's. At least, that's how I solved it.

What I didn't count for, was that Firefox starts to behave strange even when you use javascript to get the width of div's that were put there using %. But that is solved by using the div 'innercontainer'. Any other method to get the same result anybody??
In the final version the red div 'outercontainer' will get the same color as the body background, so you will never see a red vertical line.

greatings,
Colweb

Member Avatar for MidiMagic

The problem is that the nesting order of size styles (width, height), and surrounding styles (margin, border, padding) is different with different browsers.

FF puts the surrounding styles OUTSIDE the size styles, where the W3C says they belong.

IE crams the surrounding styles INSIDE the size styles.

The problem you are having is that your code is making the styles add up to more than the width of the available space, once you add in the surrounding styles. When this happens, the div drops down under the others.

Member Avatar for colweb

MidiMagic,

The problem with styles adding to the width of the div is indeed what is happening in Firefox. But I tried to solve this by using wrappers with no border, margin and padding.

When rewriting the code to take in account the border,margin and padding, the whole thing works in Firefox but in IE6 there is space between the divs. To eliminate those spaces between divs, I finally used a bit of javascript to calculate the width of the inner-divs.

I have no doubt that there are other ways to solve this. But so far I haven't found a simple solution. The main problem is the mixing of fixed and relative sizes for the different divs.
So unless someone comes with a better solution, I will stick to a little javascript to get all the divs to behave the way I want it.

Member Avatar for essential

Maybe this would help. Try to use the css hack to fix rendering problem. As we can see to it, that in pre-IE browsers on PC, where by the border and padding are included in the width of an element, as opposed to added on. For example, when specifying the dimensions of a container you might use the following CSS rule:

#box
{ width: 100px;
border: 5px;
padding: 20px
}

This CSS rule would be applied to: <div id="box">...</div> This means that the total width of the box is 150px (100px width + two 5px borders + two 20px paddings) in all browsers except pre-IE 6 versions on PC. In these browsers the total width would be just 100px, with the padding and border widths being incorporated into this width. The box model hackcan be used to fix this, but this can get really messy.
A simple alternative is to use this CSS:

#box
{ width: 150px
} #box div
{ border: 5px;
padding: 20px
}

And the new HTML would be: <div id="box"><div>...</div></div> Perfect! Now the box width will always be 150px, regardless of the browser!

Member Avatar for MidiMagic

You need to nest two divs, one with the surrounding styles, and the other with the size styles. Nest them in the order you want the styles to appear in. Then both browsers will behave the same way.

The previous solution does not work, because the styles have both size and surrounding styles.

Do this:

Styles:

.boxfix {margin: 0; border: none; padding: 0;}
.boxsiz {width: 300px;}
.boxbor {margin: 10px; border: none; padding: 0;}

HTML:

<div>
  <div class="boxbor">
    <div class="boxsiz, boxfix" id="img1">
      <img src="myimage1.gf" alt="my first image" />
    </div>
  </div>
  <div class="boxbor">
    <div class="boxsiz, boxfix" id="img2">
      <img src="myimage2.gf" alt="my second image" />
    </div>
  </div>
</div>

Use the ids to do the javascript settings.

Member Avatar for colweb

The last two solutions both work.... But what everybody seems to overlook is the mixing of fixed and relative sized divs.

I found out that there is no need to use any javascript if all the divs are relative in size (%) or when all the divs are fixed (px). The design for the new site requires the use of a fixed sized div on the left and a fixed sized div on the right. You would think that all browsers would behave the same if the middle div doesn't have any size defined. That is not the case, and that is why I use javascript.
First I calculate the size of the middle div and then set this size in px. Now all browsers seem to understand what I want to do and all the divs come where I want them to be.

So unless somebody comes with a solution that works with this mixed settings I still will use a bit of javascript to get the divs behave.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.