SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Sep 2000
    Location
    Seattle, WA area
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi everybody!

    I'm trying out the "no-tables CSS page" as shown in a SitePoint article earlier this week.

    The problem is: I'm trying to put my copyright on the bottom of the page, but it seems to go to the top of the page in Opera, but actually go to the bottom of the page in IE.

    How can I fix this?

    Here is the code for the (releavant part of the) HTML page:
    Code:
    <body id="body">
    
    	<div id="oldbrowser">
    		Old Browser Alert! Message goes here.
    		</div>
    
    	<div id="logoheader">
    		</div>
    
    	<div id="content">
    		Test of the content frame.
    		</div>
    
    	<div id="leftmenu">
    		TextText
    		</div>
    
    	<div id="rightcolumn">
    		Testing...
    		</div>
    
    	<div id="copyright">
    		<font class='copyrighttext'>Copyright dcsonic2k
    		</div>
    And here is the code for the CSS:
    Code:
    body {
    	color:#333;
    	background-color:white;
    	width:770px;
    	margin:0px;
    	padding:0px;
    	font:11px trebuchet ms, verdana, arial, helvetica, sans-serif;
    	}
    
    #oldbrowser {
    	display:none;
    	}
    
    #logoheader {
    	width:100%;
    	height:100px;
    	margin:0;
    	background-image:url(header.gif);
    	}
    
    #content {
    	position:absolute;
    	left:129px;
    	width:506px;
    	padding-left:5px;
    	padding-right:5px;
    	padding-bottom:20px;
    	z-index:2;
    	}
    
    #leftmenu {
    	position:absolute;
    	width:129px;
    	background-image:url(sidebar.gif);
    	background-repeat:no-repeat;
    	padding-top:56px;
    	padding-bottom:20px;
    	z-index:3;
    	}
    
    #rightcolumn {
    	position:absolute;
    	left:645px;
    	width:125px;
    	padding-bottom:20px;
    	z-index:1;
    	background-color:yellow;
    	}
    
    #copyright {
    	position:absolute;
    	width:100%;
    	height:100%;
    	margin:0;
    	bottom:0px;
    	}
    
    #copyrighttext {
    	vertical-align:bottom;
    	}
    Thanks alot for your help!

    --David

  2. #2
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try removing the height:100%
    and making sure all margin:0 have a unit..like px or em.

    you used a <font> tag to ocntain a style. lol...one of css's objectives is to refrain from using font tags.

    replace it with a <span> tag please. lol
    btw....
    if you want to add the copyright circle thingy...use this code: &copy

    thought oyu might want it
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  3. #3
    Rusted & Weathered HumanClay's Avatar
    Join Date
    Sep 2000
    Location
    Milwaukee, WI
    Posts
    225
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of using <font> use <span>

    [ edit: whoops, didn't see that line in lynlimz's post! i need to get some sleep! heh ]
    Steve Caponetto - [profile] [e-mail]
    CreedFeed.com - feed your need for Creed!

  4. #4
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey,

    lol.....alright
    i just realised they showed the copyright sign instead of the code...agrh....lets try it again

    [edit..i give up. go look at the source code..lol]
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  5. #5
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try adjusting the positioning of the copyright element. You've set it to absolute(which is measured from the upper left corner), but didn't give it any top and left values. Or set it to a relative position of the element you want it to follow.
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •