1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Newbie : Plz. Help

Discussion in 'CSS' started by electron, Oct 23, 2007.

0
  1. #1
    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 :)
     
    electron, Oct 23, 2007 IP
  2. robca

    robca Well-Known Member

    Messages:
    55
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    116
    #2 
    
* {
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 ;)
     
    robca, Oct 23, 2007 IP
  3. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #3
    #pagecontainer {
    margin: 0 auto;
    }

    Also add this to the body tag to account for IE ignoring the above

    body {
    text-align: center;
    }
     
    Arnold9000, Oct 23, 2007 IP
  4. KatieK

    KatieK Active Member

    Messages:
    116
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    58
    #4
    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.
     
    KatieK, Oct 23, 2007 IP
  5. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #5
    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.
     
    soulscratch, Oct 23, 2007 IP
  6. electron

    electron Well-Known Member

    Messages:
    249
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #6
    Thanks Guys. Thank you very much for your time. :)
     
    electron, Oct 23, 2007 IP
  7. electron

    electron Well-Known Member

    Messages:
    249
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #7
    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 ??
     
    electron, Oct 23, 2007 IP
  8. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Doesn't show in both IE and FF? Please specify. Could have something to do with haslayout
     
    Arnold9000, Oct 23, 2007 IP
  9. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #9
    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.
     
    soulscratch, Oct 23, 2007 IP
    electron likes this.
  10. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #10
    Re-read the chapter that mentions this technique on CSS Mastery please.
     
    soulscratch, Oct 23, 2007 IP
  11. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #11
    Given his code, why would you assume it has anything to do with hasLayout?
     
    soulscratch, Oct 23, 2007 IP
  12. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #12
    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).
     
    Dan Schulz, Oct 23, 2007 IP
  13. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #13
    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).
     
    Arnold9000, Oct 23, 2007 IP
  14. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #14
    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.
     
    Arnold9000, Oct 23, 2007 IP
  15. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #15
    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.
     
    soulscratch, Oct 23, 2007 IP
  16. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #16
    Go visit 10-100 sites. Tell me how much of them have centered text.
     
    soulscratch, Oct 23, 2007 IP
  17. electron

    electron Well-Known Member

    Messages:
    249
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #17
    Problem Solved. I got what i wanted. I feel good now.:)
    Thanks all for responding.
    Specially soulscratch.(Rep Added)
     
    electron, Oct 23, 2007 IP