OM2 Posted July 30, 2008 Share Posted July 30, 2008 How do I make a horizontal bar that stretches across the screen? I thought I had the right answer: body { margin: 0; padding: 0; } .top-bar { width:100%; height: 40px; background-color:#cccccc; margin-top: 0; margin-right: auto; margin-left: auto; } In my HTML: <div class="top-bar"> </div> Works fine in IE, but not Firefox. What am I missing? Thanks. OM Quote Link to comment Share on other sites More sharing options...
OM2 Posted July 30, 2008 Author Share Posted July 30, 2008 doing further investigating, i found out that there is nothing wrong with the code i gave above. BUT, i still have the problem. i have put html comments in my css: this is causing problems. see below for a cut down version of my code: ok... i seemed to have found out my problem. but i cant explain why the problem is there! my full code is as follows: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CSS Problems</title> <style type="text/css"> <!-- Comment Start --> body { margin: 0; padding: 0; } <!-- Comment End --> .topbar { width:100%; height: 40px; background-color:#cccccc; margin-top: 0; margin-right: auto; margin-left: auto; } .topbar2 { width:100%; height: 40px; margin-bottom:3px; background-color:#999999; border-bottom:4px solid #cccccc; margin-top: 0; margin-right: auto; margin-left: auto; } </style> <!-- Comment Start --> </head> <!-- Comment End --> <!-- Comment Start --> <body> <!-- Comment End --> <!-- Comment Start --> <div class="topbar2"> </div> <!-- Comment End --> <!-- Comment Start --> </body> </html> <!-- Comment End --> In my code above, I have to have <!-- Comment Start --> and <!-- Comment End -->. Once I remove both of these: everything works OK. Why is there a problem having comments in my CSS? Thanks. Quote Link to comment Share on other sites More sharing options...
s_ainley87 Posted July 31, 2008 Share Posted July 31, 2008 You have used html comments, css comments look like this, /*This is a comment*/ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.