browser issues

[harlemrisin]

hello,

When I view the site in IE 7, Firefox and Opera (all latest versions) the site looks fine. However, when others view the site it looks distorted.

How does it look to you? If you have any suggestions on how to fix these problems, would greatly be appriciated.

the link: www.ontherisedesigns.com/home2.html

Please browse through the site to see the other issues.

I have included the css coding.

body{
    font-family: Arial,sans-serif;
    color: #333333;
    line-height: 1.166;    
    margin: 0px;
    padding: 0px;
    background:#0099FF;
}

/******* hyperlink and anchor tag styles *******/

a:link{
    color: #005FA9;
    text-decoration: none;
    font-family: Arial,sans-serif;
}

a:visited{
    color: #005FA9;
    text-decoration: none;
    font-family: Arial,sans-serif;

}

a:hover{
    text-decoration: underline;
    color: #005fa9;
    font-family: Arial,sans-serif;

}

/*** header tag styles ***/

h1{
 font: bold 120% Arial,sans-serif;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

h2{
 font: bold 114% Arial,sans-serif;
 color: #006699;
 margin: 0px;
 padding: 0px;
}

h3{
 font: bold 100% Arial,sans-serif;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

h4{
 font: 100% Arial,sans-serif;
 color: #333333;
 margin: 0px;
 padding: 0px;
}

h5{
 font: 100% Arial,sans-serif;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}


/*************** list tag styles ***************/

ul{
 list-style-type: square;
}

ul ul{
 list-style-type: disc;
}

ul ul ul{
 list-style-type: none;
}

/********* form and related tag styles *********/

form {
    margin: 0;
    padding: 0;
}

label{
 font: bold 1em Arial,sans-serif;
 color: #334d55;
}
                
input{
font-family: Arial,sans-serif;
}

/***********************************************/
/* Layout Divs                                 */
/***********************************************/
#pagecell1{
    position:absolute;
    top: 185px;
    left: 2%;
    right: 2%;
    width:auto;
    background-color: #ffffff;
}

#tl {
    position:absolute;
    top: -1px;
    left: -1px;
    margin: 0px;
    padding: 0px;
    z-index: 100;
}

#tr {
    position:absolute;
    top: -1px;
    right: -1px;
    margin: 0px;
    padding: 0px;
    z-index: 100;
}

#masthead{
    position: absolute;
    top: 0px;
    left: 2%;
    right: 2%;
    width: auto;
    
}

#pageNav{
    float: left;
    width:178px;
    padding: 0px;
    background-color: #F5f7f7;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    font: small Arial,sans-serif;
}

#content{
    padding: 0px 10px 0px 0px;
    margin:0px 0px 0px 178px;
    border-left: 0px solid #ccd2d2;
}


/***********************************************/
/* Component Divs                              */
/***********************************************/
#siteImg{
    margin: 10px 2px;
    padding: 40px 0px 70px 0px;
    background:url(banner.jpg);
    width:auto;    
}


/************** pageName styles ****************/

#pageName{
    padding: 0px 10px 14px 10px;
    margin: 0px;
    border-bottom:1px solid #ccd2d2;
}

#pageName h2{
    font: bold 175% Arial,sans-serif;
    color: #000000;
    margin:0px;
    padding: 0px;
}

#pageName img{
    position: absolute;
    top: 0px;
    right: 6px;
    padding: 0px;
    margin: 0px;
}

/************* globalNav styles ****************/

#globalNav{
    position: relative;
    width: auto;
    min-width: 800px;
    height: 32px;
    color: #cccccc;
    padding: 0px;
    margin: 0px;
    background-image: url(glbnav_background.gif);
}

#globalNav img{
    margin-bottom: -4px;
 
}

#gnl {
    position: absolute;
    top: 0px;
    left:0px;
}

#gnr {
    position: absolute;
    top: 0px;
    right:0px;
}

#globalLink{
    position: absolute;
    top: 6px;
    height: 22px;
    min-width: 640px;
    padding: 0px;
    margin: 0px;
    left: 110px;
    z-index: 100;
}


a.glink, a.glink:visited{
      font-size: small;
      color: #000066;
    font-weight: bold;
    margin: 0px;
    padding: 2px 5px 4px 5px;
    border-right: 1px solid #8FB8BC;
}

a.glink:hover{
      background-image: url(glblnav_selected.gif);
    text-decoration: none;
}

.skipLinks {display: none;}

/*** subglobalNav styles ***/

.subglobalNav{
    position: absolute;
    top: 85px;
    left: 0px;
    min-width: 640px;
    height: 20px;
    padding: 75px 0px 0px 240px;
    visibility: hidden;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;

}

.subglobalNav a:link, .subglobalNav a:visited {
    font-size: 80%;
    color: #ffffff;
    font-weight:bold;
}

.subglobalNav a:hover{
    color: #000066;
    font-weight:bold;
}

.subglobalNav2 a:link, .subglobalNav2 a:visited {
    font-size: 80%;
    color: #ffffff;
    font-weight:bold;
}

.subglobalNav2 a:hover{
    color: #000066;
    font-weight:bold;
}

.subglobalNav2{
    position: absolute;
    top: 85px;
    left: 0px;
    min-width: 640px;
    height: 20px;
    padding: 75px 0px 0px 170px;
    visibility: hidden;
    color: #ffffff;
}

.subglobalNav4 a:link, .subglobalNav4 a:visited {
    font-size: 80%;
    color: #ffffff;
    font-weight:bold;
}

.subglobalNav4 a:hover{
    color: #000066;
    font-weight:bold;
}

.subglobalNav4{
    position: absolute;
    top: 85px;
    left: 0px;
    min-width: 640px;
    height: 20px;
    padding: 75px 0px 0px 315px;
    visibility: hidden;
    color: #ffffff;
}

.subglobalNav5 a:link, .subglobalNav5 a:visited {
    font-size: 80%;
    color: #ffffff;
    font-weight:bold;
}

.subglobalNav5 a:hover{
    color: #000066;
    font-weight:bold;
}

.subglobalNav5{
    position: absolute;
    top: 85px;
    left: 0px;
    min-width: 640px;
    height: 20px;
    padding: 75px 0px 0px 390px;
    visibility: hidden;
    color: #ffffff;
}

.subglobalNav6 a:link, .subglobalNav6 a:visited {
    font-size: 80%;
    color: #ffffff;
    font-weight:bold;
    font-family: Arial,sans-serif;

}

.subglobalNav6 a:hover{
    color: #000066;
    font-weight:bold;
    font-family: Arial,sans-serif;

}

.subglobalNav6{
    position: absolute;
    top: 85px;
    left: 0px;
    min-width: 640px;
    height: 20px;
    padding: 75px 0px 0px 490px;
    visibility: hidden;
    color: #ffffff;
}

/************** feature styles *****************/

.feature{
    padding: 5px 100px 0px 40px;
    font-size: 80%;
    min-height: 200px;
    height: 400px;
}
html>body .feature {height: auto;}

.feature h3{
    font: bold 175% Arial,sans-serif;
    color: #000000;
    padding: 30px 0px 10px 0px;
}

.feature img{
    float: right;
    padding: 0px 10px 0px 30px;
}




/************** feature styles *****************/

.feature2{
float:left;
border-right:#CCCCCC;
border-right:solid;
border-right-width:thin;
    padding: 0px 5px 0px 40px;
    font-size: 80%;
    min-height: 200px;
    height: 400px;
}
html>body .feature2 {height: auto;}

.feature2 img{
    float: top;
    padding: 0px 5px 0px 10px;
}

.feature3{
float:left;
border-right:#CCCCCC;
border-right:solid;
border-right-width:thin;

position:relative;
overflow:hidden;

    padding: 0px 5px 0px 5px;
    font-size: 80%;
    min-height: 200px;
    height: 400px;
}
html>body .feature3 {height: auto;}

.feature3 img{
    float: top;
    padding: 0px 5px 0px 10px;
}

.feature4{
float:left;
position:relative;
overflow:hidden;
border-right:#CCCCCC;
border-right:solid;
border-right-width:thin;

    padding: 0px 5px 0px 2px;
    font-size: 80%;
    min-height: 200px;
    height: 400px;
}
html>body .feature4 {height: auto;}

.feature4 img{
    float: top;
    padding: 0px 5px 0px 10px;
}

.feature5{
float:left;
position:relative;
overflow:hidden;
    padding: 0px 5px 0px 25px;
    font-size: 80%;
    min-height: 200px;
    height: 400px;
}
html>body .feature5 {height: auto;}

.feature5 img{
    float: top;
    padding: 0px 5px 0px 10px;
}
.feature7{
float:right;
position:relative;
overflow:hidden;
border-right:#CCCCCC;
border-right:solid;
border-right-width:thin;

    padding: 20px 150px 50px 500px;
    font-size: 80%;
    min-height: 200px;
    height: 400px;
}
html>body .feature7 {height: auto;}

.feature8 img{
    float: top;
    padding: 0px 0px 0px 60px;
}
.feature9{
float:left;
position:relative;
overflow:hidden;
border-right:#CCCCCC;
border-right:solid;
border-right-width:thin;
    padding: 0px 490px 100px 65px;
    font-size: 80%;
    min-height: 200px;
    height: 400px;
}
html>body .feature9 {height: auto;}

.feature9 img{
    float: top;
    padding: 0px 5px 0px 10px;
}

.feature0{
float:left;
position:relative;
overflow:hidden;

    padding: 0px 5px 0px 30px;
    font-size: 80%;
    min-height: 200px;
    height: 400px;
    
}
html>body .feature0 {height: auto;}

.feature0 h3{
    font: bold 175% Arial,sans-serif;
    color: #000000;
    padding: 5px 0px 10px 0px;
}

.feature0 img{
    float: left;
    padding: 0px 5px 0px 5px;
}

/*** story styles ***/

.story {
    padding: 10px 100px 0px 40px;
    font-size: 80%;
}

.story h3{
    font: bold 165% Arial,sans-serif;
    color: #000000;
}

.story p {
    padding: 0px 0px 10px 0px;
}

.story a.capsule{
    font: bold 1em Arial,sans-serif;
    color: #005FA9;
    display:block;
    padding-bottom: 15px;
}

.story a.capsule:hover{
    text-decoration: underline;
}

td.storyLeft{
    padding-right: 12px;
}

.story img{
    float: right;
    padding: 0px 10px 0px 30px;
}

/*** story2 styles ***/

.story2 {
    padding: 10px 100px 0px 40px;
    font-size: 80%;
}

.story2 h3{
    font: bold 125% Arial,sans-serif;
    color: #000000;
}

.story2 p {
    padding: 0px 0px 10px 0px;
}

.story2 a.capsule{
    font: bold 1em Arial,sans-serif;
    color: #005FA9;
    display:block;
    padding-bottom: 15px;
}

.story2 a.capsule:hover{
    text-decoration: underline;
}

td.storyLeft{
    padding-right: 12px;
}

.story2 img{
    float: top;
    padding: 0px 10px 0px 30px;
}

/************** siteInfo styles ****************/

#siteInfo{
    clear: both;
    border-top: 1px solid #cccccc;
    font-size: small;
    color: #cccccc;
    padding: 10px 10px 10px 315px;
    margin-top: 0px;
}

#siteInfo img{
    padding: 4px 4px 4px 0px;
    vertical-align: middle;
} 

[X96 Web Design]

I don't know if this will fix it, but you should fix this: line-height: 1.166; to this: line-height: 1.166em;

And these should be changed: ul ul{ AND ul ul ul{ to this: ul li ul{ AND ul li ul li ul{ because you need an LI in between UL's.

And change background-image: to background:, 'cuz you haven't specified a background-color, and it's easier to type.

That's all for now, don't want to read all the code much further...

// X96 \\

[bluewalrus]

Looks distorted how? on what page? what browsers/OS are the user experiencing it in?

I think it looks how its suppose to but you didn't include a screenshot or anything to compare it with so i'm not sure... It loaded the same in ff, safari opera, and flock for me.

Also you should pick a unit and stick with it. Your using %s, ems and pxs.

[Snookerman]

I don't know if this will fix it, but you should fix this: line-height: 1.166; to this: line-height: 1.166em;

No. The line height is one of the few values that can and should be unitless in order to cascade properly.

If the value is unitless, the child elements will have the same line height, so if the font size of child elements is doubled, the line height will be doubled.

If you add a unit to the value, the child elements will have the same line height as the parent, so if you double the font size for child elements, the line height will not be doubled and will then cause problems.

And these should be changed: ul ul{ AND ul ul ul{ to this: ul li ul{ AND ul li ul li ul{ because you need an LI in between UL's.

No. The selectors don't work like that, you can specify the parent element and the child element you want to target without having to specify the elements in between.

If the user has used this shorter method in other instances, they will not be taken into account because adding more elements will increase the specificity.

And change background-image: to background:, 'cuz you haven't specified a background-color, and it's easier to type.

No. When using the shorhand, all value will be set to the default.

If you for example set the background color to blue for a div, you would expect all elements inside to inherit that if no other background color is specified. By using the shorthand for background, the background color will be set to the default, which is white.

If you intend to only specify the background color, you should use background-color and not the shorthand.

Also you should pick a unit and stick with it. Your using %s, ems and pxs.

No. You cannot create a good page using only one type of unit.

If you use ems you should also use percentages for elements that you want to be resized based on the browser window in order to avoid horizontal scrolling.

You should also, to some extent, use pixels for things that you don't always want to be resized with the text size or window size, borders, shadows and images for instance.

Sorry for the rant guys, but we don't want to confuse people by teaching them the wrong things.

[X96 Web Design]

Wow, I was all wrong!

Thanks Snookerman!

// X96 \\

[harlemrisin]

thanks for the input. i'm still having problems. I decided to take it one page at a time. on this page:

www.ontherisedesigns.com/home2.html

I am trying to get the 2 sections to be aligned next to each other.

I have tried the container div but it does not work.

any suggestions?

thanks again