 |  |  |  |  |  |  |  |
Firefox floating div problem
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved |
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;
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
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 andEverything 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).
document.getElementById(divname).style.width
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
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
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
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.
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.
Last edited by ingeva; Nov 5th, 2008 at 9:35 am.
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
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
•
•
Join Date: Jan 2007
Posts: 3,203
Reputation: 
Solved Threads: 165
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.
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.
Last edited by MidiMagic; Nov 9th, 2008 at 11:47 pm.
Daylight-saving time uses more gasoline
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.
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.
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:
This CSS rule would be applied to:
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:
And the new HTML would be:
#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
}<div id="box"><div>...</div></div> Perfect! Now the box width will always be 150px, regardless of the browser! •
•
Join Date: Jan 2007
Posts: 3,203
Reputation:
Solved Threads: 165
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:
HTML:
Use the ids to do the javascript settings.
The previous solution does not work, because the styles have both size and surrounding styles.
Do this:
Styles:
HTML and CSS Syntax (Toggle Plain Text)
HTML:
HTML and CSS Syntax (Toggle Plain Text)
Use the ids to do the javascript settings.
Daylight-saving time uses more gasoline
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.
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.
 |
Similar Threads
- links don't work in IE7 for top half of the page (HTML and CSS)
- Firefox floating iffy on width. (HTML and CSS)
- floating problem (HTML and CSS)
- CSS browser compatibility ??? (HTML and CSS)
- CSS compatibility and Menu appearance ??? (HTML and CSS)
- Pesky IE Hickey (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: help for compliance css for ie7 and firefox3
- Next Thread: bottom 20 px from "canvas" NOT screen - possible ?
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Related Forum Features
Latest HTML and CSS Posts
- Today's Posts
- Unanswered Threads
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
