Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    May 2006
    Posts
    128
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question How to get CSS layout work in both IE and FF?

    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:

    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">
    <head>
    <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" />
    </head>
    
    <body scroll="no">
    <!--start body container -->
    
    <div id="wrapper">
    <!-- header -->
    <div id="header">
    <img src="header.jpg" alt="header" />
    </div>
    <!-- end header -->
    
    <!--feedback form-->
    <form method=post action="feedback.php">
    <textarea name="Feedback" class="form"></textarea><br />
    <input type=submit value="submit" class="button">
    </form>
    <!--end feedback form-->
    </div>
    <!--end body container -->
    </body>
    </html>
    This is my CSS code

    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;
    	font-weight:normal;
    	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

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    Regular Coder
    Join Date
    May 2006
    Posts
    128
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I've just tried using #header img {

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

  • #4
    Regular Coder
    Join Date
    May 2006
    Posts
    128
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Regular Coder
    Join Date
    May 2006
    Posts
    128
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

    Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •