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 8 of 8

Thread: IE css Problem

  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    75
    Thanks
    9
    Thanked 2 Times in 2 Posts

    Smile IE css Problem

    hello

    I have a problem with IE css looking diffident in each diffident IE
    I added a screen shot so you can see



    as you can see IE7 to 9 is wrong display

    this is my css

    Code:
    /* LOGIN & REGISTER FORM */
    
    form.log {
    	width: 300px;
    	height: 400px;
    	margin-left: 10em;
    	background: white;
    	border-radius: 3px;
    	box-shadow: 0 0 10px rgba(0,0,0, .4); 
    	text-align: center;
    	padding-top: 1px;
    }
    /* Register form height */
    form.register{
    	width: 900px;
    	height: 400px;
    	margin-left: 3em;
    	background: white;
    	border-radius: 3px;
    	box-shadow: 0 0 10px rgba(0,0,0, .4); 
    	text-align: center;
    	padding-top: 1px;
    }
    /* report form height */
    form.report{
    	width: 900px;
    	height: 500px;
    	margin-left: 3em;
    	background: white;
    	border-radius: 3px;
    	box-shadow: 0 0 10px rgba(0,0,0, .4); 
    	text-align: center;
    	padding-top: 1px;
    }
    /* Input fields; Username, Password etc. */
    form .text-field {
    	border: 1px solid #a6a6a6;
    	width: 230px;
    	height: 40px;
    	border-radius: 3px;
    	margin-top: 10px;
    	padding-left: 10px;
    	color: #6c6c6c;
    	background: #fcfcfc;
    	outline: none;
    }
    
    form .text-field1 {
    	border: 1px solid #a6a6a6;
    	width: 600px;
    	height: 100px;
    	border-radius: 3px;
    	margin-top: 10px;
    	padding-left: 10px;
    	color: #6c6c6c;
    	background: #fcfcfc;
    	outline: none;
    }
    
    form .text-field:focus {
    	box-shadow: inset 0 0 2px rgba(0,0,0, .3);
    	color: #a6a6a6;
    	background: white;
    }
    /* Submit button */
    form .button {
    	border-radius: 3px;
    	border: 1px solid #336895;
    	box-shadow: inset 0 1px 0 #8dc2f0;
    	width: 242px;
    	height: 40px;
    	margin-top: 20px;
    	
    	background: linear-gradient(bottom, #4889C2 0%, #5BA7E9 100%);
    	background: -o-linear-gradient(bottom, #4889C2 0%, #5BA7E9 100%);
    	background: -moz-linear-gradient(bottom, #4889C2 0%, #5BA7E9 100%);
    	background: -webkit-linear-gradient(bottom, #4889C2 0%, #5BA7E9 100%);
    	background: -ms-linear-gradient(bottom, #4889C2 0%, #5BA7E9 100%);
    	
    	cursor: pointer;
    	color: white;
    	font-weight: bold;
    	text-shadow: 0 -1px 0 #336895;
    	
    	font-size: 13px;
    }
    
    form .button:hover {
    	background: linear-gradient(bottom, #5c96c9 0%, #6bafea 100%);
    	background: -o-linear-gradient(bottom, #5c96c9 0%, #6bafea 100%);
    	background: -moz-linear-gradient(bottom, #5c96c9 0%, #6bafea 100%);
    	background: -webkit-linear-gradient(bottom, #5c96c9 0%, #6bafea 100%);
    	background: -ms-linear-gradient(bottom, #5c96c9 0%, #6bafea 100%);
    }
    
    form .button:active {
    	background: linear-gradient(bottom, #5BA7E9 0%, #4889C2 100%);
    	background: -o-linear-gradient(bottom, #5BA7E9 0%, #4889C2 100%);
    	background: -moz-linear-gradient(bottom, #5BA7E9 0%, #4889C2 100%);
    	background: -webkit-linear-gradient(bottom, #5BA7E9 0%, #4889C2 100%);
    	background: -ms-linear-gradient(bottom, #5BA7E9 0%, #4889C2 100%);
    	
    	box-shadow: inset 0 0 2px rgba(0,0,0, .3), 0 1px 0 white;
    }
    I am unsure how to go now it a shame because it looks great in IE10 FF oper and chrome

    Any Reply is most greatfull
    Many Thanks
    WhatNot

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Whatnot,
    Please post the markup that goes along with that CSS.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Feb 2011
    Posts
    75
    Thanks
    9
    Thanked 2 Times in 2 Posts
    hello Excavator

    here the markup code

    Code:
    <?php define ('TITLE', 'Login'); ?>
    <?php require('header.php'); ?>
    
    <link rel="stylesheet" href="css/login.css" />
    
    <br clear="all">
    <?	 	 
    if ($session->logged_in ) { 
    if($_SESSION['userlevel'] == 3 ) {
    ?>
    <script language="JavaScript">
    <!--
    window.location="admin.php";
    //-->
    </script>
    <?php
    }
    else {
    ?>
    
    
    <script language="JavaScript">
    <!--
    window.location="welcome.php";
    //-->
    </script>
    <?
    }
    } else { ?>
    
    <form action="process.php" method="POST" class="log">
    
    	<h2>Log In</h2><br clear="all">
    
        <input type="text" name="user" maxlength="50" value="<? echo $form->value("user"); ?>" class="text-field" placeholder="Username" /><? echo $form->error("user"); ?><br clear="all">
        <input type="password" name="pass" maxlength="30" value="<? echo $form->value("pass"); ?>" class="text-field" placeholder="Password" /><? echo $form->error("pass"); ?><br clear="all">
        <input type="hidden" name="sublogin" value="1">
        <input type="submit" value="Login" class="button" /><br clear="all">
    <p class="bing"><a href="forgotpass.php">Forgot Password, click here! </a></p>
    </form>
    <? } ?>
    <br clear="all">
    
    <? require_once('footer.php') ?>
    Many Thanks For Replys
    WhatNot

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,269
    Thanks
    10
    Thanked 277 Times in 276 Posts
    Probably better to just give us a link to a page. I can't even tell if you have a doctype, if there are errors, etc.

    Dave

  • #5
    New Coder
    Join Date
    Feb 2011
    Posts
    75
    Thanks
    9
    Thanked 2 Times in 2 Posts
    ok sorry

    here the link http://bumblebeechat.net/login.php

    Many Thanks For Your Replys
    WhatNot

  • #6
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,269
    Thanks
    10
    Thanked 277 Times in 276 Posts
    I would start with correcting the markup errors (http://validator.w3.org/check?verbos...et%2Flogin.php) it looks like there are a few significant ones in there. Also, you do realize that HTML5 is an evolving standard, and older browsers like IE7/8 are not going to implement those features?

    Dave

  • #7
    New Coder
    Join Date
    Feb 2011
    Posts
    75
    Thanks
    9
    Thanked 2 Times in 2 Posts
    so I should go back to html 4 then ?

  • #8
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,269
    Thanks
    10
    Thanked 277 Times in 276 Posts
    Your call, but if you want to use shadows, gradients, etc (css3 stuff), you need to understand and plan for them not to show up in older browsers. So you can either conform to html4/css2 standards, which pretty much every browser supports, or you can use some of the newer tricks and either ignore old browsers, or build in enough "fall back" type of code so that it doesn't look too broken in those browsers.

    Dave

  • Users who have thanked tracknut for this post:

    Whatnot (03-29-2013)


  •  

    Posting Permissions

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