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

09-11-2007, 12: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, 12: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, 02: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, 02: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, 02: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.


EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum