qlzgdz1992
New Member
I have a popup box that is displayed when the user moves the mouse on an icon. The css for the hover is as follows :-\[code\].profile-bubble {background-color: #EDEDED;border: 2px solid #666666;font-size: 15px;font-weight: bold;line-height: 1.3em;margin: 0.6% 2% 2% 90%;padding: 10px;position: absolute;text-align: center;width: 150px;opacity: 0.9;-moz-border-radius: 10px;-webkit-border-radius: 10px;-moz-box-shadow: 0 0 5px #888888;-webkit-box-shadow: 0 0 5px #888888;\[/code\]}This works fine, however the problem is that when I resize the screen, or if the user has a smaller resolution than I do, then the alert box goes out of the screen.How can I amend this css to make it proportionate the the size of the screen?Thanks for your help and time.UPDATE------------------------------------------------------this is the header css:-\[code\]/* Header*/\[/code\]header { padding-bottom: 5px;}\[code\]#headerContainer {height: 33px;background-position: 10px 2px;padding-top: 2px;\[/code\]}\[code\].headerProfileNotifications {float: right;padding-right: 4px;margin: 3px;position: relative;\[/code\]}\[code\].headerProfilePhoto {float: right;position: relative;margin: 3px;\[/code\]}\[code\]img {border: 1px solid #D5D5D5; \[/code\]}\[code\]img {border: 1px solid #D5D5D5; \[/code\]}\[code\]img:hover {border: 2px solid #000000; \[/code\]}\[code\].headerProfileDetails {float: right;padding-right: 4px;font-size: 11px;text-align: right;\[/code\]}\[code\].headerProfileName {margin-top: 2px;\[/code\]}\[code\].headerProfileEmail {clear:both;float:right;margin-top: 0px;\[/code\]}and the html:-\[code\]<header> <div class="content-wrapper"> <div id="headerContainer"> <div class="headerProfileNotifications"> <img src="http://stackoverflow.com/questions/15612647/Images/" alt="notification" /> </div> <div class="headerProfilePhoto"> <img src="http://stackoverflow.com/questions/15612647/Images/" alt="profile_photo" /> </div> <div class="headerProfileDetails"> <div class="headerProfileName"> John Smith </div> <div class="headerProfileEmail"> [email protected] </div> </div> </div> </div> </header>\[/code\]