PDA

View Full Version : my speech bubble continues out of the div it should be in.



needsomehelp
Mar 29th, 2010, 11:50 PM
Below is my code that works in firefox but not in IE

in IE the speech bubble has its box and text out of hte main div

can anyone suggest a fix to get this to correctly show in IE as well as it currently working in FireFox.




<!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; }
div.center { text-align: center; }
a.nd { text-decoration: none; }

#main_left_container { width:67%; float:left; overflow:auto; } /* background: red; */ /* 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:67%; } /* background: blue; */ /* the width should be the same as the width in the main_left_container */
#main_right_content { padding: 10px; } /* background: green; */
#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_top { margin: 0 auto; height: 15px; width: 155px; background: url(images/speech%20bubbles%20-%20top.png) no-repeat; background-position: center; }
#bubble_mid { margin: 0 auto; text-align: justify; width: 130px; padding: 0 15px 5px 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: 17px; width: 155px; background: url(images/speech%20bubbles%20-%20bottom_left.png) no-repeat; background-position: center; }
#bubble_bot_right { margin: 0 auto; height: 17px; width: 155px; background: url(images/speech%20bubbles%20-%20bottom_right.png) no-repeat; background-position: center; }
#about_fix_left { float: left; padding: 0 0 0 25px; font-size: 8pt; }
#about_fix_right { float: right; padding: 0 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; }
</style>
<link rel="stylesheet" type="text/css" href="style_extras_not_logged_in.css">
</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">&nbsp;text text</strong>
</div>
<div>&nbsp;</div>
<div><strong id="header_powered">text text</strong>
</div>
</div>

<div id="maincontent">
<div id="main_left_container">
<div id="main_left_content">
some text here
</div>
</div>
<div id="main_right_container">
<div id="main_right_content">
<div class="center"><strong id="text_size15pt">..............</strong></div>

<div id="bubble_top"></div>
<div id="bubble_mid">this and that. this and that. this and that. this and that. this and that. <div id="about_fix_left"><a href="" class="nd">info about fix</a></div>
</div>
<div id="bubble_bot_right"></div>
<div id="username_right">name</div>
<br>

</div>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>

abduraooft
Mar 30th, 2010, 09:23 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Your DOCTYPE (http://www.alistapart.com/articles/doctype) is incomplete!
Use the following instead.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">