CSS stay with text

Discussion in 'Web Design & Coding' started by undeadpenguin, Jul 3, 2004.

  1. undeadpenguin

    undeadpenguin Bang. VIP Member

    Joined:
    Sep 1, 2003
    Messages:
    925
    Likes Received:
    4
    Location:
    US, CT
    http://members.cox.net/khockey1015/blog_this.html

    I've got a slight issue. See how the text runs way out of that box (in the middle)? How do I make it so that the box stays with the page (yet also be 200px above the bottom like it is in the code)?
     
    undeadpenguin, Jul 3, 2004
    #1
    1. Advertisements

  2. undeadpenguin

    James Photojournalist

    Joined:
    Dec 24, 2002
    Messages:
    6,662
    Likes Received:
    35
    It works in IE fine, but not in Moz. What exactly do you want done with this box in the middle?
     
    James, Jul 3, 2004
    #2
    1. Advertisements

  3. undeadpenguin

    RD2DG I smell a bump! VIP Member

    Joined:
    Oct 11, 2003
    Messages:
    549
    Likes Received:
    11
    Location:
    Madison
    [​IMG]

    I dont know it dose work in ie... this time... grr...
     
    RD2DG, Jul 3, 2004
    #3
  4. undeadpenguin

    Fenis-Wolf VIP Member

    Joined:
    Apr 30, 2003
    Messages:
    2,951
    Likes Received:
    35
    Location:
    Ann Arbor, Mi
    Looks fine in Opera.
     
    Fenis-Wolf, Jul 3, 2004
    #4
  5. undeadpenguin

    undeadpenguin Bang. VIP Member

    Joined:
    Sep 1, 2003
    Messages:
    925
    Likes Received:
    4
    Location:
    US, CT
    Okay... so what do I have to do to make it work in Mozilla?
     
    undeadpenguin, Jul 3, 2004
    #5
  6. undeadpenguin

    James Photojournalist

    Joined:
    Dec 24, 2002
    Messages:
    6,662
    Likes Received:
    35
    Explain what you want done exactly.
     
    James, Jul 4, 2004
    #6
  7. undeadpenguin

    undeadpenguin Bang. VIP Member

    Joined:
    Sep 1, 2003
    Messages:
    925
    Likes Received:
    4
    Location:
    US, CT
    I want the box to stay with the text. I still want the box to be 200px from the bottom of the page, though.
     
    undeadpenguin, Jul 4, 2004
    #7
  8. undeadpenguin

    James Photojournalist

    Joined:
    Dec 24, 2002
    Messages:
    6,662
    Likes Received:
    35
    What's happening is IE is looking at the code and it understands what you're trying to do and does it for you. FF is looking at it and is saying it's not correct that's why the text flies out of the box. You can't really successfully specify a box or text to be x amount of px from the bottom. It's very hard to do since everyone runs different resolutions. You could do this with Java Script and have the box move when you scroll, but I don't see why the box has to be that far up from the bottom as it breaks in different resolutions.
     
    James, Jul 4, 2004
    #8
  9. undeadpenguin

    undeadpenguin Bang. VIP Member

    Joined:
    Sep 1, 2003
    Messages:
    925
    Likes Received:
    4
    Location:
    US, CT
    Huh? How so? Unless you're running a resolution with a height of less than 500px (I don't even know if such a thing exists) it'll still be 200px up from the bottom. I don't think you understand what I mean. I don't want it to be 200px from the bottom without scrolling. If you scroll all the way down, the box should end 200px above the bottom. I know this is possible because I've seen it done on many sites.

    Simply: I want it to look like it does in IE.
     
    Last edited: Jul 4, 2004
    undeadpenguin, Jul 4, 2004
    #9
  10. undeadpenguin

    James Photojournalist

    Joined:
    Dec 24, 2002
    Messages:
    6,662
    Likes Received:
    35
    This is the best that I can do to get it to work in Moz.
    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" xml:lang="en" lang="en">
    <head>
     <title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
     <style type="text/css">
       body {
    	background-color: #ffffff;
    	color: #000000;
       }
       a { /* Links */
    	color: #000000;
    	text-decoration: underline;
       }
    
       p.title { /* The text for the title */
    	font-family: Arial;
    	font-size: large;
    	text-indent: 0px;
       }
    
       p.menu { /* The text for the menu */
    	text-indent: 0px;
    	font-family: Courier;
    	font-size: x-small;
       }
    
       p.main_title { /* The text for title on main */
    	text-indent: 5px;
    	font-family: Arial;
    	font-size: large;
       }
    
       p.main { /* The main text */
    	text-indent: 10px;
    	font-family: Serif;
    	font-size: normal;
       }
    
       #title { /* The title on the right */
    	position: absolute;
    	left: 95%;
    	right: 0px;
    	top: 0px;
    	bottom: 0%;
    	border-color: #000000;
    	border-right-width: 0px;
    	border-left-width: 2px;
    	border-top-width: 0px;
    	border-bottom-width: 0px;
    	border-style: solid;
       }
       #menu { /* The navigation menu box */
    	position: absolute;
    	left: 0;
    	width: 15%;
    	height: 15%;
    	border-color: #000000;
    	border-right-width: 2px;
    	border-left-width: 0px;
    	border-top-width: 0px;
    	border-bottom-width: 2px;
    	border-style: solid;
       }
       #main { /* The main body */ 
    	position: absolute;
    	left: 25%;
    	right: 25%;
    	top: 100px;
    	border-color: #000000;
    	border-width: 2px;
    	border-style: solid;
       }
      </style>
     </head>
     <body>
      <div id="menu">
       <p class="menu"><a href="index.html">blog</a>.<a href="misc/index.html">computer</a><br />
       <a href="me/index.html">about</a>.<a href="misc/index.html">miscellaneous</a></p>
      </div>
      
      <div id="main">
       <p class="main_title">pop tart, what's the matter?</p>
       <p class="main">Well, my blog is back. For the zero (0) people who actually care... *shrug*</p>
       <p class="main">I went over to my friend's house the other day. He's the other guy who's in <a href="http://www.undeadpenguin.org/thebetter/">the better</a> with me. He's a really big music fan. Anyway, he introduced me to some really cool bands. This could be taken as a good or a bad thing: I really want and like the new music, but now I have to spend a bunch of money on a bunch of CDs. Anyway, I was really impressed with the Smashing Pumpkins. I was just Googling around for them today (I was bored) and I learned that their last album, "Machina II/Friends &amp; Enemies of Modern Music," is available *for free* on the Internet. Apparently they were mad at the record label or something so they just gave it away. As a result, I've been listening to that almost non-stop. It's really good. <a href="http://www.metrochicago.com/smashingpumpkins.html">Here's a link to download it</a>. Happy listening :).</p>
       <p class="main">I'm really mad at SourceForge. I started a Linux distribution (2 weeks ago?) called Pynux. I submitted it to them. They rejected it. I asked them why. They sent me a response saying it was from a lack description. So, I sent them a new one. They won't respond to me. It's been 3 days. I even asked for a response yesterday. Nothing. So, I'm moving the project to BerliOS. **** you, Source Forge.</p>
       <p class="main">Well... that's it for tonight. It's almost midnight and I'm getting tired. Hope you like the new (abstract, I might add) design ;). I hope to have a comments system up sometime soon... assuming I don't forget about this site entirely again (like I did for the past... 3 months?). Anyway, sayonara.</p>
      </div>	
      
      <div id="title">
       <p class="title">&nbsp;T<br />
    	&nbsp;H<br />
    	&nbsp;A<br />
    
    	&nbsp;T<br />
    	&nbsp;S<br />
    	<br />
    	&nbsp;&nbsp;I<br />
    	&nbsp;T<br />
    	&nbsp;<br />
    	&nbsp;S<br />
    
    	&nbsp;&nbsp;I<br />
    	&nbsp;R<br />
    	&nbsp;<br />
    	&nbsp;Y<br />
    	&nbsp;O<br />
    	&nbsp;U<br />
    
    	&nbsp;R<br />
    	&nbsp;E<br />
    	<br />
    	&nbsp;L<br />
    	&nbsp;E<br />
    	&nbsp;A<br />
    
    	&nbsp;V<br />
    	&nbsp;&nbsp;I<br />
    	&nbsp;N<br />
    	&nbsp;G<br />
       </p>
      </div>
    </body>
    </html>
     
    James, Jul 4, 2004
    #10
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.