18 replies [Last post]
Patrickwc
Patrickwc's picture
Offline
Regular
Westland, MI
Last seen: 12 years 49 weeks ago
Westland, MI
Timezone: GMT-4
Joined: 2006-10-15
Posts: 17
Points: 0

Greetings,

I have turned to this forum for answers before and all who have helped have been awesome with their suggestions and feedback. This issue has me puzzled! I have a site that I am testing for compatibility in all major browsers. Here is the link http://www.personalwebcreation.com. Several of the background images are not rendering in IE7, specifically the header images and div.content image. They appear in FF, Opera as well as the Mac platforms, but not in IE7. I a posting the CSS here as it is in an external style sheet. I am sure that their is something that I am missing, but after staring at the code, I need a second opinion and a fresh perspective. Any assistance would greatly be appreciated. Here is the CSS;

div.indexleft { float:left; margin:0px 20px 40px 0px; padding:0px 0px 0px 35px; text-align:left; width:210px; } div.indexleft p { margin:0pt; padding:0pt; } div.indexleft h1 { margin:0pt; padding:0px 0px 3px; } div.indexmid { float:left; margin:0px 20px 40px 0px; padding:0px; text-align:left; width:220px; } div.indexmid p { margin:0px; padding:0px 0px 20px; } div.indexright { float:left; margin:0px 0px 40px; padding:0pt; position:relative; text-align:left; width:230px; } div.indexright p { margin:0pt; padding:0px 0px 20px; } div.indexright h1 { margin:0px; padding:0px 0px 3px 15px; } ul.alignedlist { margin: 0; padding: 0; list-style: none; } ul.alignedlist li { }

ul.alignedlist li a {
display: block;
padding-left: 15px;
}

ul.alignedlist li a:hover {
background-image: url(images/bullet.gif);
background-repeat: no-repeat ;
background-position: center left;
}
div.alignedlistouter {
color:#333333;
font-family:tahoma,arial,helvetica,sans-serif;
font-size:0.8em;
line-height: 1.5em;
}
a {
text-decoration:none;
}
a:link {
color:#94A73A;
text-decoration:none;
}
a:visited {
color:#A3B341;
text-decoration:none;
}
a:hover {
color:#333333;
text-decoration:none;
}
p {
color:#333333;
font-family:tahoma,arial,helvetica,sans-serif;
font-size:78%;
font-style:normal;
font-weight:normal;
margin:0px;
padding:0px;
}
p.green {
color:#9FB452;
font-size:110%;
margin:0px;
padding:0px;
}
p.news {
margin:0px;
padding:0px;
width:300px;
}
h1 {
color:#333333;
font-family: arial ,helvetica, sans-serif;
font-size:.95em;
font-style:normal;
font-weight:bold;
margin:0px;
padding:0px 0px 3px;
}
h2 {
color:#333333;
font-family:arial,helvetica,sans-serif;
font-size:120%;
font-weight:normal;
margin:0px;
padding:0px;
}
h3 {
color:#333333;
font-family:arial,helvetica,sans-serif;
font-size:120%;
font-style:normal;
font-weight:normal;
margin:0px;
padding:0px;
}
h4 {
color:#333333;
font-family:arial,helvetica,sans-serif;
font-size:140%;
font-style:normal;
font-weight:normal;
letter-spacing:-1px;
margin:0px;
padding:0px 0px 3px;
}
body {
height:100%;
margin:0px;
min-width:760px;
padding:0px;
text-align:center;
}
div.container {
background:url(images/fbbg760.gif)#FFFFFF repeat-y scroll 50% 0px;
margin:0px auto;
padding:0px;
text-align:center;
width:830px;
}
.container img {
border:0px none;
}
div.footer {
background:url(images/fbfooter.gif)#FFFFFF no-repeat scroll center top;
height:40px;
margin:0px auto;
padding:0px;
text-align:center;
width:830px;
}
div.logo {
background:url(images/pwclogo.gif)#FFFFFF no-repeat scroll 0%;
height:120px;
margin:0px auto;
padding:0px;
text-align:left;
width:760px;
}
div.header {
background:url(images/headerbg.gif)#A5BA43 repeat-x scroll right bottom;
height:268px;
margin:0px auto;
padding:0px;
text-align:left;
width:760px;
}
div.nav {
float:left;
padding:60px 0px 0px;
width:250px;
}
#navcontainer {
width:175px;
}
ul#navlist {
font-family:arial,helvetica,sans-serif;
font-size:12px;
list-style-type:none;
margin:0px;
padding:0px;
text-decoration:none;
}
ul#navlist li {
display:block;
margin:0px;
padding:0px;
}
ul#navlist li a {
display:block;
height:21px;
padding:8px 0px 0px 55px;
width:120px;
}
ul#navlist li a:link, ul#navlist li a:visited {
color:#FFFFFF;
text-decoration:none;
}
ul#navlist li#active a {
background:#CDDC87 none repeat scroll 0%;
color:#333333;
text-decoration:none;
}
ul#navlist li#active a:hover {
color:#333333;
}
ul#navlist li a:hover {
color:#333333;
}
div.headerfloat {
float:left;
height:268px;
margin:0px;
padding:0px;
width:498px;
}
div.headerfloat h2 {
margin:4px 0px 0px 15px;
}
div.content {
background: url(images/bgcolour.gif)#FFFFFF repeat scroll 0%;
margin:0px auto;
padding:35px 0px 0px;
text-align:left;
width:760px;
}
div.content p {
line-height:150%;
margin:0px;
padding:0px;
text-align:left;
}
div.leftcol {
float:left;
margin:0px;
padding:0px 20px 40px 35px;
text-align:left;
width:210px;
}
div.leftcol p {
padding:0px 0px 20px;
}
div.rightcol {
float: right;
text-align: left;
margin: 0;
padding:20px 150px 0px 0px;
width: 250px;
}
div.rightcol p {
padding: 0px 0px 20px 0px;
}
div.maincol {
float:left;
margin:0px;
padding:0px 0px 40px;
text-align:left;
width:470px;
}
div.maincol p {
font-family: tahoma, Arial, Helvetica, Verdana;
font-weight: normal;
font-style: normal;
}

img.floatright {
border:0px none;
float:right;
margin:12px 0px 2px 10px;
}
img.floatleft {
border:0px none;
float:left;
margin:0px 7px 3px 0px;
}
div.pfloat {
float:left;
height:160px;
margin:0px;
padding:0px 15px 0px 10px;
text-align:left;
width:217px;
}
div.pfloat p {
padding:0px 0px 0px 10px;
}
div.pfloat h1 {
padding:0px 0px 0px 10px;
}
div.contentbottom {
background-color: #ffffff;
border-top:1px dotted #CCCCCC;
clear:both;
margin:0px;
padding:0px;
text-align:center;
width:760px;
}
div.contentbottom p {
color:#999999;
font-size:70%;
}
div.botleft {
float:left;
margin:25px 0px 20px;
padding:0px;
text-align:left;
width:150px;
}
div.botleft p {
margin:0px;
padding:0px 20px 0px 30px;
}
div.botmiddle {
border-left:1px dotted #CCCCCC;
float:left;
margin:25px 0px 20px;
padding:0px;
text-align:left;
width:200px;
}
div.botmiddle p {
margin:0px;
padding:0px 20px 0px 25px;
}
div.botright {
border-left:1px dotted #CCCCCC;
float:left;
margin:25px 0px 20px;
padding:0px;
text-align:left;
width:150px;
}
div.botright p {
margin:0px;
padding:0px 20px 0px 25px;
}
div.clear {
clear:both;
height:0px;
width:760px;
}

.fieldsettext {
font-family: Tahoma, verdana, Arial, san-serif;
font-size: .95em;
font-style: normal;
}
.fieldset {
padding : 5px 0 0 0px;
border : 0;
text-align : left;
color : #555;
font-size : 75%;
}
.fieldset2 {
padding : 5px 0 6px 0px;
border : 0;
text-align : left;
color : #555;
}
.input {
width : 190px;
border : 1px solid #ccc;
color : #777;
padding : 2px;
margin : 2px 0;
font-family: Verdana;
font-size: 11px;
}
.button {
background : #fff;
width : 190px;
color : #666;
border : 1px solid #ccc;
padding : 2px;
margin : 0;
}
input:hover.button {
color : #fff;
background-color : #a4b161;
}
.textarea-quote {
color : #5b5b5b;
height : 100px;
width : 190px;
border : 1px solid #ccc;
font-family: Verdana;
font-size: 10px;
}
form {
margin-top : 0;
margin-bottom : 0;
}
#divform {
}
#map {
float: right;
padding-right: 20px;
}
img.map {
border: 1px;
border-color: #ccc;
border-style: solid;
padding: 5px;
}

a.map{display:block;}
a.map:link {padding: 3px; border: solid 1px #ececec; background: #fff}
a.map:visited {padding:3px; border: solid 1px #ccc; background-color: #fff}
a.map:hover { padding: 3px; border: solid 1px #bcc58c; background-color: #fff}
a.map:active { padding: 3px; border: solid 1px #ececec;
}
img.folio {
border: 2px;
border-color: #ccc;
border-style: solid;
padding: 5px;
margin-bottom: 3px;
}
/*Future Use
a.folio{display:block;}
a.folio:link {padding: 3px; border: solid 1px #ececec; background: #fff}
a.folio:visited {padding:3px; border: solid 1px #ccc; background-color: #fff}
a.folio:hover { padding: 3px; border: solid 1px #bcc58c; background-color: #fff}
a.folio:active { padding: 3px; border: solid 1px #ececec;
}*/

#sidemenu {
float: left;
width: 200px;
height:150px;
padding : 0 5px 10px 10px;
margin : 6px 0;
font-size : 75%;
line-height : 140%;
font-family: Tahoma, Verdana, Arial;
font-size: 11px;
font-weight: bold;
}
#sidemenu ul {
margin : 0;
padding : 0;
border : none;
list-style : none;
}
#sidemenu ul li {
margin : 0;
padding : 0;
}
#sidemenu ul li a {
display : block;
border-bottom : 1px dotted #ddd;
padding : 4px 0 4px 12px;
text-decoration : none;
color : #505050;
width : 200px;
}
#sidemenu ul li a:hover, #sidemenu ul li a:focus { color: #939f4f;
background: url("images/bullet.gif") no-repeat 0 18%;
}
#sidemenu .active { color: #9eac53; font-weight: bold;
background: url("images/bullet.gif") no-repeat 0 18%;
}
#sidemenu .page-details {
color : #777;
font-size : 85%;
font-style : italic;
display : block;
font-weight : normal;
padding-left: 40px;}

#sidemenu span {
color : #a4b161;
}
#sidemenu h1 {
font-family: Tahoma, Verdana, Arial;
font-weight: bold;
font-size: 11px;
}
abbr, acronym, span.abbr {
cursor : help;
border-bottom : 1px dashed #363636;
}
a.ad {display: block;}
a.ad:link {padding: 5px; border: solid 1px #ccc; background-color: #fff;}
a.ad:visited {padding: 5px; border: solid 1px #ccc; background-color: #fff;}
a.ad:hover {padding: 5px; border: solid 1px #3d5f15; background-color: #fff;}
a.ad:active {padding: 5px; border: solid 1px #ccc; background-color: #fff;}

.sidepara {
font-family: Verdana, Arial;
font-size: 10px;
font-weight: normal;
padding-left: 7px;
margin-top: 2px;
}
/*
.imgright {
float : right;
margin : 0;
padding: 4px;
}*/
.promo {
font-family: Tahoma, Verdana, Arial;
font-size: 11px;
font-weight: normal;
font-style: normal;
}
img.promo {
border: 2px;
border-color: #ccc;
border-style: solid;
padding: 3px;
}
ul#browsers{
list-style: none;
}
ul#browsers li {
color:#333333;
font-family:tahoma,arial,helvetica,sans-serif;
font-size:78%;
line-height: 1.5em;
font-style:normal;
font-weight:normal;
}

edited by CT: post edited because code tags not used. PLEASE PLEASE USE CODE TAGS FOR HTML and CSS!

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 24 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Validate your html. Removing

Validate your html.
Removing invalid code fixes the problem locally.

Patrickwc
Patrickwc's picture
Offline
Regular
Westland, MI
Last seen: 12 years 49 weeks ago
Westland, MI
Timezone: GMT-4
Joined: 2006-10-15
Posts: 17
Points: 0

Still having problems in IE7

Dan,

I appreciate the feedback. Forgive the incompleteness of the site, as it is still a work in progress. I have validated the XHTML with the W3C and the CSS, and yet I cannot get certain images to render. It looks as it should in FF, but not IE7. Any specific thoughts from forum members on either the source code or the CSS that could be causing the problem would be appreciated.

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 12 years 5 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

background:url(images/pwclogo

background:url(images/pwclogo.gif)#FFFFFF no-repeat scroll 0%;

You have to put a space between the url and the color. All your CSS doesn't do that. So fix that and let us know what happens.

Patrickwc
Patrickwc's picture
Offline
Regular
Westland, MI
Last seen: 12 years 49 weeks ago
Westland, MI
Timezone: GMT-4
Joined: 2006-10-15
Posts: 17
Points: 0

Problem solved!

Vinhboy,

Thanks to you and Dan for assisting me in this issue. That solved the problem. Often another pair of fresh eyes to look at the issue from a different perspective is all it takes. Thanks again for all your help!

Patrickwc
Patrickwc's picture
Offline
Regular
Westland, MI
Last seen: 12 years 49 weeks ago
Westland, MI
Timezone: GMT-4
Joined: 2006-10-15
Posts: 17
Points: 0

Not so solved!

Vinhboy,

The images not rendering was solved by spacing the color and the URL in the CSS code keenly noticed by your trained eye. However, another problem was brought to my attention. In IE6, the portfolio section has the main column underneath the sidemenu vertically, rather than floated to the right as I would like. I just noticed this and have not had an opportunity to play with the CSS code as I am away from my home office. Any insights as to why this is happening in IE6 only wold be appreciated Vinhboy.

Regards

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 34 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Patrickwc,

Patrickwc,
I found the problem in IE6 - it's the width: 760px in the .clear

I don't believe you need any width at all there. In fact, that (those, there are two) div may be extraneous.

I love the design, btw.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 38 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

I have to agree with Wolfie,

I have to agree with Wolfie, that is a very attractive design. May I suggest a small change? The contrast between the link colors and the background colors is very low. I think making the fonts bold will improve the apparent contrast without upsetting the color scheme.

a {
text-decoration:none;
font-weight: bold;
}

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Patrickwc
Patrickwc's picture
Offline
Regular
Westland, MI
Last seen: 12 years 49 weeks ago
Westland, MI
Timezone: GMT-4
Joined: 2006-10-15
Posts: 17
Points: 0

Feedback much appreciated!

I have been off the last few days and have just checked my emails for your responses. I am going to make the changes that Wolf suggested and put them into action this evening. I will report back if that resolves the issue. I also wanted to say thank you to KK for the feedback on the contrast of the links. I will change them to bold so as to make them more pleasing to the eye. I always appreciate the feedback and thanks for the compliments on design.

Patrickwc
Patrickwc's picture
Offline
Regular
Westland, MI
Last seen: 12 years 49 weeks ago
Westland, MI
Timezone: GMT-4
Joined: 2006-10-15
Posts: 17
Points: 0

REndering problems still present with IE6

Wolfcry911,

I appreciate the insight. I have removed the width from the .clear and tested again. It renders correct in IE7, FF, Opera and Safari but still has the main column showing below the left column in the portfolio section with IE6. I then removed the .clear, both of them, as I agree they were not necessary, and tested yet again. The same result with IE6 was achieved. Any other insights by you or other members would be greatly welcomed!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 34 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

that's strange, I tested

that's strange, I tested locally on IE6 and worked perfectly. I'll have another look at it tonight.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 34 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

change this #sidemenu ul li

change this
#sidemenu ul li a {
display : block;
border-bottom : 1px dotted #ddd;
padding : 4px 0 4px 12px;
text-decoration : none;
color : #505050;
width : 200px;
}

to a width of 190px.

Patrickwc
Patrickwc's picture
Offline
Regular
Westland, MI
Last seen: 12 years 49 weeks ago
Westland, MI
Timezone: GMT-4
Joined: 2006-10-15
Posts: 17
Points: 0

That did the trick!

Wolf,

You and I were on the same page with adjusting the sidemenu id. I tried that but adjusted the wrong one. Thanks for your assistance with this, it is really appreciated.

Patrickwc
Patrickwc's picture
Offline
Regular
Westland, MI
Last seen: 12 years 49 weeks ago
Westland, MI
Timezone: GMT-4
Joined: 2006-10-15
Posts: 17
Points: 0

Trouble reappearing again!

Wolf,

This is the weirdest thing! Everything worked fine in all browsers IE6, IE7, FF, Opera and Safari among the more common ones. Everything fit and was fine. I uploaded a number of pages since our last correspondence with no problems. All of sudden today, the background images are missing yet again in IE6 and IE7. I am at a loss on this one, any insight from you or other forum members would be appreciated. Here is the URL http://www.personalwebcreation.com.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 34 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

have you reverted to an

have you reverted to an older stylesheet? the background declarations are still messed up (like in the #container).

Patrickwc
Patrickwc's picture
Offline
Regular
Westland, MI
Last seen: 12 years 49 weeks ago
Westland, MI
Timezone: GMT-4
Joined: 2006-10-15
Posts: 17
Points: 0

Not sure!

Wolf,

I do recall during and upload the connection was interrupted, but I did not think that had any bearing on the style sheet. I retested and everything looked fine, but obviously that is not the case. The style sheet that I have Wolf validates. Can you give me an example of how the background declarations are messed up. Is it grammatical? Missed semi-colon?

Thanks for reviewing this it is most appreciated.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 34 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

it's just as vinhboy pointed

it's just as vinhboy pointed out above. Take this for examplediv.container {
background:url(images/fbbg760.gif)#FFFFFF repeat-y scroll 50% 0px;
margin:0px auto;
padding:0px;
text-align:center;
width:830px;
}

it should be as sodiv.container {
background: #fff url(images/fbbg760.gif) repeat-y 50% 0%;
margin: 0 auto;
padding: 0;
text-align: center;
width: 830px;
}

in the shorthand background declaration it's best to put the color first followed by the image url. The scroll is not needed and you cannot mix percentages with pixels. Percentages are the only unit that can't be mixed with other units. You could use top center, or center 0, or just top, or 50% 0% - they all mean the same thing. You have this problem with multiple background declarations.

Patrickwc
Patrickwc's picture
Offline
Regular
Westland, MI
Last seen: 12 years 49 weeks ago
Westland, MI
Timezone: GMT-4
Joined: 2006-10-15
Posts: 17
Points: 0

Lesson learned!

Wolf,

I am grateful for the lesson on CSS shorthand. Proper syntax is the key and I will be ever mindful of this from here on out. Thanks again!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 34 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Correction

Correction

I was mistaken above. You can in fact mix percentages with other positional units. It's the keywords (top, bottom, right, left, center) that can't be mixed (with percentages or positional units). So your use of 50% 0px was appropriate.