hi i am new to CSS & HTML and need your help with a problem. Firstly, why is this code not working in Mozilla 2.0.0.8 & working fine in IE 7 ? <html> <head> <title>Master</title> <style type="text/css"> *{padding:0; margin:0;} body{background-color : "#ff33cc";} .pagecontainer{width:800px; height:800px; background:transparent url(C:\Documents and Settings\HP_Administrator\My Documents\fls\background.gif) top left repeat-y} </style> </head> <body> <div class="pagecontainer"> <p>Lets go</p><br/> <p>pls</p> </div> </body> </html> Code (markup): And Secondly, How to i get the pagecontainer to be placed in the center. Thanks in Advance
* { padding:0; margin: 0; } body { padding: 0; margin: 0 auto; } .pagecontainer { margin: auto; width:800px; height:800px; background:transparent url(C:\Documents and Settings\HP_Administrator\My Documents\fls\background.gif) top left repeat-y; } Code (markup): try this
#pagecontainer { margin: 0 auto; } Also add this to the body tag to account for IE ignoring the above body { text-align: center; }
Also, remove the quotes from your background color declaration: Instead of body{background-color : "#ff33cc";} Code (markup): Use this: body{background-color : #ff33cc;} Code (markup): The quotes are invalid.
More important than anything is to have a valid DOCTYPE, or browsers will be in quirks mode and do anything they feel like with your page.
I did the above mentioned things and i am now getting the container at the center. But when i add this : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> The image that i am using in the pagecontainers background does not show. Any ideas ??
Big no no.. You don't want to use paths such as this. You want to use path names that are relative to your CSS. If your CSS is in the HTML and assuming your HTML file is in the My Documents\fls and your image is in the same folder (like below) My Documents\file.html My Documents\background.gif Then do If you had a seperate CSS folder in the fls folder, then from the CSS you'd do If your CSS was embedded in the HTML and you had an images folder.. then The reason for this is, if you uploaded it to a live server it wouldn't work because you don't have the same folder structure on the server and the image wouldn't show up. It's always better to use relative paths.
Not only that, but text-align: center; / text-align: left; isn't really needed anymore - unless you HAVE to support IE 5.x at which point you might as well be thinking about using the Simplified Box Model Hack and a few other IE 5.x specific fixes as well in your layout - unless you know how to get around IE 5.x using the same CSS as the rest of the world (like I do). Something else to consider electron, you don't need the break element after the paragraph, since paragraphs are block level elements. If you need to push the paragraphs down a bit, just apply a top and bottom margin to them (or a bottom margin, but make it twice as large). For example, if you want 16 pixels of space between each paragraph, a top/bottom margin of 8px on the paragraphs would work just as well, or you could simply add that 16px bottom margin to the paragraph element (though I prefer the former).
That's where I got it from. It's right out of the book. Text align left is only needed if you want to left align the text in your container. I "left" that spec out on purpose (pun intended).
I didn't assume, I merely considered it because if a background image does not show up, and it only happens in IE, then it could be something theoretically similar to the peek a boo bug where IE 5,6 attempts it's cheating to save processing time, by giving no space to something it thinks has no content. AKA holly hack. I don't have any idea if that's the case, it was a starting question.
Most of the time it's usually parent elements (wrappers) not having layout, and thus not containing floats and because of that the parent element's image is cut off or doesn't show at all. He isn't floating anything, so I don't know why you would would assume this.
Problem Solved. I got what i wanted. I feel good now. Thanks all for responding. Specially soulscratch.(Rep Added)