• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 360
  • Last Modified:

Web Page too wide

Hi,

I'm designing a website in HTML and my page is too wide. I copied my style sheet from another site which fits the page just fine. My images seem fine, not too wide, I don't know what's causing it, but the scrollbar goes to the right for almost the double the normal page width.

Thanks!
0
Lucynka
Asked:
Lucynka
  • 6
  • 5
  • 3
  • +1
1 Solution
 
Ryan ChongCommented:
try check if you got table or layer (DIV) in your html page that set a width longer as what you expected?

you may post your html scripts here if necessary so that we can diagnose it for you.
0
 
SheharyaarSaahilCommented:
can we see the page in question here?
also make sure that the width of the main table/div is not set to 100%
0
 
LucynkaAuthor Commented:
Here is the HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
      <head>
            <TITLE>Vibrant Bodies Center - Home</TITLE>

      <!-- website first published July 21, 2007. -->
      
      <!-- This is a meta tag declaring encoding:-->
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
      
      <!-- To define keywords for search engines. For XHTML, you need a slash at the end::-->
      <meta name="keywords" content="colon cleansing, hydrotherapy, Vibrant Bodies Center,Phyllis Gottshall,
            Colleen Campbell,Roberta Backstrom, John Cassone, Kelly Cassone.colonics, high colonics, colonic irrigation
            Murrieta, Temecula, Temecula Valley,Bio-Electric Lymphatic Therapy,8 Day Colon/Liver Cleanse,
            Ear Coning,Q2 Energy Foot Bath,Quantum Biofeedback,Nutritional Consultation, homeopathy">

      <!-- To define a description of your web page:-->
      <meta name="description" content=
            "Vibrant Bodies Center, Phyllis Gottshall,certified colon hydrotherapist, colon cleansing, hydrotherapy,
            colonics, high colonics, colonic irrigation      Murrieta, Temecula, Temecula Valley,Bio-Electric Lymphatic Therapy,
            8 Day Colon/Liver Cleanse,Ear Coning,Q2 Energy Foot Bath,Quantum Biofeedback,Nutritional Consultation, homeopathy">

      <!-- This is a link to my external styles sheet (In HTML the <link> tag has no end tag.
            In XHTML the <link> tag must be properly closed. ):-->
            <link rel="stylesheet" type="text/css" href="VB style.css"/

      

</head>

<body>

<div class=pagecontainer>

      <div class=headertitle>
            Vibrant Bodies Center
      </div>

      <div class=headertagline>
      <h3>We assist you in attaining High Level Wellness</h3>
      
      </div>      
      



      <div class=navigation>
            <p>
                  <a href="index.html">Home</a>
                  <a href="VB - about us.html">About us</a>
                  <a href="VB - modalities.html">Modalities</a>
                  <a href="VB - more about.html">More About Colon Hydrotherapy</a>
                  <a href="VB - history.html">Colon Hydrotherapy throughout history</a>
                  <a href="VB - FAQ.html">FAQ About Colon Hydrotherapy</a>
                  <a href="VB - resources.html">Resources</a>
                  <a href="VB - contact.html">Contact Us</a>            
            </p>

      </div>

      <div class=mailto>
            <a class="mail" href="mailto:vibrantbodies@msn.com?subject=website%20inquiry">
            Send E-mail</a>
      </div>
      
      <div class="jogger1">
            <img src="man jogging 80%.jpg" alt="man jogging.jpg">
      </div>

<div class=inhalt>
      
                  <h1>Home</h1>
                  <br><br>
            <div class="photo">
                  <img src="New Picture Vibrant Bodies 14%.JPG" alt="New Picture Vibrant Bodies.JPG">
            </div><br><br><br>
            
            <div class="phototext">
                  From left: Phyllis Gottshall, Colleen Campbell,Roberta Backstrom, <br>John and Kelly Cassone.
            </div>       
                  
                  <h2>Serving our clients since 1995 in Murrieta<br><br>
                  </h2>
                                    
                  
            <p>
                  Through education, caring, support and utilization of our<br> modalities,
                  we assist you in attaining High Level Wellness<br> with integrity, respect
                   and compassion.<br><br>
                  
                  By accessing the Healer Within you can achieve your health goals.<br>
            </p>
      
<br><br><br><br>
      <img src= "horizontal line 80%.jpg" alt="horizontal line"><br><br>

            <h4><li>Modalities we offer:
                  <ul><br>
                  <li class="list2">Colon Hydrotherapy</li>
                  <li class="list2">Bio-Electric Lymphatic Therapy</li>
                  <li class="list2">8 Day Colon/Liver Cleanse</li>
                  <li class="list2">Ear Coning</li>
                  <li class="list2"> Q2 Energy Foot Bath</li>
                  <li class="list2">Quantum Biofeedback</li>
                  <li class="list2">Nutritional Consultation</li>
                  </ul><br></h4>
            
            <img src= "horizontal line 80%.jpg" alt="horizontal line"><br><br>            
            
                  <br><br>
                  
                  <h2>Please contact us for an appointment:</h2><br>
                  
      <p class="plain"> Phone: 951-696-0854<br>
            Fax: 951-696-8404<br>
            41011 California Oaks Rd. Suite 103<br>
            Murrieta, California 92562<br>
            e-mail: vibrantbodies@msn.com<br><br>
            </p>
            <br>
            <h2>For Quantum Biofeedback contact:</h2><br>            
            <p class="plain">
            Colleen Campbell, MS., Certified Biofeedback Specialist<br>
            Phone: (760) 445-0166<br>
            Office Locations: Mira Mesa and Murrieta<br>
            E-mail: quantum.therapist@gmail.com<br>
            Website: www.yourquantumwellbeing.com<br>
            </p>
</div><!-- Ends Inhalt:-->
            
            
            
            

</div><!-- Ends Pagecontainer:-->

</body>

</html>



And here the CSS (more than needed for this one page - more pages to come...)


/* This is a CSS comment
Do NOT leave spaces between the property value and the units!
If you use "margin-left: 20 px" instead of "margin-left: 20px"
it will only work properly in IE6 but it will not work in Mozilla/Firefox or Netscape.
*/



/* This is a CSS comment
      What we want to do here is create a fixed width center column in CSS
      whose side columns fill in with white space in larger resolutions.
      This particular example will fit all resolutions down to 800 x 600.

      body { text-align: center; margin: 5em 0 0 0; vertical-align: middle; }
      #content { width: 760px; text-align: left; margin: 0 auto; }
      
      How it Works:       In the content div, the left and right margins are set
      to auto - which means they will automatically expand to
      the browser's width down to a width of 760px.
      The 760px is set as our fixed width to prevent
      horizontal scrollbars on browsers with resolutions down to 800 x 600.
*/

*{margin:0;padding:0}/* This will zero out all margins and paddings for all elements
 and give you a good starting point for all browsers,
 as different browsers have different defaults.*/
 
/* learn how to use this to prevent line breaks:

For similar functionality use a <span class="nobreak"> or similar with CSS:

span.nobreak      {
      white-space: nowrap;
      }

I can't vouch for browser compatibility, so you might want to check that out
before you use the technique.
*/


.pagecontainer{
      width:95%;
      margin: 10px auto;
}



.headertitle {/*Vibrant Bodies Center, positioned absolutely*/
      position      : absolute;
    width            : 100%;
      top                  : 0px;
    left            : 0px;
      right            : 0px;
      font-family      : "arial black",serif;
      font-size      : 70px;
      font-style      : italic;
      text-align      :center;      
      color            : rgb(47,47,141);
      background-repeat:no-repeat;
      background-image:url("logo3.jpg");
      padding            : 10px 20px 70px 10px;
      }

.headertagline {/*Header Tagline, positioned absolutely*/
      position            : relative;
    top                        : 185px;
      
   
      }

.photo {/*Header Tagline, positioned absolutely*/
      position            : absolute;
    top                        : 320px;
    left                  : 650px;
      }
      
.phototext {/*Header Tagline, positioned absolutely*/
      position            : absolute;
    width                  : 100%;
      top                        : 600px;
    left                  : 650px;
      font-size            : 10px;
      text-align            :justify;
      }
      
      
      
      
.mailto {/*this is the e-mail link*/
      position      : absolute;
      top                  : 600px;
    left            : 10px;
    width            : auto;
    height            : auto;
    font-family : Arial, Helvetica, sans-serif;
      font-size      : 24px;
      color            : rgb(47,47,141);
    line-height : 160%;
      
      background-image:url("logo3.jpg")
}

.jogger1 {/*this is the jogger picture on Home page*/
      position      : absolute;
      top                  : 700px;
    left            : 0px;
    width            : auto;
    height            : auto;
    font-family : Arial, Helvetica, sans-serif;
      font-size      : 24px;
      color            : rgb(47,47,141);
    line-height : 160%;
      }
      
.mailtofree1 {/*this is the e-mail link for free QB Simple Start copy*/
      display            : block;
    margin-left      : auto;
    margin-right: auto;
      width            : auto;
    height            : auto;
    font-family : Arial, Helvetica, sans-serif;
      font-size      : 17px;
    line-height : 160%;
}



.QB {/*QB Pro Advisor logo*/
      position      : absolute;
    top                  : 80px;
    right            : 20%;
   
      width            : auto;
    height            : auto;
    font-family : Arial, Helvetica, sans-serif;
}







.body {
      background-color : #FFFFFF;
      font-family : arial,sans-serif;
      color : rgb(black);
      margin: 0px;
      }

.navigation {/*The navigation on the left side, positioned absolutely*/
       position      : absolute;
    top                  : 252px;
    left            : 5px;
    width            : 5px;
    height            : auto;
    margin            : 0px;
      padding            : 1px;
      font-family : Arial, Helvetica, sans-serif;
      font-size      : 17px;
    line-height : 160%;/*line-height set to 160% in order to*/
    }                  /*have the navigation elements better separated*/


.pagetitle {/*Page Title, positioned absolutely*/
      position      : absolute;
    top                  : 190px;
    left            : 180px;
      right            : 5px;      
      width            : 35px;
    height            : auto;
      }

.inhalt {/*this is the main content area*/
    margin-top      : 240px;
      margin-left      : 170px;
      /*to position the content area to the right of the navigation*/
      margin-right: 1px;/*breathing space for the text.Changed from 130 on FFY*/
    padding: 5px;/*space to separate navigation and content*/
      color: black;/*to insure readability*/
    font-family : Arial, Helvetica, sans-serif;
    width: auto;/*so the box will resize with changes in screen size*/
      border-left: 1px solid;
      border-width      : 11px;
      border-color: rgb(205,252,192);
      
   }
      

.inhaltblank {/*this is the main content area without background image*/
    position      : relative;
      margin-top      : 180px;
      margin-left      : 170px;
                              /*to position the content area to the right of the navigation*/
      margin-right: 1px;      /*breathing space for the text. Changed from 130 on FFY*/
    padding            : 5px;      /*space to separate navigation and content*/
      color            : black;      /*to insure readability*/
    font-family : Arial, Helvetica, sans-serif;
    width            : auto;      /*so the box will resize with changes in screen size*/
    }

.inhaltbelow {/*this is the main content area without background image*/
    position      : relative;
      margin-top      : 180px;
      margin-left      : 170px;
                              /*to position the content area to the right of the navigation*/
      margin-right: 1px;      /*breathing space for the text. Changed from 130 on FFY*/
    padding            : 5px;      /*space to separate navigation and content*/
      color            : black;      /*to insure readability*/
    font-family : Arial, Helvetica, sans-serif;
    width            : auto;      /*so the box will resize with changes in screen size*/
        border-left: 1px solid;
      border-width      : 11px;
      border-color: rgb(205,252,192);
      
   }


.image{/*the rule for images in the Inhalt portion of the page*/
      float: left;
      padding:2px 0px 2px 1px ;
}


.imageright{/*the rule for images in the Inhalt portion of the page*/
      float: right;
      padding:2px 5px 2px 0px ;
}


.imagecenter{/*the rule for images on the Services page*/
      display: block;
    margin-left: auto;
    margin-right: auto;
}


.imagehome{/*the rule for images on the Home page*/
      margin-left: 41.3%;
    margin-right: 40%;
}

.servicestitle {/*Used on page Services*/

      font-family: "arial black",serif;
      text-align:center;font-size: 140%;
      color:rgb(129,103,75);
      margin-top: 1%;margin-bottom: 0px;
      line-height: 100%;
      border-width      : 1px;
        border-color      : rgb(165,133,53);/*the same as the Co Name*/
      }
      
      
.loungetitle {/*Used on page Services*/

      font-family: "arial black",serif;
      text-align:center;font-size: 140%;
      color:rgb(108,116,60);
      margin-top: 1%;margin-bottom: 0px;
      line-height: 100%;
      border-width      : 1px;
        border-color      : rgb(165,133,53);/*the same as the Co Name*/
      }
      
      

h1 {/*Used on page titles*/

      font-family: "arial",serif;
      text-align:left;font-size: 190%;
      color:black;
      margin-top: 1%;margin-bottom: 0px;
      background-image:url("background logo.jpg")
      line-height: 100%;
      border-width      : 1px;
        border-color      : rgb(165,133,53);/*the same as the Co Name*/
      }


h2 {/*Used on Home Page for statement of purpose*/

      font-family: arial,serif;
      font-size: 100%;color:black;
      line-height: 100%;
      }

h3 {/*Used on Name and Contact info*/

      font-family: arial,serif; font-size: 135%;font-style:italic;text-align: center;
      color:rgb(79,143,87);line-height: 175%;}

h4 {/*Used on Home Page for Modalities*/

      font-family: arial,serif;text-align: center;
      font-size: 100%;color:black;
      line-height: 100%;
      }

h5 {/*Used on Services page to get the same style as a.sites*/

      font-family: "arial black",serif; font-size: 100%;font-weight : normal;
      text-align: center;      color:rgb(95,70,51);
      background-image:url("Test background.jpg");
      padding:5px;letter-spacing:5px;      
      }
      

h6 {/*Used on Services page for content*/
      font-family: arial,serif; font-size: 100%;text-align: center;
      color:black;}

.plain {/*Used for plain text*/
      font-family: arial,serif; font-size: 100%;
      color:black;}


.articles {/*Used on Articles pages*/

      font-family: arial,serif; font-size: 100%;text-align: justify;
      color:rgb(73,59,43);line-height: 125%;}

.articleheadings {/*Used on Articles pages for emphasized in-text headings*/

      font-family: arial,serif; font-size: 125%;text-align: left;font-weight : bold;
      color:rgb(181,64,11);line-height: 125%;}

.companiesr {/*Used on Project List page*/
      font-family: "arial black",serif; font-size: 100%;font-weight:normal;
      color:rgb(95,70,51);padding:15px;
      text-align: right;      
      }

.projectsr {/*Used on Project List page*/
      font-family: arial,serif; font-size: 100%;font-weight : normal;
      color:black;padding:15px;
      text-align: right;      
      }


.companiesl {/*Used on Project List page*/
      font-family: "arial black",serif; font-size: 100%;font-weight : normal;
      color:rgb(95,70,51);padding:15px;
      text-align: left;      
      }

.projectsl {/*Used on Project List page*/
      font-family: arial,serif; font-size: 100%;font-weight : normal;
      color:black;padding:15px;
      text-align: left;      
      }


.services {/*Used on Services page*/
      font-family: arial,serif; font-size: 100%;font-weight : normal;
      color:black;padding:10px;
      text-align: center;      
      }

.servicesunder {/*Used on Services page*/
      font-family: arial,serif; font-size: 100%;font-weight : bold;
      color:black;padding:10px;
      text-align: center;text-decoration:underline;      
      }
      
.motto {/*Used on Profile, Articles and Common Mistakes pages for the emphasized text*/
      font-family: "arial black",serif; font-size: 125%;font-weight : normal;
      text-align: center;      color:rgb(181,64,11);
      background-color:transparent;
      padding:15px;
      }

.mottojustified {/*Used on Articles page for the intro text*/
      font-family: "arial",serif; font-size: 90%;font-weight : bold;
      text-align: center;      color:white;background-color:rgb(160,142,116);
      
      padding:5px;
      }

.mottolounge {/*Used on Articles page for the intro text*/
      font-family: "arial",serif; font-size: 90%;font-weight : bold;
      text-align: center;      color:white;background-color:rgb(185,196,118);
      
      padding:5px;
      }


      
ul
{
list-style-type: none;
margin-left: 0%;
}

li
{
list-style-type: none;
font-family      : "arial black";
font-size      : 100%;
color       : black;
margin-left: .5%;
line-height:      130%;
}

/*List style for List within a list*/
ul.list2
{
list-style-type: none;
margin-left: 0%;

}

li.list2
{
font-family      : "arial";
font-size      : 100%;
margin-left: 2%;
line-height:      130%;
}




/*List style for Link Sites page list*/
ul.links
{
width: 100%;
list-style-type: none;
margin-left: 0%;
}

li.links/*Text attributes defined as part of a.sites*/
{
float: left;
width: 50%;/*To make them wrap into two columns*/
margin-left: 0%;/*To keep "Back to Top" links centered on links page*/
margin-right: 0%;
line-height            :      110%;
}

/*List style for "Back to Top" links*/
ul.top
{
display            : inline;
list-style-type: none;
margin-left: 0%;
margin-right: 0%;
}

li.top/*Text attributes defined as part of a.title*/
{
width: auto;
margin-left: 0%;
margin-right: 0%;
line-height            :      110%;
}


vr.first {/*vertical line #1*/
  border:0;
  border-top: 1px solid;
  border-color      : rgb(214,129,36);
  height: 0;
  background: #E19832;
}

hr.first {/*horizontal line #1*/
  border:0;
  border-top: 1px solid;
  border-color      : rgb(214,129,36);
  height: 0;
  background: #E19832;
}

hr.second {/*horizontal line style #2*/
  border:0;
  border-top: 1.5px solid;
  border-color      : rgb(214,129,36);
  height: 0;
  background: #E19832;
}

hr.third {/*horizontal line style #3*/
  border:0;
  border-top: 2px solid;
  border-color      : rgb(214,129,36);
  height: 0;
  background: #E19832;
}


hr.fourth {/*horizontal line style #\4 - color green*/
  border:0;
  border-top: 6px solid;
  border-color      : rgb(153,153,102);
  height: 0;
  background: #E19832;
}


hr.gold {/*horizontal line style #\5*/
  border:0;
  border-top: 6px solid;
  border-color      : rgb(242,212,34);
  height: 0;
  background: #E19832;
}

hr.green {/*horizontal line style #6*/
  border:0;
  border-top: 6px solid;
  border-color      : rgb(236,235,213);
  height: 0;
  background: #E19832;
}


hr.taupe {/*horizontal line style #\7*/
  border:0;
  border-top: 1px solid;
  border-color      : rgb(165,133,53);
  height: 0;
  background: #E19832;
}

hr.red {/*horizontal line style #\8*/
  border:0;
  border-top: 4px solid;
  border-color      : rgb(181,64,11);
  height: 0;
  background: #E19832;
}


/*hyperlinks: Navigation*/


a       {display            : block;
      width                  : 130px;
      text-decoration      : none}
a       {font-family      : arial,serif;
      font-weight            :bold;
      text-align            :center;
      font-size            : 70%;
      color                  :black;
      border-top-style      : none;
      border-width            : .03cm;
      border-bottom-style      : ridge;
      border-width            : .03cm;
}

a:visited{color:rgb(205,252,192);}
      
a:hover{color:rgb(79,143,87);background-color:rgb(207,245,231)}
a:active{text-decoration: underline;background-color:rgb(211,201,181)}


/*hyperlinks: Articles*/


a.article {display      : block;
      width                  : auto;
      text-decoration      : none}
a.article       {font-family      : arial,serif;
      font-weight            :bold;
      text-align            :left;
      font-size            : 90%;
      color                  :rgb(95,70,51);
      margin-left            :1%;
      padding                  :1%;
      border-top-style      : none;
      border-width            : .03cm;
      border-bottom-style      : ridge;
      border-width            : .03cm;
}

a.article:visited{color:rgb(172,89,38);}
      
a.article:hover{color:rgb(104,83,60);background-color:rgb(246,245,230)}
a.article:active{text-decoration: underline;background-color:rgb(211,201,181)}

/*hyperlinks: Articles below the current one - smaller*/
a.articlesmall {display      : block;
      width                  : auto;
      text-decoration      : none}
a.articlesmall       {font-family      : arial,serif;
      font-weight            :normal;
      text-align            :left;
      font-size            : 90%;
      color                  :rgb(95,70,51);
      margin-left            :1%;
      padding                  :.1%;
      border-top-style      : none;
      border-width            : .03cm;
      border-bottom-style      : ridge;
      border-width            : .03cm;
}

a.articlesmall:visited{color:rgb(172,89,38);}
      
a.articlesmall:hover{color:rgb(104,83,60);background-color:rgb(246,245,230)}
a.articlesmall:active{text-decoration: underline;background-color:rgb(211,201,181)}

/*hyperlinks: Link Sites page - Title anchor*/
a.title       {display            : block;
      width                  : 130px;
      text-decoration      : none}
a.title {font-family      : arial,serif;
      font-weight            :bold;
      text-align            :center;
      font-size            : 100%;
      color                  :rgb(95,70,51);
      border-top-style      : none;
      border-width            : .0cm;
      border-bottom-style      : ridge;
      border-width            : .0cm;
      background-color:transparent;
}

a.title       :visited{color:rgb(172,89,38);}
      
a.title       :hover{color:rgb(165,133,53);background-color:transparent;}
a.title            :active{text-decoration: none;background-color:transparent;}





/*hyperlinks: Link Sites page - TOP CATEGORY MENU*/
a.sites       {display            : inline;
                  width                  : 100%;
                  text-decoration      : none}
a.sites       {font-family      : "arial black",serif;
                  font-weight            :normal;
                  text-align            :left;
                  font-size            : 15px;
                  color                  :rgb(95,70,51);
                  background-color:transparent;
                  border-style      : solid solid solid solid;
                  border-width      : 0px;
                  border-color      : rgb(165,133,53);
                  padding                  :.1px
                  
                  }

a.sites:visited      {color:rgb(172,89,38);}
      
a.sites:hover      {color:rgb(104,83,60);text-decoration : underline;
                        background-color:rgb(233,232,208);}
a.sites:active      {text-decoration: underline;}


/*hyperlinks: Link Sites page - Category titles. Uses H4 text style.*/
a.sites1       {display            : block;
                  width                  : Auto;
                  margin-right      : 0%;      
                  text-decoration      :      none}
a.sites1       {text-align            :center;
                  font-size            : 100%;
                  color                  :black;
                  letter-spacing      : 5px;      
                  padding                  : 8px;
                  background-color:transparent;
                  border-style      : solid solid solid solid;
                  border-width      : 0px;
                  border-color      : #000 #000 #000 #000;
                  }


/*hyperlinks: These do not apply - they are anchors:*/
a.sites1:visited{      color:black}
      
a.sites1:hover      {color:black;background-color:transparent;}
a.sites1:active      {text-decoration: none;}



/*hyperlinks: Link Sites page - Site links*/
a.sites2       {display            : inline;
                  width                  : auto;
                  text-decoration      : underline;}
a.sites2       {font-family      : "arial black",serif;
                  font-weight            :normal;
                  text-align            :left;
                  font-size            : 85%;
                  line-height            : 1.4;
                  color                  : rgb(95,70,51);
                  background-color:transparent;
                  border-style      : solid solid solid solid;
                  border-width      : 0px;
                  border-color      : #aaa #000 #000 #aaa;
                  padding-right      :  5px;
                  }

a.sites2:visited      {color:rgb(172,89,38);}
      
a.sites2:hover      {color:rgb(104,83,60);background-color:rgb(233,232,208)}
a.sites2:active      {text-decoration: underline;}



/*hyperlinks: Link Sites page - middle of sentences*/
a.sites3       {display            : inline;
                  width                  : 5px;
                  text-decoration      : none}
a.sites3       {font-family      : arial,serif;
                  font-style            :italic;
                  font-weight            :normal;
                  text-align            :left;
                  font-size            : 100%;
                  color                  :rgb(165,133,53);
                  background-color:transparent;
                  border-style      : solid solid solid solid;
                  border-width      : 0px;
                  text-decoration      : underline;
                  }

a.sites3:visited      {color:rgb(172,89,38)}
      
a.sites3:hover      {color:rgb(104,83,60);background-color:rgb(233,232,208)}
a.sites3:active      {text-decoration: underline;}


/*hyperlinks: Every page - e-mail link*/
a.mail            {display            : inline;
                  width                  : auto;
                  margin-right      : 0%;      
                  text-decoration      :      none}
a.mail             {text-align            :center;
                  color                  :rgb(47,47,141);
                  padding                  : 15px;
                  
                  
                  }


/*hyperlinks: These do not apply - this is an e-mail link*/
a.mail:visited{      color:black}
a.mail:hover      {color:rgb(79,143,87);background-color:transparent;text-decoration: underline;}
a.mail:active      {text-decoration: none;}




/*hyperlinks: Business Lounge articles - e-mail link*/
a.maillounge            {display            : inline;
                              width                  : auto;
                              margin-right      : 0%;      
                              font-size            : 100%;
                              text-decoration      :      none}
a.maillounge             {text-align            :left;
                              color                  :rgb(95,70,51);
                              padding                  : 2px;
                              background-color:transparent;;
                              border-style      : none;
                              border-width      : 0.2px;
                              border-color      : rgb(95,70,51);
                              }


/*hyperlinks: These do not apply - this is an e-mail link*/
a.maillounge:visited{      color:black}
      
a.maillounge:hover      {color:black;background-color:transparent;text-decoration: underline;}
a.maillounge:active      {text-decoration: none;}

/*example:*/



0
Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

 
SheharyaarSaahilCommented:
* <div class=headertitle>

.headertitle {/*Vibrant Bodies Center, positioned absolutely*/
      position      : absolute;
      width            : 100%;
      top                  : 0px;
      left            : 0px;
      right            : 0px;
      font-family      : "arial black",serif;
      font-size      : 70px;
      font-style      : italic;
      text-align      :center;      
      color            : rgb(47,47,141);
      background-repeat:no-repeat;
      background-image:url("logo3.jpg");
      padding            : 10px 20px 70px 10px;
      }

remove 100% width, and give a fixed px number


** <div class="phototext">

.phototext {/*Header Tagline, positioned absolutely*/
      position            : absolute;
      width                  : 100%;
      top                        : 598px;
      left                  : 428px;
      font-size            : 10px;
      text-align            :justify;
      }

remove 100% width, and give a fixed px number
0
 
LucynkaAuthor Commented:
It still scrolls, just as much...
0
 
SheharyaarSaahilCommented:
doesn't happen with me after setting the width according to the size of the contents;
checked with IE7 and Firefox
0
 
suddenhitCommented:
try setting width to 800 it would read at all monitors and have a nice look
0
 
LucynkaAuthor Commented:
Here is what I have now and it scrolls, and the logo doesn't fill the top of the page in Firefox with 1280/1024 res:

/* This is a CSS comment
Do NOT leave spaces between the property value and the units!
If you use "margin-left: 20 px" instead of "margin-left: 20px"
it will only work properly in IE6 but it will not work in Mozilla/Firefox or Netscape.
*/



/* This is a CSS comment
      What we want to do here is create a fixed width center column in CSS
      whose side columns fill in with white space in larger resolutions.
      This particular example will fit all resolutions down to 800 x 600.

      body { text-align: center; margin: 5em 0 0 0; vertical-align: middle; }
      #content { width: 760px; text-align: left; margin: 0 auto; }
      
      How it Works:       In the content div, the left and right margins are set
      to auto - which means they will automatically expand to
      the browser's width down to a width of 760px.
      The 760px is set as our fixed width to prevent
      horizontal scrollbars on browsers with resolutions down to 800 x 600.
*/

*{margin:0;padding:0}/* This will zero out all margins and paddings for all elements
 and give you a good starting point for all browsers,
 as different browsers have different defaults.*/
 
/* learn how to use this to prevent line breaks:

For similar functionality use a <span class="nobreak"> or similar with CSS:

span.nobreak      {
      white-space: nowrap;
      }

I can't vouch for browser compatibility, so you might want to check that out
before you use the technique.
*/


.pagecontainer{
      width:95%;
      margin: 10px auto;
}



.headertitle {/*Vibrant Bodies Center, positioned absolutely*/
      position      : absolute;
    width            : 800px;
      top                  : 0px;
    left            : 0px;
      right            : 0px;
      font-family      : "arial black",serif;
      font-size      : 70px;
      font-style      : italic;
      text-align      :center;      
      color            : rgb(47,47,141);
      background-repeat:no-repeat;
      background-image:url("logo3.jpg");
      padding            : 10px 20px 70px 10px;
      }

.headertagline {/*Header Tagline, positioned absolutely*/
      position            : relative;
    top                        : 185px;
      
   
      }

.photo {/*Header Tagline, positioned absolutely*/
      position            : absolute;
    top                        : 320px;
    left                  : 650px;
      }
      
.phototext {/*Header Tagline, positioned absolutely*/
      position            : absolute;
    width                  : 800px;
      top                        : 600px;
    left                  : 650px;
      font-size            : 10px;
      text-align            :justify;
      }
      
      
      
      
.mailto {/*this is the e-mail link*/
      position      : absolute;
      top                  : 600px;
    left            : 10px;
    width            : auto;
    height            : auto;
    font-family : Arial, Helvetica, sans-serif;
      font-size      : 24px;
      color            : rgb(47,47,141);
    line-height : 160%;
      
      background-image:url("logo3.jpg")
}

.jogger1 {/*this is the jogger picture on Home page*/
      position      : absolute;
      top                  : 700px;
    left            : 0px;
    width            : auto;
    height            : auto;
    font-family : Arial, Helvetica, sans-serif;
      font-size      : 24px;
      color            : rgb(47,47,141);
    line-height : 160%;
      }
      
.mailtofree1 {/*this is the e-mail link for free QB Simple Start copy*/
      display            : block;
    margin-left      : auto;
    margin-right: auto;
      width            : auto;
    height            : auto;
    font-family : Arial, Helvetica, sans-serif;
      font-size      : 17px;
    line-height : 160%;
}



.QB {/*QB Pro Advisor logo*/
      position      : absolute;
    top                  : 80px;
    right            : 20%;
   
      width            : auto;
    height            : auto;
    font-family : Arial, Helvetica, sans-serif;
}







.body {
      background-color : #FFFFFF;
      font-family : arial,sans-serif;
      color : rgb(black);
      margin: 0px;
      }

.navigation {/*The navigation on the left side, positioned absolutely*/
       position      : absolute;
    top                  : 252px;
    left            : 5px;
    width            : 5px;
    height            : auto;
    margin            : 0px;
      padding            : 1px;
      font-family : Arial, Helvetica, sans-serif;
      font-size      : 17px;
    line-height : 160%;/*line-height set to 160% in order to*/
    }                  /*have the navigation elements better separated*/


.pagetitle {/*Page Title, positioned absolutely*/
      position      : absolute;
    top                  : 190px;
    left            : 180px;
      right            : 5px;      
      width            : 35px;
    height            : auto;
      }

.inhalt {/*this is the main content area*/
    margin-top      : 240px;
      margin-left      : 170px;
      /*to position the content area to the right of the navigation*/
      margin-right: 1px;/*breathing space for the text.Changed from 130 on FFY*/
    padding: 5px;/*space to separate navigation and content*/
      color: black;/*to insure readability*/
    font-family : Arial, Helvetica, sans-serif;
    width: auto;/*so the box will resize with changes in screen size*/
      border-left: 1px solid;
      border-width      : 11px;
      border-color: rgb(205,252,192);
      
   }
      

.inhaltblank {/*this is the main content area without background image*/
    position      : relative;
      margin-top      : 180px;
      margin-left      : 170px;
                              /*to position the content area to the right of the navigation*/
      margin-right: 1px;      /*breathing space for the text. Changed from 130 on FFY*/
    padding            : 5px;      /*space to separate navigation and content*/
      color            : black;      /*to insure readability*/
    font-family : Arial, Helvetica, sans-serif;
    width            : auto;      /*so the box will resize with changes in screen size*/
    }

.inhaltbelow {/*this is the main content area without background image*/
    position      : relative;
      margin-top      : 180px;
      margin-left      : 170px;
                              /*to position the content area to the right of the navigation*/
      margin-right: 1px;      /*breathing space for the text. Changed from 130 on FFY*/
    padding            : 5px;      /*space to separate navigation and content*/
      color            : black;      /*to insure readability*/
    font-family : Arial, Helvetica, sans-serif;
    width            : auto;      /*so the box will resize with changes in screen size*/
        border-left: 1px solid;
      border-width      : 11px;
      border-color: rgb(205,252,192);
      
   }


.image{/*the rule for images in the Inhalt portion of the page*/
      float: left;
      padding:2px 0px 2px 1px ;
}


.imageright{/*the rule for images in the Inhalt portion of the page*/
      float: right;
      padding:2px 5px 2px 0px ;
}


.imagecenter{/*the rule for images on the Services page*/
      display: block;
    margin-left: auto;
    margin-right: auto;
}


.imagehome{/*the rule for images on the Home page*/
      margin-left: 41.3%;
    margin-right: 40%;
}

.servicestitle {/*Used on page Services*/

      font-family: "arial black",serif;
      text-align:center;font-size: 140%;
      color:rgb(129,103,75);
      margin-top: 1%;margin-bottom: 0px;
      line-height: 100%;
      border-width      : 1px;
        border-color      : rgb(165,133,53);/*the same as the Co Name*/
      }
      
      
.loungetitle {/*Used on page Services*/

      font-family: "arial black",serif;
      text-align:center;font-size: 140%;
      color:rgb(108,116,60);
      margin-top: 1%;margin-bottom: 0px;
      line-height: 100%;
      border-width      : 1px;
        border-color      : rgb(165,133,53);/*the same as the Co Name*/
      }
      
      

h1 {/*Used on page titles*/

      font-family: "arial",serif;
      text-align:left;font-size: 190%;
      color:black;
      margin-top: 1%;margin-bottom: 0px;
      background-image:url("background logo.jpg")
      line-height: 100%;
      border-width      : 1px;
        border-color      : rgb(165,133,53);/*the same as the Co Name*/
      }


h2 {/*Used on Home Page for statement of purpose*/

      font-family: arial,serif;
      font-size: 100%;color:black;
      line-height: 100%;
      }

h3 {/*Used on Name and Contact info*/

      font-family: arial,serif; font-size: 135%;font-style:italic;text-align: center;
      color:rgb(79,143,87);line-height: 175%;}

h4 {/*Used on Home Page for Modalities*/

      font-family: arial,serif;text-align: center;
      font-size: 100%;color:black;
      line-height: 100%;
      }

h5 {/*Used on Services page to get the same style as a.sites*/

      font-family: "arial black",serif; font-size: 100%;font-weight : normal;
      text-align: center;      color:rgb(95,70,51);
      background-image:url("Test background.jpg");
      padding:5px;letter-spacing:5px;      
      }
      

h6 {/*Used on Services page for content*/
      font-family: arial,serif; font-size: 100%;text-align: center;
      color:black;}

.plain {/*Used for plain text*/
      font-family: arial,serif; font-size: 100%;
      color:black;}


.articles {/*Used on Articles pages*/

      font-family: arial,serif; font-size: 100%;text-align: justify;
      color:rgb(73,59,43);line-height: 125%;}

.articleheadings {/*Used on Articles pages for emphasized in-text headings*/

      font-family: arial,serif; font-size: 125%;text-align: left;font-weight : bold;
      color:rgb(181,64,11);line-height: 125%;}

.companiesr {/*Used on Project List page*/
      font-family: "arial black",serif; font-size: 100%;font-weight:normal;
      color:rgb(95,70,51);padding:15px;
      text-align: right;      
      }

.projectsr {/*Used on Project List page*/
      font-family: arial,serif; font-size: 100%;font-weight : normal;
      color:black;padding:15px;
      text-align: right;      
      }


.companiesl {/*Used on Project List page*/
      font-family: "arial black",serif; font-size: 100%;font-weight : normal;
      color:rgb(95,70,51);padding:15px;
      text-align: left;      
      }

.projectsl {/*Used on Project List page*/
      font-family: arial,serif; font-size: 100%;font-weight : normal;
      color:black;padding:15px;
      text-align: left;      
      }


.services {/*Used on Services page*/
      font-family: arial,serif; font-size: 100%;font-weight : normal;
      color:black;padding:10px;
      text-align: center;      
      }

.servicesunder {/*Used on Services page*/
      font-family: arial,serif; font-size: 100%;font-weight : bold;
      color:black;padding:10px;
      text-align: center;text-decoration:underline;      
      }
      
.motto {/*Used on Profile, Articles and Common Mistakes pages for the emphasized text*/
      font-family: "arial black",serif; font-size: 125%;font-weight : normal;
      text-align: center;      color:rgb(181,64,11);
      background-color:transparent;
      padding:15px;
      }

.mottojustified {/*Used on Articles page for the intro text*/
      font-family: "arial",serif; font-size: 90%;font-weight : bold;
      text-align: center;      color:white;background-color:rgb(160,142,116);
      
      padding:5px;
      }

.mottolounge {/*Used on Articles page for the intro text*/
      font-family: "arial",serif; font-size: 90%;font-weight : bold;
      text-align: center;      color:white;background-color:rgb(185,196,118);
      
      padding:5px;
      }


      
ul
{
list-style-type: none;
margin-left: 0%;
}

li
{
list-style-type: none;
font-family      : "arial black";
font-size      : 100%;
color       : black;
margin-left: .5%;
line-height:      130%;
}

/*List style for List within a list*/
ul.list2
{
list-style-type: none;
margin-left: 0%;

}

li.list2
{
font-family      : "arial";
font-size      : 100%;
margin-left: 2%;
line-height:      130%;
}




/*List style for Link Sites page list*/
ul.links
{
width: 100%;
list-style-type: none;
margin-left: 0%;
}

li.links/*Text attributes defined as part of a.sites*/
{
float: left;
width: 50%;/*To make them wrap into two columns*/
margin-left: 0%;/*To keep "Back to Top" links centered on links page*/
margin-right: 0%;
line-height            :      110%;
}

/*List style for "Back to Top" links*/
ul.top
{
display            : inline;
list-style-type: none;
margin-left: 0%;
margin-right: 0%;
}

li.top/*Text attributes defined as part of a.title*/
{
width: auto;
margin-left: 0%;
margin-right: 0%;
line-height            :      110%;
}


vr.first {/*vertical line #1*/
  border:0;
  border-top: 1px solid;
  border-color      : rgb(214,129,36);
  height: 0;
  background: #E19832;
}

hr.first {/*horizontal line #1*/
  border:0;
  border-top: 1px solid;
  border-color      : rgb(214,129,36);
  height: 0;
  background: #E19832;
}

hr.second {/*horizontal line style #2*/
  border:0;
  border-top: 1.5px solid;
  border-color      : rgb(214,129,36);
  height: 0;
  background: #E19832;
}

hr.third {/*horizontal line style #3*/
  border:0;
  border-top: 2px solid;
  border-color      : rgb(214,129,36);
  height: 0;
  background: #E19832;
}


hr.fourth {/*horizontal line style #\4 - color green*/
  border:0;
  border-top: 6px solid;
  border-color      : rgb(153,153,102);
  height: 0;
  background: #E19832;
}


hr.gold {/*horizontal line style #\5*/
  border:0;
  border-top: 6px solid;
  border-color      : rgb(242,212,34);
  height: 0;
  background: #E19832;
}

hr.green {/*horizontal line style #6*/
  border:0;
  border-top: 6px solid;
  border-color      : rgb(236,235,213);
  height: 0;
  background: #E19832;
}


hr.taupe {/*horizontal line style #\7*/
  border:0;
  border-top: 1px solid;
  border-color      : rgb(165,133,53);
  height: 0;
  background: #E19832;
}

hr.red {/*horizontal line style #\8*/
  border:0;
  border-top: 4px solid;
  border-color      : rgb(181,64,11);
  height: 0;
  background: #E19832;
}


/*hyperlinks: Navigation*/


a       {display            : block;
      width                  : 130px;
      text-decoration      : none}
a       {font-family      : arial,serif;
      font-weight            :bold;
      text-align            :center;
      font-size            : 70%;
      color                  :black;
      border-top-style      : none;
      border-width            : .03cm;
      border-bottom-style      : ridge;
      border-width            : .03cm;
}

a:visited{color:rgb(205,252,192);}
      
a:hover{color:rgb(79,143,87);background-color:rgb(207,245,231)}
a:active{text-decoration: underline;background-color:rgb(211,201,181)}


/*hyperlinks: Articles*/


a.article {display      : block;
      width                  : auto;
      text-decoration      : none}
a.article       {font-family      : arial,serif;
      font-weight            :bold;
      text-align            :left;
      font-size            : 90%;
      color                  :rgb(95,70,51);
      margin-left            :1%;
      padding                  :1%;
      border-top-style      : none;
      border-width            : .03cm;
      border-bottom-style      : ridge;
      border-width            : .03cm;
}

a.article:visited{color:rgb(172,89,38);}
      
a.article:hover{color:rgb(104,83,60);background-color:rgb(246,245,230)}
a.article:active{text-decoration: underline;background-color:rgb(211,201,181)}

/*hyperlinks: Articles below the current one - smaller*/
a.articlesmall {display      : block;
      width                  : auto;
      text-decoration      : none}
a.articlesmall       {font-family      : arial,serif;
      font-weight            :normal;
      text-align            :left;
      font-size            : 90%;
      color                  :rgb(95,70,51);
      margin-left            :1%;
      padding                  :.1%;
      border-top-style      : none;
      border-width            : .03cm;
      border-bottom-style      : ridge;
      border-width            : .03cm;
}

a.articlesmall:visited{color:rgb(172,89,38);}
      
a.articlesmall:hover{color:rgb(104,83,60);background-color:rgb(246,245,230)}
a.articlesmall:active{text-decoration: underline;background-color:rgb(211,201,181)}

/*hyperlinks: Link Sites page - Title anchor*/
a.title       {display            : block;
      width                  : 130px;
      text-decoration      : none}
a.title {font-family      : arial,serif;
      font-weight            :bold;
      text-align            :center;
      font-size            : 100%;
      color                  :rgb(95,70,51);
      border-top-style      : none;
      border-width            : .0cm;
      border-bottom-style      : ridge;
      border-width            : .0cm;
      background-color:transparent;
}

a.title       :visited{color:rgb(172,89,38);}
      
a.title       :hover{color:rgb(165,133,53);background-color:transparent;}
a.title            :active{text-decoration: none;background-color:transparent;}





/*hyperlinks: Link Sites page - TOP CATEGORY MENU*/
a.sites       {display            : inline;
                  width                  : 100%;
                  text-decoration      : none}
a.sites       {font-family      : "arial black",serif;
                  font-weight            :normal;
                  text-align            :left;
                  font-size            : 15px;
                  color                  :rgb(95,70,51);
                  background-color:transparent;
                  border-style      : solid solid solid solid;
                  border-width      : 0px;
                  border-color      : rgb(165,133,53);
                  padding                  :.1px
                  
                  }

a.sites:visited      {color:rgb(172,89,38);}
      
a.sites:hover      {color:rgb(104,83,60);text-decoration : underline;
                        background-color:rgb(233,232,208);}
a.sites:active      {text-decoration: underline;}


/*hyperlinks: Link Sites page - Category titles. Uses H4 text style.*/
a.sites1       {display            : block;
                  width                  : Auto;
                  margin-right      : 0%;      
                  text-decoration      :      none}
a.sites1       {text-align            :center;
                  font-size            : 100%;
                  color                  :black;
                  letter-spacing      : 5px;      
                  padding                  : 8px;
                  background-color:transparent;
                  border-style      : solid solid solid solid;
                  border-width      : 0px;
                  border-color      : #000 #000 #000 #000;
                  }


/*hyperlinks: These do not apply - they are anchors:*/
a.sites1:visited{      color:black}
      
a.sites1:hover      {color:black;background-color:transparent;}
a.sites1:active      {text-decoration: none;}



/*hyperlinks: Link Sites page - Site links*/
a.sites2       {display            : inline;
                  width                  : auto;
                  text-decoration      : underline;}
a.sites2       {font-family      : "arial black",serif;
                  font-weight            :normal;
                  text-align            :left;
                  font-size            : 85%;
                  line-height            : 1.4;
                  color                  : rgb(95,70,51);
                  background-color:transparent;
                  border-style      : solid solid solid solid;
                  border-width      : 0px;
                  border-color      : #aaa #000 #000 #aaa;
                  padding-right      :  5px;
                  }

a.sites2:visited      {color:rgb(172,89,38);}
      
a.sites2:hover      {color:rgb(104,83,60);background-color:rgb(233,232,208)}
a.sites2:active      {text-decoration: underline;}



/*hyperlinks: Link Sites page - middle of sentences*/
a.sites3       {display            : inline;
                  width                  : 5px;
                  text-decoration      : none}
a.sites3       {font-family      : arial,serif;
                  font-style            :italic;
                  font-weight            :normal;
                  text-align            :left;
                  font-size            : 100%;
                  color                  :rgb(165,133,53);
                  background-color:transparent;
                  border-style      : solid solid solid solid;
                  border-width      : 0px;
                  text-decoration      : underline;
                  }

a.sites3:visited      {color:rgb(172,89,38)}
      
a.sites3:hover      {color:rgb(104,83,60);background-color:rgb(233,232,208)}
a.sites3:active      {text-decoration: underline;}


/*hyperlinks: Every page - e-mail link*/
a.mail            {display            : inline;
                  width                  : auto;
                  margin-right      : 0%;      
                  text-decoration      :none}
a.mail             {text-align            :center;
                  color                  :rgb(47,47,141);
                  padding                  : 15px;
                  }


/*hyperlinks: These do not apply - this is an e-mail link*/
a.mail:visited{      color:black}
a.mail:hover      {color:rgb(79,143,87);background-color:transparent;text-decoration: underline;}
a.mail:active      {text-decoration: none;}


/*hyperlinks: Every page - e-mail link*/Change this to the contact info links!!!
a.mail            {display            : inline;
                  width                  : auto;
                  margin-right      : 0%;      
                  text-decoration      :none}
a.mail             {text-align            :center;
                  color                  :rgb(47,47,141);
                  padding                  : 15px;
                  }


/*hyperlinks: These do not apply - this is an e-mail link*/
a.mail:visited{      color:black}
a.mail:hover      {color:rgb(79,143,87);background-color:transparent;text-decoration: underline;}
a.mail:active      {text-decoration: none;}




/*hyperlinks: Business Lounge articles - e-mail link*/
a.maillounge            {display            : inline;
                              width                  : auto;
                              margin-right      : 0%;      
                              font-size            : 100%;
                              text-decoration      :      none}
a.maillounge             {text-align            :left;
                              color                  :rgb(95,70,51);
                              padding                  : 2px;
                              background-color:transparent;;
                              border-style      : none;
                              border-width      : 0.2px;
                              border-color      : rgb(95,70,51);
                              }


/*hyperlinks: These do not apply - this is an e-mail link*/
a.maillounge:visited{      color:black}
      
a.maillounge:hover      {color:black;background-color:transparent;text-decoration: underline;}
a.maillounge:active      {text-decoration: none;}

/*example:*/



0
 
suddenhitCommented:
try to remove the line wight 160% as you already have 800 and then take a 160% of it
0
 
LucynkaAuthor Commented:
That's line height
0
 
suddenhitCommented:
do you have it live so that i can see visually where is the problem?? or send me with the html page that you use it with
0
 
SheharyaarSaahilCommented:
when you removed the 100% width from the two css i mentioned above, what did you put instead of 100%?
i removed the wdith part totally and checked with IE7 and firefox, its still working fine with mere here.
0
 
LucynkaAuthor Commented:
>>>what did you put instead of 100%?
800 px
0
 
SheharyaarSaahilCommented:
remove the width part from both those css and then check the results
0
 
LucynkaAuthor Commented:
Yeah! It worked! Thanks.
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 6
  • 5
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now