[css-d] menu oddity on IE6
Hi, my problem is viewable at this address: www.cooltester.com/doubts/menu-bgimgs-IE6/monopage-about.html I've used the pixy method for rollover effect on the menu button but this is badly handled in IE6, which shows part of the rollover imgs in the default status too (when the pointer doesn't hover the button). Could somebody please help? Thank you, G __ css-discuss [cs...@lists.css-discuss.org] 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/
[css-d] overflowed div scrolling depending on main scrollbar
Hello, would you please take a look at this: http://www.giuseppecraparottacv.co.uk/doubts/contemp-scroll/contemporaneo.html I applied an overflow:auto to the div containing the models' pictures ( div.scrollingflow) because I wanted it to scroll but still keeping fixed the column with the "bottle in hand" picture. The visual layout would be improved if I could make the div.scrollingflow scrolling bar disappear and control the scrolling through the default scrollbar. The height of the page should remain the same as now. I wonder if this can be done by only CSS or if JS is maybe needed... Thank you. __ css-discuss [cs...@lists.css-discuss.org] 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/
[css-d] forcing IE6 to respect div width
Hi everybody, please take a look at this: http://www.giuseppecraparottacv.co.uk/doubts/about.html the div including the copy also contains an image (quote) on top, being this wider than the div's declared width. As a consequence IE6 increases the width of the div as equal to the width of the image, while other browsers still respect the width declared by me. Is it any way to force IE6 to consider the image as going out of the div's width instead of widening the div accordingly to it. If not I'll probably place the image out of the div, but this would be semantically incorrect, being the quote part of the copy. Also, I don't like to surrender to IE6 oddities... thank you very much, Giuseppe __ css-discuss [cs...@lists.css-discuss.org] 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/
[css-d] unremovable margin?
Hello all,
thanks much in advance for your help.
could you please take a look at this trial html file:
http://www.giuseppecraparottacv.co.uk/doubts/press.html
As you can see the images are separated by a bottom / right margin.
- Is it related to the fact that images are *inline elements*?
- Is it any way to eliminate it which is not making the images *block
elements*?
As you can see I included * {padding:0; margin:0;} among the styles.
cheers,
Giuseppe
__
css-discuss [cs...@lists.css-discuss.org]
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/
[css-d] height of div used to create divider line / other
Hi CSS girls and guys,
I'm gonna ask about weird behaviour to which I could easily find remedies,
but I still would like to know why those elements do not behave the way I'd
expect them to do.
Please go to:
http://www.giuseppecraparottacv.co.uk/html/form/competition-form.html
1) The second row of the incomplete form page is composed by two s
whose the first has "float:left" applied. Fine, but:
why the height of the whole row is determined by the put at the
right, which is the shortest of the two? Containing the first more content,
this implies that part of it is not visible because the grey bg is not
extended enough towards the bottom. As you can see, I solved the issue by
adding several s, which is kind of crappy, I don't like that.
Could please somebody explain why the height of the row is not calculated on
the basis of the tallest fieldset? And how to get this result without
expedients?
Oh, an answer could be: is it maybe that being the non-floated fieldset the
last of the html flow, the code below refers to it as starting point?
Thanks!
-
2) I've used a to create the line dividing the two rows. That's the
style:
#divider {
width:525px;
height:22px;
margin:0 auto;
margin-top:22px;
border-top:1px solid white;
}
Margin-height and width are both of 22px, which is intended to create the
same space both above and below the white line. For love of simmetry, I
would have preferred to use the same value for top and bottom margins and to
specify a "0" height value. But IE6 will anyhow create a height for
div#divider, can this be considered an IE6 bug? Can I solve it without
specifying a 22px height for the div?
Here follows the whole CSS styles:
/* CSS Document */
html, body, div, span, h1, p, a, em, font, img, strong, ol, ul, li,
fieldset, form, label {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: white;
background: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:80%;
}
img {
display:block;}
ol, ul {
list-style: none;
}
/**/
.appr, .nl {
font-size:70%;
}
.nl {
width:525px;
margin:0 auto;
margin-top:10px;
line-height:1.5;
text-align:justify;
}
#wrapper1 {
width:742px;
margin:0 auto;
}
#wrapper2 {
width:572px;
margin:0 auto;
}
form {
background-color: #454545;
}
.left {
float:left;
width:276px;
margin-left:22px;
margin-right:105px;
border-right:1px solid white;
} * html .left {
display:inline;}
#divider {
width:525px;
height:22px;
margin:0 auto;
margin-top:22px;
border-top:1px solid white;
}
Thanks a lot,
G
__
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/
[css-d] expandability in IE 6 & 7
Hi there, I have an issue with size expandability in IE6 & 7.
If you open this:
www.giuseppecraparottacv.co.uk
and click on the work section, an iframe, showing a file containing the work
info, will come down. Its height is defined in ems.
But when I try to resize the page dimensions (ctrl+mouse wheel) these funny
behaviours happen:
IE6 : the work section ends up with being cut at the bottom, as if the
height of the iframe doesn't expand, or if it went under the "other" bar;
IE7 : a gap between the iframe and the "Other" bar get bigger and bigger the
more I expand the page. And besides, all the content gets uncentered towards
right.
Can somebody suggest a remedy to these inconveniences?
Thank you,
G
p.s: please find below the code relative to the iframe. If you think the
problem might be caused by other properties please let me know:
iframe {
width:100%;
height:37.7em;
display:block;
}
/*--bars--*/
dd, dt {
width:42em;
margin:0 auto;
}
dd {
display:none;
position:relative;
}
dt {
margin-bottom:3px; /*distance between bars*/
}
/*--content--*/
dt a {
display:block;
height:1.75em;
line-height:1.75em;
width:42em;
color:#00;
background:#DCDCDC url(img/bg-bar.jpg) repeat-x;
text-align:center;
font-weight:bold;
}
dt a:hover {
color:#139FCD;
background:#D9D7D8 url(img/bg-bar-r.gif) repeat-x;}
p {
text-align:center;
padding-top:5px;
font-weight:bold;
}
dd {
position:relative;
margin-bottom:3px;
}
__
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/
[css-d] css tooltip doesn't work in Opera
Hello there, if you go to this page: http://www.giuseppecraparottacv.co.uk/TRY2.html and hover on "Let me tell you something more about it", you'll see a pure css tooltip. It works fine in all browsers, apart from Opera. It is a real pity, 'cause I think that the tooltip is a very good communication tool. But really I can't figure out how to make it work in Opera 9.10... thanks much, G p.s.: Georg, can you give a help with this? __ 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/
[css-d] nasty tooltip strikes again!
Hi folks,
I would appreciate some help.
I particularly invoke the contribution of those that already devoted
their attention to my case:
if you open the following page:
http://www.giuseppecraparottacv.co.uk/work-web.html
you see the layout as it should be, everything is at the right place.
But the tooltip triggered by hovering on the first "let me tell you
something..." (.popup) is
positioned through top and left margin. This implies wrong placement of
the tooltip in IE6
& 7.
Why don't I absolutely position the tooltip relative to .popup ?
Because it gets cut off due to the "overflow:hidden" declared for the ul.
Getting rid of
ul {overflow:hidden;}
and
li {float:left; width:100%}
would make the ul code cleaner and I would love that, but it implies
that the tooltip looks
really buggy, especially in Opera 9.10 , as you can see at:
http://www.giuseppecraparottacv.co.uk/work-web2.html
Besides, in this last version the absolutely positioned ".works",
relative to looks out of
place in IE5. I'm thinking of resorting to an html hack to solve that.
The "float:right" positioning method (commented) seems disastrous, given
the removal of
the properties mentioned above.
MY QUESTIONS ARE :
1) Is there a way to get rid of overflow:hidden, float and width from ul
and li and having a
correct displaying of the tooltip?
2) Given the removal of these properties, is there a way to position
absolutely the .works
link consistently in FF, IE and Opera 9.10 without recurring to a IE hack?
If the answer to these questions is "NO" or similar,
3) Would you approve the choice of positioning the tooltip as in case A)
and recurring to
IE-specific code to position it correctly in IE?
Thank you, hope this won't bother you,
cheers,
G
__
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/
Re: [css-d] CSS tooltip hidden by other elements
Thank you for the theory, I appreciate that very much. Regards, G __ 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/
Re: [css-d] CSS tooltip hidden by other elements
Thank you Georg for the... "class", I appreciate that very much. Regards, G __ 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/
Re: [css-d] absolutely positioning an into a IE6 & 7
Hi Shawn, wanted to say thank you for your suggestions. I did not notice your message until you sent it to my individual mail box. What you suggested worked perfectly well. It is not the solution I've eventually adopted, this due to the adding of a tooltip incompatible with absolute positioning of the "works" link. If you wish, check the code at: http://www.giuseppecraparottacv.co.uk/work-web-test-works-absolute.html Please note that the code still has to be cleaned and redundant properties are not been yet removed. The design looks really ugly being that incompleted. What's interesting is go through the problem-solving process leading to the solution you provided: This was the initial situation: Having added width:100% to the "odd" and "even" lis in order to absolutely position the "works" links in IE6 properly, increasing the page size implied the appearance of phantom gaps - as you defined them :-) - in IE6 and 7. Too bad... As a fix, you suggested to float the lis to the left. Now I have few questions, maybe you have some time to help me to "freeze this experience into everlasting Knowledge" (wow...) Being the width of the ul defined, floating the lis doesn't have the standard function to put the lis side by side but instead of simulating a kind of IE-dedicated "glue effect" sticking the lis together no matter the size of the page. Would you approve this reasoning? Wanna add something to the rationale? Could what I've experienced be appropriately defined as a IE bug? Is there some logic behind this IE behaviour, or is it just a manifestation of IE non-sense? Any mistake from my side? Thank you very much Shawn, Giuseppe __ 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/
Re: [css-d] CSS tooltip hidden by other elements
Georg, thank you very much, your tooltip code works amazingly well in all browsers apart from... Opera 9.10!, where the tooltip still looks terribly buggy and the position:static to the moves the "works" links in a improbable spot... Besides, in all browsers apart from IE the tooltip is abruply interrupted when the ul ends. Any remedy for that? :-) But hey, I'm still very grateful! Are you maybe curious to see what the fixes can be? If I discover something I'll let the list know. Go to the page from here: http://www.giuseppecraparottacv.co.uk/work-web-test-works-absolute.html Now Georg, let me make you few questions for the Knowledge... 1) USE OF STATIC POSITIONING your fix revolves around the use of position:static . To make you laugh I quote here David Sawyer Mc Farland, whose I've read the very good CSS book: "Why would you want to assign an element static positioning? The short answer: You probably never will" (CSS The Missing Manual, Chapter 12). Is there any rationale behind the use of static? Isn't static the default value? Why does it make the tooltip display on top? 2) DISPLAY:INLINE TO THE "WORKS" Any particular reason to specify that? is inline as default. On the other hand, the floating transforms it in a block element. I removed display:inline and the code still works. Any comment? 3)HEIGHT:AUTO!IMPORTANT IN .POPUP SPAN I also got rid of that, assuming you added it to correct the aspect of the tooltip, due to the height value given by me. But that was just provisory :-) . 4) MARGIN: -1.4EM 10% 0 0 Why do you place the .works using both ems and percentages? Any advantage from the promiscuity? __ 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/
[css-d] absolutely positioning an into a IE6 & 7
Is there something wrong in absolutely positioning within a an tag displayed as a block? Of course problems arise on Internet Exploder (I'm quoting Georg :-) ), both 7 and 6. If you try it this is the crap result on the browsers just mentioned: http://www.giuseppecraparottacv.co.uk/work-web-test-works-absolute.html Please follow: To properly display the "works" links at the bottom-right of the on IE6 you need to add /width:100%/ to the itself . Of course I've also added /position:relative/ to the to activate /position:absolute + top: x /and /left: y/ values given to the . As a consequence of the presence of the width property, the get separed when the page size is increased (ctrl + mouse wheel). This is unfair! If you get rid of the absolute positioning method and position the "works" links simply by setting top and left margins then the "want to tell you something more" link gets covered (z-indexing doesn't do any good). This is what you get in IE6 and IE7: http://www.giuseppecraparottacv.co.uk/work-web-test-works.html Please note that both files contain CSS code. What shall I do? Try to position through float? I'm gonna try that... But could you please enlighten me on the above issue, I think I make no relevant mistake, that should work!!! Thanks a lot, G // __ 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/
[css-d] CSS tooltip hidden by other elements
Hi, this is irritating...
if you open
http://www.giuseppecraparottacv.co.uk/work-web-tooltip.html
with IE7 or 6 and hover the first "let me tell you something more" link
you realize immediately what's wrong.
The CSS tooltip pops up below the boxes containing text.
This of course doesn't happen in other browsers.
I thought z-indexing would have fixed the problem but it didn't.
Yesterday I resorted to "Lost", to heal my on-screen frustration
watching people coping with "real nature" problems. Should go in the
nature myself instead...
Thank you very much for your attention.
Here you have the css code (between lines the relevant properties):
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:#ff;
padding-bottom:0.7em;
border-right:4px solid #737272;
border-left:4px solid #737272;
}
h1 {
margin:0 auto;
font-size:0.60em;
color:#ff;
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:#ff;
}
a.works {
display:block;
width:3.7em;
height:1.4em;
text-align:center;
color:#ff;
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;
}
*
--
.popup{
color:#00B9F6;
line-height:1.8em;
z-index:100;
}
.popup:hover {
color:#ff;
background-color:#5DCCF0;
z-index:100;
}
.popup span {
display:none;}
.popup:hover span {
display:block;
position:absolute;
z-index:100;
left:3em;
top:-1em;
width:200px;
height:200px;
color:#00;
line-height:1em;
padding:1.2em;
background-color:#5DCCF0;
}*
_
#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:#00;
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/
[css-d] s get separed if abs positioned is inside them
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 tag displayed as a block -
in each of the first 4 boxes - all part of an .
The tag is absolutely positioned in the context of the , which
is relatively positioned.
This styles seem to imply that in IE6 and 7 a clear grey border appears
below the first 4 '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:#ff;
padding-bottom:0.7em;
border-right:4px solid #737272;
border-left:4px solid #737272;
}
h1 {
margin:0 auto;
font-size:0.60em;
color:#ff;
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:#ff; }
*a.works {
display:block;
width:3.7em;
height:1.4em;
text-align:center;
color:#ff;
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:#00;
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/
[css-d] s get separed if abs positioned is inside them
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 tag displayed as a block -
in each of the first 4 boxes - all part of an .
The tag is absolutely positioned in the context of the , which
is relatively positioned.
This styles seem to imply that in IE6 and 7 a clear grey border appears
below the first 4 '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;
} /*works - non serve a niente specificare l'altezza*/
.field {
min-width:574px;
width:39.8em;
margin:0 auto;
background:#ff;
padding-bottom:0.7em;
border-right:4px solid #737272;
border-left:4px solid #737272;
}
h1 {
margin:0 auto;
font-size:0.60em;
color:#ff;
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:#ff;
}
*
a.works {
display:block;
width:3.7em;
height:1.4em;
text-align:center;
color:#ff;
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:#00;
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/
