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] Link to comment https://forums.phpfreaks.com/topic/196890-speech-bubbles-have-to-much-gap-inside-top-area-how-to-make-smaller/ 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> Link to comment https://forums.phpfreaks.com/topic/196890-speech-bubbles-have-to-much-gap-inside-top-area-how-to-make-smaller/#findComment-1033888 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] Link to comment https://forums.phpfreaks.com/topic/196890-speech-bubbles-have-to-much-gap-inside-top-area-how-to-make-smaller/#findComment-1034052 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. Link to comment https://forums.phpfreaks.com/topic/196890-speech-bubbles-have-to-much-gap-inside-top-area-how-to-make-smaller/#findComment-1034177 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 Link to comment https://forums.phpfreaks.com/topic/196890-speech-bubbles-have-to-much-gap-inside-top-area-how-to-make-smaller/#findComment-1034244 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.