• 0

xhtml question


Question

everytime i make a web page i always have a little gap above the header and below the footer, like the site doesnt stretch the entire height of the browser.

is there a way to fix that? ive never seen it on any sites ive been too.

heres a link to a crap web page ive made a long time ago. i know its a crap example but still, it happens with every page i made.

http://switcharoo.agilityhoster.com/dossite.html

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0

html, body {
margin: 0; /* Remember You Can Store All 4 Values Here In This Order: Top, Right, Bottom, Left */
padding: 0;
}

Credit to Kudos, he got there first, I just wanted to add in the comment for usage purposes...

Link to comment
Share on other sites

  • 0

To further add to this, a decent CSS reset should also be used when first designing a web-site. All of the block elements have (often) un-desirable margin/padding applied by default.

Yahoo have a decent reset:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

Link to comment
Share on other sites

  • 0

Good idea. One thing to note however, if you want to use CSS rounded corners, it won't work on tables if border-collapse is set to collapse.

Tables are never meant to look smart anyway. :3

Link to comment
Share on other sites

  • 0

To further add to this, a decent CSS reset should also be used when first designing a web-site. All of the block elements have (often) un-desirable margin/padding applied by default.

Yahoo have a decent reset:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

WTH?!?!?

Why write: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td??

* { 
	margin:0;
	padding:0;
}

Link to comment
Share on other sites

  • 0

I think it aids browser compatibility? Not sure. I've never come across any issues using the asterisk selector personally.

Link to comment
Share on other sites

  • 0

I assume it's not used because it targets every single element, which isn't really needed if the browser doesn't give every element a margin (the Yahoo reset is based off of browser styles, no need to reset something to the default, which all browsers already treat as the default)

Link to comment
Share on other sites

  • 0

I think it aids browser compatibility? Not sure. I've never come across any issues using the asterisk selector personally.

The Asterisk is a wildcard selector. It selects everything, and applies those properties. This is used a lot in "CSS Resets" so that properties are the same among all browsers. Reset everyhing to zero, then manually set properties so they are more consistent across browsers.

Link to comment
Share on other sites

  • 0

Yahoo know what they are doing, they've been at it a little longer than you.

https://developer.mozilla.org/en/Writing_Efficient_CSS#Guidelines_for_Efficient_CSS

writing for the Mozilla UI is a bit different from writing a web page.

I never understood why people avoided the star selector for resets as good practise. It doesn't make writing future code any harder, and any overhead in resources are so minimal in modern browsers that it's negligible. It's also one character long compared to the hundreds of extra characters listing out elements would take, which means it downloads faster and makes a much more significant difference (though still pretty much negligible) in displaying styles on slower connections.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.