SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    If it aint Dutch it aint much Kilroy's Avatar
    Join Date
    Oct 2003
    Location
    The Netherlands
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Opera and padding of forms

    Hi, here's a page I'm working on:

    HTML Code:
    <!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>Code-Kilroy.com :: For all your coding needs</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <style type="text/css" media="screen">
    @import "style.css";
    </style>
    
    </head>
    
    <body>
    
    	<div id="outer">
    
    	<div id="header">
    
    	Code-Kilroy.com - coming soon!
    
    	<div id="smallheader">
    
    	For all your coding needs
    
    	</div>
    
    	</div>
    
    	<div id="left">
    	
    	<div id="menuheader">
    
    	Menu
    
    	</div>
    
    	<p>
    	<a href="index.php" title="Home page">Home</a><br />
    	<a href="downloads.php" title="Downloads">Downloads</a><br />
    	<a href="forums/index.php" title="The Code-Kilroy Forums">Forum</a><br />
    	<a href="reviews.php" title="Reviews">Reviews</a><br />
    	<a href="tutorials.php" title="Tutorials on web design and web programming">Tutorials</a><br />
    	<a href="faq.php" title="Frequently Asked Questions">FAQ</a><br />
    	<a href="links.php" title="Links and resources">Links</a><br />
    	<a href="contact.php" title="Contact us">Contact</a><br />
    	<a href="sitemap.php" title="Sitemap">Sitemap</a><br />
    	</p>
    
    	<div id="onlineheader">
    	
    	Who's online
    	
    	</div>
    
    	</div>
    
    	<div id="right">
    	
    	<div id="loginheader">
    	
    	Login
    
    	</div>
    
    	<p>
    	<form action="checkuser.php" method="post" name="" id="">
    	Username:<br />
    	<input name="user" type="text" id="username" value="" size="15" />
    	<br />
    	Password:<br />
    	<input name="password" type="password" id="password" value="" size="15" /><br />
    	<br />
    	<input type="submit" name="submit" value="Log In" />
    	</form>
    	</p>
    
    	<div id="postsheader">
    
    	Latest Forum Posts
    
    	</div>
    
    	</div>
    
    	<div id="clearheader"></div>  
    
    	<div class="content">
    
    	<p>
    	Code-Kilroy.com will go online soon!
    	</p>
    
    	</div>
    
    	<div id="footer">
    
    	&copy; Copyright 2004 Peter Akkies aka Kilroy
    
    	</div>
    
    	</div>
    
    </body>
    </html>
    and here's the CSS:

    Code:
    html {height: 100%}
    body {
    	background-color: fff;
    	height: 100%;
    }
    #outer{
    	height:100%;
    	min-height:100%;
    	background:#F8E7EC;
    	border: 1px solid black;
    	margin-bottom:-52px;
    	color: #000000;
    } 
    html>body #outer{
    	height:auto; /* For mozilla as IE treats height as min-height anyway */
    } 
    p {
    	font-family: verdana, arial, "ms sans serif", sans-serif; 
    	font-size: 12px; 
    	margin: 2px;
    	line-height: 14px;
    	padding-left: 10px;
            padding-right: 10px
    	padding-top: 2px;
    	padding-bottom: 2px;
    }
    h1 {
    	font-family: verdana, arial, "ms sans serif", sans-serif; 
    	text-align: center;
    }
    #header {
    	font-family: verdana, arial, "ms sans serif", sans-serif;
    	font-size: 24px;
    	text-align: center;
    	background-color: #8EB8E1;
    	border-bottom: 1px solid black;
    	height: 70px;
    }
    #smallheader {
    	font-size: 12px;
    	text-align: center;
    }
    #clearheader{
    	height:-72px; /* Needed to make room for header */
    } 
    #left {
    	width: 150px;
    	background-color: #8EB8E1;
    	border-top: 1px solid black;
    	border: 1px solid black;
    	margin-top: 5px;
    	margin-left: 3px;
    	text-align: left;
    	padding-bottom: 5px;
    	float: left;
    }
    #menuheader {
    	background-color: #4677A9;
    	border-bottom: 1px solid black;
    	text-align: center;
    	font-family: verdana, arial, "ms sans serif", sans-serif;
    	font-weight: bold;
    }
    #onlineheader {
    	background-color: #4677A9;
    	border-top: 1px solid black;
    	border-bottom: 1px solid black;
    	text-align: center;
    	font-family: verdana, arial, "ms sans serif", sans-serif;
    	font-weight: bold;
    	font-size: 12px; 
    	padding-top: 2px;
    	padding-bottom: 2px;
    }
    #right {
    	width: 150px;
    	background-color: #8EB8E1;
    	border-top: 1px solid black;
    	border: 1px solid black;
    	margin-top: 5px;
    	margin-right: 3px;
    	text-align: left;
    	padding-bottom: 5px;
    	float: right;
    }
    #loginheader {
    	text-align: center;
    	background-color: #4677A9;
    	border-bottom: 1px solid black;
    	font-family: verdana, arial, "ms sans serif", sans-serif;
    	font-weight: bold;
    }
    #postsheader {
    	background-color: #4677A9;
    	border-top: 1px solid black;
    	border-bottom: 1px solid black;
    	text-align: center;
    	font-family: verdana, arial, "ms sans serif", sans-serif;
    	font-weight: bold;
    	font-size: 12px; 
    	padding-top: 2px;
    	padding-bottom: 2px;
    }
    .content {
    	text-align: left;
    	background-color: #8EB8E1;
    	border: 1px solid black;
    	margin-top: 5px;
    	margin-left: 165px;
    	margin-right: 165px;
    	float: center;
    }
    #footer {
    	text-align: center;
    	background-color: #8EB8E1;
    	border: 1px solid black;
    	margin-top: 5px;
    	margin-left: 5px;
    	margin-right: 5px;
    	height: 20px;
    	clear: both;
    }
    a:link, a:active, a:hover, a:visited {
    	font-family: verdana, arial, "ms sans serif", sans-serif;
    	font-size: 12px;
    	color: #173B5E;
    	text-decoration: none;
    }
    input, textarea, select {
     background-color: #CCCCCC;
     border-style: solid;
     border-width: 1px;
     font-family: verdana, arial, sans-serif;
     font-size: 10px;
     color: #333333;
    }
    If you look at the login form on the right in IE it has a 10px left padding because the form is in a paragraph but in Opera it does not have the 10px padding.

    Is this a fault in Opera's display or should I set the input, textarea, select to have a 10px left padding?

    Greetz,

    Kilroy

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    It's not Operas fault it's yours

    You have wrapped a block level element (the form) in a paragraph tag which is not valid html. Which is probably why opera (and other browsers won't display it properly).

    Move the <p> tag inside the form and all should be ok.

    Paul

  3. #3
    If it aint Dutch it aint much Kilroy's Avatar
    Join Date
    Oct 2003
    Location
    The Netherlands
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thx! It works fine now


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
  •