Question about CSS

[Bob in PA]

Hi,

I just started learning CSS, and am having a problem getting some
spacing to work. I have a header image 700px X 100px and have several small
images underneath of it. My goal is to have those images seamlessly line up
with the header image, and managed to do it with the {position: absolute}
tag. But the problem is, it doesn't resize right in Mozilla.
So I got rid of the absolute part and replaced it with relative,
adjusted the px amounts and it all worked in IE6. I checked Mozilla, and
there was a 5 pixel gap between the header and games images. I adjusted the
px amounts again, and this time ended up with something that looked good in
Mozilla, but squeezed the images together in IE6. Is it something that I'm
doing wrong? Or is it just something that browsers don't like?


Lines up right in IE6, but shows a 5 pixel gap in Mozilla


<STYLE TYPE="text/css">
<!--

.header { position: absolute;
left: 10px; top: 10px }

.games { position: relative;
left: 112px; top: 5px; }

other images, etc


Lines up right in Mozilla, but the games image is a 5 pixels under the
header image

<STYLE TYPE="text/css">
<!--

.header { position: absolute;
left: 10px; top: 10px }

.games { position: relative;
left: 112px; top: 0px; }

other images, etc


Thanks for your help,

Bob

 

[Toby A Inkster]

So I got rid of the absolute part and replaced it with relative,
adjusted the px amounts and it all worked in IE6. I checked Mozilla, and
there was a 5 pixel gap between the header and games images.

Get rid of all the positioning and just use margins and floating.

 

[Bob in PA]

Get rid of all the positioning and just use margins and floating.

Ok, thanks

 

[Bob in PA]

I got rid of the positioning and used the margins and float, but now the
problem is when I maximize the window, everything shifts to the right of the
screen. This is the code I used:

<STYLE TYPE="text/css">
<!--

.header { Float: left;
margin-left: 10px;
margin-top: 10px }

.games { float: left;
margin-left: 65px;
margin-top: 0px }

.pictures { float: left;
margin-left: 0px;
margin-top: 0px }

 

[Mark Parnell]

I got rid of the positioning and used the margins and float, but now the
problem is when I maximize the window, everything shifts to the right of the
screen.

Wrap it all in a <div> with margin: auto;.

E.g.:

<div id="foo">
<!-- Banner and other images etc here -->
</div>

In your stylesheet:

div#foo {margin: auto;}

 

[Derek Clarkson]

Hmmm, tricky question. The problem is that all browser do things slightly
differently when it comes to CSS. Personally I would use absolute for this
because relative cannot be trusted for posititioning. From looking at your
code I would suspect that in pure CSS terms, Mozilla is doing it correctly.
You specify 0px above your graphic and thats what it does. You might try
looking at various margin and padding settings. I seem to remember
something about IE having a 5 pixel margin by default. This might be what
is happening. The first graphic is positioned absolutely regardless of the
margins. The second, being relative, is positioned within them because you
haven't specified otherwise - just a thought.

I don't have much access to IE so I can't test this out right now, but it's
a theory ;-)

cio
Derek.

 

[Toby A Inkster]

I got rid of the positioning and used the margins and float, but now the
problem is when I maximize the window, everything shifts to the right of the
screen.

You probably want a few "clear:left;" properties too.