467,910 Members | 1,798 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,910 developers. It's quick & easy.

firefox problem with div and css

hey all -

having some trouble redoing my old website. using a css file and working with div layers to arrange things in different ways. in the end itll be a place for my art/music/whatever else.
the problem im running up against is mozilla firefox - my main browser - being unable to properly read and/or display my div layers. ie7 reads them fine, whether viewing them from file or online, but firefox cant seem to load them right.
i took two screens to show you what i mean.

this is ie7 displaying it correctly:



and this is firefox doing its thing:



here is the <head> section of my page:

Expand|Select|Wrap|Line Numbers
  1. <head>
  2. <title>16bitoctober</title>
  3. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  4. <style type="text/css" media="all"> 
  5.     @import "bw.css"; 
  6. </style>
  7. </head>
if anyone can help me fix this, i would greatly appreciate it.
thanks for your time,

ryan
Apr 10 '07 #1
  • viewed: 5930
Share:
8 Replies
could you post your css
cheer
philleep
Apr 10 '07 #2
Expand|Select|Wrap|Line Numbers
  1. html
  2.     {
  3.     overflow-x: auto;
  4.     }
  5.  
  6. body
  7.     {
  8.     background: #000000;
  9.     color: #FFFFFF;
  10.     font-family: Tahoma, Verdana, Geneva, sans-serif;
  11.     font-size: 10px;
  12.         scrollbar-face-color: #000000;
  13.         scrollbar-highlight-color: #000000;
  14.         scrollbar-3dlight-color: FFFFFF;
  15.         scrollbar-darkshadow-color: FFFFFF;
  16.         scrollbar-shadow-color: #000000;
  17.         scrollbar-arrow-color: #FFFFFF;
  18.         scrollbar-track-color: #000000;
  19.     margin: 10px;
  20.     }
  21.  
  22. textarea, input, select, option
  23.         {
  24.         background: #000000;
  25.         color: #FFFFFF;
  26.         font-size: 8px;
  27.         font-family: Verdana, sans-serif;
  28.         }
  29.  
  30. a
  31.     {
  32.     text-decoration: none;
  33.     color: #CCFFFF;
  34.     }
  35.  
  36. a:hover
  37.     {
  38.     border: none;
  39.     color: #CCFFFF;
  40.     }
  41.  
  42. p
  43.     {
  44.     margin-top: 0px;
  45.     }
  46.  
  47. h1
  48.     {
  49.     font-size: 10px;
  50.     font-weight: bold;
  51.     margin-top: 0px;
  52.     text-align: left;
  53.     border-bottom: 1px solid #FFFFFF;
  54.     }
  55.  
  56. #1st
  57.     {
  58.     position: absolute;
  59.     top: 200px;
  60.     left: 5px;
  61.     width: 500px;
  62.     background: #000000;
  63.     border: 1px solid #FFFFFF;
  64.     filter: alpha(opacity=100);
  65.     -moz-opacity: 1.0;
  66.     -khtml-opacity: 1.0;
  67.     }
  68.  
  69. #2nd
  70.     {
  71.     position: absolute;
  72.     top: 200px;
  73.     left: 504px;
  74.     width: 150px;
  75.     float: right;
  76.     background: #000000;
  77.     border: 1px solid #FFFFFF;
  78.     filter: alpha(opacity=100);
  79.     -moz-opacity: 1.0;
  80.     -khtml-opacity: 1.0;
  81.     text-align: center;
  82.     overflow-y: auto;
  83.     }
  84.  
  85. #3rd
  86.     {
  87.     position: absolute;
  88.     top: 150px;
  89.     left: 388px;
  90.     width: 100px;
  91.     float: right;
  92.     background: #000000;
  93.     border: 1px solid #FFFFFF;
  94.     filter: alpha(opacity=100);
  95.     -moz-opacity: 1.0;
  96.     -khtml-opacity: 1.0;
  97.     text-align: justify;
  98.     overflow-y: auto;
  99.     }
thankyou,

ryan
Apr 10 '07 #3
drhowarddrfine
Expert 4TB
Part of the problem is using invalid CSS, or CSS that works only in IE. Which doctype are you using?

Also, we need the complete code. Just showing the head doesn't show us anything.

Firefox is the browser you should first check in, not IE7. If it's not working in Firefox then your code is wrong somewhow.
Apr 10 '07 #4
sorry about that

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>16bitoctober</title>
  5. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  6. <link rel="shortcut icon" href="favicon.ico">
  7. <style type="text/css" media="all">
  8.     @import "bw.css";
  9. </style>
  10. </head>
  11. <body>
  12. <!-- header image goes here -->
  13.  
  14. <!-- This is the main content area -->
  15. <div id="1st">
  16. <p><h1>nothing</h1>
  17. <br></p>
  18. <p style="width: 100%; border-bottom: solid 1px #FFFFFF; border-top: solid 1px #FFFFFF; text-align:center;"></p>
  19. <p></p>
  20. <p style="width: 100%; border-bottom: solid 1px #FFFFFF; border-top: solid 1px #FFFFFF; text-align:center;"></p>
  21. <p></p> 
  22. </div>
  23.  
  24. <!-- End main content area -->
  25.  
  26. <!-- This is the navigation -->
  27. <div id="2nd">
  28. . on paper .<br>
  29. . on canvas .<br>
  30. . on tape .<br>
  31. <br>
  32. . in transit .<br>
  33. . out of style .<br>
  34. <br>
  35. . on tap .<br>
  36. <br>
  37. . off topic .
  38. </div>
  39. <!-- End the navigation -->
  40.  
  41. <!-- This is the float box -->
  42. <div id="3rd">
  43. empty space in black and white. for the moment this is all there is.
  44. <br><br>
  45. </div>
  46. <!-- End the float box -->
  47.  
  48. </body>
  49. </html>
Apr 10 '07 #5
drhowarddrfine
Expert 4TB
As stated above, validate your html and css for your list of errors to fix this. The problem, as always, is IE7 and not Firefox. Firefox is performing perfectly.

A question: why are you using a transitional doctype?
Apr 11 '07 #6
i have no idea man. i just rewrote the first stylesheet my buddy wrote for me a few years ago. actually its probably 3 or 4 years now. anyway yeah.

so how do i validate it and all that to get it to work? sorry if that's a dumb question, haha, but i really dont know. before all this css stuff i just wrote in html so im still kind of behind.

what do i do to fix it?

thanks for the help,

ryan
Apr 11 '07 #7
drhowarddrfine
Expert 4TB
See the sticky at the top of this board for validation. Then read the sticky about doctypes. Long story short, use html4.01 strict.

id names cannot begin with a number.
Apr 11 '07 #8
hey guys, its all worked out now, for the moment at least haha. sorry for the newbieism and thanks for all the help :)

ryan
Apr 11 '07 #9

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

6 posts views Thread by Geoff | last post: by
12 posts views Thread by Howard Kaikow | last post: by
87 posts views Thread by expertware | last post: by
6 posts views Thread by Mark Olbert | last post: by
5 posts views Thread by SPE - Stani's Python Editor | last post: by
7 posts views Thread by Coder | last post: by
6 posts views Thread by scotty | last post: by
7 posts views Thread by Carlos Mendonça | last post: by
3 posts views Thread by SAL | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.