> The page is at:
> http://www.washingtonwaterfrontvacationrentals.com/index-b-test.htm , and renders
> properly in IE 6, but in the other browsers, the content shifts to the left.
Any time your design renders one way in IE and another in all other
browsers, you can be pretty certain that IE is wrong and the others are
right. This is the case with your page. IE is incorrectly allowing the
#container div to serve as the reference point for your absolutely
positioned divs, when in actuality you have done nothing to make it so.
To do so, add position: relative; to #container.
You also need to center #container in the window. The text-align: center
does not center the #container div because a div is not text. If you
want to center a block element, not text and other inline content, set
its left and right margins equal to each other. So add margin: 0 auto;
Finally, remove the background from the body and add it to #container.
This ensures that even if the window is smaller than 740px, the full
background still shows and your text shows up over the pieces of the
background you expect it to.
A rule of thumb that CSS developers follow is to get your pages looking
right in Firefox/Opera/Safari first, then worry about IE. This is
because it is much easier to adjust and hack a broken browser than it is
to emulate IE's weird bugs in good browsers. You'll spend much less time
building your pages if you build for FF first, checking IE periodically
along the way and adjusting things as necessary.
> Since this is my first site done completely with CSS, (and I love the way it works!)
> there is probably a bunch of stuff in the style sheet that I don't need, but I'll
> weed that out as time goes on.
This can be dangerous. Because styles inherit and cascade, there can be
several rules affecting a single element that you may not be aware of.
If you remove rules that really are affecting something, you'll have a
mess on your hands. It's much better to keep your style sheet as clean
as possible as you go along. Also, commenting your style sheets as you
go along gives you clues later as to why you added certain rules or
declarations and if it is safe to remove them.
One other piece of advice: avoid absolute positioning for creating
layouts. It can lead to overlapped divs and lots of mess. Floats are
usually used instead. I don't think you need to redo your current site,
but keep this in mind for your next design.
Welcome to the list, and to CSS!
> Any help is greatly appreciated!
> Email: [EMAIL-REMOVED]
> Phone: 360-275-9433
> Fax: 360-275-9433
> Website: http://www.picturethis4u.com/
> Keep your business at the world's fingertips 365 days of the year!
> css-discuss [EMAIL-REMOVED]]
> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/