3 replies [Last post]
snowgrind
snowgrind's picture
Offline
newbie
Last seen: 9 years 40 weeks ago
Timezone: GMT-8
Joined: 2009-08-06
Posts: 7
Points: 3

hi,

i am some what inexperienced at making a website and i have an issue with my portfolio site.

i added a background position for a border that will extend from an image i have in the left column. it's not working in internet explorer 6 or 7, but works in Firefox, Opera and Safari.

i validated my css and it came up fine. the url is: www.derdoolb.com/portfolio04.html

also when i view the site in IE 6 and IE 7, my "mainstage" area is extended lower than when viewed in Firefox, Opera and Safari.

i have tried different variations with the background position and still no luck.

the issue is in the "#leftcol" portion of my css.

any feedback would be great.

Thanks!

here is my css:

/* Universal selector */
/* Remove all default margins and padding */
* {
margin: 0;
padding: 0;
}

.clear {
clear: both;
}
html {border:0;}

body {
background-image: url(pics/cork.jpg);

}

#branding {
position: relative;
}

#branding h1{

}

#container {
width:55em;
background-image: url(pics/cork.jpg);
margin: 0 auto;
}

#mainstage {
margin-left: 18em;
margin-right: 5em;
text-align: left;
position: relative;
background-image: url(pics/mainbg.gif);
}

#mainstage p {
padding: 0 1em 1em 1em;
font-family: Times "Times Roman" georgia serif;
font-size: 12pt;
}

#mainstage h1 {
padding-left: .25em;
padding-bottom: 10px;
padding-top: 0;
font-family: Arial, Helvetica, sans-serif;

}

#rightcol {
float: right;
width: 4em;
position: relative;
text-align: left;
height:auto;
}

#leftcol {
float: left;
width: 18em;
position: relative;
text-align: left;
background: url(pics/whitebar.gif) right repeat-y;
height:auto;

}

#leftcol img{
display: block;
}

#leftcol h1{
padding-left: 2em;
padding-bottom: 10px;
padding-top: 0;
font-family: Arial, Helvetica, sans-serif;
}

#leftcol ul{
font-family: sans-serif;
list-style-type: none;
padding-left: 2em;

}

#leftcol li{
line-height: 5em;
display: block;
}

#leftcol a:hover,
#leftcol a:active
#leftcol a,
#leftcol a:link,
#leftcol a:visited{
margin-left: 2em;
outline-style:none;
border: none;
}

#leftcol a,
#leftcol a:link,
#leftcol a:visited{
text-decoration: none;
color: #000;
display:block;
}

#leftcol a{
padding-left: 1em;
}

#leftcol a:hover,
#leftcol a:active,
#leftcol li.current a:link,
#leftcol li.current a:visited{
color: #000;
position: relative;
display: block;

}

#leftcol a:hover,
#leftcol a:active{
color:#000;
}

#footer {
clear: both;
text-align: left;
}

#footer p {
text-align: center;
}

h1 {
font-family: Arial, Helvetica, sans-serif;
}

#head{
width: 55em;
padding: 1em;
text-align: center;
}

#head img{
vertical-align: middle;
text-align: center;
}

doc4
doc4's picture
Offline
Regular
Arkansas, United States
Last seen: 3 years 10 weeks ago
Arkansas, United States
Timezone: GMT-5
Joined: 2008-07-13
Posts: 33
Points: 0

snowgrind, Has this been

snowgrind,

Has this been corrected, I'm only seeing problems in IE6 at this point and I honestly wouldn't worry too much about that.

snowgrind
snowgrind's picture
Offline
newbie
Last seen: 9 years 40 weeks ago
Timezone: GMT-8
Joined: 2009-08-06
Posts: 7
Points: 3

i managed to correct the position issue but...

thank you doc4 for replying.

i was able to correct the position issue for a background element, but now i have another issue.

what should i do about ie6?

png's are not supported by ie6 and there are still a considerable amount of people who still use ie6.

this is going to be a portfolio site and it would look bad if it does NOT display correctly in ie6 to perspective clients. but i am aware that there is a movement to just disregard ie6.

snowgrind
snowgrind's picture
Offline
newbie
Last seen: 9 years 40 weeks ago
Timezone: GMT-8
Joined: 2009-08-06
Posts: 7
Points: 3

also managed to correct the png and ie6 issue with java

i was also able to correct the png issue by using a javascript