PDA

View Full Version : Weird offsetting in page



Lamped
Jul 5th, 2009, 01:49 AM
The user details on the right seem to keep indenting... Can someone explain why please?


HTML:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="libs/jquery-1.3.2.js"></script>
<script type="text/javascript" src="libs/jchat-0.1.js"></script>
<link rel="stylesheet" type="text/css" href="libs/jchat-0.1.css" />
<title>jChat</title>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
var jc = new jchat('jchat');
});
// ]]>
</script>
</head>
<body>
<div id="jchata">
jChat is either not installed or Javascript is disabled in your browser.
</div>

<div class="jchat">
<div class="jchat_tabs">
<ul>
<li class="jchat_tab_room">Main Room <a class="jchat_tab_close">X</a></li>
<li class="jchat_tab_private">Private 1 <a class="jchat_tab_close">X</a></li>
<li class="jchat_tab_privateroom">Private 2 <a class="jchat_tab_close">X</a></li>
</ul>
</div>
<div class="jchat_status">Status</div>
<div class="jchat_history"><div class="jchat_history_wrapper">
<p class="jchat_entry"><span class="jchat_name">Person 1:</span>Content relk\ajhd lkjahsdl kjahd lkasjhd laksjhd laksjdh alksjdh laksjdh alksdjh lksadhiawunblawiunbld iauwd liawubl iuawd liauwdb</p>
<p class="jchat_entry"><span class="jchat_name">Person 2:</span>Content</p>
<p class="jchat_entry"><span class="jchat_name">Person 1:</span>Content</p>
</div></div>
<div class="jchat_users">
<div class="jchat_userprofile">
<img src="libs/blank_avatar.png" width="32" height="32" alt="Avatar" style="float: left;" />
Person 1
<img src="libs/m.png" width="24" height="24" alt="Male" class="jchat_gender" />
</div>
<div class="jchat_userprofile">
<img src="libs/blank_avatar.png" width="32" height="32" alt="Avatar" style="float: left;" />
Person 2
<img src="libs/f.png" width="24" height="24" alt="Female" class="jchat_gender" />
</div>
<div class="jchat_userprofile">
<img src="libs/blank_avatar.png" width="32" height="32" alt="Avatar" style="float: left;" />
Person 3
<img src="libs/mf.png" width="24" height="24" alt="Transgender or Hermaphrodite" class="jchat_gender" />
</div>
</div>
<div class="jchat_input"><textarea rows="4" cols="80">Input section</textarea></div>
</div>
</body>
</html>

CSS:

.jchat {
padding: 0;
margin: 0;
font-family: Calibri, Tahoma, Verdana, Arial, Helv, sans-serif;
font-size: 1em;
width: 740px;
height: 480px;
border: 1px Solid #777;
}

.jchat_tabs {
clear: left;
float: left;
width: 600px;
height: 40px;
border-bottom: 1px Solid #777;
}

.jchat_tabs ul {
padding: 0;
margin: 0;
}

.jchat_tabs li {
float: left;
list-style: none;
font-size: 0.8em;
margin-top: 2px;
margin-left: 4px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 2px;
padding-right: 2px;
font-weight: Bold;
}

.jchat_tab_room {
border: 2px Solid #A11111;
background-color: #D55555;
}

.jchat_tab_private {
border: 2px Solid #11A111;
background-color: #55D555;
}

.jchat_tab_privateroom {
border: 2px Solid #1111A1;
background-color: #5555D5;
}

.jchat_tab_close {
cursor: pointer;
cursor: hand; /* IE Compatability */
text-decoration: none;
}

.jchat_status {
clear: right;
float: left;
width: 140px;
height: 40px;
border-bottom: 1px Solid #777;
}

.jchat_history {
clear: left;
float: left;
width: 599px;
height: 360px;
border-right: 1px Solid #777;
position: relative;
}

.jchat_history_wrapper {
position: absolute;
bottom: 0;
}

.jchat_entry {
margin-left: 4px;
margin-right: 4px;
margin-top: 0px;
margin-bottom: 0px;
}

.jchat_name {
font-weight: Bold;
margin-right: 4px;
}

.jchat_users {
clear: right;
float: left;
width: 140px;
height: 360px;
}

.jchat_userprofile {
border-bottom: 1px Solid #777;
padding-bottom: 4px;
position: relative;
}

.jchat_userprofile .jchat_gender {
position: absolute;
right: 0;
bottom: 0;
}

.jchat_input {
clear: both;
width: 740px;
height: 78px;
border-top: 1px Solid #777;
}

.jchat_input textarea {
border: 0;
width: 736px;
height: 70px;
font-family: Calibri, Tahoma, Verdana, Arial, Helv, sans-serif;
font-size: 1em;
}


10 points if you can guess what I'm doing :p

Lamped
Jul 5th, 2009, 11:51 AM
I was reading this site and saw that absolute/relative positioning was favourable to float positioning, so I rewrote the stylesheet and it's fixed my original issue. So a couple more questions if I may:

1. <div><ul> is pointless right? I might aswell strip out the div and apply the block formatting to the ul?

2. How do I make the first line of a paragraph indented less than the subsequent lines?

3. This may be javascript related: How do I manually control scrolling? To remove the scrollbars and scroll on a button of my choice?