CSS problems; newly created site does not work in Firefox

  • cadmiumgreen
  • Born
  • Born
  • cadmiumgreen
  • Posts: 1

Post 3+ Months Ago

:x
Hello forum,
I'm a newbie at web design and i just recently created a new website for a local band.

Now, my problem...i created this site ( http://www.creepshowlive.com ) , it looks alright in IE but looks like crap in Firefox!

I read a thread on here (http://www.ozzu.com/sutra66737.html#66737), and says that all i needed was to insert a CSS definition in my CSS file such as...

Code: [ Select ]
DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}


...but it still doesn't work!!

i can't think of anything else to correct the problem. i seriously need help.
my CSS file is on the bottom...


sincerely,
cadmiumgreen


Code: [ Select ]
BODY {background-color:#131313; background-image:url(../img/bodybg.jpg); background-repeat:repeat-x; margin:-15px -10px 40px -10px;}


#container {height:100%; text-align:center;}
#content {width:670px; text-align:left; margin-top:40px; border:1px solid #939393; background-image:url(../img/center00_01.jpg);}
#topbar {background-color:#000; height:10px; font-size:10px;}
#header {height:110px;}
#center {height:500px; padding:5px 5px 15px 5px;} /*color from content*/
#canvas {height:100%; background-color:#132435;}

.spcrcol {float:left; width:1px; height:100%; background-color:#F7F7F7; font-size:1px;}

#c1 {float:left; height:100%; width:360px; margin-right:10px;}
    .c1pane { margin-bottom:10px;}
    .c1header {height:25px; background-color:#454645; background-image:url(../img/pane-header00_01.jpg); padding-top:5px;
    padding-left:5px;}
    .c1body {height:100px; background-color:#000; padding:10px;}
#c2 {float:left; height:100%; width:180px; margin-right:5px;}
    .c2pane {margin-bottom:10px;}
    .c2header {height:25px; background-color:#454645; background-image:url(../img/pane-header00_01.jpg); padding-top:5px;
    padding-left:5px;}
    .c2body {height:100px; background-color:#000; padding:10px;}
#c3 {float:left; height:100%; width:100px; padding:5px;}
    .c3pane {margin-bottom:8px;}
    .c3header {height:14px; font-size:14px; padding-left:3px;}
    .c3body {height:0px; padding:3px;}
    
    
#c1-big {float:left; height:100%; width:550px; margin-right:5px;}
    .c1-bigpane {margin-bottom:10px;}
    .c1-bigheader {height:25px; background-color:#454645; background-image:url(../img/pane-header00_01.jpg); padding-top:5px;
    padding-left:5px;}
    .c1-bigbody {height:460px; padding:10px; background-color:#000;}
    

#footer {height:30px; padding:0 10px 10px 10px;}
#footermenu {height:20px; background-color:#000; padding:5px; border-left:3px solid #464646;}
.footermenu {font-family:"Verdana, Arial, Helvetica, Sans-serif"; font-size:10px; color:#fff; font-weight:bold;}
a.footermenu:link {color:#FFEA00; text-decoration:none;}
a.footermenu:visited {color:#FFEA00; text-decoration:none;}
a.footermenu:hover {color:#fff; text-decoration:underline;}
a.footermenu:active {color:#FFEA00; text-decoration:none;}

p {font-family:"Verdana, Arial, Helvetica, Sans-serif"; font-size:11px; color:#fff;}
.darktext {font-family:"Verdana, Arial, Helvetica, Sans-serif"; font-size:11px; color:#000;}

.bios-text {font-family:"Verdana, Arial, Helvetica, Sans-serif"; font-size:11px; color:#fff;}

a { font-family:"Verdana, Arial, Helvetica, Sans-serif"; text-decoration:none; color:#fff;}
.underline {font-family:"Verdana, Arial, Helvetica, Sans-serif"; text-decoration:underline; color:#F0F0F0; font-size:11px;}


.more {float:right; padding:2px 5px 3px 0; font-size:10px; font-weight:bold; color:#FFCC00; text-decoration:underline;}
.newstitle {font-size:17px; font-family:"Tahoma, Helvetica, Sans-Serif"; font-weight:bold; color:#000;}

.pane-header {float:left; font-family:"Verdana, Arial, Helvetica, Sans-serif"; font-size:11px; color:#fff; font-weight:bold;}
a.pane-header:link {color:#FFEA00; text-decoration:none;}
a.pane-header:visited {color:#FFEA00; text-decoration:none;}
a.pane-header:hover {color:#fff; text-decoration:underline;}
a.pane-header:active {color:#FFEA00; text-decoration:none;}

.bigpane-header {font-family:"Verdana, Arial, Helvetica, Sans-serif"; font-size:12px; color:#FFF000; font-weight:bold;}


.menu {font-family:"Verdana, Arial, Helvetica, Sans-serif"; font-size:11px; color:#fff;}
a.menu:link {color:#fff000; text-decoration:none;}
a.menu:visited {color:#fff000; text-decoration:none;}
a.menu:hover {color:#fff; text-decoration:underline;}
a.menu:active {color:#fff000; text-decoration:none;}

img {border:none;}
  1. BODY {background-color:#131313; background-image:url(../img/bodybg.jpg); background-repeat:repeat-x; margin:-15px -10px 40px -10px;}
  2. #container {height:100%; text-align:center;}
  3. #content {width:670px; text-align:left; margin-top:40px; border:1px solid #939393; background-image:url(../img/center00_01.jpg);}
  4. #topbar {background-color:#000; height:10px; font-size:10px;}
  5. #header {height:110px;}
  6. #center {height:500px; padding:5px 5px 15px 5px;} /*color from content*/
  7. #canvas {height:100%; background-color:#132435;}
  8. .spcrcol {float:left; width:1px; height:100%; background-color:#F7F7F7; font-size:1px;}
  9. #c1 {float:left; height:100%; width:360px; margin-right:10px;}
  10.     .c1pane { margin-bottom:10px;}
  11.     .c1header {height:25px; background-color:#454645; background-image:url(../img/pane-header00_01.jpg); padding-top:5px;
  12.     padding-left:5px;}
  13.     .c1body {height:100px; background-color:#000; padding:10px;}
  14. #c2 {float:left; height:100%; width:180px; margin-right:5px;}
  15.     .c2pane {margin-bottom:10px;}
  16.     .c2header {height:25px; background-color:#454645; background-image:url(../img/pane-header00_01.jpg); padding-top:5px;
  17.     padding-left:5px;}
  18.     .c2body {height:100px; background-color:#000; padding:10px;}
  19. #c3 {float:left; height:100%; width:100px; padding:5px;}
  20.     .c3pane {margin-bottom:8px;}
  21.     .c3header {height:14px; font-size:14px; padding-left:3px;}
  22.     .c3body {height:0px; padding:3px;}
  23.     
  24.     
  25. #c1-big {float:left; height:100%; width:550px; margin-right:5px;}
  26.     .c1-bigpane {margin-bottom:10px;}
  27.     .c1-bigheader {height:25px; background-color:#454645; background-image:url(../img/pane-header00_01.jpg); padding-top:5px;
  28.     padding-left:5px;}
  29.     .c1-bigbody {height:460px; padding:10px; background-color:#000;}
  30.     
  31. #footer {height:30px; padding:0 10px 10px 10px;}
  32. #footermenu {height:20px; background-color:#000; padding:5px; border-left:3px solid #464646;}
  33. .footermenu {font-family:"Verdana, Arial, Helvetica, Sans-serif"; font-size:10px; color:#fff; font-weight:bold;}
  34. a.footermenu:link {color:#FFEA00; text-decoration:none;}
  35. a.footermenu:visited {color:#FFEA00; text-decoration:none;}
  36. a.footermenu:hover {color:#fff; text-decoration:underline;}
  37. a.footermenu:active {color:#FFEA00; text-decoration:none;}
  38. p {font-family:"Verdana, Arial, Helvetica, Sans-serif"; font-size:11px; color:#fff;}
  39. .darktext {font-family:"Verdana, Arial, Helvetica, Sans-serif"; font-size:11px; color:#000;}
  40. .bios-text {font-family:"Verdana, Arial, Helvetica, Sans-serif"; font-size:11px; color:#fff;}
  41. a { font-family:"Verdana, Arial, Helvetica, Sans-serif"; text-decoration:none; color:#fff;}
  42. .underline {font-family:"Verdana, Arial, Helvetica, Sans-serif"; text-decoration:underline; color:#F0F0F0; font-size:11px;}
  43. .more {float:right; padding:2px 5px 3px 0; font-size:10px; font-weight:bold; color:#FFCC00; text-decoration:underline;}
  44. .newstitle {font-size:17px; font-family:"Tahoma, Helvetica, Sans-Serif"; font-weight:bold; color:#000;}
  45. .pane-header {float:left; font-family:"Verdana, Arial, Helvetica, Sans-serif"; font-size:11px; color:#fff; font-weight:bold;}
  46. a.pane-header:link {color:#FFEA00; text-decoration:none;}
  47. a.pane-header:visited {color:#FFEA00; text-decoration:none;}
  48. a.pane-header:hover {color:#fff; text-decoration:underline;}
  49. a.pane-header:active {color:#FFEA00; text-decoration:none;}
  50. .bigpane-header {font-family:"Verdana, Arial, Helvetica, Sans-serif"; font-size:12px; color:#FFF000; font-weight:bold;}
  51. .menu {font-family:"Verdana, Arial, Helvetica, Sans-serif"; font-size:11px; color:#fff;}
  52. a.menu:link {color:#fff000; text-decoration:none;}
  53. a.menu:visited {color:#fff000; text-decoration:none;}
  54. a.menu:hover {color:#fff; text-decoration:underline;}
  55. a.menu:active {color:#fff000; text-decoration:none;}
  56. img {border:none;}
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Mr. Wiggles
  • Graduate
  • Graduate
  • Mr. Wiggles
  • Posts: 160
  • Loc: Brizzle

Post 3+ Months Ago

You will need to remove all the border, padding and margins from the divs, and just put them in the p tags. This is because i.e. displays these inside the div, and firefox outside the div.
You may have to use posiiton: absolute to position the boxes and use top and left classes to position them. Hoep this helps.
  • Truce
  • Guru
  • Guru
  • Truce
  • Posts: 1477
  • Loc: Washington DC

Post 3+ Months Ago

The only problem is that you set the height on your elements and the text flows past them. Regardless of the content, Mozilla makes them the height specified! Remove the height attributes and that should fix it!

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 88 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.