Sent by Dave M G on 27 March 2007 10:10
CSS-d,
The web layout I'm discussing in this email has many problems, but
within this thread, I just want to focus on one. So please be forgiving
if you see other issues like PNG transparencies not displaying correctly
or DIVs that are floating in strange places. I'll try to address those
issues in separate threads.
Here I'd like to find out why my background image is not displaying
correctly.
Please note that I have been away from making serious CSS layouts for a
year or two, so I'm a little rusty. My level of understanding will vary
a lot depending on what I remember, so I hope you will be patient with
me if I have missed the obvious.
First, the design I'm aiming at making should look something like this
preliminary design:
http://formever.org/site/default_style/target_design.png
But if you go here, to where the CSS is in action, you can easily see
that it's quite different:
http://formever.org/css_test
Again, I just want to emphasize that despite all the problems, I just
want to focus on one. That problem is the missing background on the
folder images on the left hand side.
Just in case other people may see other things than what I'm seeing, I'm
testing on FireFox version 2.0 on Linux. Here's what it looks like to me:
http://formever.org/site/default_style/myview.png
If you are using a different browser or platform in which the background
images do display, then please let me know. Although in principle my
intention is to make the design work on FireFox first, then other
browsers later.
Anyway, the middle of the folder should be comprised of an image of 1
pixel in height that repeats all the way down, to connect the top and
bottom. But, as you can see, it is not displaying.
The image is on the server and can be accessed at:
http://formever.org/site/default_style/foldermiddle.png
I've included the relevant CSS code below. The background is specified
in the "#menus div" declaration.
If someone could enlighten me as to why this image is not showing up, I
would really appreciate it.
Thank you for any advice.
CSS Code:
/* Menus Container
#menus {
position:absolute;
top:150px;
left:20px;
width:154px;
line-height:17px;
/* Another IE Hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
/* Be nice to Opera 5 hack. */
body>#Menu {width:150px;}
}
#menus div{
background-image: url("default_style/foldermiddle.png");
background-repeat: repeat-y;
margin-bottom: 16px;
}
#menus div::before {
display: block;
line-height: 0;
content:url(default_style/foldertop.png);
height: 30px;
max-width:154px;
}
#menus div::after {
display: block;
line-height: 0;
content: url(default_style/folderbottom.png);
}
#menus div ul{
list-style-type : none;
margin-left: 0;
margin: 0;
padding: 0;
list-style-image: none;
font-size:.75em;
}
--
Dave M G
Ubuntu 6.10 Edgy Eft
Kernel 2.6.20-5-generic
Pentium D Dual Core Processor
PHP 5, MySQL 5, Apache 2
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
