...

View Full Version : Best way to cross-browser a site?



LearningCoder
09-09-2011, 09:33 AM
Hello, I need to make my site cross-browser compatible but do not know where to start. I have read some tutorials but I'm still none the wiser.

Wondering if you guys could possibly give me some tips on the best way to achieve this.

Regards,

LC.

vikram1vicky
09-09-2011, 10:24 AM
keep in mind following point while making site:

1. Use standard HTML/CSS code
2. keep Firefox, Opera, Chrome and IE openned while coding and keep checking in all browsers after each module of CSS/HTML code, It will make debugging faster.
3. Use firebug, it will make debugging faster.
4. If still you will face any challenge , we at Codingforums are here to help you :)

Al the best :)

Rowsdower!
09-09-2011, 02:39 PM
My list (much in line with the previous):

1) Code valid HTML/CSS (use the strict doctype of whatever standard you choose unless there is some very compelling reason not to do so - the exception being HTML 5 which has only one doctype anyway)
2) Develop in Firefox (using firebug to make life easier)
3) Once your layout is completely finished in Firefox, then and only then do you check in IE and make any necessary adjustments to get IE to match
4) Once Firefox and IE match go ahead and visit browsershots.org to test any number of possible browser and OS combinations with/without javascript and with/without flash

And then, if you're really thorough...

5) start poking around the world of developing for handheld devices to work up a "smart phone" version of your website

VIPStephan
09-09-2011, 03:10 PM
2) Develop in Firefox (using firebug to make life easier)
3) Once your layout is completely finished in Firefox, then and only then do you check in IE and make any necessary adjustments to get IE to match
4) Once Firefox and IE match go ahead and visit browsershots.org to test any number of possible browser and OS combinations with/without javascript and with/without flash

I’m going to challenge this:

Don’t wait until you’re finished to check out the page/layout in IE (and/or other browsers), do it during development. My suggestion for an approach is basically this: Once you have your (semantic (http://en.wikipedia.org/wiki/Semantic_HTML)) HTML code write a line of CSS or a CSS rule and check the result right after this in various browsers. Write a CSS rule, check in browsers, write another rule, check in browsers. It goes back and forth like this. That way you see it right away if something is screwing up and you can fix it right away and don’t end up wondering why it only looks great in Firefox and start adding a lot of IE hacks/fixes.

Likewise, it’s not wise to finish your layout and then check it out without JS/Flash/whatever, you should get it working without these in the first place and then add JS/Flash/whatever as enhancement (en.wikipedia.org/wiki/Progressive_enhancement).

Kor
09-09-2011, 03:19 PM
3) Once your layout is completely finished in Firefox, then and only then do you check in IE and make any necessary adjustments to get IE to match
Well, with all the respect, but upon my experience I found that another approach could be more beneficial. Check the layout in IE from time to time, better whenever you finish a definite and autonomous part of the code, otherwise, in the end, you will risk to get too many bugs and errors, and trying to repair one of them might create another one, or aggravate the others...

But probably it is up to the developer's habit, after all :)

EDIT: I see I am not alone in this! Stephan has the same opinion :)

LearningCoder
09-09-2011, 04:01 PM
Thanks for all the wise words guys, I will keep it all in mind. The part of which I don't understand is how do you write different css depending on the browser? I have the following browsers: Opera, IE 8, Firefox, Chrome, Safari but have been developing with use of Safari.

Does it require JavaScript to get the desired effect?

Appreciate the help thus far,

Regards,

LC.

Rowsdower!
09-09-2011, 04:50 PM
Really? I've been out-voted but I don't generally have any trouble getting IE to fall in line at the end of the project and I personally find it to be not worth my time to juggle between browsers while I am writing code.

That said, there isn't any *harm* in checking it often. I just don't recommend wasting the time on it until the end. I think of it kind of like sweeping up the woodshop floor while you still have some boards to cut. Sure, it'll keep the place prettier while you work, but you're just going to have to sweep again later once you finish.

VIPStephan
09-09-2011, 05:02 PM
Really? I've been out-voted but I don't generally have any trouble getting IE to fall in line at the end of the project and I personally find it to be not worth my time to juggle between browsers while I am writing code.

That said, there isn't any *harm* in checking it often. I just don't recommend wasting the time on it until the end. I think of it kind of like sweeping up the woodshop floor while you still have some boards to cut.

It really depends on the experience you have. I, for example, can style a page completely with only checking in one browser and it will most likely look good in others as well, because I just know what works and what doesnít. This comes with experience and routine. As a beginner itís certainly advisable to check often.


The part of which I don't understand is how do you write different css depending on the browser? I have the following browsers: Opera, IE 8, Firefox, Chrome, Safari but have been developing with use of Safari.

If you write clean and semantic HTML you donít even need to write different CSS for different browsers because most of the time it all looks the same. The only browser that is usually causing problems is IE (version 7 and earlier) but even there, with proper HTML and a little experience of its bugs and quirks (speak of hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html)) you can work around most of the issues without extra CSS.

For everything else there are conditional comments (http://www.quirksmode.org/css/condcom.html) where you can include a separate stylesheet for IE.

Rowsdower!
09-09-2011, 05:08 PM
Likewise, itís not wise to finish your layout and then check it out without JS/Flash/whatever, you should get it working without these in the first place and then add JS/Flash/whatever as enhancement (en.wikipedia.org/wiki/Progressive_enhancement).

True, I made a leap in logic. I should affirm that I believe a website should look right and work right without anything other than HTML and CSS. I wasn't commenting on semantic development or progressive enhancement - just on cross-browser display. My method applies even if we're making a javascript-generated, table-based layout with paragraph elements used to make lists - which we know we shouldn't do. But if we're adding that aspect then I would of course agree with what you have there.

I don't even add the javascript and flash until the layout is done and tested compatible with the browsers I have available. I will add the containers for them at the appropriate size, when needed, but the actual addition of js and flash comes after the layout is done.

My trip to browsershots just confirms 1) that the layout works (sans js and flash) in browser and OS combinations I don't have, and 2) that the js and flash appear as intended in browser and OS combinations that I don't have.

Rowsdower!
09-09-2011, 05:10 PM
It really depends on the experience you have. I, for example, can style a page completely with only checking in one browser and it will most likely look good in others as well, because I just know what works and what doesnít. This comes with experience and routine. As a beginner itís certainly advisable to check often.

True. I'm in much the same boat so I don't usually have much cleanup to do, but a new coder might need more checking for better results.

tracknut
09-09-2011, 06:30 PM
Thanks for all the wise words guys, I will keep it all in mind. The part of which I don't understand is how do you write different css depending on the browser? I have the following browsers: Opera, IE 8, Firefox, Chrome, Safari but have been developing with use of Safari.

I'd say that since IE7 or IE8, there has been very little need to use any "special" coding to make a site compatible with all the browsers. Sure, if you need to support older browsers, you may need to have a few tweaks in there, but all the modern browsers are very consistent as long as they have well-written, standards compliant code given to them. I haven't used a conditional comment for at least 5 years.[1]

Dave

[1] I am lucky to not be doing this for business purposes, so while I test my sites in the relevant browsers, I don't spend *any* cycles on IE6, for example.

LearningCoder
09-09-2011, 10:48 PM
Rather than create a new thread, i'll post my other question regarding compatibility.

What is the best way to make my websites compatible depending on monitor size/screen resolution?

Problem is, I have an image as my menu. My menu has the links: home, news, members, forum, server and links. To create a hover effect, I had to create individual images of the menu links, change their color and position them behind their respective names. I've sent the site to my friend and when he opened it up, the individual images were misplaced and in the wrong position. Can this be done with JavaScript?

Rowsdower!
09-09-2011, 11:02 PM
...Can this be done with JavaScript?

Well even when the answer is "yes" it is probably best to ask yourself first whether it *needs* to be done in javascript. The answer is usually "no" for things like basic menus. And -generally speaking - if it doesn't need to be done with javascript, then why do it with javascript at all?

If we can see your specific page we can better answer the question.

CSS3 has something called "media queries" which looks pretty handy for just such a thing:
http://webdesign.about.com/od/css3/a/css3-media-queries.htm

LearningCoder
09-09-2011, 11:10 PM
Here is my code:-

HTML



<!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>
<title>[A!B] Attitude Brothaz Homepage</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="jquerylibrary.js"></script>
<script type="text/javascript" src="matrix.js"></script>

<script type="text/javascript">
$(function() {

$('a img').hover(function() {
$(this).stop().animate({'opacity' : 1});
}, function(){
$(this).stop().animate({'opacity' : 0});
});
});
</script>
<script type="text/javascript">
$(function() {
$('#hidden7').hide();
$('#matrix').hide();
});

$(function() {
$('#oh').click(function() {
$('#hidden7').fadeIn(500);
$('#matrix').fadeIn(3000);

});

});
</script>
<script type="text/javascript">


</script>

</head>

<body>
<div id="mainheaddiv">
<div id="container">
<img src="images/abwgununlit.png" id="logo" width="800px" alt="[A!B]" height="290px" usemap="#logomenu" border="0" />

<map name="logomenu" id="logomenu">
<area shape="rect" coords="34,109,120,131" id="home" alt="home" href="index.htm" />
<area shape="rect" coords="145,109,220,131" id="news" alt="news" href="news.htm" />
<area shape="rect" coords="248,109,378,131" id="members" alt="members" href="members.htm" />
<area shape="rect" coords="406,109,500,131" id="forums" alt="forums" href="forums.htm" />
<area shape="rect" coords="574,109,657,131" id="server" alt="server" href="server.htm" />
<area shape="rect" coords="689,109,748,131" id="links" alt="links" href="links.htm" />
<area shape="rect" coords="513,68,573,106" id="oh" alt="monkey" href="#" />
</map>

<a href="">
<img src="images/home2.png" alt="home2" id="hidden1" title="home2" width="73px" height="11px" border="0" /></a>
<a href="">
<img src="images/news2.png" alt="news2" id="hidden2" title="news2" width="63px" height="9px" border="0" /></a>
<a href="">
<img src="images/members2.png" alt="members2" id="hidden3" title="members2" width="118px" height="12px" border="0" /></a>
<a href="http://www.ab-clan.com/forums" target="_blank">
<img src="images/forums2.png" alt="forums2" id="hidden4" title="forums2" width="84px" height="11px" border="0" /></a>
<a href="">
<img src="images/server2.png" alt="server2" id="hidden5" title="server2" width="73px" height="9px" border="0" /></a>
<a href="">
<img src="images/links2.png" alt="links2" id="hidden6" title="links2" width="52px" height="11px" border="0" /></a>

<img src="images/monkeyseparate.png" alt="monkey" id="hidden7" title="monkeyGun" />
</div>
</div>

<div id="matrix">WARNING! Aimbot Activated</div>

<div id="leftSide"></div>
<div id="main">
<h3 id="subHead">Welcome to [A!B] Attitude Brothaz</h3>
<p id="hist1">The Brotherhood of Triad is by far the oldest clan of the Deus Ex Multiplayer scene. The founders wanted to
create a new clan that was unlike any others in the game and started planning Triad and its architecture in
late 2001. The clan was officially established on 25th of January, 2002, when the first website and forums
were also publicly launched. The name was later on changed to The Brotherhood of Triad to emphasize the fraternal
unity of the clan, the equality of its members and the autocratic governing structure. The members of tBoT were
to revolutionize how the game was played, being zealous pioneers who endlessly and nearly scientifically
developed new strategies, methods and techniques to beat their opponents. From a new prospect tBoT quickly grew
to become a semi-secret society, an elite club for the few and selected, which was to dominate the servers.
</p>
<p id="hist2">For the fact that tBoT was technically far more advanced and ahead of others, the clan was admired and hated,
in one case to the extent that a lesser clan started an anti-[3] campaign to ban all the [3] members from
servers. They never succeeded as tBoT was too strong and united and just kept on growing. At its peak tBoT was
practically a giant conglomerate, nearly a monopoly of skill, having as many as 14 active members on the
roster at one point. He incomprehensibly united spirit of [3] that cannot be understood by an outsider held
the clan together at all times. Some of its members have carved their names among the most legendary of DXMP
history. Most of today's effective playing styles and techniques along with bio optimization and augmentations
usage have been influenced by triad members who embraced pure skill and aimed at the ultimate
</p>

<hr noshade="noshade" id="hr1" />

<h3 id="newsHeading">News/Updates</h3>
<div class="show1"><p>MTL Update</p></div>
<div class="hide1"><p>MTL UpdateMTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update
MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update
MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update
</p>
</div>
<div class="show2"><p>MTL Update</p></div>
<div class="hide2"><p>MTL UpdateMTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update
MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update
MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update
</p>
</div>
<div class="show3"><p>MTL Update</p></div>
<div class="hide3"><p>MTL UpdateMTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update
MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update
MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update
</p>
</div>


</div>
<div id="rightSide"></div>
<hr noshade="noshade" id="hr2" size="1" />

</body>
</html>


CSS:



html, body {margin: 0px;
width: 100%;
background: #F7852C;}

p {font-family: Century Gothic;
font-size: 12px;
color: white;}

#container {width: 800px;
height: 290px;
margin: auto;}

#mainheaddiv {width: 100%;
border-bottom: 2px solid gray;
background: #A6A6A7;}

#logo {position: absolute;}

#hidden1 {position: absolute;
top: 25.8%;
left: 14.0%;}

#hidden2 {position: absolute;
top: 26.3%;
left: 25.3%;
padding-right: 0px;}

#hidden3 {position: absolute;
top: 25.7%;
left: 35.6%;
padding-right: 0px;}

#hidden4 {position: absolute;
top: 25.8%;
left: 51.1%;
padding-right: 0px;}

#hidden5 {position: absolute;
top: 26.4%;
left: 67.9%;
padding-right: 0px;}

#hidden6 {position: absolute;
top: 25.8%;
left: 79.3%;
padding-right: 0px;}

#hidden7 {position: absolute;
top: 30.8%;
left: 55.0%;
padding-right: 0px;}

.matrix {font-family: Lucida Console;
font-size: 10pt;
text-align: center;
width: 10px;
padding: 0px;
margin: 0px;}

#matrix {position: absolute;
top: 158px;
left: 130px;}

#leftSide {border-right: 1px solid gray;
border-bottom: 1px solid gray;
background: #a6a6a7;
width: 10.1%;
height: 900px;
float: left;}

#main {background: #F7852C;
width: 74.9%;
height: 850px;
float: left;
margin: 2%;}

#subHead {text-align: center;
font-family: Century Gothic;
color: gray;
text-decoration: underline;}

#hist1, #hist2 {text-align: center;}

#hist1:first-letter, #hist2:first-letter {font-size: 20px;
color: gray;
font-weight: bold;}

#rightSide {border-left: 1px solid gray;
border-bottom: 1px solid gray;
background: #a6a6a7;
width: 10.1%;
height: 900px;
float: right;}

#update {border: 2px solid black;
width: 30%;
height: 200px;
clear: right;}

#newsHeading {font-family: Century Gothic;
color: gray;
text-decoration: underline;}

.show1, .show2, .show3 {border: 1px solid gray;
width: 20%;
padding: 0px;
text-align: center;
background: #a6a6a7;
color: green;}

.hide1, .hide2, .hide3 {border: 1px solid gray;
width: 100%;
height: 80px;
background: #a6a6a7;}

#hr1 {color: gray;}

#hr2 {clear: both;
margin-bottom: 100px;
color: gray;}


Ok, so the first image is IE9 which is the desired effect. The second is Safari and as you can see, the images are not aligned very well at all!

Any help would be greatly appreciated.

Regards,

LC.

PS- Thanks for the site, i'll give that a read now! ty.

VIPStephan
09-10-2011, 01:00 AM
You should probably look into http://wellstyled.com/css-nopreload-rollovers.html

(Note: Contrary to the example in the tutorial, I prefer to place the image sprites below one another, that’s easier to handle if the width of each item is different (while the height is usually the same).)

LearningCoder
09-10-2011, 09:20 AM
Just looked at the example but I'm not sure how to implement this into my site because the example here is of him getting this effect using just anchors and div's whereas I am using images to get the 'hover' effect.

Bearing in mind I am mediocre with CSS atm, would it not be easier for me to use conditionals? I just need to get some sort of functionality in all browsers. I've heard all about Sprites and they seem far too complex for me at this moment in time.

edit: I only need conditional statements for my menu because the rest of my site is in perfect working order across the five browsers.

Appreciate all your replies,

Regards,

LC.

VIPStephan
09-10-2011, 02:08 PM
No, you don’t need conditionals if you implement it right in the first place. It may seem harder at first but will be much easier in the long run, believe me. The example I posted is using images just as you are using images. Only that these images are applied as background images to the element, not actually in the HTML.

Looking at the images you posted, you should have an HTML structure like this:


<ul id="mainnav">
<li><a href="…">Home</a></li>
<li><a href="…">News</a></li>
<li><a href="…">Members</a></li>
<li><a href="…">Forum</a></li>
<li><a href="…">Server</a></li>
<li><a href="…">Links</a></li>
</ul>

Your images would be the two states, normal and hover, in one image, like so (trying to simulate it with text now):


home
home

(first line in image is the normal state, second line is the hover/current state)
Then your CSS would be something like:


#mainnav li {float: left;}
#mainnav li a {
float: left;
background: top left no-repeat;
height: 20px; /* as high as the first line (normal state) of text of the image(s) */
text-indent: -999em;
}
/* first item */
#mainnav li:first-child a {
background-image: url(home_image.png);
width: 150px; /* as wide as the image/text */
}
/* second item */
#mainnav li:first-child + li a {
background-image: url(news_image.png);
width: 90px;
}
/* third item */
#mainnav li:first-child + li + li a {
background-image: url(news_image.png);
width: 90px;
}
/* … and so on … */

#mainnav li a:hover, #mainnav li.current a {background-position: bottom left;}


On hover the position background image is moved so that the part of the image that’s outside of the link and therefore not visible will be in the visible part. I’ve also included that style for “current page” items which would have a class of “current” (<li class="current"><a…>…</a></li>).

You have to adjust that to your requirements, of course.

LearningCoder
09-10-2011, 03:13 PM
Thank you I understand what he's doing now. The only problem is that I am not using any list to display my menu, the menu is just an image because it's part of my header and logo etc. I just need to place images on top of the main image (where the menu is) and place my images behind these.

Regards,

LC.

vikram1vicky
09-10-2011, 03:21 PM
You can use header image as background-image and you need to define height and width in CSS according to header image size. After that you can place you navi image in header :)

VIPStephan
09-10-2011, 03:25 PM
Did you gove us a link to your code at some point? If not, do so, then we can give you more detailed advice how to handle your specific situation. I would say, however, that you still don’t need any conditionals, it should all be possible with regular CSS.

LearningCoder
09-10-2011, 03:28 PM
HTML:



<!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>
<title>[A!B] Attitude Brothaz Homepage</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="jquerylibrary.js"></script>
<script type="text/javascript" src="matrix.js"></script>
<script type="text/javascript">
$(function() {
$('a img').hover(function() {
$(this).stop().animate({'opacity' : 1});
}, function(){
$(this).stop().animate({'opacity' : 0});
});
});
</script>
<script type="text/javascript">
$(function() {
$('#hidden7').hide();
$('#matrix').hide();
});
$(function() {
$('#oh').click(function() {
$('#hidden7').fadeIn(500);
$('#matrix').fadeIn(3000);
});
});
</script>
<script type="text/javascript">

</script>
</head>
<body>

<div id="mainheaddiv">
<div id="container">
<img src="images/abwgununlit.png" id="logo" width="800px" alt="[A!B]" height="290px" usemap="#logomenu" border="0" />
<map name="logomenu" id="logomenu">
<area shape="rect" coords="34,109,120,131" id="home" alt="home" href="index.htm" />
<area shape="rect" coords="145,109,220,131" id="news" alt="news" href="news.htm" />
<area shape="rect" coords="248,109,378,131" id="members" alt="members" href="members.htm" />
<area shape="rect" coords="406,109,500,131" id="forums" alt="forums" href="forums.htm" />
<area shape="rect" coords="574,109,657,131" id="server" alt="server" href="server.htm" />
<area shape="rect" coords="689,109,748,131" id="links" alt="links" href="links.htm" />
<area shape="rect" coords="513,68,573,106" id="oh" alt="monkey" href="#" />
</map>

<a href="">
<img src="images/home2.png" alt="home2" id="hidden1" title="home2" width="73px" height="11px" border="0" /></a>
<a href="">
<img src="images/news2.png" alt="news2" id="hidden2" title="news2" width="63px" height="9px" border="0" /></a>
<a href="">
<img src="images/members2.png" alt="members2" id="hidden3" title="members2" width="118px" height="12px" border="0" /></a>
<a href="http://www.ab-clan.com/forums" target="_blank">
<img src="images/forums2.png" alt="forums2" id="hidden4" title="forums2" width="84px" height="11px" border="0" /></a>
<a href="">
<img src="images/server2.png" alt="server2" id="hidden5" title="server2" width="73px" height="9px" border="0" /></a>
<a href="">
<img src="images/links2.png" alt="links2" id="hidden6" title="links2" width="52px" height="11px" border="0" /></a>

<img src="images/monkeyseparate.png" alt="monkey" id="hidden7" title="monkeyGun" />
</div>
</div>

<div id="matrix">WARNING! Aimbot Activated</div>

<div id="leftSide"></div>
<div id="main">
<h3 id="subHead">Welcome to [A!B] Attitude Brothaz</h3>
<p id="hist1">The Brotherhood of Triad is by far the oldest clan of the Deus Ex Multiplayer scene. The founders wanted to
create a new clan that was unlike any others in the game and started planning Triad and its architecture in
late 2001. The clan was officially established on 25th of January, 2002, when the first website and forums
were also publicly launched. The name was later on changed to The Brotherhood of Triad to emphasize the fraternal
unity of the clan, the equality of its members and the autocratic governing structure. The members of tBoT were
to revolutionize how the game was played, being zealous pioneers who endlessly and nearly scientifically
developed new strategies, methods and techniques to beat their opponents. From a new prospect tBoT quickly grew
to become a semi-secret society, an elite club for the few and selected, which was to dominate the servers.
</p>
<p id="hist2">For the fact that tBoT was technically far more advanced and ahead of others, the clan was admired and hated,
in one case to the extent that a lesser clan started an anti-[3] campaign to ban all the [3] members from
servers. They never succeeded as tBoT was too strong and united and just kept on growing. At its peak tBoT was
practically a giant conglomerate, nearly a monopoly of skill, having as many as 14 active members on the
roster at one point. He incomprehensibly united spirit of [3] that cannot be understood by an outsider held
the clan together at all times. Some of its members have carved their names among the most legendary of DXMP
history. Most of today's effective playing styles and techniques along with bio optimization and augmentations
usage have been influenced by triad members who embraced pure skill and aimed at the ultimate
</p>

<hr noshade="noshade" id="hr1" />
</div>

<div id="rightSide"></div>

<hr noshade="noshade" id="hr2" size="1" />

</body>
</html>


CSS:



html, body {margin: 0px;
width: 100%;
background: #F7852C;}

p {font-family: Century Gothic;
font-size: 12px;
color: white;}

#container {width: 800px;
height: 290px;
margin: auto;}

#mainheaddiv {width: 100%;
border-bottom: 2px solid gray;
background: #A6A6A7;}

#logo {position: absolute;}

#hidden1 {position: absolute;
top: 25.8%;
left: 14.0%;}

#hidden2 {position: absolute;
top: 26.3%;
left: 25.3%;
padding-right: 0px;}

#hidden3 {position: absolute;
top: 25.7%;
left: 35.6%;
padding-right: 0px;}

#hidden4 {position: absolute;
top: 25.8%;
left: 51.1%;
padding-right: 0px;}

#hidden5 {position: absolute;
top: 26.4%;
left: 67.9%;
padding-right: 0px;}

#hidden6 {position: absolute;
top: 25.8%;
left: 79.3%;
padding-right: 0px;}

#hidden7 {position: absolute;
top: 30.8%;
left: 55.0%;
padding-right: 0px;}

.matrix {font-family: Lucida Console;
font-size: 10pt;
text-align: center;
width: 10px;
padding: 0px;
margin: 0px;}

#matrix {position: absolute;
top: 158px;
left: 130px;}

#leftSide {border-right: 1px solid gray;
border-bottom: 1px solid gray;
background: #a6a6a7;
width: 10.1%;
height: 900px;
float: left;}

#main {background: #F7852C;
width: 74.9%;
height: 850px;
float: left;
margin: 2%;}

#subHead {text-align: center;
font-family: Century Gothic;
color: gray;
text-decoration: underline;}

#hist1, #hist2 {text-align: center;}

#hist1:first-letter, #hist2:first-letter {font-size: 20px;
color: gray;
font-weight: bold;}

#rightSide {border-left: 1px solid gray;
border-bottom: 1px solid gray;
background: #a6a6a7;
width: 10.1%;
height: 900px;
float: right;}

#update {border: 2px solid black;
width: 30%;
height: 200px;
clear: right;}

#hr1 {color: gray;}

#hr2 {clear: both;
margin-bottom: 150px;
color: gray;}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum