2 replies [Last post]
mervdsz
mervdsz's picture
Offline
newbie
Last seen: 9 years 22 weeks ago
Timezone: GMT+5.5
Joined: 2012-08-19
Posts: 1
Points: 5

Hi

I am CSS beginner. I am trying to create a full width layout.
So i have set width to 100% and reset the margin,padding and border to 0 , as has been explained in so many tutorials to have the "reset effect".

BUT despite doing the "reset" i am getting some margin around my text in both the browsers.
I am testing currently in following browsers:
Firefox 14.0.1 and IE 9
OS used is: win 7 (64 bit)

The HTML and CSS code is as follows:

index.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body>
 
<div id="container">
    <div class="top-content">
		<p> 
		Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
		</p>
    </div>
</div>	
</body>
 </html>

style.css

<style media="screen" type="text/css">
 
/********************************** RESET *****************************************/
html,body,div,p{
margin: 0;     
padding: 0;
border: 0;
}
/********************************** Actual Stuff **********************************/
 
#container {
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
	background-color: #c00;
}
 
#top-content{	
	/*height: 300px;*/
	background-color: #c00;
}
</style>

Also attached is a screenshot of the problem.
margin problem.jpg

Kindly help me understand my error.
Thanks

//mod edit: Please use BBCode to mark your code; i.e. [code]...[/code]. Fixed. ~gt

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 7 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

From the css file, delete

From the css file, delete <style media="screen" type="text/css"> and </style>

HTML markup does not belong in a linked stylesheet.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mervdsz
mervdsz's picture
Offline
newbie
Last seen: 9 years 22 weeks ago
Timezone: GMT+5.5
Joined: 2012-08-19
Posts: 1
Points: 5

thanks for the reply my

thanks for the reply

my query is solved

i visited the above link....yes i need to work on my coding... can u suggest me some intermediate CSS tutorial sites...