Hello all,
I'm still relatively new to CSS, but after lots of Stack Overflow reading, I have figured out how to add "headers" to a panel. Yay, go me. But the problem I'm running into is that one of my panels in particular won't render properly in Firefox. I've been doing all development work in Chrome, and I just now noticed this issue. The weird part is, I'm able to add my "header" (might be better to call it a div wrapper?) to other panels and they look fine - it's just 1 panel that is giving me issues I can't figure out why. To see what I mean, look at http://www.mobiuspc.com in both Firefox and Chrome. The difficult panel in question is title "System Construction Area" - the teal colored border in Firefox sprays itself everywhere, whereas in Chrome it displays properly.
Here is the CSS to the difficult panel:
.dropareaparent
{
height:528px;
width:690px;
margin-left:332px;
margin-top:-540px;
background-color:teal;
text-align:center;
color:White;
}
.droparea
{
height:500px;
width:680px;
margin-left:2px;
padding:3px;
color:Black;
background-color:White;
text-align:left;
float:left;
}
Here is the CSS to a different panel that is working great in both browsers:
.primarystatdivparent
{
height:428px;
width:266px;
margin-top:-530px;
margin-left:1045px;
background-color:teal;
text-align:center;
color:White;
}
.primarystatdiv
{
height:400px;
width:256px;
margin-left:2px;
padding:3px;
color:Black;
background-color:White;
text-align:left;
}
Other than my absolute positioning (still learning how to float things), to me the CSS between the problematic panel and the perfect panel appear to be the same?
For reference, IE looks fine as well (other than slow Javascript execution).