Ruud Posted April 25, 2009 Share Posted April 25, 2009 Anyone have a clue what I am doing wrong here the background image in the left menu is not displaying?CSS: .Main #leftmenu { float: left; width: 24%; background-image: url("images/back.gif"); background-repeat: repeat; padding: 15px 0; } HTML: <div id="leftmenu"> Insert.<!-- end #leftmenu --></div> Is inside the div. called container: .Main #container { width: 80%; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; Who on it's turn is inside the body: body { font: 100% Verdana, Arial, Helvetica, sans-serif; background: #FFFFFF; margin: 0; padding: 0; text-align: center; color: #000000; } Link to comment Share on other sites More sharing options...
jeffman Posted April 25, 2009 Share Posted April 25, 2009 What does the HTML look like? Link to comment Share on other sites More sharing options...
thescientist Posted April 25, 2009 Share Posted April 25, 2009 Anyone have a clue what I am doing wrong here the background image in the left menu is not displaying?CSS:.Main #leftmenu { float: left; width: 24%; background-image: url([b]'[/b]images/back.gif[b]'[/b]); background-repeat: repeat; padding: 15px 0; } i think you only need single quotes. Link to comment Share on other sites More sharing options...
Ruud Posted April 25, 2009 Author Share Posted April 25, 2009 i think you only need single quotes.I tried both.The full HTML code is:<html><head><title>Mainpage Mag</title><link rel="stylesheet" type="text/css" href="css/general.css" /></head><body class="Main"><div id="container"> <div id="header"><table width="100%" border="0"><tr><td width="100%"><p class="right">Male | Female | Signout</p></td></tr><tr><td width="100%"><img src="images/background.png" width="100%" height="150px"></td></tr><table><!-- end #header --></div> <div id="leftmenu"> Insert.<!-- end #leftmenu --></div> <div id="maincontent">Insert.<!-- end #maincontent --></div><br class="clearfloat" /><div id="footer"><p class="center">Footer.</p><!-- end #footer --></div><!-- end #container --></div></body></html> Link to comment Share on other sites More sharing options...
jeffman Posted April 25, 2009 Share Posted April 25, 2009 (Don't worry about the quotes in a CSS url attribute. Quote marks aren't even required. All that matters is that the opening quote mark matches the closing mark.)Are you testing in IE? I don't have access to IE at the moment, but I cannot duplicate the problem in Firefox, Safari, or Opera. I almost duplicate it in Opera, but I can still see some background image.I only find one thing that is obviously wrong. Your closing table tag is missing its forward slash. Putting that in cures the Opera problem I mentioned, so maybe it is the problem for IE also.You should add a doctype, especially if you're writing XHTML. http://www.w3.org/QA/2002/04/valid-dtd-list.htmlIt is not necessary to give your <body> element a class name, and also not necessary to use CSS selectors that specify that a certain class or element is a child of the body. Every element (except for the <html> and <body> elements) is automatically child of the body. And id selectors don't need any parent-child relationship specified in CSS at all. I doubt any of this is messing things up, however. Link to comment Share on other sites More sharing options...
Ingolme Posted April 25, 2009 Share Posted April 25, 2009 I think that the problem is the location of your CSS file.Links to files are relative to the CSS file, not the HTML file that calls it.Try this:background-image: url(../images/back.gif); Link to comment Share on other sites More sharing options...
Ruud Posted April 25, 2009 Author Share Posted April 25, 2009 Deirdre's Dad, that didn't help either. I am using Firefox myself for testing version 3.0.9.Possibly the full CSS could help out? /* BUILDING THE PAGE */body { font: 100% Verdana, Arial, Helvetica, sans-serif; background: #FFFFFF; margin: 0; padding: 0; text-align: center; color: #000000; }.Main #container { width: 80%; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; } .Main #header { background: #FFFFFF; } .Main #leftmenu { float: left; width: 24%; background-image: url('images/back.gif'); background-repeat: repeat; padding: 15px 0;}.Main #maincontent { margin: 0 20px 0 26%; } .Main #footer { background:#FFFFFF; }.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */ clear:both; height:0; font-size: 1px; line-height: 0px;}/* TEXT FORMATTING */.left {text-align:left}.right {text-align:right}.center {text-align:center} Link to comment Share on other sites More sharing options...
Ruud Posted April 25, 2009 Author Share Posted April 25, 2009 I think that the problem is the location of your CSS file.Links to files are relative to the CSS file, not the HTML file that calls it.Try this:background-image: url(../images/back.gif); Didn't work either. I double checked all folder names just to be sure I made no stupid mistake and in there at least I did not.The images folder is in the same folder as the CSS file is stored.The HTML page is in the "root", the CSS file in a folder in the root called "css" and the image is in a folder within the CSS folder called "images".Image extension and name are both right. Link to comment Share on other sites More sharing options...
jeffman Posted April 25, 2009 Share Posted April 25, 2009 I duplicated everything you described, and it works.Have you tried overriding your cache? (shift + reload) Link to comment Share on other sites More sharing options...
Ruud Posted April 25, 2009 Author Share Posted April 25, 2009 Could some one shoot me please.I got it to work. I quoted out part of the code in a wrong way witch messed it up.Thanks people for the help. Link to comment Share on other sites More sharing options...
jeffman Posted April 25, 2009 Share Posted April 25, 2009 It happens. Link to comment Share on other sites More sharing options...
Ruud Posted April 25, 2009 Author Share Posted April 25, 2009 Just a next question on the same file.Within the header div there is an image.I would like that image to be the same size of the container in " width" so that it touches the border of it.I presume this should be done by editing the margin somewhere but I do not have a clue where exactly. I tried several places but haven't been able to find the right one. Link to comment Share on other sites More sharing options...
jeffman Posted April 25, 2009 Share Posted April 25, 2009 The easiest (and best) thing is to drop the table. <div id="header"> <p class="right">Male | Female | Signout</p> <img src="images/background.png" width="100%" height="150px"></div><!-- end #header --> This may not work correctly unless you have a strict doctype. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.