[Web4lib] Margin/spacing issue in stylesheet

[Andrew]

Joanne,

The problem you're seeing (I can see it in Google Chrome) is coming from 
the fact that you're mixing fixed width elements with a layout that's 
fluid in design. Your container div has left and right margins of 40px . 
As the window width expands, the container div expands with the window. 
When the window exceeds 1001 pixels (921px image plus left margin of 
40px and right margin pf 40px), you'll see white space next to the 
image. I've attached an image of the page at 1280 x 768 resolution so 
you can see that more clearly. In order to make this display 
consistently, you'll want the fix the width of the container div to 
match the size of the header graphic. So add the width setting to your 
container div (it won't be necessary in the masthead div):

#container {
...
width: 921px;
}

and the menu div to keep it within the constraints of the container div:

#menu {
...
width: 921px;
}

You may need to adjust the menu div margins and padding. It looks like 
there's a bit of white space appearing with this change. The second 
image shows the difference in the page display once you've changed the CSS.

Also, you don't need the <p> tags with the image in your masthead div. 
It's unnecessary and adds to your markup in both the HTML and CSS.

Andrew Mutch
Library Systems Technician
Waterford Township Public Library
Waterford, MI





joanne parra wrote:
> Hi all - 
>
> I'm appealing to the collection wisdom for what I'm sure will be an easy
> fix...
>
> I'm revising the library's website to include our new logo, which is a
> .gif. I made the changes on the homepage without any glitches, but when I
> change it for the internal pages, there is extra space appearing around
> the image. 
>
> The coding in the CSS is identical for that section of the page, so I
> can't figure out why it won't display correctly. In an odd turn of events,
> it's working in IE but not in Firefox...
>
> Here is the code for the pages:
>
> Home page: http://www.moorestown.lib.nj.us/default_revised.html
> CSS: http://www.moorestown.lib.nj.us/newstyles2.css
>
> Sample internal page:
> http://www.moorestown.lib.nj.us/adultnewreader_revised.html
> CSS: http://www.moorestown.lib.nj.us/internal_styles_revised.css
>
> Any help would be appreciated.
>
> Thanks,
> Joanne Parra
> Senior Reference Librarian
> Moorestown Library
>
>
>
>
> _______________________________________________
> Web4lib mailing list
> Web4lib at webjunction.org
> http://lists.webjunction.org/web4lib/
>
>