Jump to content

Problem med javascript/css


Recommended Posts

Hejsan!

Håller på att koda en blogg och har nu fastnat då javascripts inte är något jag direkt kan....

När man kommenterar så ska kommentaren hamna i en pratbubbla

http://www.willmayo.com/2007/02/10/css-speech-bubbles/

Allt verkar fungera utom en grej, pratbubblan har bara runda hörn på den senaste kommentaren..

namnlsv.th.png

Tack på Förhand!

Kommentar.php (mellan <head>)

	<script type="text/JavaScript" src="rounded_corners.inc.js"></script>
<script type="text/JavaScript">
  window.onload = function() {
      settings = {
          tl: { radius: 10 },
          tr: { radius: 10 },
          bl: { radius: 10 },
          br: { radius: 10 },
          antiAlias: true,
          autoPad: true
      }
      var myBoxObject = new curvyCorners(settings, "rounded");
      myBoxObject.applyCornersToAll();
  }
</script>

Kommentar.php

while($kommentar = mysql_fetch_array($data)){
echo '<br />';
echo '<div class="bubble">';
echo '<div class="rounded">';
echo '<blockquote>';
echo $kommentar['text'];
echo '</blockquote>';
echo '</div>';
echo '<cite>';
echo '<strong>'.$kommentar['namn'].'</strong>';
echo ' ';
echo $kommentar['timestamp'];

echo '</cite>';
echo '</div>';
}

style.css

/* PRATBUBBLA */
/* Normal Bubble */
div.bubble {
width: auto;
font-size: 0.75em;
margin-bottom: 24px;
}

div.bubble blockquote {
margin: 0px;
padding: 0px;
border: 1px solid #c9c2c1;
background-color: #fff;
}

div.bubble blockquote p {
margin: 10px;
padding: 0px;
}

div.bubble cite {
position: relative;
margin: 0px;
padding: 7px 0px 0px 15px;
top: 6px;
background: transparent url(images/tip.gif) no-repeat 20px 0;
font-style: normal;
}

/* Rounded Bubble */
div.bubble div.rounded {
margin-bottom: 10px;
border: 3px solid #fff;
background-color: #b7e0ff;

}
div.bubble div.rounded blockquote {
border: 0;
background-color: transparent;
}
div.bubble div.rounded blockquote p {
margin: 0px 10px;
font-size: 16px;
}
div.bubble cite.rounded {
position: relative;
margin: 0px;
padding-left: 15px;
padding-top: 12px;
top: 9px;
background: transparent url(images/tip-rounded.gif) no-repeat 15px 0;
}

/* Pimped Bubble */
div#pimped.bubble {
font-size: 16px;
}
div#pimped.bubble div.rounded {
color: #fff;
border: 3px solid #fff;
background-color: #111;
}
div#pimped.bubble cite.rounded {
background: transparent url(images/tip-pimped.gif) no-repeat 15px 0;
}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...