Page 1 of 1

CSS Potitioing Help

Posted: Mon Mar 03, 2008 7:58 pm
by cupaball
This is kinda weird to me, but the attched form layout using css looks fine in IE6+ and 7, but not in FireFox.

Can someone look at this and tell me what I did wrong? Usually, it is IE that I cannot get to work.

Let me know your thoughts.

Re: CSS Potitioing Help

Posted: Tue Mar 04, 2008 12:12 am
by matthijs
Could you post the code? I'd gladly help but don't want to download stuff.

Re: CSS Potitioing Help

Posted: Tue Mar 04, 2008 2:10 pm
by cupaball
Mod | Please use [ code=html ], [ code=php ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.

matthijs wrote:Could you post the code? I'd gladly help but don't want to download stuff.
I attached the code in the zip file but here it is

HTML CODE

Code: Select all

 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aminah Designs Admin Manage Testimony</title>
<link href="css/testi_update.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Aminah Designs Admin Area</h1>
<h2> Update Customer Testimony </h2>
</div>
<div id="add_test">
<form method="POST" enctype="multipart/form-data" name="add_testimont">
<div>
  <label for="first_name">First Name</label>
  <input name="first_name" type="text"  class="txt" id="first_name" />
</div>
<div>
  <label for="last_name">Last Name</label>
  <input name="last_name" type="text" class="txt" id="last_name" />
</div>
<div>
  <label for="title">Title</label>
  <input name="title" type="text" class="txt" id="title" />
</div>
<div>
  <label for="comp_name">Company Name</label>
  <input name="comp_name" type="text" class="txt" id="comp_name" />
</div>
<div>
  <label for="design_type">Design Type</label>
  <input name="design_type" type="text" class="txt" id="design_type" />
</div>
<div class="list">
<label for="label">List on Website</label>
  <select name="list" id="label">
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select>
  </div>
<div class="testiupate">
  <label for="testimony">Testimony</label>
  <textarea name="testimony" cols="30" rows="5" wrap="virtual" id="testimony"></textarea>
  <input name="date_entered" type="hidden" id="date_entered" value="<? print(Date("m/j/y")); ?>" />
  <input name="id" type="hidden" id="id" />
</div>
<div class="btn1">
  <input class="btn2" name="add_test" type="image"  src="images/edit_btn.jpg" value="Add"/>
</div>
</form>
</div>
</div>
</body>
</html>
 
CSS

Code: Select all

 
@charset "utf-8";
/* CSS Document */
 
body {
background-color: #999999;
position:relative;
}
 
* {
padding:0px;
margin:0px;
}
 
#wrapper {
position:relative;
background-color:#FFFFFF;
border: 1px solid #000000;
width: 800px;
padding: 0em 1em 1em 1em;
margin-left:auto;
margin-right:auto;
}
 
#wrapper h1 {
height: 100px;
width:800px;
background-image: url(../images/admin_header_main.jpg);
background-repeat:no-repeat;
text-indent: -9999px;
}
 
#wrapper h2 {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
border-bottom: 1px solid #000000;
padding-bottom: .5em;
padding-top: .5em;
}
 
#add_test {
position:relative;
}
 
 
#add_test {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#000000;
width:800px;
}
 
#add_test .form_float{
position:relative;
float:left;
display:block;
width:200px;
padding: .5em;
}
 
#add_test form div{
float:left;
display:block;
width:200px;
padding: .5em;
}
 
 
#add_test input {
width: 200px;
height:25px;
}
 
 
#btn input{
width: 100px;
height: 44px;
}
 
 
input.txt {
color:  #000000;
background-color:#999999;
border: 1px solid #999999;
font: 14px Geneva, Arial, Helvetica, sans-serif;
padding-top: .3em;
padding-left: .5em;
}
 
#add_test textarea{
width:200px;
}
 
 
.table_head td {
padding: .5em;
}
 
.test_width {
width:200px;
}
 
 
#add_test .testiupate {
clear:both;
float:left;
}
 
#add_test .btn1{
clear:both;
float:left;
width:150px;
}
 
#add_test .list {
width:120px;
}
 
#add_test .btn2{
height:44px;
width:110px;
}
 
#add_test select {
width:75px;
}
 

Mod | Please use [ code=html ], [ code=php ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.

Re: CSS Potitioing Help

Posted: Wed Mar 05, 2008 1:14 am
by matthijs
It would also help if you describe the problem. My suspicion is that you mean the shrink-wrapping of the wrapper div? (the background not extending down)

For that you need some way of clearing the wrapper.

Code: Select all

 
<div style="clear:both"></div>
</div>
</body>
</html>
You could use an empty element like this, or use an existing one like a footer div or p or something

Re: CSS Potitioing Help

Posted: Wed Mar 05, 2008 5:38 pm
by cupaball
Yes that is exactly my issue! (sorry, I guess it would have helped if I was more specific).

Should I add the clear:both to the css or the html file.

I got a liitle lost

Re: CSS Potitioing Help

Posted: Thu Mar 06, 2008 2:51 pm
by matthijs
Just leave it in like this for now. It's just a meaningless div with an inline style. Once you understand CSS a bit better you can put the clearing rules in an external css file.

Hope that's clear?