Help with page styling

Question

I have the following image being placed at the top of a page.

<body>
    <form id="form1" runat="server" >
    <div>
        <div>
            <img src="Images/top.png" width="100%" height="115px" alt="top.png" />
        </div>
    </div>
    </form>
</body>

The problem is there is a bit of padding that is appearing to the left, top, right, and bottom of the image. I don't want that padding there. In other words, I want the image top be flush with the left and top of the page, and for it to stretch across the width of the page. How can I achieve this with a style?

score 4 · Answer 1 · answered Dec 03 '09 at 20:55

4

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/

answered Dec 03 '09 at 20:55

Ben

6,857
26
23

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 Dec 03 '09 at 21:05
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 Dec 03 '09 at 21:09
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 Dec 03 '09 at 21:40

score 1 · Accepted Answer · answered Dec 03 '09 at 20:58

1

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 }

answered Dec 03 '09 at 20:58

mwcz

8,949
10
42
63

prodigitalson · Answer 3 · 2009-12-03T21:43:10.337

0

<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.

edited Dec 03 '09 at 21:43

answered Dec 03 '09 at 20:56

prodigitalson

60,050
10
100
114

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 Dec 03 '09 at 21:07
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 Dec 03 '09 at 21:37
Well you have to set it not to repeat. see revised answer above for example. – prodigitalson Dec 03 '09 at 21:40
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 Dec 03 '09 at 22:58

Help with page styling

3 Answers3