Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: Layout Problems

  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Layout Problems

    Let me state my problem. Under my links which is under the banner, it says My Tickets, and User it seems in Internet Explorer it shows an extra 2px border on the bottom. Something to do with the height I assume.

    Now in firefox there is a 10px gap in between the Ticket Deck banner and the Links Bar.

    Also I can't keep to get the copyright centered for some reason :s .

    Here is the html:
    Code:
    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 
    	 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
     <html><head><title>Ticket Deck v. 1.0 beta</title>
     <link href='index.css' rel='stylesheet' type='text/css' />
    <body>
    <div id='header'>
        <div id='tlogo'><div id='logo'></div></div>
    	    <div id='links'>
    		   <ul>
    			   <li><a href='#'><img src='images/linksmy.gif' width='91' height='25' alt='My Tickets'></a></li>
    			   <li><a href='#'><img src='images/linksuser.gif' width='83' height='25' alt='User Area'></a></li>
    		   </ul>
    	</div>
    </div>
    <br />
    <div id='memberbar'>
        <div id='textmargin1'>
        test
        </div>
    </div>
    <br/>
    <div id='container'>
        <div id="content">Welcome to Ticket Deck's Ticket System. What is listed below is your ticket's summary clicking on the subject title will
    	bring you directly to your ticket.<br/>
            <div id="tickets"><div id="tbar"><div id="textmargin">Ticket Summary</div></div>
    		<div id="tcontain">
    			<table width='100%' cellpadding='3' cellspacing='1' id='toutline'>
    			<tr>
    				<th width='5%'>id</th>
    				<th width='30%'>Subject</th>
    				<th width='10%'>Priority</th>
    				<th width='23%'>Starter</th>
    				<th width='15%'>Status</th>
    				<th width='10%'>Dept #</th>
    			</tr>
    			<tr>
    			</table>
    
    </div>
    <br/>
    		<center>Welcome Guest! Please login to view your tickets!</center>
    		</div>
    	</div>
    
        <div id="nav"><div id="navbar"><div id="textmargin">Login</div></div>
        <div id="textmargin">
        Username: <br/>
    	<input type="text" name="username" size="25" /><br />
        Password: <br/>
    	<input type="text" name="username" size="25" /><br /><br />
        <input type="hidden" name="do" value="new">
        <center>
        <input type="submit" name="Submit" value="Login" />
        <input type="reset" name="reset" value="Reset" /><br/>
        </center>
    	</div>
    	<div id="navstrip"><div id="textmargin">Ticket Statistics</div></div>
    	lovely stats here
    	   <br/>
       	<div id="navstrip"><div id="textmargin">Ticket Statistics</div></div>
    	Update: Ticket Deck re
       </div>
       <div id="copyright">
    <center>Powered by <a href="#">Ticket Deck</a> v. 1.0 Beta 1</center>
    </div>
       </div>
    </div>
    </body>
    The CSS

    Code:
    body {
    background: #f8f8f8;
    color: #8a6600;
    font: 12px verdana, arial, sans-serif;
    margin: 0px;
    padding: 0px;
    }
    a img {
    border:0;
    }
    div#tlogo {
    background-image: url(images/tlogo.gif);
    width: 100%;
    height: 25px;
    }
    div#logo {
    background-image: url(images/logo.gif);
    width: 197px;
    height: 25px;
    margin-left: 25px;
    }
    
    div#links {
    height: 25px;
    min-height: 25px;
    width: 100%;
    background-image: url(images/linksbg.gif);
    padding: 0;
    margin-top: 1px;
    }
    
    div#links ul {
    list-style:none;
    }
    div#links ul li {
    float:left;
    }
    div#header {
    height: 51px;
    }
    div#container {
    color: #ebba34;
    height: 200px;
    min-height: 100%;
    width: 830px;
    margin: auto;
    }
    * html #container {
    height:100%;
    }
    *html #copyright {
    position: absolute;
    bottom: 0px;
    }
    div#date {
    margin-right: 10px;
    float:right;
    }
    div#nav {
    color: #1b90b7;
    border: 1px solid #61a5b9;
    float: left;
    width: 220px;
    background: #e5f9ff;
    }
    
    div#navbar {
    border: 1px solid #61a5b9;
    width: 216px;
    color: #1b90b7;
    margin-left: 1px;
    margin-right: 1px;
    margin-top: 1px;
    height: 23px;
    background-image: url(images/nav.gif);
    }
    
    div#navstrip {
    width: 100%;
    background-image: url(images/nav.gif);
    height: 23px;
    border-top: 1px solid #1b90b7;
    border-bottom: 1px solid #1b90b7;
    }
    
    div#textmargin {
    margin-left: 2px;
    margin-top: 4px;
    }
    
    
    div#textmargin1 {
    margin-left: 2px;
    margin-top: 6px;
    }
    
    div#tickets {
    background: #ffebb3;
    width: 602px;
    border: 1px solid #e8af3a;
    float: right;
    }
    
    div#tbar{
    width: 598px;
    background-image: url(images/t_bar.gif);
    height: 23px;
    border: 1px solid #e8af3a;
    margin-left: 1px;
    margin-right: 1px;
    margin-top: 1px;
    }
    
    div#tcontain{
    width: 599px;
    height: 18px;
    margin-left: 1px;
    margin-right: 1px;
    }
    div#content {
    width: 602px;
    color: #8a6600;
    float: right;
    }
    
    div#memberbar {
    color: #1b90b7;
    style: bold;
    width: 80%;
    height: 28px;
    background: #e5f9ff;
    border: 1px solid #61a5b9;
    margin:auto;
    }
    
    div#toutline {
    border: 1px solid #cde1ed;
    }
    
    #copyright {
    text-align: center;
    height:20px;
    position: absolute;
    bottom: 0px;
    position: bottom;
    }
    
    table,
    tr,
    td {
    	background: transparent;
    	font-size: 12px;
    	font-family: verdana, arial, sans-serif;
    }
    
    table th {
    	background: #fadc89;
    	font-size: 12px;
    	font-family: verdana, arial, sans-serif;
    	font-weight: normal;
    	text-align: left;
    	padding: 2px;
    }
    
    table th a {
    	color: #003E67 !important;
    	text-decoration: none;
    }
    Any help is appreciated . I know that this isn't valid xhtml I haven't gone that far in fixing it to make it valid, just trying to fix the obvious problems.

    Thanks,
    Brian

  • #2
    New Coder
    Join Date
    Jan 2007
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Blah I am having problems with the Edit button! First i edited and pressed enter and it never loaded all the way to save it. Now the button won't do anything when clicked.

    So here is the link http://trueamericanlife.com/support/index.html

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Garcia,
    Add this to your CSS:
    Code:
    * {
    margin: 0;
    padding: 0;
    }
    But you really need to work on validating if you expect any chance of rendering the same in different browsers. Have you looked at it in IE7?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Jan 2007
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks fixed my first problem!

    Now how do I fix the error with IE not handling heights very well in CSS and adding more then needed, and how to center the copyright .

    Regards,
    Brian

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,918
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Fixing your errors might fix your problems.

  • #6
    New Coder
    Join Date
    Jan 2007
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ahh thanks I did realize I missed a lot of important things since I exported it from one of my php scripts I am working on shows how unorganized I can get .

  • #7
    New Coder
    Join Date
    Jan 2007
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok fixed most of the errors.

    Only problem is the links bar in IE, it appears it adds an extra 2px on the bottom. And the copyright does not appear because of the position: absolute; .

    Here is the code don't mind the php .

    http://trueamericanlife.com/support/index.php

    Code:
    <?php
    session_start();
    header("Cache-control: no-cache");
    //All the required files
    require ('config.php');
    require ('en/en_text.php');
    require ('sql/idx_sql.php');
    require ('skin/skin_global.php');
    
    
    
    print "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
     <html><head><title>Ticket Deck v. 1.0 beta</title>
     <link href='skin/index.css' rel='stylesheet' type='text/css' />
     </head>
    <body>
    <div id='tlogo'><div id='logo'></div></div>
    <div id='links'>
    		   <ul>
    			   <li><a href='#'><img src='images/linksmy.gif' width='91' height='25' alt='My Tickets' /></a></li>
    			   <li><a href='#'><img src='images/linksuser.gif' width='83' height='25' alt='User Area' /></a></li>
    		   </ul>
    		   <div id='date'>
    			   ";
    print date('M d, Y');
    print"
    </div>
    	</div>
    <div class='spacer'></div>
    <div id='memberbar'>
    <div class='textmargin1'><b>";
    //Get Title
    while ($row = mysql_fetch_assoc($rs) )
    {
    print ( $row['title'] );
    
    }
    print"</b>";
    
    
    //login bar. checks if person is guest, and checks if person is logged on
    if($_SESSION['id']) {
    print ("&lt; <a href='userarea.php'>User Area</a> Welcome ".$_SESSION['username']. "! " );
    }
    else {
    print "$title <b>&lt; <a href='login_form.php'>Login</a></b> or <b><a href='register.php'>Register</a></b> Guest! ";
    }
    
    print "
    </div></div>
    <div class='spacer'></div>
    ";
    
    print "
    <div id='container'>
        <div id='content'>
    Welcome to Ticket Deck's Ticket System. What is listed below is your ticket's summary clicking on the subject title will bring you directly to your ticket.<br/>
            <div id='tickets'><div id='tbar'><div class='textmargin'>Ticket Summary</div></div>
    		<div id='tcontain'>
    			<table width='100%' cellpadding='3' cellspacing='1' id='toutline'>
    			<tr>
    				<th width='5%'>id</th>
    				<th width='30%'>Subject</th>
    				<th width='10%'>Priority</th>
    				<th width='23%'>Starter</th>
    				<th width='15%'>Status</th>
    				<th width='10%'>Dept #</th>
    			</tr>
    			</table>
    
    </div>
    <br/>
    ";
    	if($_SESSION['id']) {
    print ("<center>Tickets to be displayed here</center>" );
    }
    else {
    print "<center>Welcome Guest! Please login to view your tickets!</center>";
    }
    
    print "
    		</div>
    	</div>
    
    ";
    
    print "
    <div id='nav'><div id='navbar'><div class='textmargin'> ";
    if($_SESSION['id']) {
    print ("Welcome <a href='logout.php'>[Log Out]</a>" );
    }
    else {
    print "Login";
    }
    print "
    </div></div>
        <div class='textmargin'>
    ";
    if($_SESSION['id']) {
    print ("<center>Logged in as: ".$_SESSION['username']."</center>
    <br/>
    <b>Ticket Summary</b>: <a href='#'>View</a><br/><br/>
    <b>User Area</b>: <a href='#'>View</a><br/><br/>
    " );
    }
    else {
    print "    
    <form action='login.php' method='post'>
    Username: <br/>
    	<input type='text' name='username' size='25' /><br />
        Password: <br/>
    	<input type='password' name='password' size='25' /><br /><br />
        <input type='hidden' name='do' value='new' />
        <center>
        <input type='submit' name='Submit' value='Login' />
        <input type='reset' name='reset' value='Reset' /><br/>
        </center>
    </form>
    	";
    }
    print "
    	</div>
    	<div class='navstrip'><div class='textmargin'>Ticket Statistics</div></div>
    	lovely stats here
    	   <br/>
       	<div class='navstrip'><div class='textmargin'>Ticket Statistics</div></div>
    	Update: Ticket Deck 10% Finished
       </div>
    ";
    print "<div id='copyright'>
    Powered by <a href='#'>Ticket Deck</a> v. 1.0 Beta 1
    </div>
       </div>
    </body>
    </html>
    ";
    
    ?>
    And here is the CSS.

    Code:
    body {
    background: #f8f8f8;
    color: #1b90b7;
    font: 12px verdana, arial, sans-serif;
    margin: 0px;
    padding: 0px;
    }
    a img {
    border:0;
    }
    * {
    margin: 0;
    padding: 0;
    }
    div#tlogo {
    background-image: url(images/tlogo.gif);
    width: 100%;
    height: 25px;
    }
    div#logo {
    background-image: url(images/logo.gif);
    width: 197px;
    height: 25px;
    margin-left: 25px;
    }
    
    div#links {
    height: 25px;
    min-height: 25px;
    width: 100%;
    background-image: url(images/linksbg.gif);
    padding: 0;
    margin-top: 1px;
    }
    
    div#links ul {
    list-style:none;
    }
    div#links ul li {
    float:left;
    }
    div#header {
    height: 51px;
    }
    div#container {
    color: #1b90b7;
    height: 200px;
    min-height: 100%;
    width: 830px;
    margin: auto;
    }
    * html #container {
    height:100%;
    }
    
    div#date {
    margin-right: 10px;
    height: 5px;
    width: 100px;
    float:right;
    }
    div#nav {
    color: #1b90b7;
    border: 1px solid #61a5b9;
    float: left;
    width: 220px;
    background: #e5f9ff;
    }
    
    div#navbar {
    border: 1px solid #61a5b9;
    width: 216px;
    color: #1b90b7;
    margin-left: 1px;
    margin-right: 1px;
    margin-top: 1px;
    height: 23px;
    background-image: url(images/nav.gif);
    }
    
    .navstrip {
    width: 100%;
    background-image: url(images/nav.gif);
    height: 23px;
    border-top: 1px solid #1b90b7;
    border-bottom: 1px solid #1b90b7;
    }
    
    .textmargin {
    margin-left: 2px;
    margin-top: 4px;
    }
    
    .spacer {
    height: 20px;
    }
    
    .textmargin1 {
    margin-left: 2px;
    margin-top: 6px;
    }
    
    div#tickets {
    background: #ffebb3;
    width: 602px;
    border: 1px solid #e8af3a;
    float: right;
    }
    
    div#tbar{
    width: 598px;
    background-image: url(images/t_bar.gif);
    height: 23px;
    border: 1px solid #e8af3a;
    margin-left: 1px;
    margin-right: 1px;
    margin-top: 1px;
    }
    
    div#tcontain{
    width: 599px;
    height: 18px;
    margin-left: 1px;
    margin-right: 1px;
    }
    div#content {
    width: 602px;
    color: #8a6600;
    float: right;
    }
    
    div#memberbar {
    color: #1b90b7;
    width: 80%;
    height: 28px;
    background: #e5f9ff;
    border: 1px solid #61a5b9;
    margin:auto;
    }
    
    div#toutline {
    border: 1px solid #cde1ed;
    }
    
    #copyright {
    text-align: center;
    height:20px;
    width: 800px;
    position:absolute;
    bottom:0px;
    }
    
    table,
    tr,
    td {
    	background: transparent;
    	font-size: 12px;
    	font-family: verdana, arial, sans-serif;
    }
    
    table th {
    	background: #fadc89;
    	font-size: 12px;
    	font-family: verdana, arial, sans-serif;
    	font-weight: normal;
    	text-align: left;
    	padding: 2px;
    }
    
    table th a {
    	color: #003E67 !important;
    	text-decoration: none;
    }
    Any help is appreciated.
    Last edited by Garcia; 01-31-2007 at 02:25 AM.


  •  

    Posting Permissions

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