View Full Version : How to get CSS layout work in both IE and FF?

09-11-2007, 01:14 PM
Hi guys,

I'm putting together a feedback form and I'm having a little problem as to how Firefox and Internet Explorer 7 display it. The page contains a header (which is the image of a shadow, a one textfield form and a submit button. This is how FF is displaying the form (which is the way I want it displayed)...:


...and this is how IE7 is displaying the same form:


This is my HTML page code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>feedback form</title>
<link href="feedback.css" rel="stylesheet" type="text/css" media="all" />

<body scroll="no">
<!--start body container -->

<div id="wrapper">
<!-- header -->
<div id="header">
<img src="header.jpg" alt="header" />
<!-- end header -->

<!--feedback form-->
<form method=post action="feedback.php">
<textarea name="Feedback" class="form"></textarea><br />
<input type=submit value="submit" class="button">
<!--end feedback form-->
<!--end body container -->

This is my CSS code

html, body {
background-color: #F8F187;
scrollbar-face-color: #6B5D57;
scrollbar-highlight-color: #;
scrollbar-shadow-color: #FFFFFF;
scrollbar-3dlight-color: #6B5D57;
scrollbar-arrow-color: #FFFF99;
scrollbar-track-color: #FFFF99;
scrollbar-darkshadow-color: #;

/*container div definition*/
#wrapper {
margin: 0 auto;
width: 400px;
height: auto;
position: relative;
min-height: 100%;

/*header div*/
#header {
width: 400px;
height: 96px;
margin-bottom: -1px;

/*feedback form field*/
.form {
background-color: #FFFF99;
font-family: Arial;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
color: 6b5D57;
border: 1px solid #6B5D57;
width: 400px;
height: 175px;

/* submit button*/
.button {
background-color: #6B5D57;
font-family: arial;
font-size: 24px;
color: #F8F187;
border: none;
width: 121px;
height: 35px;
margin-left: 281px;
margin-top: 40px;

If I change the margin-bottom to have the shadow sit on the textfield for IE purposes then the shadow gets partly hidden in FF. How do I amend the code in such a way that the shadow sits on the textfield in both IE and FF.

I heard that it is possible to specify browser specific CSS but I don't know how to write the code.

Thanks for your help

09-11-2007, 01:25 PM
Try putting #header img { instead of just #header as IE will put a space when you have a space in the HTML between any element and an image.

09-11-2007, 03:05 PM
I've just tried using #header img {

The gap is still there in IE and a small gap is introduced in FF.

09-11-2007, 03:16 PM
Problem solved...since you mentioned that IE leaves a gap (which I thought could either be a margin or padding), I decided to remove all margins and padding to save me a headache and it worked!

Thanks for your help.

09-11-2007, 03:19 PM
One last thing I wanted to ask. We all know how to horizontally center with CSS. I would like to know if it's also possible to vertically center my page as well and how is it done.