Jump to content

[SOLVED] Please HELP!

TheFilmGod

By TheFilmGod
in CSS Help

 Share

Recommended Posts

TheFilmGod Advanced Member

TheFilmGod

Posted
Posted

I just got into CSS, and its giving me a headache!  ;D>:(

 

It seems to work out pretty good in FF and IE6, except when I wanted to put a border in...

It is supposed to go around the comment and down. Instead, it goes from the comment up in FireFox!

 

wwpknights.com/profiles

 

Here is the full HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><!-- Php End HTML Start --><!-- NO OUTPUT UNTIL NOW --><!-- DocType Declaration --><!-- HTML PAGE START --><!-- Head Start -->









 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <meta name="description" content="High School Northern Knights">
   <meta name="keywords" content="Home of the Northern Knights, North, School, ww-p, Plainsboro, West-Windsor, KNights, High School North, NJ"><title>Home of the Northern KNights</title>
     
 <link href="style.css" rel="stylesheet" type="text/css"><!-- Head End --><!-- HTML BODY START -->
</head><body>
<div id="topPan">
  <a href="http://www.wwpknights.com/"><img src="images/logo.png" alt="Home of the Northern Knights" class="logo" title="Home of the Northern Knights" border="0" height="113" width="451"></a>

<!-- Log In Start -->

<div id="topPanlogin">

<!-- PHP Code Start -->

<form action="/index.php" method="post">
    <table border="0" width="206">
      <tbody><tr>
        <td width="96"><span class="login">User</span><br>
<input name="username" maxlength="40" size="15" type="text"></td>
        <td width="100"><span class="login">Password</span><br>
<input name="pass" maxlength="50" size="15" type="password"></td>
      </tr>
      <tr>
        <td colspan="2" align="center"><input name="submit" value="Login" type="submit"> <a href="http://www.wwpknights.com/register">Register</a> | <a href="http://www.wwpknights.com/forgot">Forgot Password</a></td>
      </tr>
     </tbody></table>
</form>
<!-- PHP Code End -->


  </div>
<!-- Log In End -->

<!-- Top Navigation Menu -->

  <div id="topContactPan"></div>
<div id="topMenuPan">
  <div id="topMenuLeftPan"></div>
  
  <div id="topMenuMiddlePan">
  	<ul>
		<li><a href="http://www.wwpknights.com/">home</a></li>
		<li><a href="http://www.wwpknights.com/about_us">about us</a></li>
		<li><a href="http://www.wwpknights.com/sc">s.c.</a></li>
		<li><a href="http://www.wwpknights.com/class">class</a></li>
		<li><a href="http://www.wwpknights.com/news">news</a></li>
		<li><a href="http://www.wwpknights.com/profiles">profiles</a></li>
		<li><a href="http://www.wwpknights.com/blog">blog</a></li>
		<li><a href="http://www.wwpknights.com/contact">Contact</a></li>
	</ul>
  </div>
  <div id="topMenuRightPan"></div>
</div>
</div>
<!-- Unique Page Elements -->

<div id="bodyPan">

<div id="bodyleftpan">
<div id="profile"><img src="profile.PNG" width="300" height="250" /></div>
</div>

<div id="bodyrightpan">

<div id="info">

<div id="infoleftpan">
<div class="user" id="username">NorthernKnight</div>
<div class="name" id="name" >Greg S.</div>
</div>
<div id="inforightpan">
<div id="points" class="count">1,000 KPS</div>
<div id="views" class="count">12 profile views</div>
</div>
<div id="status" class="status">Greg Solak is currently fighting pirates and he has many still to beat </div>
<div id="achievement">
<div id="achievementleftpan" class="marker">Recent Achievements</div>
<div id="achievementrightpan"><a href="http://www.wwpknights.com">see all</a></div>
</div>
<div id="achievementlist"><div class="ach">hey</div></div>
</div>

<div id="interact"><div id="interactbuttons">

<div id="interactfriend"><img src="interact.PNG" width="100" height="75" /><br /><span class="interact"><br />Uknight</span><br />
  <span class="interactcomment">add as friend</span></div>
<div id="interactnominate"><img src="interact.PNG" width="100" height="75" /><br /><span class="interact"><br />Nominate</span><br />
  <span class="interactcomment">compliment</span></div>
<div id="interactshame"><img src="interact.PNG" width="100" height="75" /><br /><span class="interact"><br />Shame</span><br />
  <span class="interactcomment">break sword </span></div>

</div></div>

<div id="post"><div id="postarea">

<div id="postdisplay" class="marker">The Shield</div>
<div id="postnumber" class="count">78 shield posts</div>
<div id="poststatus" class="status">Displaying 10 most recent posts</div>
<div id="postsubmit"><form id="postform">
    <textarea class="text" name="textarea" rows="3">Write something on this knight's shield... 
(you can not edit after submitting)</textarea>
  <br />
  <input type="submit" name="Submit" value="Submit" />
  </form>
  </div>
<div id="postcomment">
<div id="postcommentleft">left</div>
<div id="postcommentright"><a href="http://www.wwpknights.com">Pammie K.</a><br /><span class="postcommentdetails">wrote at 11:15 pm on July 8th, 2007</span>
<div id="postcommentbody" class="postcommentbody">Ha Ha! I guess you got a youtube going on! LOL!</div>
</div>
</div>

</div></div>
</div>


</div>

<!-- HTML BODY END -->

<!-- Footer Start -->
<div id="footermainPan">
  <div id="footerPan">
    <ul>
      <li><a href="http://www.wwpknights.com/">Home</a>| </li>
      <li><a href="http://www.wwpknights.com/about_us">About us</a>| </li>
      <li><a href="http://www.wwpknights.com/sc">S.C.</a>| </li>
      <li><a href="http://www.wwpknights.com/class">Class</a>| </li>
      <li><a href="http://www.wwpknights.com/news">News</a>| </li>
      <li><a href="http://www.wwpknights.com/profiles">Profiles</a>| </li>
      <li><a href="http://www.wwpknights.com/">Ideas</a>| </li>
      <li><a href="http://www.wwpknights.com/contact">Contact</a></li>
    </ul>
    <p class="copyright">© wwpkngihts. All right reserved.</p>
    <ul class="templateworld">
      <li>design by:</li>
      <li><a href="http://www.templateworld.com/" target="_blank">Greg Solak in conjunction with Template World</a></li>
    </ul>
  </div>
</div>
</body></html>

 

FULL CSS:

/* CSS Document */

body{
padding:0px;
margin:0px auto;
text-align: center;
background-image: url(images/bg.png);
background-repeat: repeat-y;
color:#5E5E5E;
font:13px/18px Arial, Helvetica, sans-serif;
background-position: center;
}
.black {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
.login {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-weight: bold;
}
.title_black {
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: #000000;
font-weight: bold;
}
.user {
font-size: 20px;
color: #0000FF;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.name {
font-size: 16px;
color: #0000FF;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.count {
font-size: 12px;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.marker {
font-size: 14px;
color: #000000;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.status {
font-size: 12px;
color: #808080;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.interact {
font-size: 16px;
color: #0000FF;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.interactcomment {
font-size: 12px;
color: #808080;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.postcommentdetails {
font-size: 10px;
color: #808080;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.postcommentbody {
font-size: 12px;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div, p, ul, h2, h3, img{padding:0px; margin:0px;}
ul{list-style-type:none;}

/*----TOP PANEL----*/
#topPan{
width:778px;
height:158px;
position:relative;
margin:0px auto;
background:url(images/topPan-bg.gif) 0 0 repeat-x #15AEFD;
color:#fff;
padding:0px;
background-color: #FFFFFF;
}
#topPan img.logo{width:451px; height:113px; position:absolute; top:8px; left:50px;}

#topPan p{font-size:16px; padding:70px 0 0 43px;}
#topPanlogin {
position: absolute;
left: 513px;
top: 18px;
}

#topPanlogin A:link {text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; font-weight: bold;}
#topPanlogin A:visited {text-decoration: none; 	font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; font-weight: bold;}
#topPanlogin A:active {text-decoration: underline; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color:#000000; font-weight: bold;}
#topPanlogin A:hover {text-decoration: underline; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color:#676363; font-weight: bold;}

#topContactPan p.callus{background:#0C71A4; color:#fff; width:64px; height:14px; line-height:14px; font-size:14px; font-weight:bold; text-transform:uppercase; padding:0px;}
#topContactPan p.no{font-size:26px; padding:4px 0 0;}

#topMenuPan{width:683px; height:16px; position:absolute; bottom:9px; left:48px;}
#topMenuLeftPan{width:69px; height:16px; float:left; background:url(images/menu-leftbg.gif) 0 0 no-repeat;}
#topMenuMiddlePan{width:544px; height:16px; float:left;}

#topMenuMiddlePan ul{width:544px; height:16px;}
#topMenuMiddlePan ul li{width:67px; height:16px; border-right:1px solid #E5E5E5; float:left;}
#topMenuMiddlePan ul li a{width:67px; height:16px; display:block; background:#fff; color:#4A4A4A; font:10px/16px "Trebuchet MS",Arial, Helvetica, sans-serif; text-decoration:none; font-weight:bold; text-align:center; text-transform:uppercase;}
#topMenuMiddlePan ul li a:hover{background:#fff; color:#0574AF; text-decoration:none;}
#topMenuMiddlePan ul li.home{background:#fff; color:#0574AF; text-decoration:none; font:10px/16px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; text-transform:uppercase;}
#topMenuMiddlePan ul li.contact{width:67px; border-right:1px solid #fff;}
#topMenuMiddlePan ul li.contact a{width:67px; height:16px; display:block; background:#fff; color:#4A4A4A; font:10px/16px "Trebuchet MS",Arial, Helvetica, sans-serif; text-decoration:none; font-weight:bold; text-align:center; text-transform:uppercase;}
#topMenuMiddlePan ul li.contact a:hover{background:#fff; color:#0574AF; text-decoration:none;}

#topMenuRightPan{width:70px; height:16px; float:left; background:url(images/menu-rightbg.gif) 0 0 no-repeat;}
/*----/TOP PANEL----*/
/*----BODY PANEL----*/
#bodyPan{
text-align: left;
width:700px;
position:relative;
margin:0 auto;
padding:25px 0 25px 0;
background-color: #FFFFFF;
}
/*----BODY ELEMENTS----*/

#bodyleftpan {
width: 310px;
float: left;
}
#bodyrightpan {
width: 390px;
float: right;
}


/* Profile Picture */
#profile {
width: 300px;
float: left;
}
/* Name, Status, Profile Views and Recent Ach. */
#info {
width: 380px;
float: right;
padding: 5px;
position: relative;
}
#infoleftpan {
width: 190px;
float: left;	
}
#inforightpan {
width: 190px;
float: right;
}
#username {
}
#name {
text-align: center;
padding: 5px 0 0 0;
}
#points {
text-align: right;
}
#views {
text-align: right;
padding: 5px 0 0 0;
}
#status {
text-align: center;
clear: both;
padding: 5px 0 0 0;
}
#achievement {
}
#achievementleftpan {
width: 190px;
float: left;
padding: 10px 0 0 0;
}
#achievementrightpan {
width: 190px;
float: right;
text-align: center;
padding: 10px 0 0 0;
}
#achievementrightpan A:link {text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #0000FF; font-weight: bold;}
#achievementrightpan A:visited {text-decoration: none; 	font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #0000FF; font-weight: bold;}
#achievementrightpan A:active {text-decoration: underline; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color:#676363; font-weight: bold;}
#achievementrightpan A:hover {text-decoration: underline; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color:#676363; font-weight: bold;}

#achievementlist {
padding: 5px;
clear: both;
}
.ach {
border: 1px solid #000000;
}
/* End of Info */

/* Add as Friend, Nominate, Shame - INTERACT start */

#interact {
width: 390px;
}
#interactbuttons {
margin: 0px auto;
width: 361px;
}
#interactfriend {
width: 110px;
float: left;
padding: 30px 5px 30px 5px;
text-align: center;
}
#interactnominate {
width: 110px;
float: left;
padding: 30px 5px 30px 5px;
text-align: center;
}
#interactshame {
width: 110px;
float: left;
padding: 30px 5px 30px 5px;
text-align: center;
}
/* End of Interact */

/* Comments POST start */

#post {
width: 388px;
border: 1px dashed #B08B0A;
}
#postarea {
width: 370px;
margin: 0 auto;
}
#postdisplay {
width: 185px;
float: left;
padding: 0 0 0 0;
}
#postnumber {
width: 185px;
float: right;
text-align: right;
padding: 0 0 0 0;
}
#poststatus {
width: 340px;
padding: 5px 0 0 30px;
clear: both;
}
#postsubmit {
width: 340px;
padding: 10px 0 0 30px;
position: relative;
}
#postform .text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 300px;
}
#postcomment {
width: 370px;
position: relative;
}
#postcommentleft {
width: 100px;
float: left;
}
#postcommentright {
width: 270px;
float: right;
}
#postcommentright A:link {text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #0000FF; font-weight: bold;}
#postcommentright A:visited {text-decoration: none; 	font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #0000FF; font-weight: bold;}
#postcommentright A:active {text-decoration: underline; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color:#676363; font-weight: bold;}
#postcommentright A:hover {text-decoration: underline; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color:#676363; font-weight: bold;}

#postcommentbody {
width: 270px;
padding: 10px 0 0 0;
}
/*----/BODY PANEL----*/
/*----FOOTER PANEL----*/
#footermainPan{
text-align: left;
height:85px;
background:url(images/footerbg.gif) 0 0 repeat-x #fff;
color:#010101;
clear:both;
padding:72px 0 0;
width: 778px;
margin:0px auto;
}

#footerPan{width:683px; text-align: center; position:relative; margin:0 auto; font-family:"Trebuchet MS",Arial, Helvetica, sans-serif}

#footerPan ul{width:550px; position:relative; margin:0px auto; text-align:center;}
#footerPan li{float:left; }
#footerPan ul li a{padding:0 10px 0; color:#010101; background:#F3F3F3; text-decoration:none;}
#footerPan ul li a:hover{text-decoration:underline;}

#footerPan p.copyright{width:204px; background:#F3F3F3; color:#04496D; position:absolute; top:23px; left:40px; font-size:12px;}

#footerPan ul.templateworld{width:291px; background:#F3F3F3; color:#444; display:block; position:absolute; top:40px; left:40px; font-size:10px;}
#footerPan ul.templateworld li{height:20px;}
#footerPan ul.templateworld li a{background:#F3F3F3; display:block; color:#444; text-decoration:none;}
#footerPan ul.templateworld li a:hover{text-decoration:underline;}

#footerPanhtml{width:79px; height:13px; display:block; position:absolute; top:26px; left:260px;}
#footerPanhtml a{width:48px; height:11px; display:block; background:url(images/blue-arrow.gif) 85% 60% no-repeat #fff; color:#4F4F4F; border:1px solid #DEDEDE; line-height:11px; font-size:11px; font-weight:bold; text-decoration:none; padding:1px 0 0 10px;}
#footerPanhtml a:hover{background:url(images/gray-arrow.gif) 85% 60% no-repeat #fff; color:#4F4F4F;}

#footerPancss{width:50px; height:13px; display:block; position:absolute; top:26px; left:322px;}
#footerPancss a{width:40px; height:11px; display:block; background:url(images/blue-arrow.gif) 35px 3px no-repeat #fff; color:#4F4F4F; border:1px solid #DEDEDE; line-height:11px; font-size:11px; font-weight:bold; text-decoration:none; padding:1px 0 0 10px; text-transform:uppercase;}
#footerPancss a:hover{background:url(images/gray-arrow.gif) 35px 3px no-repeat #fff; color:#4F4F4F;}
.heading {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: #0000FF;
}

 

HERE IS the BUGGY HTML SNIPPET: >:(

<div id="post"><div id="postarea">

<div id="postdisplay" class="marker">The Shield</div>
<div id="postnumber" class="count">78 shield posts</div>
<div id="poststatus" class="status">Displaying 10 most recent posts</div>
<div id="postsubmit"><form id="postform">
    <textarea class="text" name="textarea" rows="3">Write something on this knight's shield... 
(you can not edit after submitting)</textarea>
  <br />
  <input type="submit" name="Submit" value="Submit" />
  </form>
  </div>
<div id="postcomment">
<div id="postcommentleft">left</div>
<div id="postcommentright"><a href="http://www.wwpknights.com">Pammie K.</a><br /><span class="postcommentdetails">wrote at 11:15 pm on July 8th, 2007</span>
<div id="postcommentbody" class="postcommentbody">Ha Ha! I guess you got a youtube going on! LOL!</div>
</div>
</div>

</div></div>

 

I don't seem to get it. Firefox just can't get the div tag containers right. In IE it looks just fine!!

Link to comment
Share on other sites
TheFilmGod Advanced Member

TheFilmGod

Posted
  • Author
Posted

Okay, nevermind about the lengthy code I gave you to debug. I just realized how long it is.

 

Anyway, here is a very simple version of what I'm trying to do. I'm trying to put a border around each element. There are 3 elements. First one has no border, the second one is only supposed to have a blue border and the third is supposed to have only a gold dashed border.

 

In IE6 it works fine, in Firefox, element 1 & 2 has a blue border and the elment 3 is fine. I don't understand why FireFox is messed up and IE works!

 

Heres the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home of the Northern KNights</title>   
 <link href="style2.css" rel="stylesheet" type="text/css"><!-- Head End --><!-- HTML BODY START -->
</head><body>

<!-- Whole page container-->
<div id="bodyPan">

<!-- Left side page divider -->
<div id="bodyleftpan">
<div id="profile"><img src="profile.PNG" width="300" height="250" /></div>
</div>
<!-- End of left side page divider -->


<!-- Right side page divider -->
<div id="bodyrightpan">
<div id="info">Element 1 should have NO BORDER</div>

<div id="interact">Element 2, only element 2 should have a blue border</div>

<div id="post">Element 3 should only have a gold dashed border!</div>
</div>
<!-- Right side end -->

</div>
<!-- Whole page container end -->


</body></html>

 

CSS:

/* CSS Document */

body{
padding:0px;
margin:0px auto;
text-align: center;
background-image: url(images/bg.png);
background-repeat: repeat-y;
color:#5E5E5E;
font:13px/18px Arial, Helvetica, sans-serif;
background-position: center;
}

/*----/TOP PANEL----*/
/*----BODY PANEL----*/
#bodyPan{
text-align: left;
width:700px;
position:relative;
margin:0 auto;
padding:25px 0 25px 0;
background-color: #FFFFFF;
}
/*----BODY ELEMENTS----*/

#bodyleftpan {
width: 310px;
float: left;
}
#bodyrightpan {
width: 390px;
float: right;
}


/* Profile Picture */
#profile {
width: 300px;
float: left;
}
/* Element 1 */
#info {
width: 380px;
float: right;
padding: 5px;
position: relative;
}
/* Element 2 */
#interact {
width: 388px;
border: 1px solid #0000FF;
}
/* Element 3 */
#post {
width: 388px;
border: 1px dashed #B08B0A;
}
/*----/BODY PANEL----*/

 

What am I doing wrong here?

Example: wwpknights.com/profiles/index3

Link to comment
Share on other sites
TheFilmGod Advanced Member

TheFilmGod

Posted
  • Author
Posted

Actually, the shorter version was incorrectly done. There was a not needed float property in the css for one of the elements. This made Firefox trigger a glitch (bug) and make it not work properly. IE was fine - for once...  ;D

 

I'm going to start from scratch. The way I scripted the html was just wrong. I used extra padding to create room between divs, while I should have used margin. I just did it wrong.

 

I'll be back if I need more help. Thanks toon for your help!

Link to comment
Share on other sites
ToonMariner Advanced Member

ToonMariner

Posted
Posted

Glad it works but you still use millionsof divs. I can't see one <p> tag, your profile could be a definition list, friend table shoudl be an unordered list....

 

Mate Semantic markup - use the correct tag for the job. It will save you months of work in the future. Sorry but you are still using twince as much html as you need to make that page.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

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.   Restore formatting

  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.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.