[Last Call] Learn how to a build a cloud-first strategyRegister Now

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

Overfllow in Firefox not working URGENT

Hello all,

     I have this working properly on IE 6 but when I open at Firefox 1.5 it is not showing as it should. Am I doing something wrong?? Is it a FF bug? I should I do? Thanks in advance.

Here is the code
<STYLE>
#test {
  width: 99.6%;
  height: 12%;
  overflow: visible;
  position: relative;
  z-index: 0;
  border: 1px solid #000000;
  background-color: #CCCCCC;
}
</STYLE>

<BODY>

<DIV id="test">
    TEST<BR>
      TEST<BR>
        TEST<BR>
          TEST<BR>
            TEST<BR>
              TEST<BR>
                TEST<BR>
</DIV>

</BODY>

HELP PLEASE!!
0
YVS
Asked:
YVS
  • 6
  • 4
  • 2
  • +3
1 Solution
 
stuartMackCommented:
Firefox isn't good with CSS! I'm sorry but thats just FF.  
0
 
Jakob_ECommented:
Actually it's the other way around... IE is not keeping w3.org standards.
I can't see much of a difference. What doctype are you using ?
Can you post the entire code or make a link to some screenshots

~ Jakob E

0
 
InteractiveMindCommented:
> Firefox isn't good with CSS! I'm sorry but thats just FF.

That couldn't really be further from the truth.
Firefox actually renders your code more accurately than IE does; it's IE with the problems !!


You can fix this problem by removing the 'height' declaration.
0
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.

 
YVSAuthor Commented:
Hello and thanks for helping...

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

If you try the code above you will see that FF doesn't show the text inside the layer i just created. If you change the overflow to auto or hidden you can see that it works properly. Im just wondering wht this is not working :'( maybe something about block/inline elements??Thanks.
0
 
YVSAuthor Commented:
I can't remove the height declaration because I want to make a fake frameset and frames using iframe. I can't use tables because it is a tableless page .. so.. I need some trick to bypass this :( thanks.
0
 
InteractiveMindCommented:
iframes but no tables?

<sarcasm>That makes sense</sarcasm>   :-\
0
 
Jakob_ECommented:
@InteractiveMind *LOL*

Perhaps it's just my FF (1.5.0.3) that got IE (6.0.2900.2180) infected but I can't see much of a difference.
If I reset the page margin and padding and set a line-height of 17px there seems to be only the question
of IE saving space for the scrollbar.

~ Jakob E
0
 
YVSAuthor Commented:
What is inside the iframed page doesn't matter, what matters is that I can't have tables in the main jsp. The difference is: IE the DIV with 12% height expands when I put visible. FF the DIV remain with 12% but the text ovepass the DIV border, in other words, it gets out of the layer.
0
 
GrandSchtroumpfCommented:
> If you try the code above you will see that FF doesn't show the text inside the layer i just created.
I can see the text just fine.

> Perhaps it's just my FF (1.5.0.3) that got IE (6.0.2900.2180) infected but I can't see much of a difference.
Same thing for me...
0
 
YVSAuthor Commented:
Here is what is happening...

|-----------------------------------|      |-----------------------------------|
| Test                                    |      | Test                                    |
|      Test                               |      |      Test                               |
|           Test                          |      |           Test                          |
|                Test                     |      |-------------Test------------------|
|                     Test                |                             Test
|-----------------------------------|
                 IE 6.02                                              Firefox 1.5

Waiting for some tips.. thx
0
 
InteractiveMindCommented:
I have the same prob in FF (1.0.4); if anyone would like to see a screenshot, I'll happily upload one.
0
 
InteractiveMindCommented:
(I'm still not clear why you cannot remove the height declaration though...)
0
 
YVSAuthor Commented:
The reason I cannot remove it is because I must have a minimun height for this layer, and , as IE won't accept min-height (in css) I'm trying to do something else. Any ideas?
0
 
RoonaanCommented:
Use:
height: auto !important;
min-height:12%;
height:12%;

-r-
0
 
YVSAuthor Commented:
LOL Roonaan, exelent!!!!! Thanks a lot... Can you just explain me a bit about this height: auto !important;  please??
0
 
RoonaanCommented:
Internet explorer 6 and lower do not consider the !important keyword, which is valid css.

That browsers therefor takes the last assigned value for height (begin 12%). It does not recognize min-height and max-height.

Firefox however uses the height property as fixed values, because it recognizes min-height and max-height as alternatives. The browser also supports the !important keyword, and therefor knows to use the auto value rather than the 12% for the height. Because you then define a min-height of 12% (which is not recognized by msIE) you get the desired effect in both browsers.

-r-
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 4
  • 2
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now