Back To Website Design Forum

CSS problems; newly created site does not work in Firefox

  • cadmiumgreen
  • Born
  • Born
  • No Avatar
  • Joined: Sep 28, 2004
  • Posts: 1
  • Status: Offline

Post September 28th, 2004, 1:49 am

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

Post September 28th, 2004, 1:49 am

  • Mr. Wiggles
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Jul 05, 2004
  • Posts: 160
  • Loc: Brizzle
  • Status: Offline

Post September 28th, 2004, 5:53 am

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
  • No Avatar
  • Joined: Apr 25, 2004
  • Posts: 1477
  • Loc: Washington DC
  • Status: Offline

Post September 28th, 2004, 8:49 am

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!

Page 1 of 1

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 161 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.