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:
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:
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?