jasonc Posted March 29, 2010 Share Posted March 29, 2010 I have a speech bubble which I have text in, the text is added dynamically and I have a gap between the top line of the speech bubble and the first line of the text inside it. does anyone know of a better way to have the text in there so there is not so much gap in the top part of the bubble. <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> #bubble_top { margin: 0 auto; height: 32px; width: 154px; background: url(images/speech%20bubbles%20-%20top.png) no-repeat; background-position: center; } #bubble_mid { margin: 0 auto; text-align: justify; width: 129px; padding: 0 15px 0 10px; background: url(images/speech%20bubbles%20-%20center.png) repeat-y; background-position: center; font-size: 9pt; line-height: 12px; } #bubble_bot_left { margin: 0 auto; height: 48px; width: 154px; background: url(images/speech%20bubbles%20-%20bottom_left.png) no-repeat; background-position: center; } #bubble_bot_right { margin: 0 auto; height: 48px; width: 154px; background: url(images/speech%20bubbles%20-%20bottom_right.png) no-repeat; background-position: center; } #about_fix_left { float: left; padding: 14px 0 0 25px; font-size: 8pt; } #about_fix_right { float: right; padding: 14px 25px 0 0; font-size: 8pt; } </style> </head> <body> <div id="bubble_top"></div> <div id="bubble_mid">Some text for the bubble. Some text for the bubble. Some text for the bubble. Some text for the bubble. Some text for the bubble. Some text for the bubble.</div> <div id="bubble_bot_left"> <div id="about_fix_right"> <a href="?id=1" class="nd">info</a> </div> </div> </body> </html> [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
haku Posted March 30, 2010 Share Posted March 30, 2010 Set up your div structure like this: <div class="bubble_top"> <div class="bubble_bottom"> <div class="bubble_middle"> //contents go here </div> </div> </div> Quote Link to comment Share on other sites More sharing options...
jasonc Posted March 30, 2010 Author Share Posted March 30, 2010 i have now decided to supply the full code for the whole page in case something else in my page is causing the problems... i have managed to get so far but now i can not get a padding in side the middle section of the speech bubble to have the text in it, when i change the padding the page goes weird and does not show the same view in IE either. can anyone please suggest a way to get around this. quote: i did try the suggestion above from HAKU but this too messed up the page as well like when i change the values of the padding from 0px to something else like 5px or 10px on the left and right of the middle bubble image box. also i have new images... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head><title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> /* CSS Document */ /* Standard View CSS */ body { margin: 0; padding: 0; } #body_container { padding: 0; margin: 0 auto; width: 700px; } #header_container { padding: 0; margin: 0; width: 700px; height: 141px; background-color: #6193BF; } #header_welcome_to { font-weight: normal; font-size: 2em; line-height: 1em; } #header_sitename { font-weight: normal; font-size: 5em; line-height: 1em; } #header_sub { font-weight: normal; font-size: 1.05em; font-weight: bold; line-height: .5em; color: #99FFFF; } #header_powered { font-size: .7em; line-height: 3.6em; } #logo { float: left; background-image:url(images/logo.png); width: 136px; height: 139px; background-repeat: no-repeat; } #left { float: left; } #right { float: right; } input { font-size: 8pt; color: #333333; background-color: #FFFFFF; } div.center { text-align: center; } option.center { text-align: center; } a.nd { text-decoration: none; } #loginbox_message { color: #FF6600; } #loginbox { float:left; padding-top: 30px; width:140px; /* the width here should be the same as the 'maincontent' id in 'style_extras_not_logged_in.css' file */ } #loginbox_text { font-size: 9pt; color: #333333; text-align: left; } #main_left_container { width:50%; float:left; overflow:auto; } /* */ /* the width should be the same as the width in the main_right_container */ #main_left_content { padding: 10px; } /* background: yellow; */ #main_right_container { margin-left:50%; } /* background: blue; */ /* the width should be the same as the width in the main_left_container */ #main_right_content { padding: 10px; } /* background: green; */ #menubar { text-align: center; color: #FF0000; padding: 0; margin: 0; } #welcome_username { align: left; font-size: 30px; font-weight: bold; } .clear { height: 0; font-size: 1px; margin: 0; padding: 0; line-height: 0; clear: both; } #testimonial_text { text-align: justify; font-weight: normal; font-style: italic; font-size: 10pt; color: #333333; padding: 8px 8px 8px 8px; } #testimonial_name { font-weight: bold; font-style: italic; font-size: 10pt; color: #333333; } #text_size10pt { font-size: 10pt; color: #333333; } #text_size15pt { font-size: 15pt; color: #333333; } #list_arrow { padding-top: 4px; list-style-position:outside; list-style-image: url(images/bullet_arrow.jpeg) } #bubble_container { padding: 0; margin: 0 auto; width: 155px; } #bubble_top { border: 1px solid #555555;margin: 0 auto; height: 15px; width: 100%; background: url(images/speech%20bubbles%20-%20top.png) no-repeat; background-position: center; } #bubble_mid { border: 1px solid #555555;margin: 0 auto; text-align: justify; width: 100%; padding: 0 0px 15px 0px; background: url(images/speech%20bubbles%20-%20center.png) repeat-y; background-position: center; font-size: 9pt; line-height: 12px; } #bubble_bot_left { border: 1px solid #555555;margin: 0 auto; height: 17px; width: 100%; background: url(images/speech%20bubbles%20-%20bottom_left.png) no-repeat; background-position: center; } #bubble_bot_right { border: 1px solid #555555;margin: 0 auto; height: 17px; width: 100%; background: url(images/speech%20bubbles%20-%20bottom_right.png) no-repeat; background-position: center; } #about_fix_left { float: left; padding: 10px 0 0 25px; font-size: 8pt; } #about_fix_right { float: right; padding: 10px 25px 0 0; font-size: 8pt; } #username_left { text-align: left; font-size: 15px; font-weight: bold; } #username_right { text-align: right; font-size: 15px; font-weight: bold; } /* top right bottom left */ /* .blinking { text-decoration: blink; } */ /* Chat View CSS */ #chat_container { padding: 0; margin: 0 auto; width: 699px; } #div_chat { height: 300px; width: 500px; overflow: auto; background-color: #CCCCCC; border: 1px solid #555555; } #txt_message { width: 447px; } #admin_user { font-weight: normal; font-size: 20px; } #admin_message { font-weight: normal; font-style: italic; font-size: 20px; color: #990099; } #chat_time { font-weight: normal; font-style: italic; font-size: 9px; } #user { font-weight: normal; font-style: italic; font-size: 20px; } #user_list { float: left; height: 290px; width: 100px; overflow: auto; background-color: #DDDDDD; padding: 3px; margin: 3px; } /* Mobile View CSS */ #mobile_txt_message { width: 180px; } #mobile_div_chat { height: 200px; width: 200px; overflow: auto; background-color: #CCCCCC; border: 1px solid #555555; } #maincontent { padding-left:140px; /* the width here should be the same as the 'loginbox' id in 'style.css' file */ } </style> </head> <body> <div id="body_container"> <div id="header_container"> <div id="logo"></div> <div><strong id="header_welcome_to">Welcome to </strong><strong id="header_sitename">site</strong> </div> <div><strong id="header_sub"> text</strong> </div> <div> </div> <div><strong id="header_powered">text</strong> </div> </div> <div id="menubar"> <a href="?" class="nd"><em>Home</em></a> </div> <div id="loginbox"> <form name="loginbox" method="post" action="auth.php"><div id="loginbox_text">Username<br><input size="20" type="text" name="name"></div> <div id="loginbox_text">Password<br><input name="password" type="password" size="20"></div> <div class="center"><input type="submit" value="Log In" name="login"><input type="reset" value="Reset" name="reset"></div> <div class="center"><a href="?">forgot password</a></div> </form> </div> <div id="maincontent"> <div id="main_left_container"> <div id="main_left_content"> some info here<br><br><br> some info here<br><br> some info here<br><br> <br><br> </div> </div> <div id="main_right_container"> <div id="main_right_content"> <div class="center"><strong id="text_size15pt">What users say</strong></div> <div id="bubble_container"> <div id="bubble_top"></div> <div id="bubble_mid">big thank you! cheers to you...<div id="about_fix_right"><a href="?fid=1" class="nd">more info</a></div> </div> <div id="bubble_bot_left"></div> <div id="username_left">name</div> </div> <br> <div id="bubble_container"> <div id="bubble_top"></div> <div id="bubble_mid">big thank you! cheers to you...<div id="about_fix_right"><a href="?fid=1" class="nd">more info</a></div> </div> <div id="bubble_bot_left"></div> <div id="username_left">name</div> </div> <br> <div id="bubble_container"> <div id="bubble_top"></div> <div id="bubble_mid">big thank you! cheers to you...<div id="about_fix_right"><a href="?fid=1" class="nd">more info</a></div> </div> <div id="bubble_bot_left"></div> <div id="username_left">name</div> </div> <br> <div id="bubble_container"> <div id="bubble_top"></div> <div id="bubble_mid">big thank you! cheers to you...<div id="about_fix_right"><a href="?fid=1" class="nd">more info</a></div> </div> <div id="bubble_bot_left"></div> <div id="username_left">name</div> </div> <br> <br> <div class="center"><div id="text_size10pt"><a href="?ac=te" class="nd">click here for more</a></div></div> </div> </div> </div> <div class="clear"></div> <br><br><br> </div> </body> </html> [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
haku Posted March 30, 2010 Share Posted March 30, 2010 Too much code. Just print the relevant code. Quote Link to comment Share on other sites More sharing options...
jasonc Posted March 30, 2010 Author Share Posted March 30, 2010 redone code changing all ID to CLASS 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.