By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,493 Members | 1,936 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,493 IT Pros & Developers. It's quick & easy.

firefox problem with div and css

P: 5
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
Share this Question
Share on Google+
8 Replies


P: 74
could you post your css
cheer
philleep
Apr 10 '07 #2

P: 5
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 5K+
P: 7,435
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

P: 5
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 5K+
P: 7,435
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

P: 5
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 5K+
P: 7,435
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

P: 5
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.