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 Link to comment https://forums.phpfreaks.com/topic/117431-solved-how-do-i-make-a-horizontal-bar-that-stretches-across-the-screen/ 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. Link to comment https://forums.phpfreaks.com/topic/117431-solved-how-do-i-make-a-horizontal-bar-that-stretches-across-the-screen/#findComment-604055 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*/ Link to comment https://forums.phpfreaks.com/topic/117431-solved-how-do-i-make-a-horizontal-bar-that-stretches-across-the-screen/#findComment-604321 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.