...

View Full Version : CSS not working as I think it should...



stefanoperfili
05-22-2007, 01:22 PM
I've tested it in Firefox 2 and IE 6, using Windows - no background images and I don't know why. Here are the paths to the relevant files:

http://stefanoperfili.st.funpic.org/index.php
http://stefanoperfili.st.funpic.org/main.css
Image files that should be showing but aren't:
http://stefanoperfili.st.funpic.org/images/bg_a.gif
http://stefanoperfili.st.funpic.org/images/bg_b.gif
http://stefanoperfili.st.funpic.org/images/bg_c.gif
http://stefanoperfili.st.funpic.org/images/bg_d.gif
http://stefanoperfili.st.funpic.org/images/bg_e.gif

I know my coding looks sort of questionable (div.1 around div.2 around div.3 around div.4...) but my intention was for it to be entirely scalable and still look good.

(I was about to go further by turning the #nav div into a float:left, before I found out about this error in the browser.)

See attached: screenshot of how it looks in Dreamweaver (try to ignore the black dotted lines).

Is that all the information I need to give? Thanks...

kewlceo
05-22-2007, 01:46 PM
You need to specify a minimum height for the divs with background images as far as I can tell.

BTW, why not use borders instead of all those divs?

stefanoperfili
05-22-2007, 02:05 PM
But surely I don't need to specify heights if the content inside dictates the height?

(Now the image is scalable with the rest of the page too, btw.)

I suppose I could use borders, but not for the corners. I probably will, actually.

Still, why else would it be stuffing up?

kewlceo
05-22-2007, 02:14 PM
But surely I don't need to specify heights if the content inside dictates the height?

Do all those divs have content besides the background images?

ronaldb66
05-22-2007, 02:19 PM
Eight (!) nested divs just to create a pretty border?!! You have got to be joking!

Anyway: your style sheet seems to be inaccessible to me (could be firewall settings), so I'm guessing here, but:

Remember that elements that contain only floated content will collapse into nothingness; the floats will need to be cleared.
Have you verified the correct path to the images relative to the position of the style sheet?



You might want to check out ALA's Custom corners and borders part I (http://www.alistapart.com/articles/customcorners/) and part II. (http://www.alistapart.com/articles/customcorners2/)

stefanoperfili
05-22-2007, 02:38 PM
Eight (!) nested divs just to create a pretty border?!! You have got to be joking!

Yeah, I know, it's a bit far, I know... But it's scalable! I'll reduce it to 5, with the outermost having a 10px border (instead of the outermost four having repeat-x/y backgrounds).

I'm not sure why the CSS file isn't working - it's a valid link. :(


Do all those divs have content besides the background images?

Here's an example of what I'm doing, with CSS...


<div id="sidebar">
<div class="1"><div class="2"><div class="3"><div class="4"><div class="5"><div class="6"><div class="7"><div class="8">
<div class="in">
<ul><li><a href="./">Home</a></li><li><a href="?p=portfolio">Portfolio</a></li><li><a href="?p=contact">Contact</a></li></ul>
</div>
</div></div></div></div></div></div></div></div>
</div>


/* I _WILL_ CHANGE THIS TO 5 NESTED ONLY... ;) */

div.1 { background: url("images/bg_a.gif") repeat-x scroll top left; }
div.2 { background: url("images/bg_a.gif") repeat-y scroll top right; }
div.3 { background: url("images/bg_a.gif") repeat-x scroll bottom right; }
div.4 { background: url("images/bg_a.gif") repeat-y scroll bottom left; }
div.5 { background: url("images/bg_b.gif") no-repeat scroll top left; }
div.6 { background: url("images/bg_c.gif") no-repeat scroll top right; }
div.7 { background: url("images/bg_d.gif") no-repeat scroll bottom right; }
div.8 { background: url("images/bg_e.gif") no-repeat scroll bottom left; }
div.in {
margin: 0;
padding: 20px;
}

#sidebar {
width: 14em;
float: left;
font-size: 81.25%;
padding-bottom: 10px;
padding-right: 10px;
}
#sidebar ul {
margin: 0;
padding: 0 0 5px 0;
list-style: none;
font-weight: bold;
white-space: normal;
}
#sidebar ul li {
margin: 0;
padding: 5px 5px 0 10px;
x_display: block;
}
#sidebar ul li a {
color: #2977B4;
display: block;
margin: 0;
padding: 5px;
}

koyama
05-22-2007, 08:50 PM
It looks like you have changed contents on your linked page. Can you upload a page showing what you currently have?

Also, is it working in Firefox? Or is it just IE that is the problem, and in that case, which version of IE?

stefanoperfili
05-23-2007, 05:23 AM
Nah, I've abandoned this idea altogether, thus the changed content - but thanks :)

I use Firefox 2 and IE 6, and neither of them worked.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum