Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS not working as I think it should...

    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...
    Attached Thumbnails Attached Thumbnails CSS not working as I think it should...-should_dw.gif  

  • #2
    Regular Coder kewlceo's Avatar
    Join Date
    Mar 2006
    Location
    California, US
    Posts
    484
    Thanks
    1
    Thanked 3 Times in 3 Posts
    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?
    Last edited by kewlceo; 05-22-2007 at 02:55 PM.
    UBERHOST.NET
    Shared, reseller, semidedicated hosting and dedicated server plans.
    DirectAdmin • Installatron • Money-Back Guarantee • 24/7 Support
    Providing "Service Above All Else" since 2005.

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Regular Coder kewlceo's Avatar
    Join Date
    Mar 2006
    Location
    California, US
    Posts
    484
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by stefanoperfili View Post
    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?
    UBERHOST.NET
    Shared, reseller, semidedicated hosting and dedicated server plans.
    DirectAdmin • Installatron • Money-Back Guarantee • 24/7 Support
    Providing "Service Above All Else" since 2005.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Nesting

    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?


    Edit:
    You might want to check out ALA's Custom corners and borders part I and part II.
    Last edited by ronaldb66; 05-22-2007 at 03:23 PM.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #6
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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...

    Code:
    <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>
    Code:
    /* 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;
    }

  • #7
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    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?

  • #8
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •