ansaurus

Question

Answer 1

+4 A:

You need to use CSS reset rules to reset browser styles, then build from there. I use http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Ben 2009-12-03 20:55:59

You need to remember that when using a reset like that will zero out all of the elements on a page, not just the one that you're working with. If you're starting out with a fresh creation, this fine, but if you're working with an established site, this could lead to more issues. Use carefully.

Chris 2009-12-03 21:05:01

This zeroes out the *default* values for all elements. It does not clear any CSS you have already written. Remember -- your site's CSS is building off of _something_, and if it isn't built on a reset, then it's built on each browser's default styles, leading to unpredictability.

Ben 2009-12-03 21:09:39

I shouldn't need to reset it. I have only one CSS link, and the CSS file itself only has *body {background-color: #FFFFCC;}*

Jagd 2009-12-03 21:40:09

Answer 2

A:

<img style="display: block; padding: 0; margin: 0;" ... />

However if its an image that is essentially a decoratin of somesort (ie. not "content" or linked to another page) i prefer to use it as a background image in the parent element.

For example

#pseudo-image {height: 100px; width: 200px; background: transparent url(path/to/image) scroll no-repeat top left;}

Of course doing it this way you are limited to displaying the image at its actual size and you have to set the div to those same dimensions or larger.

prodigitalson 2009-12-03 20:56:50

Actually using an image as the background of a item or even the page might be easier to control than dropping in an img tag.

Chris 2009-12-03 21:07:08

Actually, I tried to use it as a background-image in the div tag, but I was unable to get it to stretch across the screen. It would just repeat itself, which I can't have. However, if I use the img tag then it will stretch as I want it to.

Jagd 2009-12-03 21:37:35

Well you have to set it not to repeat. see revised answer above for example.

prodigitalson 2009-12-03 21:40:08

Well, doing so will stop the image from repeating, but it won't **stretch** it to the actual width of the browser window, which is really what I need it to do.

Jagd 2009-12-03 22:58:41

Answer 3

+1 A:

Some browsers' default styles give the body element a padding, and some give it a margin. You'll need to remove both in order for the image to be flush against the viewport in all browsers.

    body { margin: 0; border: 0 }

mwc 2009-12-03 20:58:57

This did the trick. Thanks for your help.

Jagd 2009-12-03 21:40:50

ansaurus

tags:

views:

answers:

Help with page styling

related questions