Hi everybody,
I'd be grateful if some of you could help me.
Please open IE7 or 6 and go to:
_http://www.giuseppecraparottacv.co.uk/work-web3.html
y_ou see that there's a "works" link - an <a> tag displayed as a block -
in each of the first 4 boxes - all <li> part of an <ul>.
The <a> tag is absolutely positioned in the context of the <li>, which
is relatively positioned.
This styles seem to imply that in IE6 and 7 a clear grey border appears
below the first 4 <li>'s, as you can see. It is actually the page
background, not a border part of my design.
In Firefox there's no grey between the boxes, which is the way it should
be.
Besides, when I increase the page's size, the works' button looses part
of the blue.
How can I get rid of these defects? Is something I do wrong?
Thanks much,
Giuseppe
I attach the CSS styles below, in bold those I guess are relevant
body {
padding:0;
margin:0;
font:0.9em Verdana, Arial, Helvetica, sans-serif;
background-color:#BFBFBF;
}
h1, p, strong, ul, li, .field, a, div {
padding:0;
margin:0;
}
a {
text-decoration:none;
}
ul {
min-width:574px;
width:39.8em;
margin:0 auto;
list-style-type:none;
border-right:4px solid #737272;
border-left:4px solid #737272;
}
.field {
min-width:574px;
width:39.8em;
margin:0 auto;
background:#ffffff;
padding-bottom:0.7em;
border-right:4px solid #737272;
border-left:4px solid #737272;
}
h1 {
margin:0 auto;
font-size:0.60em;
color:#ffffff;
text-align:center;
line-height:1.55em;
width:558px;
height:1.80em;
background:#00abe4 url(img/bg-header.jpg) no-repeat bottom center;
}
*li {
position:relative;
width:100%;
}
*.odd {
background-color:#EAF4F5; }
.even {
background-color:#ffffff; }
*a.works {
display:block;
width:3.7em;
height:1.4em;
text-align:center;
color:#ffffff;
background:url(img/bg-works.jpg) repeat-x;
position:absolute;
top:79%;
left:80%;
}*
li p {
padding:1.1em 1em 0 1.5em;
width:37.3em;
}
li .popup{
color:#00B9F6;
line-height:1.8em;
}
#browse {
margin:0 auto;
min-width:574px;
width:39.8em;
height:4.06em;
color:#6C6C6C;
background-color:#E1E1E1;
border-top:3px solid #737272;
border-right:4px solid #737272;
border-left:4px solid #737272;
border-bottom:4px solid #737272;
}
#browse p {
padding:0.65em 1em 0 1.5em;
}
ul.areas {
list-style:none;
border:none;
}
li.area {
width:6em;
/*height:26px;*/
height:1.83em;
float:left;
/*background:url(img/bg-areas-shad.jpg) no-repeat;*/
display:inline;
margin-top:0.39em;
}
li.area a {
display:block;
width:7.855em;
min-width:79px;
height:2.1em;
text-align:center;
/*min-width:79px;*/
color:#000000;
font:bold 0.7em/2em verdana;
margin-top:0.5em;
margin-left:0.40em;
}
li.mktg {
margin-left:1.3em;
}
li.radio {
margin-left:9.6em;
margin-right:9.5em;
}
li.mktg a {
background:#F92D2D url(img/bg-areas-mktg.jpg) no-repeat left top;
}
li.mktg a:hover {
background:#F92D2D url(img/bg-areas-mktg.jpg) no-repeat left -8.3em;
}
li.radio a {
background: #FFF005 url(img/bg-areas-radio.jpg) no-repeat left top;
}
li.radio a:hover {
background: #FFF005 url(img/bg-areas-radio.jpg) no-repeat left -8.3em;
}
li.res a {
background: #809A79 url(img/bg-areas-res.jpg) no-repeat left top;
}
li.res a:hover {
background: #809A79 url(img/bg-areas-res.jpg) no-repeat left -8.3em;
}
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
