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.
CSS Potitioing Help
Moderator: General Moderators
CSS Potitioing Help
- Attachments
-
- Test Site.zip
- The Test Site with CSS file
- (1.88 KiB) Downloaded 57 times
Re: CSS Potitioing Help
Could you post the code? I'd gladly help but don't want to download stuff.
Re: CSS Potitioing Help
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.
HTML CODE
CSS
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.
I attached the code in the zip file but here it ismatthijs wrote:Could you post the code? I'd gladly help but don't want to download stuff.
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>
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:
Re: CSS Potitioing Help
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.
You could use an empty element like this, or use an existing one like a footer div or p or something
For that you need some way of clearing the wrapper.
Code: Select all
<div style="clear:both"></div>
</div>
</body>
</html>Re: CSS Potitioing Help
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
Should I add the clear:both to the css or the html file.
I got a liitle lost
Re: CSS Potitioing Help
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?
Hope that's clear?