...

View Full Version : How to center a div with html/css



jassinlive
11-21-2012, 05:59 AM
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:


<!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)


<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

sunfighter
11-21-2012, 03:02 PM
You didn't show us dropDown.css but give <div id="navMenu"> some width and margin:auto;

Excavator
11-21-2012, 05:17 PM
Hello jassinlive,
To center an element you need three things:

a valid DocType
an element with a width
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 (http://nopeople.com/CSS%20tips/menu_centered_dropdown/index.html).

...

Looking at your markup, it's easy to tell it's been a while since you've coded anything. The center tag (http://www.w3schools.com/tags/tag_center.asp) 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 (http://www.apaddedcell.com/div-itis). It's easy to go overboard on adding divs.

Excavator
11-21-2012, 05:41 PM
Something like this -
<!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>

LearningCoder
11-21-2012, 09:34 PM
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! :p heh

Regards,
LC.

Excavator
11-21-2012, 09:55 PM
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! :p heh

Regards,
LC.

I do :thumbsup:
So many new coders ask the same questions, I have LOTS of canned responses.

LearningCoder
11-22-2012, 12:29 AM
Ah lol now I can guarantee I have been victim to those responses at least once! :p

Regards,

LC.

jassinlive
11-23-2012, 02:58 AM
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:



<!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:


<!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).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum