Website coding help.

Discussion in 'Web Development and Programming' started by cmsvisuals, Dec 7, 2010.

  1. cmsvisuals

    cmsvisuals Regular Member

    Joined:
    Nov 27, 2010
    Messages:
    16
    Likes Received:
    0
    Hello, I am having a problem with one of my websites. I have not coded very many websites so i have never encountered this problem before.


    Here is what is happening.... When you go to http://mmodisney.com/Login.html you may see it right. However, this all depends on what browser you are using. If you are viewing it on FireFox you are most likely viewing the correct version of the site. However, if you are viewing it on IE, Google Chrome, Safari or any other web browser. It looks weird. (in IE9 it does not look horrible just nothing works at all)

    I know that you can code multiple CSS codes for each browser and its version. However, i hear that this is not a very good way to do this. There has to be a better and not so time consuming way somehow.

    HTML Code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    
	<title>MMODisney - Coming Soon</title>
	<meta http-equiv="Content-Language" content="en-us" />
    
	
	<style type="text/css" media="all">
	@import "login.css";}
    </style>
    
 <!--[if IE 7]>
 
	<link href="loginie7.css" rel="stylesheet" type="text/css">
    
<![endif]-->
    

</head>
<body>
<div id="top">

<center>

<div id="logo">


</div>

<div id="login">
   
   <div id="left-col">
   
   <p>Sign in to MMODisney:
   </p>
      
   <form action="forums/login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">
  	  <input type="hidden" name="do" value="login" />
  	  <input type="hidden" name="url" value="/forums" />
  	  <input type="hidden" name="vb_login_md5password" />
  	  <input type="hidden" name="vb_login_md5password_utf" />
  	  <input type="hidden" name="s" value="$session[sessionhash]" />
  	  <label><input name="vb_login_username" value="Username" type="text" id="login" tabindex="1" class="bginput" accesskey="u"/></label>
      <br />
  	  <label><input name="vb_login_password" value="Password" type="password" id="password" tabindex="1" class="bginput" /></label>
      <br />
      <label><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser" tabindex="1" /> Keep me signed in</label>
      <br />
  	  <input name="submit" type="submit" id="submit" tabindex="1" value="" accesskey="s" class="button" />
</form>
   
   
   </div>
   
   <div id="right-col">
   
   <p>MMODisney is a Disney interactive super-forum that has made sure that you have an amazing experience by not believing that you should just go somewhere to talk about your favorite MMORPGs. It was created with a sleek design and amazing features to provide its users with the best experience. To achieve such an amazing experience, MMODisney has created programs that allow users to interact close with their favorite MMORPGs & friends at the same time. MMODisney is the next step in Social Networking technology.</p>

   <h1>More news and information about MMODisney ></h1>
   
   </div>

</div>

<div id="footer">
<img src="images/minimickey.png" border="0"><br />
© 2010 MMODisney.com. All rights reserverd.

<p>

</div>
</div>
</body>
</html>

    CSS Code:
    Code:
    tml, body {
	margin: 0;
	padding: 0;
    background: url(images/background2.png);
	height: 100%;
	}
	
div#logo {
    background: url(images/mmodisney7.png) no-repeat;
	background-position: center;
    margin-top: 50px;
	margin-bottom: 50px;
	width: 380px;
	height: 127px;
}
div#login {
	background: url(images/loginbackground.png) no-repeat;
	height: 225px;
	width: 827px;
}

div#login div#left-col {
	align: left;
	color: #868888;
	font-family: Tahoma, Geneva, sans-serif;
}

div#login div#left-col p{
	padding-left: 20px;
	padding-top: 15px;
    text-align: left;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
}

div#login div#left-col INPUT[type='text'] {
	margin-left: -393px;
	padding-left: 5px;
	width: 290px;
	height: 36px;
	background: url(images/inputbox.png) no-repeat; 
	border:none;
    font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	color: #3c3b3b;
 }
 
div#login div#left-col INPUT[type='password'] {
	margin-top: 15px;
	margin-left: -393px;
	padding-left: 5px;
	width: 290px;
	height: 36px;
	background: url(images/inputbox.png) no-repeat; 
	border:none;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	color: #3c3b3b;
 }
 div#login div#left-col INPUT[type='checkbox'] {
	margin-top: 15px;
	margin-left: -393px;
 }
 
  div#login div#left-col INPUT[type='submit'] {
	margin-top: 15px;
	margin-left: -393px;
	width: 390px;
	height: 30px;
	border: none;
    background: url(images/loginbutton.png) no-repeat; 
 }


div#login div#right-col {
	aligh: right;
}

div#login div#right-col p{
    width: 454px;
	text-align: left;
	margin-left: 330px;
	margin-top: -198px;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
}

div#login div#right-col h1{
    width: 454px;
	text-align: left;
	margin-left: 505px;
	margin-top: 53px;
	font-size: 12px;
	font-family:Tahoma, Geneva, sans-serif;
	color: #fff;
}

div#footer {
	background-position:center;
	margin-top: 80px;
	font-family: Arial, Helvetica, sans-serif;
	color: #888;
	font-size: 12px;
}
    Any help appreciated :)

    -Coleman

    Aim:Coleputt
     
    cmsvisuals, Dec 7, 2010
    #1
  2. Monster

    Monster Admin Talk Staff

    Joined:
    Apr 24, 2004
    Messages:
    515
    Likes Received:
    82
    Location:
    Germany
    Instead of attributing CSS to the document structure (div etc.), use IDs: In the HTML, you write:
    Code:
    <lalala id="myid"> ... </lalala>
    and in the CSS, you write:
    Code:
    #lalala { ... }
    This is understood by all browsers.

    When positioning elements in CSS, drop the tinkering with margins etc. - no two browsers have the same CSS box model implementation.

    Instead, you can use absolute positioning like so:

    Code:
    #lalala {
   display: block;            // for IFRAME, DIV and SPAN tags, creates rectangular region
   position: absolute;      // absolute position from left/top corner of the document
   z-index: 0;                // for overlapping areas (Z coordinate): the higher the value, the more it is in front of other elements
   left: 100px;               // X coordinate
   top: 50px;                 // Y coordinate
}
    This also works in all browsers. Avoiding positioning elements that are not IFRAME, DIV or SPAN, as some browsers don't support that.

    Hope this helps! :)

    ---------- Post added at 09:20 AM ---------- Previous post was at 09:10 AM ----------

    And here's another hint: If you set a width and height for a box, you should also determine what should happen when the box overflows. By default, the box is resized by the browser to fit the content (overflow: auto). Set overflow to hidden to cut off content that is too large, and overflow to scroll to get scroll bars.

    Code:
    #lalala {
    overflow: auto;    // default behavior
    overflow: hidden; // cut off
    overflow: scroll;   // scroll bars
}
    Check out my homepage for an example.
     
    Monster, Dec 8, 2010
    #2
  3. Monster

    Monster Admin Talk Staff

    Joined:
    Apr 24, 2004
    Messages:
    515
    Likes Received:
    82
    Location:
    Germany
    Classes are a way to assign CSS attributes to a group of elements:

    Code:
    .blue {
     background-color: #00F;
}
    Code:
    <lalala class="blue"> ... </lalala>
    Combined with IDs, you can use them to specify generic attributes to groups of elements, and additional specialized attributes for individual elements.

    Code:
    .myclass {
   ...
}
#myelem {
   ...
}
    Code:
    <lalala id="myelem" class="myclass"> ... </lalala>
    :)
     
    Monster, Dec 8, 2010
    #3
  4. Cerberus

    Cerberus Admin Talk Staff

    Joined:
    May 3, 2009
    Messages:
    1,031
    Likes Received:
    500
    I would just redo the page. Looks like you downloaded a template and tryed to mod it or it was depreciated code? It would be easy to make that page in a simple editor and not have to go back over it fixing all the errors. But thats just my opinion. Also, when coding a page like that with a ton of CSS on it I always use http://browsershots.org/ <-- Very handy tool for a webmaster
     
    Cerberus, Dec 8, 2010
    #4
  5. cmsvisuals

    cmsvisuals Regular Member

    Joined:
    Nov 27, 2010
    Messages:
    16
    Likes Received:
    0
    @Monster Thank you sooooooo much! I will try all of this.

    @Cerberus Nope, I did not steal it. I coded this from scratch myself. Like I said... "I have not coded very many websites so i have never encountered this problem before."

    Thanks again guys :)
     
    cmsvisuals, Dec 8, 2010
    #5
  6. DaUnknownAdm!n

    DaUnknownAdm!n Regular Member

    Joined:
    Mar 5, 2010
    Messages:
    254
    Likes Received:
    97
    Location:
    Brooklyn, New York
    DaUnknownAdm!n, Dec 8, 2010
    #6
Similar Threads

  1. Do you need a simple website or a professional website?

  2. Website Inquirer- Free Website Reviews!

Loading...

Share This Page