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
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to center a div with html/css

    Hey fellas. I've just come back from a long absence of when I first learnt HTML and partial CSS. I am still remember pretty much everything but at the past 2 days it is getting a lot easier. However, I am absolutely stumped at this most recent part and was hoping for some guidance (as well as general advice and comments on my current work).

    I have an old drop-down menu I made in CSS a couple of years ago and inserted it into my 10 minute website job that I quickly put together. Everything went smoothly except I can't for the life of me remember how to center a <div> (or this drop down table) or even where to start. I have tried a few codes I remember but nothing is working. I'm not sure if they are the correct codes or if they aren't being put in the correct place but it is driving me insane.

    Here is the 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>Page</title>
    <link href="dropDown.css" rel="stylesheet" type="text/css" />
    </head>
    
    
    <body bgcolor="#333">
    
    
    <div align="center">
    	<table bgcolor="#800000" width="1100" height="100" cellspacing="0" cellpadding="0" style="padding-top: 10px; padding-bottom: 10px;">
    	   <tr>
    	    <td style="padding-left:10px;">
    		<font color="FEFF84" face="arial" size="6">Title
    		</font>
    	    </td>
    	   </tr>
    	</table>
    </div>
    
    
    &nbsp;
    	<div align="center">
    	<table width="1100" height="1000" cellspacing="0" cellpadding="0" style="padding-top= 10px; padding-bottom:10px;">
    	   <tr>
    	    <td bgcolor="#000000" valign="top" width="150" style="padding-left: 5px;">
    	
    	
    	<div id="wrapper">
    	<div id="navMenu">
    
    <ul>
    <li><a href="#">Products</a>
    <ul>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    
    
    </ul> <!-- end inner UL -->
    
    </li> <!-- end main LI -->
    </ul> <!-- end main UL -->
    
    <ul>
    <li><a href="#">Products</a>
    <ul>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    
    
    </ul> <!-- end inner UL -->
    
    </li> <!-- end main LI -->
    </ul> <!-- end main UL -->
    <ul>
    <li><a href="#">Products</a>
    <ul>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    
    
    </ul> <!-- end inner UL -->
    
    </li> <!-- end main LI -->
    </ul> <!-- end main UL -->
    <ul>
    <li><a href="#">Products</a>
    <ul>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    
    
    </ul> <!-- end inner UL -->
    
    </li> <!-- end main LI -->
    </ul> <!-- end main UL -->
    
    
    <br class="clearFloat" />
    	</div>
    	</div> <!-- end wrapper div -->
    	</div> <!-- end wrapper div -->
    	    </td>
    	   </tr>
    	</table>
    
    </body>
    </html>
    The part I am trying to center is this (the dropDown.css file is on my PC)

    Code:
    <div id="wrapper">
    	<div id="navMenu">
    
    <ul>
    <li><a href="#">Products</a>
    <ul>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    
    
    </ul> <!-- end inner UL -->
    
    </li> <!-- end main LI -->
    </ul> <!-- end main UL -->
    
    <ul>
    <li><a href="#">Products</a>
    <ul>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    
    
    </ul> <!-- end inner UL -->
    
    </li> <!-- end main LI -->
    </ul> <!-- end main UL -->
    <ul>
    <li><a href="#">Products</a>
    <ul>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    
    
    </ul> <!-- end inner UL -->
    
    </li> <!-- end main LI -->
    </ul> <!-- end main UL -->
    <ul>
    <li><a href="#">Products</a>
    <ul>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    <li><a href="#">Link Items</a></li>
    
    
    </ul> <!-- end inner UL -->
    
    </li> <!-- end main LI -->
    </ul> <!-- end main UL -->
    
    
    <br class="clearFloat" />
    	</div>
    	</div> <!-- end wrapper div -->
    	</div> <!-- end wrapper div -->
    Please help me out, I'm going insane! And please comment on my progress so far. Go easy, it's been a while.

    Cheers,

    Jassinlive

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,096
    Thanks
    23
    Thanked 594 Times in 593 Posts
    You didn't show us dropDown.css but give <div id="navMenu"> some width and margin:auto;

  • #3
    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 jassinlive,
    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto


    That will work with images as well. Since images are inline elements by default, you just need to add display: block; to them.

    Lot's of times, with a menu, you don't want to assign a width. You can easily center a group of li's like this example.

    ...

    Looking at your markup, it's easy to tell it's been a while since you've coded anything. The center tag has been deprecated and should not be used. Tables are not used for layout anymore, you should have a look at the link about tables in my signature line. Inline styles are a thing of the past too, still valid but next to useless in my opinion. We use div layouts with linked or attached CSS now.

    At this stage of development, without seeing what you're building, it's impossible for me to know what use #wrapper and #navMenu will have but it looks like the beginnings of divitis. It's easy to go overboard on adding divs.
    Last edited by Excavator; 11-21-2012 at 04:20 PM.
    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

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Something like this -
    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=utf-8" />
    <title>Page</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #333;
    	font: 100% "Arial Black", Gadget, sans-serif;
    }
    #container {
    	width: 1100px;
    	margin: 30px auto 50px;
    }
    #header {
    	padding: 10px;
    	background: #f00;
    }
    	h1 {
    		margin: 0;
    		line-height: 100px;
    		color: #feff84;
    	}
    #content {
    	margin: 10px 0 0;
    	padding: 0 10px 600px;
    	overflow: auto;
    	background: #000;
    }
    ul#navMenu {
    	line-height: 40px;
    	margin: 0;
    	padding: 0;
    	text-align:center; /*this is the first bit that centers the menu*/
    }
    	ul#navMenu li {
    		display: inline-block; /*this is the second bit that centers the menu*/
    		zoom: 1; /*IE7 hack*/
    		*display: inline; /*IE7 hack*/
    		margin: 0;
    		padding: 0;
    		position: relative;
    		list-style: none;
    		background: #fff;
    	}
    		ul#navMenu li a {
    			margin: 0;
    			padding: 1px 20px;
    			display: block;
    			font-size: 17px;
    			font-weight: 300;
    			color: #333;
    			text-decoration: none;
    		}
    		ul#navMenu li:hover {background: #fff;}
    			ul#navMenu ul {
    				width: 160px;
    				margin: 0;
    				padding: 0;
    				top: 42px;
    				left: -999px;
    				position: absolute;
    				border: 1px solid #ccc;
        			border-radius: 3px 3px 3px 3px;
        			box-shadow: 0 0 0 transparent;
    			}
    				ul#navMenu li:hover ul { /*this bit centers the dropped ul's relative to their parent li*/
    					margin: 0 0 0 -80px;
    					left: 50%;
    			}
    ul#navMenu a:hover {color: #666666;}
    
    </style>
    </head>
    <body>
        <div id="container">
        	<div id="header">
        		<h1>Title</h1>
            <!--end header--></div>
            <div id="content">
                <ul id="navMenu">
                    <li><a href="#">Products</a>
                        <ul>
                            <li><a href="#">Link Items</a></li>
                            <li><a href="#">Link Items</a></li>
                            <li><a href="#">Link Items</a></li>
                        </ul> 
                    </li> 
                    <li><a href="#">Products</a>
                        <ul>
                            <li><a href="#">Link Items</a></li>
                            <li><a href="#">Link Items</a></li>
                            <li><a href="#">Link Items</a></li>
                            <li><a href="#">Link Items</a></li>
                            <li><a href="#">Link Items</a></li>
                        </ul> 
                    </li> 
                    <li><a href="#">Products</a>
                        <ul>
                            <li><a href="#">Link Items</a></li>
                            <li><a href="#">Link Items</a></li>
                            <li><a href="#">Link Items</a></li>
                            <li><a href="#">Link Items</a></li>
                            <li><a href="#">Link Items</a></li>
                        </ul> 
                    </li> 
                    <li><a href="#">Products</a>
                        <ul>
                            <li><a href="#">Link Items</a></li>
                            <li><a href="#">Link Items</a></li>
                            <li><a href="#">Link Items</a></li>
                            <li><a href="#">Link Items</a></li>
                            <li><a href="#">Link Items</a></li>
                        </ul> 
                    </li> 
                </ul> 
            <!--end content--></div>
        <!--end container--></div>
    </body>
    </html>
    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

  • #5
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Excavator, I'm sure you must copy and paste that code the amount of times I see that question up and your reply to it! heh

    Regards,
    LC.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by LearningCoder View Post
    Excavator, I'm sure you must copy and paste that code the amount of times I see that question up and your reply to it! heh

    Regards,
    LC.
    I do
    So many new coders ask the same questions, I have LOTS of canned responses.
    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

  • #7
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Ah lol now I can guarantee I have been victim to those responses at least once!

    Regards,

    LC.

  • #8
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks guys I appreciate it. I am also having another drama. I have been working on a new page and I've found a few bugs that seem to be happening in both the Chrome browser.

    The issue with the Chrome browser:

    - The text on this page sees to increase in size even though I am using the default size (not assigning a specific size to the words). I open it up in IE10 and it looks fine but in Chrome in looks bold.

    Here is the page that is giving me trouble:


    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>Jassinlive</title>
    <link href="dropDown.css" rel="stylesheet" type="text/css" />
    </head>
    
    
    <body bgcolor="#333">
    
    
    <div align="center">
    	<table bgcolor="#800000" width="1100" height="100" cellspacing="0" cellpadding="0" style="padding-top: 10px; padding-bottom: 10px;">
    	   <tr>
    	    <td style="padding-left:10px;">
    		<a href="home.html" style="text-decoration: none"><font color="yellow" face="arial" size="6">Jassinlive</font></a>
    	    </td>
    	   </tr>
    	</table>
    </div>
    
    <div style="height:10px">&nbsp;</div>
    
    	<div align="center">
    	<table width="1100" height="48" cellspacing="0" cellpadding="0" style="padding-top= 10px; padding-bottom:10px;">
    	   <tr>
    	    <td bgcolor="#000000" valign="top" width="150" style="padding-left: 5px;">
    
    	<div style="height:3px;font-size:3px;">&nbsp;</div>
    	<div id="wrapper">
    	<div id="navMenu">
    
    <ul>
    <li><a href="multimedia.html">Multimedia</a>
    <ul>
    <li><a href="videos.html">Videos</a></li>
    <li><a href="images.html">Images</a></li>
    
    
    </ul> <!-- end inner UL -->
    
    </li> <!-- end main LI -->
    </ul> <!-- end main UL -->
    
    <ul>
    <li><a href="videogames.html">Video Games</a>
    <ul>
    <li><a href="vnews.html">News</a></li>
    <li><a href="reviews.html">Reviews</a></li>
    
    
    </ul> <!-- end inner UL -->
    
    </li> <!-- end main LI -->
    </ul> <!-- end main UL -->
    <ul>
    <li><a href="jlive.html">Jassinlive</a>
    <ul>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
    
    
    </ul> <!-- end inner UL -->
    
    </li> <!-- end main LI -->
    </ul> <!-- end main UL -->
    <ul>
    <li><a href="other.html">Other</a>
    <ul>
    <li><a href="ug.html">=]UG[=</a></li>
    <li><a href="requests.html">Requests</a></li>
    <li><a href="comment.html">Comments</a></li>
    
    
    </ul> <!-- end inner UL -->
    
    </li> <!-- end main LI -->
    </ul> <!-- end main UL -->
    
    <br class="clearFloat" />
    
    	</div>
    	</div> <!-- end wrapper div -->
    	</div> <!-- end wrapper div -->
    	    </td>
    	   </tr>
    	</table>
    
    	<table width="1100" cellspacing="0" cellpadding="0" style="padding-top= 10px; padding-bottom:10px;">
    	   <tr>
    	    <td bgcolor="#000000" valign="top" width="150" style="padding-left: 5px;">
    	    
    	<div style="height:10px">&nbsp;</div>
    	
    	<center>
    
    
    	<table width="1100" cellspacing="0" cellpadding="0" style="padding-top= 10px; padding-bottom:10px;">
    	   <tr>
    	    <td bgcolor="#000000" valign="top" width="150" style="padding-left: 5px;">
    	    
    	<div style="height:10px">&nbsp;</div>
    
    	<center><h1><font color="yellow" face="arial">Contact</font></h1>
    
    	<p><font color="yellow" face="arial">Although I mainly cater to the =]UG[= Clan and myself I am more then happy to lend a hand to those who would like some help with a project. Video editing, audio editing, HTML/CSS and animation are a few things I have picked up over the years and I am more then happy to guide you in the right direction or even do a project from scratch.</p>
    	<p>Here are all the different ways you can get in touch with me.</font></p>
    
    
    	<table bgcolor="#000000" width="420" cellspacing="0" cellpadding="0" style="padding-top: 10px; padding-bottom: 10px;">
    	   <tr>
    	    <td style="padding-left:10px;">
    
    		<font color="yellow" face="arial" size="4">Email: </font><font color="FFFF66" face="arial">name@email.com</font><br />
    		<font color="yellow" face="arial" size="4">Steam: </font><font color="FFFF66" face="arial">steamcommunity.com/id/name</font></a><br />
    		<font color="yellow" face="arial" size="4">Youtube: </font><font color="FFFF66" face="arial">youtube.com/name</font></a><br />
    		<font color="yellow" face="arial" size="4">Xbox Live: </font><font color="FFFF66" face="arial">live.xbox.com/Profile?gamertag=name</font></a><br />
    		
    
    	    </td>
    	   </tr>
    	</table>
    
    
    	<p><font color="yellow" face="arial">You will find me most active on the =]UG[= Clan forum which you can register an account <a href="http://ugclan.org/forum/index.php?action=register" target="_blank" style="text-decoration:none"><font face="arial" color="yellow">here. </a></font><font face="arial" color="yellow">Please note that in order to view my forum profile as listed above you will also need to register an account. Please allow some time before your account is activated so that we can ensure you are a real person!
    
    	</center>
    
    
    	</center>
    
    	   </tr>
    	    </td>
    	</table>
    	
    
    </body>
    </html>
    and here is a page that is working fine:

    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>Jassinlive</title>
    <link href="dropDown.css" rel="stylesheet" type="text/css" />
    </head>
    
    
    <body bgcolor="#333">
    
    
    <div align="center">
    	<table bgcolor="#800000" width="1100" height="100" cellspacing="0" cellpadding="0" style="padding-top: 10px; padding-bottom: 10px;">
    	   <tr>
    	    <td style="padding-left:10px;">
    		<a href="home.html" style="text-decoration: none"><font color="yellow" face="arial" size="6">Jassinlive</font></a>
    	    </td>
    	   </tr>
    	</table>
    </div>
    
    <div style="height:10px">&nbsp;</div>
    
    	<div align="center">
    	<table width="1100" height="48" cellspacing="0" cellpadding="0" style="padding-top= 10px; padding-bottom:10px;">
    	   <tr>
    	    <td bgcolor="#000000" valign="top" width="150" style="padding-left: 5px;">
    
    	<div style="height:3px;font-size:3px;">&nbsp;</div>
    	<div id="wrapper">
    	<div id="navMenu">
    
    <ul>
    <li><a href="multimedia.html">Multimedia</a>
    <ul>
    <li><a href="videos.html">Videos</a></li>
    <li><a href="images.html">Images</a></li>
    
    
    </ul> <!-- end inner UL -->
    
    </li> <!-- end main LI -->
    </ul> <!-- end main UL -->
    
    <ul>
    <li><a href="videogames.html">Video Games</a>
    <ul>
    <li><a href="vnews.html">News</a></li>
    <li><a href="reviews.html">Reviews</a></li>
    
    
    </ul> <!-- end inner UL -->
    
    </li> <!-- end main LI -->
    </ul> <!-- end main UL -->
    <ul>
    <li><a href="jlive.html">Jassinlive</a>
    <ul>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
    
    
    </ul> <!-- end inner UL -->
    
    </li> <!-- end main LI -->
    </ul> <!-- end main UL -->
    <ul>
    <li><a href="other.html">Other</a>
    <ul>
    <li><a href="ug.html">=]UG[=</a></li>
    <li><a href="requests.html">Requests</a></li>
    <li><a href="comment.html">Comments</a></li>
    
    
    </ul> <!-- end inner UL -->
    
    </li> <!-- end main LI -->
    </ul> <!-- end main UL -->
    
    <br class="clearFloat" />
    
    	</div>
    	</div> <!-- end wrapper div -->
    	</div> <!-- end wrapper div -->
    	    </td>
    	   </tr>
    	</table>
    
    	<table width="1100" cellspacing="0" cellpadding="0" style="padding-top= 10px; padding-bottom:10px;">
    	   <tr>
    	    <td bgcolor="#000000" valign="top" width="150" style="padding-left: 5px;">
    	    
    	<div style="height:10px">&nbsp;</div>
    	
    	<center>
    
    	<h1><font face="arial" color="yellow">Videos</font></h1>
    
    	<p><font color="yellow" face="arial">Featuring every video I have created since 2007. They have been embedded from my Youtube channel which can be found <a href="http://www.youtube.com/jassinlive" target="_blank" style="text-decoration: none"><font color="yellow" face="arial" size="3">here.</font></a> Featured videos that I have created but aren't from my original Youtube account have been credited and linked to their own Youtube channel.</font></p>
    
    	<div style="height:30px">&nbsp;</div>	
    
    	<font color="yellow" face="arial" size="4">Contents: </font><br/>
    
    	<a href="#UG" style="text-decoration: none"><font color="FFFF66" face="arial">=]UG[= Underground Gamers</font></a><br /><a href="#GTA" style="text-decoration: none"><font color="FFFF66" face="arial">GTA Stunts Series</font></a></br><a href="#BF2" style="text-decoration: none"><font color="FFFF66" face="arial">Battlefield 2 & Project Reality</font></a></br><a href="#TF2" style="text-decoration: none"><font color="FFFF66" face="arial">Team Fortress 2</font></a></br><a href="#OTHER" style="text-decoration: none"><font color="FFFF66" face="arial">Other</font></a>
    
    	<div style="height:20px">&nbsp;</div>
    
    	<h2><a id="UG"><font face="arial" color="yellow">=]UG[= Underground Gamers</font></a></h2>
    
    	<iframe width="760" height="515" src="http://www.youtube.com/embed/Un8xwLKFBRs" frameborder="0" allowfullscreen></iframe><br />
    	<a href="http://www.youtube.com/ugclanaustralia" target="_blank" style="text-decoration: none"><font face="arial" color="yellow">The Underground Gamers - ugclanaustralia - Oct 18, 2012</font></a>
    
    	<div style="height:20px">&nbsp;</div>
    
    	<h2><a id="GTA"><font face="arial" color="yellow">GTA Stunts Series</font></a></h2>
    	
    	<iframe width="760" height="515" src="http://www.youtube.com/embed/UWEPRzvYA08?list=UUbxNq6MQUJ3Msf4V-zU1nxQ&amp;hl=en_US" frameborder="0" allowfullscreen></iframe><br />
    	<a href="http://www.youtube.com/ugclanaustralia" target="_blank" style="text-decoration: none"><font face="arial" color="yellow">GTA Stunts: GTA IV vs San Andreas - ugclanaustralia - Oct 19, 2012 (Original uploaded date: March 26, 2012)</font></a>
    	
    	<div style="height:50px">&nbsp;</div>
    
    	<iframe width="760" height="515" src="http://www.youtube.com/embed/mKVgL0KTqZA" frameborder="0" allowfullscreen></iframe><br />
    	<a href="http://www.youtube.com/jassinlive" target="_blank" style="text-decoration: none"><font face="arial" color="yellow">GTA Stunts: GTA IV vs San Andreas Trailer - jassinlive - Mar 10, 2010</font></a>
    
    	<div style="height:50px">&nbsp;</div>	
    
    
    	<iframe width="760" height="515" src="http://www.youtube.com/embed/I8K5n1ikNg0" frameborder="0" allowfullscreen></iframe><br />
    	<a href="http://www.youtube.com/jassinlive" target="_blank" style="text-decoration: none"><font face="arial" color="yellow">GTA Stunts: Vice City and San Andreas vs GTA III - jassinlive - Oct 31, 2007</font></a>
    
    	<div style="height:50px">&nbsp;</div>
    
    	<iframe width="760" height="515" src="http://www.youtube.com/embed/xsQt-zXx-1c" frameborder="0" allowfullscreen></iframe><br />
    	<a href="http://www.youtube.com/jassinlive" target="_blank" style="text-decoration: none"><font face="arial" color="yellow">GTA Stunts: Vice City vs San Andreas Part 1(Vice City) - jassinlive - Jul 24, 2007</font></a>
    
    	<div style="height:50px">&nbsp;</div>
    
    	<iframe width="760" height="515" src="http://www.youtube.com/embed/uMu0uBCOqtk" frameborder="0" allowfullscreen></iframe><br />
    	<a href="http://www.youtube.com/jassinlive" target="_blank" style="text-decoration: none"><font face="arial" color="yellow">GTA Stunts: Vice City vs San Andreas Part 2(San Andreas) - jassinlive - Jul 27, 2007</font></a>
    
    	<div style="height:20px">&nbsp;</div>
    
    	<h2><a id="BF2"><font face="arial" color="yellow">Battlefield 2 & Project Reality</font></a></h2>
    
    	<iframe width="760" height="515" src="http://www.youtube.com/embed/bwWwOXdrCyk" frameborder="0" allowfullscreen></iframe><br />
    	<a href="http://www.youtube.com/jassinlive" target="_blank" style="text-decoration: none"><font face="arial" color="yellow">Battlefield 2 - Anti-Tank vs Jet - jassinlive - May 9, 2010</font></a>
    
    	<div style="height:50px">&nbsp;</div>
    
    	<iframe width="760" height="515" src="http://www.youtube.com/embed/oKc8BYESnp4" frameborder="0" allowfullscreen></iframe><br />
    	<a href="http://www.youtube.com/jassinlive" target="_blank" style="text-decoration: none"><font face="arial" color="yellow">BF2 Iron Sight Sniper - jassinlive - Jul 2, 2007</font></a>
    
    	<div style="height:50px">&nbsp;</div>
    
    	<iframe width="760" height="515" src="http://www.youtube.com/embed/8bfOAVpSJTk" frameborder="0" allowfullscreen></iframe><br />
    	<a href="http://www.youtube.com/jassinlive" target="_blank" style="text-decoration: none"><font face="arial" color="yellow">BF2 Super Rally - jassinlive - Jun 19, 2007</font></a>
    
    	<div style="height:50px">&nbsp;</div>
    
    	<iframe width="760" height="515" src="http://www.youtube.com/embed/ekHx5uhoe1E" frameborder="0" allowfullscreen></iframe><br/>
    	<a href="http://www.youtube.com/jassinlive" target="_blank" style="text-decoration: none"><font face="arial" color="yellow">Battlefield 2 Special Forces - A Perfect Match - jassinlive - May 28, 2007</font></a>
    
    	<div style="height:50px">&nbsp;</div>
    
    	<iframe width="760" height="515" src="http://www.youtube.com/embed/tjJm8hvYOAs" frameborder="0" allowfullscreen></iframe><br/>
    	<a href="http://www.youtube.com/jassinlive" target="_blank" style="text-decoration: none"><font face="arial" color="yellow">Battlefield 2 : Explosive Kills - jassinlive - May 16, 2007</font></a>
    
    	<div style="height:50px">&nbsp;</div>
    
    	<iframe width="760" height="515" src="http://www.youtube.com/embed/PHOR9JnY_Vc" frameborder="0" allowfullscreen></iframe><br />
    	<a href="http://www.youtube.com/jassinlive" target="_blank" style="text-decoration: none"><font face="arial" color="yellow">BF2 Sniper - jassinlive - Mar 4, 2007 (My first video)</font></a>
    
    	<div style="height:20px">&nbsp;</div>
    
    	<h2><a id="TF2"><font face="arial" color="yellow">Team Fortress 2</font></a></h2>
    
    	<iframe width="760" height="515" src="http://www.youtube.com/embed/aGagiA65eCs" frameborder="0" allowfullscreen></iframe><br />
    	<a href="http://www.youtube.com/jassinlive" target="_blank" style="text-decoration: none"><font face="arial" color="yellow">Team Fortress 2 at 10,000 FPS - jassinlive - Aug 3, 2010</font></a>
    
    	<div style="height:50px">&nbsp;</div>	
    
    	<iframe width="760" height="515" src="http://www.youtube.com/embed/6kN-hTJ7oC0" frameborder="0" allowfullscreen></iframe><br />
    	<a href="http://www.youtube.com/jassinlive" target="_blank" style="text-decoration: none"><font face="arial" color="yellow">TF2 - Testing 60 Frames @ 1080p - jassinlive - Aug 2, 2010</font></a>
    	
    	
    	<div style="height:20px">&nbsp;</div>
    
    	<h2><a id="OTHER"><font face="arial" color="yellow">Other</font></a></h2>
    
    	<iframe width="760" height="515" src="http://www.youtube.com/embed/wFnNjaWdZfo" frameborder="0" allowfullscreen></iframe><br />
    	<a href="http://www.youtube.com/jassinlive" target="_blank" style="text-decoration: none"><font face="arial" color="yellow">Skyrim - Long arrow headshot [HD] - jassinlive - Jul 8, 2012</font></a>
    	
    	<div style="height:50px">&nbsp;</div>
    
    	<iframe width="760" height="515" src="http://www.youtube.com/embed/FjoCGsepYXg" frameborder="0" allowfullscreen></iframe><br />
    	<a href="http://www.youtube.com/jassinlive" target="_blank" style="text-decoration: none"><font face="arial" color="yellow">DiRT 2 - 5850 - 1080p - Maxed Out DX11 - jassinlive - Aug 13, 2010</font></a>	
    
    	<div style="height:50px">&nbsp;</div>
    
    	<a href="#" style="text-decoration: none"><font color="yellow" face="arial">Back to top</font></a>
    
    
    	</center>
    	   </tr>
    	    </td>
    	</table>
    	
    
    </body>
    </html>
    I tested the exact same code as the first one (giving me trouble) as a separate html page and renamed to something different and it worked fine but as soon as I renamed it back to it's original name (contact.html) the text reverted back to the bold double in size look.

    What could be the problem? I've performed CCleaner and restarted the PC and no good (in case it was my browser screwing up).


  •  

    Posting Permissions

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