Previous Message
Next Message

IE 5 Positioning ok, but to left in FF, NN, & Opera

Sent by Zoe M. Gillenwater on 31 March 2006 21:09


Helen wrote:
> 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.
>   

Hi Helen,

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; 
to #container.

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!

Zoe

> Any help is greatly appreciated!
>
> Thanks,
> Helen
>
> 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]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> 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
http://www.hsrc.unc.edu


______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
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/
Previous Message
Next Message

Message thread: