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!
LVL 1
LucynkaAsked:
Who is Participating?
 
SheharyaarSaahilConnect With a Mentor Commented:
remove the width part from both those css and then check the results
0
 
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
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
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
 
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
 
LucynkaAuthor Commented:
Yeah! It worked! Thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.