Jump to content

Total Nube needs help!!


dfull

Recommended Posts

Hi, I got roped into building a temporary site for my employer while they wait for their new site to be finished (only know enough to really screw things up). It's been a learn as I go sort of thing and thought I'd done ok...until...

 

Ok here's the particulars.

1. the site is not live. I've just been working on it from my desktop.

2. didn’t do anything weird (that I know of). Just what I’ve learned on the W3C tutorials.

3. been building it in ie8.

4. it's set up where the site is a fixed size and stays centered horizontally in the browser.

5. actually looks pretty good.

6. gave it (on disk) to my boss to look at and when he opened it, everything was shoved off to the right (still centered, but it's like the screen is twice the size of the monitor, if that makes any sense).

7. found out he was using ie7.

8. came back to my computer and did the ie8 compatibility mode and the same thing happened.

9. so it looks good in 8, but totally screwed up in 7.

10. searched everywhere for a solution. Nothing's worked.

11. feeling really stupid, and looking really bad to my boss.

 

If anyone could find it in their heart to help an old fool who’s gotten in way over his head I’d sure appreciate it.

 

Thanks

Dave

Link to comment
Share on other sites

The easiest way for us to help you with this is if you'd upload the site to a temporary location and provide a link. That way we can easily see it in the browser and also look at the code directly.

 

If you want to provide the HTML/CSS code that will help, but when dealing with browser inconsistencies it's often best to see the site in the browser with all of the associated images.

Link to comment
Share on other sites

Hi, Thanks for the reply.

 

I don't even know where or how to put the site in a temporary location. If I use our web server they'll charge the boss and I'll catch a very hard time over it. Is there anywhere I can do it quick and free or at least pay for it myself without having to commit to anything (like I said, I’m a rank amateur)?

 

What would be the best way for me to provide the CSS and HTML pages at last count there were 26 of them, so just copy/paste would be a mess.

Link to comment
Share on other sites

Hi Cliffo,

 

I didn't use tables. I just sectioned stuff off with <div> tags. Do you think that could be the problem. Here's the CSS and just one of the pages (they all do the same thing anyway). It's a lot of stuff. Sorry. I'll try and find a place where I can put it up and give a link.

 

CSS Follows

 

/********************** Generic *********************/

 

body

{

text-align: center;

Height: auto;

width: 1000px;

margin: 5px auto 0px auto;

background-color: black;

}

 

h3

{

font-family: "times new roman",times,serif;

text-align: center;

color: rgb(16,37,151);

}

 

/************************ Class **********************/

 

.backbutton

{

position: absolute;

margin-top: 475px;

margin-left: 500px;

}

 

.daily

{

color: rgb(16,37,150);

text-align: left;

}

 

.sleek

{

color: rgb(130,61,20);

text-align: left;

}

 

.kiwi

{

color: rgb(27,167,65);

text-align: left;

}

 

.copyright

{

color: white;

font-family: "times new roman",times,serif;

white-space: nowrap;

margin: 0px 0px 0px 593px; /*top right bottom left*/

font-size: 10px;

}

 

.logo1

{

position: relative;

margin: 0px 180px 0px 225px; /*top right bottom left*/

}

 

.logo2

{

position: relative;

margin-top: 0px;

}

 

.w3c

{

position: relative;

margin: 0px 0px 0px 2px; /*top right bottom left*/

}

 

.img

{

margin: 2px;

height: auto;

width: auto;

float: left;

text-align: center;

}

 

.img img

{

display: inline;

margin: 3px;

}

 

.img a:hover img

{

border: 1px;

}

 

.description

{

text-align: center;

font-weight: normal;

width: 120px;

margin: 2px;

}

 

/********************** ID's *********************/

 

#topbar

{

position: absolute;

z-index: 7;

height: 80px;

width: 1000px;

margin: 0px 0px 0px 0px;

background-color: rgb(16,37,150);

}

 

#sleektopbar

{

position: absolute;

z-index: 7;

height: 80px;

width: 1000px;

margin: 0px 0px 0px 0px;

background-color: rgb(143,84,68);

}

 

#kiwitopbar

{

position: absolute;

z-index: 7;

height: 80px;

width: 1000px;

margin: 0px 0px 0px 0px;

background-color: rgb(27,167,65);

}

 

#copyright

{

position: relative;

z-index: 10;

text-align: right;

margin: -18px 0px 0px 0px; /*top right bottom left*/

}

 

#sidebar

{

position: absolute;

z-index: 6;

width: 80px;

height: 572px;

margin-top: 80px;

background-color: rgb(16,37,150);

}

 

#sleeksidebar

{

position: absolute;

z-index: 6;

width: 80px;

height: 572px;

margin-top: 80px;

background-color: rgb(143,84,68);

}

 

#kiwisidebar

{

position: absolute;

z-index: 6;

width: 80px;

height: 572px;

margin-top: 80px;

background-color: rgb(27,167,65);

}

 

#new

{

position: absolute;

z-index: 5;

font-family: arial,verdana,sans-serif;

width: 200px;

height: 133px;

margin: 90px 0px 0px 85px; /*top right bottom left*/

}

 

#frontpg

{

position: absolute;

z-index: 8;

color: black;

width: 1000px;

margin: 80px 0px 0px 20px;

}

 

#main

{

position: absolute;

z-index: 4;

text-align: center;

width: 1000px;

margin: 130px 0px 0px 20px;

}

 

#ironmain

{

position: absolute;

z-index: 5;

font-family: "times new roman",times,serif;

text-align: center;

white-space: nowrap;

width: 1000px;

margin: 115px 0px 0px 20px;

color: black;

}

 

#gallerymain

{

position: relative;

z-index: 4;

margin: 110px 80px 0px 210px;

}

 

#image

{

position: absolute;

z-index: 9;

margin: 125px 0px 0px 150px;

}

 

#dropsimage

{

position: absolute;

z-index: 9;

margin: 125px 0px 0px 90px; /*top right bottom left*/

}

 

#bkgrnd

{

position: absolute;

z-index: 1;

height: 652px;

width: 1000px;

text-align: center;

margin: 0px auto 0px auto;

background-color: white;

}

 

#dailybkgrnd

{

position: absolute;

z-index: 1;

height: 652px;

width: 1000px;

text-align: center;

margin: 0px auto 0px auto;

background-color: rgb(70,120,240);

}

 

#sleekbkgrnd

{

position: absolute;

z-index: 1;

height: 652px;

width: 1000px;

text-align: center;

margin: 0px auto 0px auto;

background-color: rgb(195,125,70);

}

 

#kiwibkgrnd

{

position: absolute;

z-index: 1;

height: 652px;

width: 1000px;

text-align: center;

margin: 0px auto 0px auto;

background-color: rgb(129,184,92);

}

 

#copy

{

position: absolute;

z-index: 15;

font-family: "times new roman",times,serif;

text-align: justify;

width: 400px;

padding: 0px 35px 10px 35px;

margin: 200px 0px 0px 325px;

border-top-style: solid;

border-right-style: none;

border-bottom-style: solid;

border-left-style: none;

border-color: rgb(175,195,255);

border-width: 10px;

color: rgb(20,70,180);

background-color: rgb(210,230,255);

}

 

#dailycopy

{

position: absolute;

z-index: 15;

font-family: "times new roman",times,serif;

text-align: justify;

width: 400px;

padding: 0px 35px 10px 35px;

margin: 200px 0px 0px 325px;

border-top-style: solid;

border-right-style: none;

border-bottom-style: solid;

border-left-style: none;

border-color: rgb(95,145,255);

border-width: 10px;

color: rgb(50,100,210);

background-color: rgb(150,200,255);

}

 

#sleekcopy

{

position: absolute;

z-index: 15;

font-family: "times new roman",times,serif;

text-align: justify;

width: 400px;

padding: 0px 35px 10px 35px;

margin: 200px 0px 0px 325px;

border-top-style: solid;

border-right-style: none;

border-bottom-style: solid;

border-left-style: none;

border-color: rgb(175,105,60);

border-width: 10px;

color: rgb(180,110,65);

background-color: rgb(255,215,150);

}

 

#kiwicopy

{

position: absolute;

z-index: 15;

font-family: "times new roman",times,serif;

text-align: justify;

width: 400px;

padding: 0px 35px 10px 35px;

margin: 200px 0px 0px 325px;

border-top-style: solid;

border-right-style: none;

border-bottom-style: solid;

border-left-style: none;

border-color: rgb(150,205,110);

border-width: 10px;

color: rgb(85,140,50);

background-color: rgb(185,240,145);

}

 

#ironcopy

{

position: relative;

z-index: 15;

width: 400px;

margin-top: 10px;

margin-right: auto;

margin-left: auto;

border-top-style: solid;

border-right-style: none;

border-bottom-style: solid;

border-left-style: none;

border-color: rgb(175,195,255);

border-width: 10px;

color: rgb(20,70,180);

background-color: rgb(210,230,255);

}

 

#footer

{

position: absolute;

z-index: 20;

font-family: "times new roman",times,serif;

text-align: center;

height: 35px;

width: 1000px;

margin: 575px 120px 0px 40px; /*top right bottom left*/

color: black

}

 

#newprodfooter

{

position: absolute;

z-index: 20;

font-family: arial,verdana,sans-serif;

text-align: center;

white-space: nowrap;

font-size: 9px;

width: 1000px;

margin-top: 635px;

margin-left: 40px;

}

 

#oldprodfooter

{

position: absolute;

z-index: 20;

font-family: arial,verdana,sans-serif;

text-align: center;

white-space: nowrap;

font-size: 9px;

width: 1000px;

margin-top: 635px;

margin-left: 40px;

}

 

HTML Follows:

<!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" xml:lang="en" lang="en">

 

<head>

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />

 

<title>

New Sosilk Daily Shampoo

</title>

 

<link href="biosplashstyles.css" rel="stylesheet" type="text/css" />

 

<script type="text/javascript" src="bioscript.js"></script>

 

</head>

 

<body>

<div id="dailybkgrnd">

<div id="topbar">

<p class="logo1">

<a href="biosplashpage.html">

<img src="biopluslogoslvr.gif" title="Home" style="border:0px" width="449" height="80" alt="Bioplus Logo" />

</a>

</p>

<div id="copyright">

<p class="copyright">

Copyright 2010 by Beauty Elite Group Inc. All Rights Reserved.

</p>

</div>

</div>

 

<div id="sidebar">

<p class="logo2">

<a href="biosplashpage.html">

<img src="saloninsplogowt.jpg" title="Home" style="border:0px" width="71" height="500" alt="Salon Inspired Logo" />

</a>

</p>

<p class="w3c">

<a href="http://jigsaw.w3.org/css-validator/check/referer">

<img src="vcss-blue.gif" title="Validated" alt="Valid CSS!" style="border:0px" height="23" width="81" />

</a>

<a href="http://validator.w3.org/check?uri=referer">

<img src="valid-xhtml10-blue.gif" title="Validated Strict" alt="Valid XHTML 1.0 Strict" style="border:0px" height="23" width="81" />

</a>

</p>

</div>

 

<div id="image">

<img src="dailyshampoo.jpg" style="border:0px" width="114" height="400" alt="Daily Shampoo Image" />

</div>

 

<div id="dailycopy">

<h3 class="daily">

Sosilk Daily Shampoo

</h3>

<p>

Sosilk Daily Shampoo is a Professional Salon Inspired daily formula that provides a rich,

luxurious lather to gently cleanse and moisturize the hair and scalp. It is enriched with

silk proteins, botanicals and Pro-Vitamin B5 leaving hair clean and healthy with incredible

shine.

</p>

</div>

<p class="backbutton">

<input type="button" value="Back" onclick="goBack()" />

</p>

</div>

 

<div id="newprodfooter">

<a href="welcomepg.html">welcome</a>  

<a href="biosplashpage.html">home</a>  

<a href="bionewgallery.html">new gallery</a>  

<a href="dailyconditioner.html">daily conditioner</a>  

<a href="dailydrops.html">daily drops</a>  

<a href="dailyshine.html">daily shine</a>  

<a href="sleekshampoo.html">sleek shampoo</a>  

<a href="sleekconditioner.html">sleek conditioner</a>  

<a href="sleekdrops.html">sleek drops</a>  

<a href="colorcareshampoo.html">color care shampoo</a>  

<a href="colorcareconditioner.html">color care conditioner</a>  

<a href="colorcaredrops.html">color care drops</a>

</div>

 

</body>

 

</html>

Link to comment
Share on other sites

I am very new to css so i am not 100%, but you probably need a wrapper for your content, for example mine is;

 

div#container {

width: 960px;

margin: 0 auto;

padding: 0;

text-align: left;

background-color:#999898;

}

 

and the "margin: 0 auto;" part centers the site. Add that that your css then wrap the sites content with a <div id="container"></div>.

Link to comment
Share on other sites

Andrea: I thought I'd found every tutorial known to man, but I hadn't seen that one! Thanks!

 

newseed: Nailed it. I just tried changing some of the position "absolute" to "relative" and things immediately started changing for the better. I haven't got it all ironed out yet (gonna try the wrapper thing too) but I think you guys have me on the right track. Thanks!!

 

Cliffo: I'm definitely going to play with a wrapper and see where that gets me. Thanks for the info!

 

I really appreciate everyone’s help. I'm gonna play with it some more tonight at home. I'll post tomorrow morning to let you know if I pulled it off.

 

 

Again Thanks!

Dave

Link to comment
Share on other sites

Cliffo: I'm glad it was a quick fix for ya buddy!

 

Everybody: Just wanted to let you guys know that everything you suggested worked and the site is now functioning and displaying fine in ie7. We may actually have it up and running by the end of the day today! I guess then I need to figure out how to check it in other browsers.

 

I can't say thank you enough. You guys may have saved my job, or at the very least saved me a ton of grief and embarrassment! I'll never shoot my big mouth off and get myself into a situation like this again.

 

On the other hand, this web design stuff is kind of fun. I may start trying to learn more about it.

 

Once again, THANK YOU!!

Dave

Link to comment
Share on other sites

I guess then I need to figure out how to check it in other browsers.

 

You can check how a page looks in browsershots http://browsershots.org/ but you can't check how it works, like drop down menus or slideshows as it's just one point in time.

 

Bookmark the browsershots page after making your selections and check after 28 minutes. If it hasn't checked all your chosen browsers after 28 minutes, click the button to set it going for another 30 minutes.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...