vividona Posted March 23, 2011 Share Posted March 23, 2011 Hi guys, please check this : @charset "utf-8"; html { padding:0; margin:0;} body { margin: 0; padding: 0; background:#A5DDF8 url(images/main_bg.png) top repeat-x; font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; color: #000; text-align: center; /*direction: rtl;*/ } #wrapper { width: 100%; margin: 0 auto; padding: 0; border: 1px solid #fff; } #head { margin: 0 auto; width:966px; } #loginInfo{ width:400px; float: right; clear: left; border: 1px solid #b30f0e; font: normal 0.7em Tahoma, Geneva, sans-serif; color: #fff; } the problem is in opera: the width of (head div) is 100% I need it to be 966px. I don't need it to be full screen. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 23, 2011 Share Posted March 23, 2011 well your css looks okay, what does your html look like or maybe got an online example? Quote Link to comment Share on other sites More sharing options...
vividona Posted March 23, 2011 Author Share Posted March 23, 2011 well your css looks okay, what does your html look like or maybe got an online example? Hi, please see padding in FF is wider than opera <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <body> <div id="wrapper"> <div id="head"> <div id="loginInfo">Loggedin data here</div> <div id="header"> <h1><a href="index.php">Header stuff here</h2> </div> </div> </div> </body> </html> [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 23, 2011 Share Posted March 23, 2011 well that is something different, maybe ad this: #loginInfo{ width:400px; float: right; clear: left; border: 1px solid #b30f0e; font: normal 0.7em Tahoma, Geneva, sans-serif; color: #fff; padding:0; margin:0; } But without html code, this will just be guessing Quote Link to comment Share on other sites More sharing options...
vividona Posted March 23, 2011 Author Share Posted March 23, 2011 Hi, I need the space between (loginInfo div ) and the (wrapper) to be same in FF and opera Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 23, 2011 Share Posted March 23, 2011 well that is a bit tricky when the wrapper has a width of 100%, anyways i tried the code below in the newest version of opera and firefox and it seems to look the same. Although i changed the following line which is full of errors: <h1><a href="index.php">Header stuff here</h2> to <h1><a href="index.php">Header stuff here</a></h1> I also added a little color to the background so i have some more visual reference of what i am doing instead of blindly guessing <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><title>align stuff</title></head> <body> <style type="text/css"> html { padding:0; margin:0;} body { margin: 0; padding: 0; background:#A5DDF8 url(images/main_bg.png) top repeat-x; font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; color: #000; text-align: center; /*direction: rtl;*/ } #wrapper { width: 100%; margin: 0 auto; padding: 0; border: 1px solid #fff; } #head { margin: 0 auto; width:966px; background:#f4a; } #loginInfo{ width:400px; float: right; clear: left; border: 1px solid #b30f0e; font: normal 0.7em Tahoma, Geneva, sans-serif; color: #fff; } </style> <div id="wrapper"> <div id="head"> <div id="loginInfo">Logged in data here</div> <div id="header"> <h1><a href="index.php">Header stuff here</a></h1> </div> </div> </div> </body> </html> _edit: you might consider to use something as a reset.css (see sticky) 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.