Solved

Site looks fine in firefox, layout is messed up a bit in IE and Safari. Please help

Posted on 2013-01-12
59
665 Views
Last Modified: 2013-01-13
http://geniesgameroom.com/ee

It looks fine in firefox but is off in the other browsers. How do I find out what is causing this?




Thank you for your time
0
Comment
Question by:CavemanLawyer
  • 28
  • 21
  • 10
59 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
Each browser handles errors differently.  Please take a look at your errors http://validator.w3.org/check?uri=http%3A%2F%2Fgeniesgameroom.com%2Fee%2F%23%21%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 and as you fixe them, sometimes fixing one will fix the rest.  Once you get this done, you will probably see everything is good.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
I don't know what you are talking about.  It looks the same in Firefox18, Chrome24, and IE8 on my computer.   Try refreshing your pages (F5) to make sure you're not looking at old versions.
0
 

Author Comment

by:CavemanLawyer
Comment Utility
Just fixed all the errors.
I still see it different on IE and safari on my iphone. Even after fixing the errors and refreshing.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
It looks ok for the most part.  What errors are you seeing?
0
 

Author Comment

by:CavemanLawyer
Comment Utility
I checked on firefox on my ubuntu machine and it looked fine.

Was the menu lined up with it's background?
0
 

Author Comment

by:CavemanLawyer
Comment Utility
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
Well your site goes to a hair salon and now your iphone link is games?
0
 

Author Comment

by:CavemanLawyer
Comment Utility
?

I am just hosting it on that site in a subdirectory.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
Turn your iPhone sideways and it will look the same as the others...
0
 

Author Comment

by:CavemanLawyer
Comment Utility
0
 

Author Comment

by:CavemanLawyer
Comment Utility
Turn your iPhone sideways and it will look the same as the others...

did not work...
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
If you want to be picky the  main image is not centered.  But I think it is fine. When you click on a page with text everything is good but you can see the background image is right of center.  But I think it works.
0
 

Author Comment

by:CavemanLawyer
Comment Utility
hmm, so you don't see the same as the screenshots I posted? I wonder what is causing the difference. I even renamed the subdirectory to make sure it wasn't in cache but it was the same.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
Oh, the footer.  Convert that from 100% width to a static pixel.  Maybe make a container for the site so you can line up everything and when the screen goes smaller the footer does not squish in and force things out of whack.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
This is what I see in all browsers on a 1280x1024 screen.
screenshot
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
In chrome on mac which is same as safari - this is what I see when the browser is not at 100% width.  

1) The main image is not centered even at 100%

2) On interior pages the text box's of copy seem to be centered but the main image is not.  Like I said, it is not so bad.

3) The footer width is set at 100%.  This should be fixed and not a percent so this does not happen.
mac chrome
It looks like your css you have created your own grid system of sorts.  I would try and use a ready made grid like http://960.gs/ or http://blueprintcss.org or any of the other good ones.
I think it will help you keep things in line for you.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
Here it is with your interior content.  You can see the text is nicely centered and I highlighted your background image to show it is off center.    Also as you narrow your browser the nav text moves to the left along with the footer but the nav outer box stays.
interior
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
I fired up my MacBook Pro with it's 1440x900 screen and @padas is right.  Same effect with Firefox on the Mac too.  Most page layout is done these days by creating one main container (often called 'wrap' or 'wrapper') with the required width and left and right margins set to 'auto'.  That keeps all the elements in the same container and make them move together as the screen size changes.
0
 

Author Comment

by:CavemanLawyer
Comment Utility
Thanks guys.

I notice there is an HTML5
<article> 

Open in new window

tag and firefox says it has an inline value of 868px. I don't see it in the html when I did a search. Where could that value be stored if it says it is inline? I see the tag in the html, it is the main container for the site content. But there is nothing next to it that would define the size.

<article id="content">

Open in new window

0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
Here is a good resource....

http://msdn.microsoft.com/en-us/hh549253.aspx

http://www.anthonycalzadilla.com/2010/08/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

<body>
<section>
<article id="content1">
</article>
<article id="content2">
</article>
</section>


</body>
0
 

Author Comment

by:CavemanLawyer
Comment Utility
I just tried using <section> for the entire content and <article id="content"> for each page but the result was all of the pages on top of each other and visible.

I would love to be able to size each page separately but I am not sure how to keep the JS working so that I can still have the effect of when you click the menu the page pops up.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
Honestly, I would start over.  By any chance did you use the code for supersized as a base?  I ask because I see  your main content is similar like this:

<article id="content">
        <div class="ic"></div>
        <ul>
          <li id="page_About"></li>
          <li id="page_Portfolio"></li>
          <li id="page_Services"></li>
          <li id="page_Contact"></li>
        </ul>
      </article>

Your site on the outside is nice and simple yet the coding seems overly complex for what it is.  Personally, I find when this happens it is time to restructure.  

If you are in a rush to get this done, forget about html5 for now.  Just use what you know.
<div id="wrapper">
    <div id="header">
    </div>
    <div id="main">
            <div id="page1" class="page">
             </div>
            <div id="page2" class="page">
             </div>
           <div id="page3" class="page">
             </div>
    </div>
    <div id="footer">
    </div>
</div>

Open in new window

I would also suggest looking at one of the css grid libraries I suggested.  It makes keeping columns and everything in order.  Recoding will not be hard for this site.
0
 

Author Comment

by:CavemanLawyer
Comment Utility
I would rather not start over, but if I have to I guess I have no choice.

I am just trying to figure out how it works so that I can keep the effect.

I used a template from another site I have as the base because I like the effects.



So if I use the div structure like you suggested will my links work the same way?
	<a href="#!/page_Reviews" style="text-decoration:none"><strong>Reviews</strong></a>	

Open in new window


Would I just use "div id" instead of article id?
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
Comment Utility
Well you have a small site.  You can spend many hours trying to get this configuration correct just because you started it that way....or you can spend the same amount or less time with simpler mark up that will make your life easier in the long run.

It seems to me that over all what you have kind of works and is close.  But some of the minor issues have to do with the overall mark up of both html and css.   I think if you spend 15 minutes to star marking up one page with something simpler you will see what I am talking about.  Forget about copy/pasting from other code for now.  

Start with something like below and build on it.  That's just me...

<div id="wrapper">
    <div id="header">
    </div>
    <div id="main">
            <div id="page1" class="page">
             </div>
            <div id="page2" class="page">
             </div>
           <div id="page3" class="page">
             </div>
    </div>
    <div id="footer">
    </div>
</div>
0
 

Author Comment

by:CavemanLawyer
Comment Utility
ok I'm trying your suggestion now.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
The example @padas gives above is where I usually start on a new page design.
0
 

Author Comment

by:CavemanLawyer
Comment Utility
Yes I am using that as a base. I appreciate both of your help by the way.


How should I address the menu? I am not clear on what are best practices for cross browser compatibility.
<div class="topmenu">	
<div style="margin: 0 auto; padding-left:30px"><img id="menubg" src="images/menubg.jpg"/>
	  <a href="#!/page_About" style="text-decoration:none"><strong>About</strong></a>
	  <a href="#!/page_Portfolio" style="text-decoration:none"><strong>Portfolio</strong></a>	
	<a href="#!/page_Services" style="text-decoration:none"><strong>My Services</strong></a>
	<a href="#!/page_Reviews" style="text-decoration:none"><strong>Reviews</strong></a>	
	<a href="#!/page_Contact" style="text-decoration:none"><strong>Contact</strong></a>
</div>
	</div>

Open in new window

0
 

Author Comment

by:CavemanLawyer
Comment Utility
Also what would you guys suggest on setting width for the header and footer? Should it be fixed or a percentage or auto? If a fixed percentage what should it be?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
Also, I would add to use one of the grid systems too.   As to your menu, change from inline to  css.  In a very short time, I think you will not see the kind of cross browser issues from a few years ago.  Now you need to worry about desktop vs table vs phone.

I'm running out of time for today.  But give this a try just for a guide but of course using your own styling.  http://css3menu.com/  http://cssmenumaker.com/
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
For the size, take a look at the defaults for the grid systems I posted.  I like to use a fixed width container for desktop views and some place in the neighborhood of 900 to 1100 wide is fine and whatever the defaults are for the girds are.  They are 960+/-.   That works nicely.  

For mobile, forget the "responsive" stuff.  That means it loads all versions at once  and for now most people are on 3g and it is not too fast.  Build a separate version for mobile and ipad/tablets.  I find currently "mobile" is 20% to 40% of traffic depending on the target audience.  Of "mobile" the majority by far is IOS over android (and I like android) and 50% of "mobile" is ipad.   But for now, get the desktop version going.
0
 

Author Comment

by:CavemanLawyer
Comment Utility
lol yeah I've got my phone out at the moment checking the changes periodically.

I appreciate your help.


If you see this and have a second, please let me know what I should set the width to for the footer and header to achieve the centering.

all the best
0
 

Author Comment

by:CavemanLawyer
Comment Utility
great, thank you very much!
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
The header and footer should be the full width of the container and I would make the container fixed width.   http://960.gs/demo.html
0
 

Author Comment

by:CavemanLawyer
Comment Utility
Nice resource. Thank you.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
The header and footer should be the full width of the container and I would make the container fixed width.

I agree, that's what I do.
0
 

Author Comment

by:CavemanLawyer
Comment Utility
I am running into an issue while doing this. The portfolio page is 3100px in height. The other pages 1/3rd of that. If I make the container a fixed length, I either get a truncated portfolio page or I get really long pages on the other pages. Any suggestions?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
If you will force the footer to always be at the bottom, you will need to scroll in the middle.   If you are putting all of your content on one page and calling up portions at a time,  you can look at how the tabs work on jquery ui  http://jqueryui.com/tabs/#ajax.    http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/  I kind of like using the ajax method to keep things from getting messy on one page and you can call up plain exteranl html files to load in your page.   http://jqueryui.com/tabs/#ajax

http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/
0
 

Author Comment

by:CavemanLawyer
Comment Utility
If you are putting all of your content on one page and calling up portions at a time you can look at how the tabs work on jquery ui

yes but I need to keep it the way it was. At this point I am just building a different site. I really just want to make it so that it shows the same in different browsers. That and figure out how to have the portfolio section 3100px and keep the rest the same, smaller size.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
I need to keep it the way it was

But it doesn't work!!  ??
0
 

Author Comment

by:CavemanLawyer
Comment Utility
yeah I am trying to fix it.
I would like to get the same result, only without the cross-browser errors. I don't want to change the jquery or js stuff that is already there. If anything I would want to reuse them.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
The javascript does not appear to be the problem.  It's your HTML structure that is causing you problems.  You didn't see any javascript in any of the suggestions above.
0
 

Author Comment

by:CavemanLawyer
Comment Utility
Padas recommended looking into jquery for something. I am saying that I would like to use the existing technology I have and just fix the structure.

update on that: I have the header footer bg and wrapper and am getting lost after that. I don't understand how the structure needs to be so that it works.
0
 

Author Comment

by:CavemanLawyer
Comment Utility
http://geniesgameroom.com/ee/RESTRUCT.html

the new one I am working on, if you are interested.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
@padas's example in your selected solution is the basic answer.  Upload what you think you have and post a link to it.
0
 

Author Comment

by:CavemanLawyer
Comment Utility
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
'wrapper' needs to be an 'id' in your CSS and needs to look like this:

#wrapper {width:960px;margin-left:auto;margin-right:auto;}

Open in new window


It also needs to be the very first thing after your <body> tag.  I also suggest cropping bg_img1.jpg to 960px or slightly smaller since that will be the width of your container (which is #wrapper).

The only thing that should be outside 'wrapper' is the fixed position 'footer'.  Everything else should be inside 'wrapper'.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
Why is this so big?  http://geniesgameroom.com/ee/images/bg_img1.jpg    That may be part of the problem.  Just use the color black for the background and all you need is the one image centered or however much off center you want it.
0
 

Author Comment

by:CavemanLawyer
Comment Utility
made the corrections you guys suggested. I am trying to re-align things at the moment, it threw a bunch of stuff off.
0
 

Author Comment

by:CavemanLawyer
Comment Utility
The changes screwed up the menu with it's background and I can't figure out what is causing it.


http://geniesgameroom.com/ee/RESTRUCT.html
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
I can recreate this faster then I can explain....http://mypadas.com/ee/genie/#!/
Still needs some work but this gives you a good base.  Work on the nav a little.

Your html was still kind of screwy.  I think if you would have really started completely fresh and used one of the grid systems this would have gone faster and easier for you.  I updated your html and some css.

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<style>

a, abbr, acronym, address, applet, article, aside, audio,
b, blockquote, big, body,
center, canvas, caption, cite, code, command,
datalist, dd, del, details, dfn, dl, div, dt, 
em, embed,
fieldset, figcaption, figure, font, footer, form, 
h1, h2, h3, h4, h5, h6, header, hgroup, html,
i, iframe, img, ins,
kbd, 
keygen,
label, legend, li, 
meter,
nav,
object, ol, output,
p, pre, progress,
q, 
s, samp, section, small, span, source, strike, strong, sub, sup,
table, tbody, tfoot, thead, th, tr, tdvideo, tt,
u, ul, 
var{
    background: transparent;
    border: 0 none;
    font-size: 100%;
    margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
    vertical-align: top; }

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
table, table td { 
	padding:0;
	border:none;
	border-collapse:collapse;
}
/*
img {
	vertical-align:top; 

}
*/	
embed { 
	vertical-align:top;
}
* { border:none}

</style>
<link rel="stylesheet" href="http://geniesgameroom.com/ee/css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="http://geniesgameroom.com/ee/css/prettyPhoto.css" type="text/css" media="all">
<style>
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
	display:block
}
mark, rp, rt, ruby, summary, time {
	display:inline
}
/* Left & Right alignment */
.left {
	float:left
}
.right {
	float:right
}
#wrapper {
	width:960px;
	margin-left:auto;
	margin-right:auto;
}

/* Global properties ======================================================== */
body {
	background:#000;
	font:14px Arial, Helvetica, sans-serif;
	color:#808080;
	line-height:20px;
	/*min-width:1100px;*/
	overflow:hidden;
}
.ic {
	border:0;
	float:right;
	background:#fff;
	color:#f00;
	width:50%;
	line-height:10px;
	font-size:10px;
	margin:-220% 0 0 0;
	overflow:hidden;
	padding:0
}
/* Global Structure ============================================================= */
#main {
	margin-left:auto;
	margin-right:auto;
	min-height:400px;
	background-image: url(http://geniesgameroom.com/ee/images/bg_img1.jpg);
	background-repeat: no-repeat;
	background-position: center 50px;
	
}
.sidebarleft {
	height:100%;
	width:100px;
	background-color:black
}
.header {
	height:100px;
	width:100%;
	background-color:black
}
.topmenu {
	width:960px;
	height:60px;
	margin-left:auto;
	margin-right:auto
}
.topmenu a {
	color:#ffffff;
	position:relative;
	float: left;
	left:30%;
	margin: 15px;
	-webkit-transition: margin 1.5s ease-out;
	-moz-transition: margin 1.5s ease-out;
	-o-transition: margin 1.5s ease-out;
}
.topmenu a:hover {
	margin-top: 2px;
	color:#afa9d9
}
.menu_bar{
	height:60px;
	background-image: url(nav_bg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}
#bg {
	margin-right:auto;
	margin-left:auto;
	z-index:-1
}
.bg_spinner {
	width:100px;
	height:13px;
	position:absolute;
	z-index:2;
	background:url(../http://geniesgameroom.com/ee/images/loader.gif) 0 0 no-repeat;
	top:5px;
	left:5px
}
.spinner {
	position:absolute;
	z-index:99;
	background:url(../http://geniesgameroom.com/ee/images/loader.gif) 50% 50% no-repeat #000;
	width:100%;
	height:100%;
	top:0;
	left:0
}
.block {
	height:92px
}
.extra {
	min-height:100%;
	height:auto !important;
	height:100%;
	margin:0 auto -92px;
	position:relative
}
body, html {
	height:100%
}
.bg1 {
	background:#000;
	position:relative;
	z-index:1;
	height:92px
}
.box {
	width:100%;
	overflow:hidden;
	padding-top:20px;
	padding-bottom:20px;
	position:relative
}
.pagination {
	position:absolute;
	top:-35px;
	left:0
}
.pagination li {
	float:left;
	padding-right:2px;
	font-size:20px;
	line-height:34px
}
.pagination a {
	display:inline-block;
	width:35px;
	height:35px;
	color:#000;
	text-align:center;
	text-decoration:none;
	text-align:center;
	background:#fff
}
.pagination a:hover, .pagination .current a {
	background-position:center;
	color:#fff;
	background:#000
}
/* ============================= main layout ====================== */
a {
	color:#808080;
	text-decoration:underline;
	outline:none
}
a:hover {
	text-decoration:none
}
h1 {
	padding:48px 0 0 0
}
h2 {
	font-size:26px;
	line-height:1.2em;
	padding:17px 0 20px 0;
	color:#fff;
	font-weight:700
}
h3 {
	font-size:18px;
	line-height:1.2em;
	padding:17px 0 20px 0;
	color:#fff;
	font-weight:700
}
h4 {
	font-size:14px;
	color:#fff;
	font-weight:400
}
p {
	padding-bottom:20px
}
/* ============================= header ====================== */
/*header {width:360px;}*/
#logo {
	/*display:block;*/
	text-indent:-9999px;
	background:url(../http://geniesgameroom.com/ee/images/logo.png) 0 0 no-repeat;
	width:auto;
	height:153px
}
#menu {
	padding-top:122px
}
#menu > li {
	width:100%;
	overflow:hidden;
	padding-bottom:4px
}
#menu > li > a {
	display:inline-block;
	font-size:26px;
	line-height:54px;
	height:56px;
	color:#fff;
	background:#000;
	text-decoration:none;
	position:relative;
	letter-spacing:0px;
	cursor:pointer
}
#menu > li > a span {
	display:block;
	background:#fff;
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0
}
#menu > li > a strong {
	position:relative;
	display:block;
	padding:0 95px 0 40px;
	height:56px
}
#menu > li > a:hover, #menu > li > a.active {
	color:#000
}
#menu > li > a:hover strong, #menu > li > a.active strong {
}
/* ============================= content ====================== */
#menubg {
	margin-top:-60px
}
#content {
	height:auto;
	width:auto;
	margin-right:auto;
	margin-left:auto;
}
#content > ul > li {
	position:relative;
	height:868px;
	width:100%;
	bottom:0
}
#content2 {
	height:auto;
	width:auto;
	margin-right:auto;
	margin-left:auto;
}
#content2 > ul > li {
	position:relative;
	height:3100px;
	width:100%;
	bottom:0
}
#contentportfolio {
	height:auto;
	width:auto;
	margin-right:auto;
	margin-left:auto;
}
#contentportfolio > ul > li {
	position:relative;
	height:3100px;
	width:100%;
	bottom:0
}
#page_Portfolio {
	height: 3100px;
}
.box1 {
	background:url(../http://geniesgameroom.com/ee/images/bg_content.png) repeat;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0
}
.inner {
	padding:25px 55px 25px 160px;
	position:relative;
	width:75%
}
.close {
	position:absolute;
	top:20px;
	right:20px;
	width:25px;
	height:25px;
	background:url(../http://geniesgameroom.com/ee/images/close.gif) 0 0 no-repeat;
	display:block
}
.close span {
	display:block;
	background:url(../http://geniesgameroom.com/ee/images/close.gif) 0 bottom no-repeat;
	width:100%;
	height:100%
}
.pad_left1 {
	padding-left:60px
}
.pad_bot1 {
	padding-bottom:25px
}
.pad_bot2 {
	padding-bottom:4px
}
.pad_bot3 {
	padding-bottom:10px
}
.marg_right1 {
	margin-right:29px
}
#page_Services .pad_bot3 {
	padding-bottom:15px
}
#content figure {
	padding-top:5px
}
.button1 {
	display:inline-block;
	font-size:16px;
	color:#000;
	text-transform:uppercase;
	text-decoration:none;
	background:#fff;
	line-height:33px;
	position:relative
}
.button1 span {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#000
}
.button1 strong {
	position:relative;
	font-weight:400;
	display:block;
	padding:0 14px;
	letter-spacing:-1px
}
.button1:hover {
	color:#fff
}
.date {
	float:left;
	width:52px;
	margin-right:17px;
	text-align:center;
	font-size:49px;
	font-weight:700;
	color:#fff;
	letter-spacing:-1px;
	line-height:1.2em
}
.date strong {
	margin-top:-9px;
	display:block
}
.date span {
	font-weight:400;
	font-size:25px;
	line-height:1.2em;
	margin-top:-13px;
	display:block
}
.color1 {
	color:#fff
}
.list1, .list2 {
	margin-top:-2px
}
.list1 li, .list2 li {
	line-height:24px
}
.list1 a, .list2 a {
	padding-left:10px;
	background:url(../http://geniesgameroom.com/ee/images/marker_1.gif) 0 6px no-repeat;
	text-decoration:none
}
.list1 a:hover {
	color:#fff
}
.list2 a {
	color:#fff
}
.list2 a:hover {
	color:#808080
}
.tabs .nav {
	padding-top:5px
}
.tabs .nav li {
	line-height:28px;
	padding-bottom:2px
}
.tabs .nav li a {
	position:relative;
	font-size:16px;
	letter-spacing:-1px;
	text-transform:uppercase;
	text-decoration:none;
	height:28px;
	line-height:26px;
	padding:0 39px 0 9px;
	color:#fff;
	background:#000;
	display:inline-block
}
.tabs .nav li a span {
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#fff
}
.tabs .nav li a strong {
	font-weight:400
}
.tabs .nav li a:hover, .tabs .nav .selected a {
	color:#000
}
.tab-content figure {
	padding-bottom:10px;
	padding-right:10px;
}
.tab-content figure.marg_right1 {
	margin-right:0px
}
/* Lightbox image */
.lightbox-image {
	position:relative;
	overflow:hidden;
	display:block;
	background:#000;
	z-index:1;
	height:200px;
}
.lightbox-image img {
	position:relative;
	z-index:1
}
.lightbox-image > span {
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:2
}
.pp_details {
	height:0;
	padding:0;
	margin:0;
	font-size:0;
	line-height:0;
	visibility:visible !important
}
.pp_description {
	display:none;
	height:0;
	padding:0;
	margin:0;
	font-size:0;
	line-height:0
}
.pp_close {
	position:absolute;
	z-index:99;
	top:-30px;
	right:0;
	display:none !important
}
div.light_square .pp_next {
	position:absolute;
	top:48%;
	right:-68px;
	width:35px;
	height:35px;
	background:url(../http://geniesgameroom.com/ee/images/marker_right.gif) left top no-repeat;
	visibility:visible !important
}
div.light_square .pp_next:hover {
	background-position:bottom
}
div.light_square .pp_previous {
	position:absolute;
	top:48%;
	left:-68px;
	width:35px;
	height:35px;
	background:url(../http://geniesgameroom.com/ee/images/marker_left.gif) left top no-repeat;
	visibility:visible !important
}
div.light_square .pp_previous:hover {
	background-position:bottom
}
.pp_arrow_previous, .pp_arrow_next {
	display:none !important
}
.link1 {
	color:#fff;
	text-decoration:none
}
.link1:hover {
	text-decoration:underline
}
/* ============================= footer ====================== */


.socialicons, .siteby, .footerlogo {float:left;}
.footerlogo{width:200px; text-align:center;}
.socialicons{width:500px; text-align:center;}
.siteby{width:200px; text-align:center;}





#footer {
	position:fixed;
	left:0px;
	right:0px;
	bottom:0px;
	height:85px;
	width:960px;
	background:#000;
	font-size:16px;
	text-transform:uppercase;
	font-weight:400;
	line-height:40px;
	letter-spacing:-1px;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
}
#footer a {
	color:#fff;
	text-decoration:none
}
#footer a:hover {
	color:#808080
}
#foot3 {
	width:auto;
	float:left;
	margin-top:-50px;
	margin-left:140px
}
.col_1 {
	width:220px;
	float:left
}
.col_2 {
	width:700px;
	float:left;
	text-align:center
}
/*#footer_logo */
.footerlogo {
	

	width:225px;
	height:45px
}
/* ============================= forms ============================= */
#ContactForm {
	margin-top:-2px
}
#ContactForm .wrapper {
	overflow:inherit;
	min-height:30px
}
#ContactForm span {
	float:left;
	width:75px;
	color:#fff;
	padding-top:2px
}
#ContactForm a {
	margin-right:10px;
	float:left;
	margin-top:23px;
	width:112px;
	text-align:center
}
#ContactForm a span {
	width:100%
}
#ContactForm .input {
	float:left;
	margin:0;
	width:525px;
	height:16px;
	background:#fff;
	padding:4px 10px;
	color:#808080;
	font:14px "Trebuchet MS", Arial, Helvetica, sans-serif
}
#ContactForm textarea {
	overflow:auto;
	margin:0;
	float:left;
	width:525px;
	height:289px;
	background:#fff;
	padding:4px 10px;
	color:#808080;
	font:14px "Trebuchet MS", Arial, Helvetica, sans-serif
}
</style>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/jquery-1.6.js" ></script>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/cufon-yui.js"></script>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/cufon-replace.js"></script>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/Ubuntu_400.font.js"></script>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/Ubuntu_700.font.js"></script>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/bgSlider.js" ></script>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/script.js" ></script>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/pages.js"></script>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/bg.js" ></script>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/tabs.js"></script>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/jquery.prettyPhoto.js"></script>
<!--[if lt IE 9]>
			<script type="text/javascript" src="http://geniesgameroom.com/ee/js/html5.js"></script>
		<![endif]-->
<!--[if lt IE 7]>
			<div style='clear:both;text-align:center;position:relative'>
				<a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/http://geniesgameroom.com/ee/images/banners/warning_bar_0000_us.jpg" border="0"  alt="" /></a>
			</div>
		<![endif]-->
</head>
<body>
<div id="wrapper">
  <div id="header">
    <div class="topmenu">
      <div class="menu_bar" style="margin: 0 auto; "><a href="#!/page_About" style="text-decoration:none"><strong>About</strong></a> <a href="#!/page_Portfolio" style="text-decoration:none"><strong>Portfolio</strong></a> <a href="#!/page_Services" style="text-decoration:none"><strong>My Services</strong></a> <a href="#!/page_Reviews" style="text-decoration:none"><strong>Reviews</strong></a> <a href="#!/page_Contact" style="text-decoration:none"><strong>Contact</strong></a> </div>
    </div>
  </div>
  <div id="main">
    <div id="About" class="page"> <p>asdfasfdsa</p></div>
    <div id="Portfolio" class="page"> testing </div>
    <div id="Services" class="page"> testing still </div>
  </div>

</div>
  <div id="footer"> 
<div class="footerlogo">
  <a href="index.html" id="footer_logo"><img src="http://geniesgameroom.com/ee/images/footer_logo.gif" alt="logo"></a> 
</div>
  <div class="socialicons">
  <!--<div class="col_2">--> 
  <a href="https://twitter.com/Alexandriasword" target="_blank"> <img src="http://geniesgameroom.com/ee/images/twitter.gif"  alt=""/> </a> <a href="https://www.facebook.com/Alexandria.MakeUpArtistry" target="_blank"> <img src="http://geniesgameroom.com/ee/images/facebook.gif"  alt=""/> </a> <a href="http://www.linkedin.com/in/alexandriaanderson" target="_blank"> <img src="http://geniesgameroom.com/ee/images/linkedin.gif"  alt=""/> </a> <a href="http://www.ddddd.com" target="_blank"> <img src="http://geniesgameroom.com/ee/images/pinterest.gif"  alt=""/> </a> <a href="http://www.ddddd.com" target="_blank"> <img src="http://geniesgameroom.com/ee/images/yelp.gif" alt=""/> </a>
 </div> 
  <div class="siteby">Website by <a href="http://www.DantechIT.com" target="_blank">Dantech IT</a></div>
  
  
  </div>


<script type="text/javascript"> Cufon.now(); </script> 
<script>
		$(window).load(function() {
			$('.spinner').fadeOut();
			$('body').css({overflow:'inherit'})
		})
		</script>
</body>
</html>

Open in new window

0
 

Author Comment

by:CavemanLawyer
Comment Utility
You are awesome. Thank you very much. Thank you for helping me all of this time.

You took out the bg for the menu and when I put it back in the site breaks.

It happens when I insert this code into "topmenu" div:
<img id="menubg" src="images/menubg.jpg"/>

Open in new window


Do you have an idea of what would cause this? I am trying to learn as much as I can, is there a way to show the div outlines so that I can see them all at once to get a better visual on what is going on?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
The background is in the css as a background image.  Don't add it inside the div. I added the class menu_bar to the div that you had surrounding the nav items. I cut out the nav you had which should not need to be any larger then the actual size.  It was lop sided with the extra black background you had.  Please see my sample link where I used the file this image.  

nav backgroundI can be in oakpark for beer....
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
If you look at the spinner background urls, they are wrong in the css because I did a find and replace.    Take them out anyway.  At least on the front page.   I know there is the Fout issue but I'm not sure which is more annoying.  The slight page flash or the page not loading right away.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
When you have this complete.  Run all your js files through something like http://jscompress.com/ to make the file size smaller.  If there are js files you will keep on every page, then you can put them into one js file.  It will help  make things load faster.
0
 

Author Comment

by:CavemanLawyer
Comment Utility
haha definitely. Just hit me up.

Ok, I made the changes and it fixed the menu. It looks a little off but I can fix that later. On to the content, Where do I start with that? It used to be in an <article> tag but if I am putting it in divs, how do I keep the "bookmark" effect or whatever? If you look at the old link when I click the menu item the page just pops up. But when I type in content in the divs inside "main" then it just stays on the screen.

old link:
http://geniesgameroom.com/ee/

new updated link:
http://geniesgameroom.com/ee/ee.html
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
replace what you have with code below.

Now find

<!-- tab content below -->
     
<!-- tab content above -->

and between the tab content below and above copy/paste everything from your old code starting with <article id="content"> on line 79 through </article> on line 384.  It is currently between the <!-- content --> <!-- content --> tags.

I think I have gone above and beyond here and everything as far as your basic html is working fine.  Now it is up to the javascripting/hmtl/css to work with the nav.  I think anything more...and it's time to hire out.   I will give you a hint though.... open up your current old page with either firefox using firebug or chrome browser and use View > Developer > Console.  There are a lot of errors that have to do with the js that will prevent things from working properly.  Take care of those one by one.  At least close out this question and then for the rest you can post specific questions here on EE to help you through each.

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<style>

a, abbr, acronym, address, applet, article, aside, audio,
b, blockquote, big, body,
center, canvas, caption, cite, code, command,
datalist, dd, del, details, dfn, dl, div, dt, 
em, embed,
fieldset, figcaption, figure, font, footer, form, 
h1, h2, h3, h4, h5, h6, header, hgroup, html,
i, iframe, img, ins,
kbd, 
keygen,
label, legend, li, 
meter,
nav,
object, ol, output,
p, pre, progress,
q, 
s, samp, section, small, span, source, strike, strong, sub, sup,
table, tbody, tfoot, thead, th, tr, tdvideo, tt,
u, ul, 
var{
    background: transparent;
    border: 0 none;
    font-size: 100%;
    margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
    vertical-align: top; }

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
table, table td { 
	padding:0;
	border:none;
	border-collapse:collapse;
}
/*
img {
	vertical-align:top; 

}
*/	
embed { 
	vertical-align:top;
}
* { border:none}

</style>
<link rel="stylesheet" href="http://geniesgameroom.com/ee/css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="http://geniesgameroom.com/ee/css/prettyPhoto.css" type="text/css" media="all">
<style>
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
	display:block
}
mark, rp, rt, ruby, summary, time {
	display:inline
}
/* Left & Right alignment */
.left {
	float:left
}
.right {
	float:right
}
#wrapper {
	width:960px;
	margin-left:auto;
	margin-right:auto;
}

/* Global properties ======================================================== */
body {
	background:#000;
	font:14px Arial, Helvetica, sans-serif;
	color:#808080;
	line-height:20px;
	/*min-width:1100px;*/
	overflow:hidden;
}
.ic {
	border:0;
	float:right;
	background:#fff;
	color:#f00;
	width:50%;
	line-height:10px;
	font-size:10px;
	margin:-220% 0 0 0;
	overflow:hidden;
	padding:0
}
/* Global Structure ============================================================= */
#main {
	margin-left:auto;
	margin-right:auto;
	min-height:400px;
	background-image: url(http://geniesgameroom.com/ee/images/bg_img1.jpg);
	background-repeat: no-repeat;
	background-position: center 50px;
	
}
.sidebarleft {
	height:100%;
	width:100px;
	background-color:black
}
.header {
	height:100px;
	width:100%;
	background-color:black
}
.topmenu {
	width:960px;
	height:60px;
	margin-left:auto;
	margin-right:auto
}
.topmenu a {
	color:#ffffff;
	position:relative;
	float: left;
	left:30%;
	margin: 15px;
	-webkit-transition: margin 1.5s ease-out;
	-moz-transition: margin 1.5s ease-out;
	-o-transition: margin 1.5s ease-out;
}
.topmenu a:hover {
	margin-top: 2px;
	color:#afa9d9
}
.menu_bar{
	height:60px;
	background-image: url(nav_bg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}
#bg {
	margin-right:auto;
	margin-left:auto;
	z-index:-1
}
.bg_spinner {
	width:100px;
	height:13px;
	position:absolute;
	z-index:2;
	background:url(../http://geniesgameroom.com/ee/images/loader.gif) 0 0 no-repeat;
	top:5px;
	left:5px
}
.spinner {
	position:absolute;
	z-index:99;
	background:url(../http://geniesgameroom.com/ee/images/loader.gif) 50% 50% no-repeat #000;
	width:100%;
	height:100%;
	top:0;
	left:0
}
.block {
	height:92px
}
.extra {
	min-height:100%;
	height:auto !important;
	height:100%;
	margin:0 auto -92px;
	position:relative
}
body, html {
	height:100%
}
.bg1 {
	background:#000;
	position:relative;
	z-index:1;
	height:92px
}
.box {
	width:100%;
	overflow:hidden;
	padding-top:20px;
	padding-bottom:20px;
	position:relative
}
.pagination {
	position:absolute;
	top:-35px;
	left:0
}
.pagination li {
	float:left;
	padding-right:2px;
	font-size:20px;
	line-height:34px
}
.pagination a {
	display:inline-block;
	width:35px;
	height:35px;
	color:#000;
	text-align:center;
	text-decoration:none;
	text-align:center;
	background:#fff
}
.pagination a:hover, .pagination .current a {
	background-position:center;
	color:#fff;
	background:#000
}
/* ============================= main layout ====================== */
a {
	color:#808080;
	text-decoration:underline;
	outline:none
}
a:hover {
	text-decoration:none
}
h1 {
	padding:48px 0 0 0
}
h2 {
	font-size:26px;
	line-height:1.2em;
	padding:17px 0 20px 0;
	color:#fff;
	font-weight:700
}
h3 {
	font-size:18px;
	line-height:1.2em;
	padding:17px 0 20px 0;
	color:#fff;
	font-weight:700
}
h4 {
	font-size:14px;
	color:#fff;
	font-weight:400
}
p {
	padding-bottom:20px
}
/* ============================= header ====================== */
/*header {width:360px;}*/
#logo {
	/*display:block;*/
	text-indent:-9999px;
	background:url(../http://geniesgameroom.com/ee/images/logo.png) 0 0 no-repeat;
	width:auto;
	height:153px
}
#menu {
	padding-top:122px
}
#menu > li {
	width:100%;
	overflow:hidden;
	padding-bottom:4px
}
#menu > li > a {
	display:inline-block;
	font-size:26px;
	line-height:54px;
	height:56px;
	color:#fff;
	background:#000;
	text-decoration:none;
	position:relative;
	letter-spacing:0px;
	cursor:pointer
}
#menu > li > a span {
	display:block;
	background:#fff;
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0
}
#menu > li > a strong {
	position:relative;
	display:block;
	padding:0 95px 0 40px;
	height:56px
}
#menu > li > a:hover, #menu > li > a.active {
	color:#000
}
#menu > li > a:hover strong, #menu > li > a.active strong {
}
/* ============================= content ====================== */
#menubg {
	margin-top:-60px
}
#content {
	height:auto;
	width:auto;
	margin-right:auto;
	margin-left:auto;
}
#content > ul > li {
	position:relative;
	height:868px;
	width:100%;
	bottom:0
}
#content2 {
	height:auto;
	width:auto;
	margin-right:auto;
	margin-left:auto;
}
#content2 > ul > li {
	position:relative;
	height:3100px;
	width:100%;
	bottom:0
}
#contentportfolio {
	height:auto;
	width:auto;
	margin-right:auto;
	margin-left:auto;
}
#contentportfolio > ul > li {
	position:relative;
	height:3100px;
	width:100%;
	bottom:0
}
#page_Portfolio {
	height: 3100px;
}
.box1 {
	background:url(../http://geniesgameroom.com/ee/images/bg_content.png) repeat;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0
}
.inner {
	padding:25px 55px 25px 160px;
	position:relative;
	width:75%
}
.close {
	position:absolute;
	top:20px;
	right:20px;
	width:25px;
	height:25px;
	background:url(http://geniesgameroom.com/ee/images/close.gif) 0 0 no-repeat;
	display:block
}
.close span {
	display:block;
	background:url(http://geniesgameroom.com/ee/images/close.gif) 0 bottom no-repeat;
	width:100%;
	height:100%
}
.pad_left1 {
	padding-left:60px
}
.pad_bot1 {
	padding-bottom:25px
}
.pad_bot2 {
	padding-bottom:4px
}
.pad_bot3 {
	padding-bottom:10px
}
.marg_right1 {
	margin-right:29px
}
#page_Services .pad_bot3 {
	padding-bottom:15px
}
#content figure {
	padding-top:5px
}
.button1 {
	display:inline-block;
	font-size:16px;
	color:#000;
	text-transform:uppercase;
	text-decoration:none;
	background:#fff;
	line-height:33px;
	position:relative
}
.button1 span {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#000
}
.button1 strong {
	position:relative;
	font-weight:400;
	display:block;
	padding:0 14px;
	letter-spacing:-1px
}
.button1:hover {
	color:#fff
}
.date {
	float:left;
	width:52px;
	margin-right:17px;
	text-align:center;
	font-size:49px;
	font-weight:700;
	color:#fff;
	letter-spacing:-1px;
	line-height:1.2em
}
.date strong {
	margin-top:-9px;
	display:block
}
.date span {
	font-weight:400;
	font-size:25px;
	line-height:1.2em;
	margin-top:-13px;
	display:block
}
.color1 {
	color:#fff
}
.list1, .list2 {
	margin-top:-2px
}
.list1 li, .list2 li {
	line-height:24px
}
.list1 a, .list2 a {
	padding-left:10px;
	background:url(../http://geniesgameroom.com/ee/images/marker_1.gif) 0 6px no-repeat;
	text-decoration:none
}
.list1 a:hover {
	color:#fff
}
.list2 a {
	color:#fff
}
.list2 a:hover {
	color:#808080
}
.tabs .nav {
	padding-top:5px
}
.tabs .nav li {
	line-height:28px;
	padding-bottom:2px
}
.tabs .nav li a {
	position:relative;
	font-size:16px;
	letter-spacing:-1px;
	text-transform:uppercase;
	text-decoration:none;
	height:28px;
	line-height:26px;
	padding:0 39px 0 9px;
	color:#fff;
	background:#000;
	display:inline-block
}
.tabs .nav li a span {
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#fff
}
.tabs .nav li a strong {
	font-weight:400
}
.tabs .nav li a:hover, .tabs .nav .selected a {
	color:#000
}
.tab-content figure {
	padding-bottom:10px;
	padding-right:10px;
}
.tab-content figure.marg_right1 {
	margin-right:0px
}
/* Lightbox image */
.lightbox-image {
	position:relative;
	overflow:hidden;
	display:block;
	background:#000;
	z-index:1;
	height:200px;
}
.lightbox-image img {
	position:relative;
	z-index:1
}
.lightbox-image > span {
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:2
}
.pp_details {
	height:0;
	padding:0;
	margin:0;
	font-size:0;
	line-height:0;
	visibility:visible !important
}
.pp_description {
	display:none;
	height:0;
	padding:0;
	margin:0;
	font-size:0;
	line-height:0
}
.pp_close {
	position:absolute;
	z-index:99;
	top:-30px;
	right:0;
	display:none !important
}
div.light_square .pp_next {
	position:absolute;
	top:48%;
	right:-68px;
	width:35px;
	height:35px;
	background:url(../http://geniesgameroom.com/ee/images/marker_right.gif) left top no-repeat;
	visibility:visible !important
}
div.light_square .pp_next:hover {
	background-position:bottom
}
div.light_square .pp_previous {
	position:absolute;
	top:48%;
	left:-68px;
	width:35px;
	height:35px;
	background:url(../http://geniesgameroom.com/ee/images/marker_left.gif) left top no-repeat;
	visibility:visible !important
}
div.light_square .pp_previous:hover {
	background-position:bottom
}
.pp_arrow_previous, .pp_arrow_next {
	display:none !important
}
.link1 {
	color:#fff;
	text-decoration:none
}
.link1:hover {
	text-decoration:underline
}
/* ============================= footer ====================== */


.socialicons, .siteby, .footerlogo {float:left;}
.footerlogo{width:200px; text-align:center;}
.socialicons{width:500px; text-align:center;}
.siteby{width:200px; text-align:center;}





#footer {
	position:fixed;
	left:0px;
	right:0px;
	bottom:0px;
	height:85px;
	width:960px;
	background:#000;
	font-size:16px;
	text-transform:uppercase;
	font-weight:400;
	line-height:40px;
	letter-spacing:-1px;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
}
#footer a {
	color:#fff;
	text-decoration:none
}
#footer a:hover {
	color:#808080
}
#foot3 {
	width:auto;
	float:left;
	margin-top:-50px;
	margin-left:140px
}
.col_1 {
	width:220px;
	float:left
}
.col_2 {
	width:700px;
	float:left;
	text-align:center
}
/*#footer_logo */
.footerlogo {
	

	width:225px;
	height:45px
}
/* ============================= forms ============================= */
#ContactForm {
	margin-top:-2px
}
#ContactForm .wrapper {
	overflow:inherit;
	min-height:30px
}
#ContactForm span {
	float:left;
	width:75px;
	color:#fff;
	padding-top:2px
}
#ContactForm a {
	margin-right:10px;
	float:left;
	margin-top:23px;
	width:112px;
	text-align:center
}
#ContactForm a span {
	width:100%
}
#ContactForm .input {
	float:left;
	margin:0;
	width:525px;
	height:16px;
	background:#fff;
	padding:4px 10px;
	color:#808080;
	font:14px "Trebuchet MS", Arial, Helvetica, sans-serif
}
#ContactForm textarea {
	overflow:auto;
	margin:0;
	float:left;
	width:525px;
	height:289px;
	background:#fff;
	padding:4px 10px;
	color:#808080;
	font:14px "Trebuchet MS", Arial, Helvetica, sans-serif
}
</style>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/jquery-1.6.js" ></script>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/cufon-yui.js"></script>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/cufon-replace.js"></script>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/Ubuntu_400.font.js"></script>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/Ubuntu_700.font.js"></script>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/bgSlider.js" ></script>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/script.js" ></script>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/pages.js"></script>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/bg.js" ></script>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/tabs.js"></script>
<script type="text/javascript" src="http://geniesgameroom.com/ee/js/jquery.prettyPhoto.js"></script>
<!--[if lt IE 9]>
			<script type="text/javascript" src="http://geniesgameroom.com/ee/js/html5.js"></script>
		<![endif]-->
<!--[if lt IE 7]>
			<div style='clear:both;text-align:center;position:relative'>
				<a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/http://geniesgameroom.com/ee/images/banners/warning_bar_0000_us.jpg" border="0"  alt="" /></a>
			</div>
		<![endif]-->
</head>
<body>
<div id="wrapper">
  <div id="header">
    <div class="topmenu">
      <div class="menu_bar" style="margin: 0 auto; "><a href="#!/page_About" style="text-decoration:none"><strong>About</strong></a> <a href="#!/page_Portfolio" style="text-decoration:none"><strong>Portfolio</strong></a> <a href="#!/page_Services" style="text-decoration:none"><strong>My Services</strong></a> <a href="#!/page_Reviews" style="text-decoration:none"><strong>Reviews</strong></a> <a href="#!/page_Contact" style="text-decoration:none"><strong>Contact</strong></a> </div>
    </div>
  </div>
  <div id="main">
<!-- tab content below -->
      
<!-- tab content above -->
  </div>

</div>
  <div id="footer"> 
<div class="footerlogo">
  <a href="index.html" id="footer_logo"><img src="http://geniesgameroom.com/ee/images/footer_logo.gif" alt="logo"></a> 
</div>
  <div class="socialicons">
  <!--<div class="col_2">--> 
  <a href="https://twitter.com/Alexandriasword" target="_blank"> <img src="http://geniesgameroom.com/ee/images/twitter.gif"  alt=""/> </a> <a href="https://www.facebook.com/Alexandria.MakeUpArtistry" target="_blank"> <img src="http://geniesgameroom.com/ee/images/facebook.gif"  alt=""/> </a> <a href="http://www.linkedin.com/in/alexandriaanderson" target="_blank"> <img src="http://geniesgameroom.com/ee/images/linkedin.gif"  alt=""/> </a> <a href="http://www.ddddd.com" target="_blank"> <img src="http://geniesgameroom.com/ee/images/pinterest.gif"  alt=""/> </a> <a href="http://www.ddddd.com" target="_blank"> <img src="http://geniesgameroom.com/ee/images/yelp.gif" alt=""/> </a>
 </div> 
  <div class="siteby">Website by <a href="http://www.DantechIT.com" target="_blank">Dantech IT</a></div>
  
  
  </div>


<script type="text/javascript"> Cufon.now(); </script> 
<script>
		$(window).load(function() {
			$('.spinner').fadeOut();
			$('body').css({overflow:'inherit'})
		})
		</script>
</body>
</html>

Open in new window

0
 

Author Comment

by:CavemanLawyer
Comment Utility
Thanks man. I appreciate you going way beyond what you could have done. I meant it about the beer.

I copy/pasted the content in between the article tags but the content didn't show correctly, like half of it was off the screen and stuff after you click something in the menu.
www.geniesgameroom.com/ee/ee2.html

I'll get it figured out. I do really appreciate your help. Shoot me an email if you are interested in doing some business on the side. I outsource this stuff a lot (my background is networking).

cheers
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
We are not allowed to post here but my contact info is on ee http://www.experts-exchange.com/M_5984857.html.  

Some of the issues may be from when I converted the links to full urls so I could test.  But if you look in your browser console or firebug you will see the problems.  Those need to be taken care of first.   Then it is a matter of using jquery ui tabs.
0
 

Author Comment

by:CavemanLawyer
Comment Utility
just sent you an email
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now