mpsn Posted December 11, 2011 Share Posted December 11, 2011 Hi, I included a doctype, but now I noticed on chrome and ff, the background.png is different, I want the backgrond.png fill up the almost to the bottom, leaving just enough for copyright, which it not displaying below the background.png inside the mainBox element. I don't want any fancy shortcuts or tricks as I am new to CSS and I just built what I have so far with just w3schools.com. Here is css: #mainBox { position:relative; top: 0px; margin-left: auto; margin-right: auto; border: 1px solid; width:300px; height:400px; } p.logo { position:absolute; top: 0px; padding: 0px 15px 30px 15px; } #logoBox { position: absolute; top: 10px; margin-left:auto; margin-right:auto; width:100%; border: 0px solid; background-color: #F60; } #backgroundBox { position:absolute; top:110px; margin-left:auto; margin-right:auto; padding: 0px 0px 20px 0px; } #footer { position:absolute; top: 330px; padding: 5px 5px 5px 5px; border: 2px solid; width: 90%; } here is html: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>CSS trial</title> <link rel="stylesheet" type="text/css" href="css.css" /> </head> <body> <div id='mainBox'> <div id='logoBox'> <p id="logo"> <img src='logo_.gif' style="height:20%; width:25%;"/> </p> </div> <div id='backgroundBox'> <img src='TreeBackground.png' style='height:65%; width:100%;' /> </div> <div id='footer'> <p>©2011</p> </div> </div> </body> </html> I attached the logo and TreeBackgorund.png, any help appreciated. Quote Link to comment https://forums.phpfreaks.com/topic/252964-why-doesnt-it-show-same-in-different-browsers/ Share on other sites More sharing options...
mpsn Posted December 12, 2011 Author Share Posted December 12, 2011 Sorry, more specifically, I mean when I zoom in and out with chrome, the background moves whereas in FF, it doesn't. I noticed IE is ok too, and not Safari (since both chrome and Safari run off webkit engine). Please i'd appreciate any help! Quote Link to comment https://forums.phpfreaks.com/topic/252964-why-doesnt-it-show-same-in-different-browsers/#findComment-1296969 Share on other sites More sharing options...
mpsn Posted December 12, 2011 Author Share Posted December 12, 2011 Please feel free to ask if what I am asking is confusing or not completely understandable. I am new to using CSS and I find the absolute/relative positioning hardest for some reason. I understand tha relative position is used as a container for absolute position (as indicated on w3schools.com). Again, any web designers could help a fellow out be the best! Quote Link to comment https://forums.phpfreaks.com/topic/252964-why-doesnt-it-show-same-in-different-browsers/#findComment-1297240 Share on other sites More sharing options...
nano Posted December 12, 2011 Share Posted December 12, 2011 Hi, Position isn't actually needed with what you are trying to do. Take a step back, remove all the positions and see how it looks, then rather then apply positions, see if you can achieve what you want by adding different values. For example, set the image to display:block; add a margin and then see how it looks. I don't fully understand what you are trying to achieve but positions are one of those things that should only really be used when you really need to, which is very little in most cases! Good luck Quote Link to comment https://forums.phpfreaks.com/topic/252964-why-doesnt-it-show-same-in-different-browsers/#findComment-1297271 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.