PDA

View Full Version : Container & Resolution Problem


Kuler
07-24-2011, 01:49 PM
Reply (http://forums.adobe.com/post!reply.jspa?thread=880897)
Currently Being Moderated
Jul 22, 2011 1:59 PM

Container & Resolution Problem (http://forums.adobe.com/message/3815300#3815300)



I've put a small site together for my wife's business but I've come across some problems I'm stuck on.

1. The container doesn't stretch in the index page and testimonials page, but does on the other 7 pages. What have I not done?

The container (when uploaded with a border, drops just below the navigation bar)

2. I saw the site on my works pc today - IE7 & 1024 resolution. The text in the slider and the box below it are out of position.

Any advice on how to solve these two is much appreciated.

Paul

http://www.cumbria-dog-training.com/index.htm (http://www.cumbria-dog-training.com/index.htm)


CSS

/* CSS Document */


body,
html {
margin:0px;
padding:0;
background-image:url(../images/images/bg.jpg);
background-repeat:repeat;
background-attachment: fixed;
line-height:120%;
}

#container
{
width:960px;
position: relative;
margin:-20px auto;
margin-bottom:-55px;
height: auto;
border:2px dotted #3333ff;
}
#image_wrap_behaviour
{
width:910px;
margin:320px auto;
margin-bottom:55px;
text-align:center;
}
#header h1
{
width:960px;
margin: 20px auto;
font-family: Garamond, "Palatino Linotype", Georgia;
font-size:52px;
color:#FFFFFF;
font-weight:700;
text-align:center;
line-height: 70px;
}
#subheader
{
width:790px;
margin:-20px auto;
padding-top:15px;
padding-bottom:10px;
font-family: Garamond, "Palatino Linotype", Georgia;
font-size:16px;
color:#ffffff;
font-weight:400;
text-align:center;
}

#titles
{
width:960px;
margin: 30px auto;
float:left;
}
h1
{
font-family: Garamond, "Palatino Linotype", Georgia;
font-size:24px;
color:#FFFFFF;
text-align:center;
}
h2 {
margin:10px;
font-family: Garamond, "Palatino Linotype", Georgia;
font-size:24px;
color:#ffffff;
font-weight:900;
text-align:center;
}
h3 {
margin:0px;
font-family: Garamond, "Palatino Linotype", Georgia;
float:left;
font-size:12px;
color:#ABDFB4;
}
h4 {
font-family: Garamond, "Palatino Linotype", Georgia;
font-size:16px;
color:#ffffff;
}
h5 {
margin:0px;
font-family: Garamond, "Palatino Linotype", Georgia;
font-size:12px;
color:#FFCC33;
}
p.normal
{
font-family: Garamond, "Palatino Linotype", Georgia;
font-size:16px;
margin-left:0px;
color:#000000;
}
p.bold
{
font-family: Garamond, "Palatino Linotype", Georgia;
font-size:16px;
margin-left:0px;
color:#B70000;
font-weight:400;
}
p.training
{
font-family: Garamond, "Palatino Linotype", Georgia;
font-size:17px;
color:#000000;
font-weight:700;
margin-top:-40px;
margin-left:200px;
}
p.h1
{
font-family: Garamond, "Palatino Linotype", Georgia;
float:left;
font-size:24px;
color:#FFFFFF;
font-weight:900;
padding:5px;
margin-top:40px;
margin-left:0px;
}

ul.homepage
{
list-style-type:circle;
font-family: Garamond, "Palatino Linotype", Georgia;
font-size:12px;
font-color:#ffffff;
}
.ul_puppies
{
list-style-type:circle;
font-family: Garamond, "Palatino Linotype", Georgia;
font-size:16px;
color:#000000;
font-weight:400;
}

/************************************************** ***********
NAVIGATION
************************************************** ************/
#navcontainer
{
width:960px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align:center;
margin: 25px auto;
padding:0px;
text-align:center;
}
#nav
{
text-align:center;
padding: 10px;
margin-top: 1px;
float: left;
}
#navlist
{
width:100%;
text-align: center;
margin-left: auto;
margin-right:auto;
padding: 0px;
text-indent: 0px;
list-style-type: none;
word-spacing:2px;
}
#navlist li
{
padding-left:5px;
padding-right:5px;
margin: 0;
text-indent: 0;
text-align: center;
display: inline;
}
#navlist li a
{
letter-spacing: 2px;
text-decoration: none;
color:#FFCC33;
font-size: 11px;
font-weight:700;
padding: 0 2px;
letter-spacing:2px;
word-spacing:5px;
}
#navlist li a:hover,#navlist a#current
{
color:#FFFFFF;
font-size: 11px;
font-weight:700;
}
#navlist a#current
{
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/************************************************** ***********
CONTENT VERTICAL
************************************************** ************/

#welcome
{
width:520px;
margin: 30px auto;
float:left;
padding-bottom:15px;
}

#homepage_leftcol {
width:520px;
margin-top:20px;
font-family: Garamond, "Palatino Linotype", Georgia;
font-size:17px;
color:#333333;
padding-left:5px;
float:left;
}
#homepage_rightcol
{
float:right;
margin-top:60px;
width:400px;
margin-left:0px;
}
#leftcol {
width:520px;
margin-top:0px;
padding-left:5px;
float:left;
}
#rightcol
{
float:right;
margin-top:0px;
width:400px;
margin-left:0px;
}
p {
font-family: Garamond, "Palatino Linotype", Georgia;
font-size:17px;
color:#333333;
margin-left:0px;
margin-right:5px;
}
p.clear
{clear:both;}

ul.a
{
list-style-type:circle;
font-family: Garamond, "Palatino Linotype", Georgia;
font-size:12px;
}
#logo_wrap
{
width:380px;
margin-top:20px;
float:left;
text-align:center;
}
/************************************************** ***********
CONTENT HORIZONTAL
************************************************** ************/

#tophorizontal
{
width:900px;
margin-top:20px;
float:left;
padding: 5px 5px 5px 5px;
text-align:center;
}
#bottomhorizontal
{
width:900px;
margin-top:30px;
margin-left:10px;
float:left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#ABDFB4;
}
#imagecenter
{
width:950px;
margin-left:5px;
height:auto;
border:1px solid #d2d2d2;
}
#bottom_left
{
width:440px;
float:left;
margin-left:5px;
margin-top:5px;
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#ABDFB4;
background-image:url(../images/grey_square.png);
background-repeat:repeat;
}
#bottom_right
{
width:440px;
float:left;
margin-top:5px;
text-align:center;
font-family: Helvetica,Tahoma,Arial,sans-serif;
font-size:14px;
color:#ABDFB4;
background-image:url(../images/grey_square.png);
background-repeat:repeat;
}
/************************************************** ***********
BEHAVIOUR
************************************************** ************/
#behaviour
{
width:958px;
margin-top:-50px;
float:left;
text-align:left;
}
/************************************************** ***********
TESTIMONIALS
************************************************** ************/
#testimonials_left
{
width: 550px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#ABDFB4;
text-align:left;
margin-left:4px;
margin-top:0px;
float:left;
padding:3px;
}
#testimonials_right
{
width:270px;
float:right;
margin-left:-30px;
margin-top:20px;
padding:5px;
}
#testimonials_right_puppies
{
width:340px;
float:right;
margin-right:10px;
margin-top:20px;
padding:5px;
}
/************************************************** ***********
FOOTER
************************************************** ************/

#footer
{
width:600px;
margin:30px auto ;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#914DB1;
text-align:center;
clear:both;
}


li {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ABDFB4;
font-size: 12px;
line-height: 18px;
text-align: left;
padding: 0;
}
#wrapper
{
width: 960px;
height:auto;
margin:0 auto;
padding-top:10px;
padding-bottom:10px;
font-family: Garamond, "Palatino Linotype", Georgia;
font-size:17px;
color:#333333;
background-image: url(../images/images/OPAQUE_square2.png);
background-repeat:repeat;
}
#lister1
{
width: 220px;
float: left;
text-align: left;
margin-left:50px;
font-family: Garamond, "Palatino Linotype", Georgia;
font-size:17px;
color:#333333;
padding-left:12px;
}
#lister2
{
width: 290px;
float: left;
text-align: left;
color:#333333;
padding-left:12px;
}
#lister3
{
width: 290px;
float: right;
text-align: left;
margin-left: -20px;
color:#333333;
padding-left:12px;
}
#lister4
{
width: 598px;
text-align: left;
margin-left: 292px;
color:#CCCCCC;
padding-top:2px;
margin-top:0px;
}

/************************************************** ******************* ******
CONTACT
************************************************** ******************** ******/
#contactbox
{
width:350px;
border: 1px dotted #FFFFFF;
margin-left:400px;
margin-top: -200px;
font-family: Helvetica,Tahoma,Arial,sans-serif;
font-size:14px;
color:#000000;
padding:5px;
float:left;
}
#contactboxTESTPAGE
{
width:350px;
border: 1px dotted #FFFFFF;
margin-left:400px;
margin-top: -200px;
font-family: Helvetica,Tahoma,Arial,sans-serif;
font-size:14px;
color:#FFFFFF;
padding:5px;
float:left;
}

/************************************ GALLERY *********************************/
/************************************ GALLERY *********************************/

.gallery {
padding:0px;
list-style:none;
margin-left: 0px;
}
.gallery li{
margin:0px 6px 20px 14px;
float: left;
}
.gallery a img {
border : 3px double #CCCC33;
}

/************************************END OF GALLERY *********************************/
/************************************ END OF GALLERY *********************************/
#contactformheader
{
width:400px;
margin:50px auto;
border: 1px solid #000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#CCCCCC;
padding-left:5px;
padding-bottom:10px;
background-image:url(../images/OPAQUE_square.png);
}
#contactform
{
width:400px;
margin:-40px auto;
border:2px dotted #000000;
}

/************************************************** *************LINKS ******************/
/************************************************** *************LINKS ******************/

a:link {
text-decoration: none;
color: #ffffff;
font-weight:700;
font-family: Garamond, "Palatino Linotype", Georgia;
font-size:17px;

}
a:visited {
text-decoration: blink;
color: #ffffff;
}
a:hover {
text-decoration:underline;
color:#0000CC;
font-weight:700;
}
a:active {
text-decoration: none;
color: #FFCC33;
}

/************************************************** *************END OF LINKS******************/
/************************************************** *************END OF LINKS******************/

/************************************************* TRAINING & BOARDING ************************/
/************************************************* TRAINING & BOARDING ************************/
#container_threecol
{width:960px; margin:0 auto;float:left; }
#container_leftCol
{ float:left; width:300px; float:left; padding-left:25px;}
#container_centreCol
{ float:left; width:300px; float:left; }
#container_rightCol
{ float:left; width:320px; float:left; margin-left:-30px;}


#wrapper_twocol
{ width:960px; margin:0 auto; ; font-family: Garamond, "Palatino Linotype", Georgia; font-size:17px; float:left;color:#333333;}
#wrapper_leftColumn
{ float:left; width:250px; font-family: Garamond, "Palatino Linotype", Georgia;font-size:17px;float:left;color:#333333; }
#wrapper_rightColumn
{ float:left; width:710px; float:left;}
.ul_left
{ list-style-type:circle;font-family: Garamond, "Palatino Linotype", Georgia;font-size:19px;color:#000000;font-weight:400;margin-top:10px; margin-left:5px; }
.ul_centre
{ list-style-type:circle;font-family: Garamond, "Palatino Linotype", Georgia;font-size:19px;color:#000000;font-weight:400;margin-top:10px; margin-left:25px; }
.ul_right
{ list-style-type:circle;font-family: Garamond, "Palatino Linotype", Georgia;font-size:19px;color:#000000;font-weight:400;margin-top:10px; margin-left:25px; }
.ul_right_nostyle
{ list-style-type:none;font-family: Garamond, "Palatino Linotype", Georgia;font-size:18px;color:#000000;font-weight:400;margin-top:10px; margin-left:5px;}

/************************************************* END OF TRAINING & BOARDING ************************/
/************************************************* END OF TRAINING & BOARDING ************************/
blockquote.style1 {
font-family: Garamond, "Palatino Linotype", Georgia;
font-size:17px;
color:#000000;
padding-top: 8px; padding-right: 8px; padding-bottom: 8px; padding-left: 0px;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 5px 5px 5px 0;
background-image: url(../images/images/openquote1.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote.style1 span {
display: block;
background-image: url(../images/images/closequote1.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

edbr
07-25-2011, 01:13 AM
struggling to see the issue but i did a validation . perhaps you could look through the warnings

Result: 1 error / 53 warnings

line 9 column 66 - Warning: unescaped & which should be written as &
line 9 column 186 - Warning: unescaped & which should be written as &
line 74 column 3 - Warning: missing <li>
line 77 column 3 - Warning: missing <li>
line 80 column 3 - Warning: missing <li>
line 83 column 3 - Warning: missing <li>
line 120 column 21 - Warning: nested emphasis <strong>
line 144 column 17 - Warning: missing </span> before <div>
line 145 column 59 - Warning: inserting implicit <span>
line 145 column 132 - Warning: inserting implicit <span>
line 150 column 17 - Warning: missing </span> before <div>
line 151 column 58 - Warning: inserting implicit <span>
line 151 column 73 - Warning: inserting implicit <span>
line 156 column 17 - Warning: missing </span> before <div>
line 157 column 58 - Warning: inserting implicit <span>
line 157 column 72 - Warning: inserting implicit <span>
line 162 column 17 - Warning: missing </span> before <div>
line 163 column 58 - Warning: inserting implicit <span>
line 163 column 73 - Warning: inserting implicit <span>
line 168 column 17 - Warning: missing </span> before <div>
line 169 column 57 - Warning: inserting implicit <span>
line 169 column 87 - Warning: inserting implicit <span>
line 175 column 17 - Warning: missing </span> before <div>
line 176 column 60 - Warning: inserting implicit <span>
line 176 column 164 - Warning: inserting implicit <span>
line 181 column 17 - Warning: missing </span> before <div>
line 182 column 58 - Warning: inserting implicit <span>
line 182 column 82 - Warning: inserting implicit <span>
line 187 column 17 - Warning: missing </span> before <div>
line 188 column 58 - Warning: inserting implicit <span>
line 188 column 105 - Warning: inserting implicit <span>
line 193 column 17 - Warning: missing </span> before <div>
line 194 column 58 - Warning: inserting implicit <span>
line 194 column 154 - Warning: inserting implicit <span>
line 199 column 17 - Warning: missing </span> before <div>
line 200 column 58 - Warning: inserting implicit <span>
line 200 column 134 - Warning: inserting implicit <span>
line 203 column 14 - Warning: missing <li>
line 215 column 54 - Warning: unescaped & which should be written as &amp;
line 238 column 82 - Error: <fb:like-box> is not recognized!
line 238 column 82 - Warning: discarding unexpected <fb:like-box>
line 238 column 260 - Warning: discarding unexpected </fb:like-box>
line 238 column 10 - Warning: <script> inserting "type" attribute
line 144 column 17 - Warning: trimming empty <span>
line 150 column 17 - Warning: trimming empty <span>
line 156 column 17 - Warning: trimming empty <span>
line 162 column 17 - Warning: trimming empty <span>
line 168 column 17 - Warning: trimming empty <span>
line 175 column 17 - Warning: trimming empty <span>
line 181 column 17 - Warning: trimming empty <span>
line 187 column 17 - Warning: trimming empty <span>
line 193 column 17 - Warning: trimming empty <span>
line 199 column 17 - Warning: trimming empty <span>
line 231 column 21 - Warning: trimming empty <p>

Kuler
07-25-2011, 03:26 PM
Thanks Edbr

I know about the validation stuff and I'm working my way through it :oops: .

The Testimonials.htm page shows 6 errors and 1 warning, all of which except one are to do with incorrect HTML characters in the code.
However, the container fails to stretch to auto on this page.

Thanks again for any advise.
Paul

Corrosive
07-25-2011, 03:38 PM
If you have floated columns then you need to clear them; http://www.quirksmode.org/css/clearing.html