IE CSS Issue

Graphical issue

Page 1 of 1

6 Replies - 661 Views - Last Post: 11 August 2010 - 06:54 PM

#1 Guest_True Valhalla*


Reputation:

IE CSS Issue

Posted 10 August 2010 - 10:21 PM

I've been teaching myself CSS, PHP and MySQL manipulation recently, and today I started implementing divs for the first time. Everything works well in Firefox, but look at IE (latest version):

Posted Image

I'm not sure why that bottom bar is part of the IE version.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<?php
session_start();
if(isset($_SESSION['player']))
{
  session_destroy();
}
?>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Title Here</title>
<link rel="stylesheet" href="main.css"/>
<script type="text/javascript" src="scripts/js/jquery-1.4.min.js"></script>
</head>

<body>
<center>

<div class="title">
<img src="images/menu/title.gif">
</div>

<div class="main">

<form method="POST" action="authenticate.php">
<table>
<tr><td><b>Username</b></td><td><input type="text" name="player" size="15"></td></tr>
<tr><td><b>Password</b></td><td><input type="password" name="password" size="15" mask="x"></td></tr>
<tr><td></td><td align="center"><input type="image" name="submit" src="images/menu/login.gif" onmouseover="this.src='images/menu/loginhover.gif'" onmouseout="this.src='images/menu/login.gif'" value="Login"></td></tr>

</table>
</form>

<br><br>
<a href='register.php'>Register Account</a><br><br>
<a href="getpass.php">Retrieve Password</a><br><br>

<?
print "<a href='/admin/login.php'>Administrate</a><br/>";
?>

</center>
</div>

</body>
</html>


CSS:

body
{
background-color:#000000;

color:#FFFFFF;

font-family:"Times New Roman",Times,serif;
font-size:12px;
}

table
{
background-color:#0A2A1B;
border: 1px solid #0B6138;
}

td
{
background-color:#0A2A1B;
}

div.main
{
background-color:#071910;
width:790px;
padding:5px;
border:1px solid #0B6138;
margin:0px;
}


div.title
{
background-color:#0B3B24;
width:800px;
padding:0px;
border:1px solid #0B6138;
margin:0px;
border-bottom-width:0px;
}


I'm not sure what the compatibility issue is, or what I've done wrong.

Any assistance or words of wisdom would be greatly appreciated.

-Tv

Is This A Good Question/Topic? 0

Replies To: IE CSS Issue

#2 Lemur  Icon User is online

  • OpenBSD Head
  • member icon


Reputation: 1120
  • View blog
  • Posts: 3,073
  • Joined: 28-November 09

Re: IE CSS Issue

Posted 10 August 2010 - 10:59 PM

It may be helpful to remove the tables you're using and center in the CSS. Forms display inline so tables really are only adding code to your site in this case.

I've found that changing colors to excessively bright and noticeable ones in testing stages of some elements makes it easier to find which one is being a pain and target it individually.

Try the deal with removing tables and putting the center in css text-align:center;
Was This Post Helpful? 0
  • +
  • -

#3 Guest_True Valhalla*


Reputation:

Re: IE CSS Issue

Posted 10 August 2010 - 11:13 PM

I've been working a bit more since I posted this; my next step was indeed to remove the table. I'll let you know if it helps.
Was This Post Helpful? 0

#4 Guest_True Valhalla*


Reputation:

Re: IE CSS Issue

Posted 10 August 2010 - 11:19 PM

Tables are gone, it's still there.
Was This Post Helpful? 0

#5 Guest_you've heraput*


Reputation:

Re: IE CSS Issue

Posted 10 August 2010 - 11:31 PM

Sorry for the multiple posts. I'd edit but too lazt to register at the moment.

Anyway, I figured out what was triggering it. In the HTML the "main" div is centered by HTML. I removed this centering and the bar disappeared.

I guess my only problem now is centering the div without using HTML? Can anyone help me there?
Was This Post Helpful? 0

#6 Guest_True Valhalla*


Reputation:

Re: IE CSS Issue

Posted 11 August 2010 - 12:28 AM

Oh well, nevermind. I've sorted out my own problems. I wish IE didn't exist though =)
Was This Post Helpful? 0

#7 daekano  Icon User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 62
  • Joined: 07-July 10

Re: IE CSS Issue

Posted 11 August 2010 - 06:54 PM

I giggled at the title of this thread, but I'm happy I entered it because I literally lol'd at that image.

You could try using a CSS reset file in your future projects. It's best to build up from it instead of adding it in later on. It helps remove some of the quirks each browser adds to the way it renders elements on the page. A google search will give you a few results! Try to use the most recent.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1