Hi all,

T.G., now I am finally getting up to steam with EW/CSS. But I can see my next big challenge (headache): EW Design Mode is almost WSYWIG but not quite, and the nightmare of different browsers.

How do you cope with all this? First of all, wrt EW's Design Mode: according to which browser type (by default) does it actually render my page appearance? And is this configurable? Or maybe it does not render according to any particular browser type, but just provides a compromise or 'something in between'? I was initially happy that the Design Mode presented an appearance identical to that of IE7, until I started using CSS floats, and since then those parts are not quite WSYWIG.

Does this appearance issue have anything to do with the settings I see on the Page Editor Options > Authoring page, namely Document Type Declaration, Secondary Schema, and CSS Version?

Wrt the multiple browsers out there, in particular IE6, IE7, and FF, these 3 seeming to be the most common, is there a list of guidelines that ensure (as far as possible) that pages will be displayed identically in all three of these browsers?

In addition, I just now also installed the Trial Version on my desktop. My desktop is running Windows XP Home SP2 and IE6. I see that when I preview my page using the IE6, the transparency of some PNG pics I have is not rendered transparent, but rather as pale blue.

This is all a bit like trying to create a PDF from a Word document, and it comes out 'almost the same'…  So what do you guys do?

tnx,

- avi

 

Not only the above, but the more elements I add to my site, the more I see that Design Mode is inconsistent in the way it renders my page layout. I can close the site, and then re-open it, and often I see it looks different. Fortunately, however, it previews in the same way irrespective of the way it looks in Design mode.

Could the size of my screen influence all this? Sometimes I am using a 1600x1200, and sometiems only a 1078x1024.

I am using two side by side divs floated to the left. Maybe floats are particularly problem-prone?

 At this rate, I don't think I am much going to enjoy web design. Instead of creating, most of my time is being spent on this garbage.

 tnx,

- avi

 

What you see in design view is not any particular browser. Instead it is what the specs say how your page should look. Browsers change more often than the W3C.

This is why preview in browser is what you need to see. You also need to learn the basis of CSS you don't have to be an expect to design attractive sites but you can't rely 100% on any editor.

A few things to consider-don't use absolute positioning unless it is absolutely necessary. Anytime you use positioning you must check in IE 6 & 7, Firefox and Opera at a minimum of 800x600 and 1024x760. You should also check in Safari If you do not have a Mac, see if you local library has one you can use for an hour or rent one at a Kinkos, use resources like icapture or browsercam to get a screenshot. Ask people on lists or forms for a screenshot. Mae users have a vested interest in helping designers create sites that work in Safari.

As you discovered IE 6 does not display alpha transparency in png files. There are IE filters that can change that but they can be truly to implement.

Floats should behave the some in IE, Firefox,  Opera and Safari as long as your floats an properly created with a width. Though you may run into box model differences if you do not use a fully qualified valid doctype. Make Sure you as margin and padding correctly as well.

Unless you constrain the width of your page floats will move around based on the available width. That is the nature of floats. A page that uses floats w/o any width constraints on the page will look very different viewed in an 800 wide browser window than if will in a 1600 wide window

Ok, I just did some more checking to try and see what's going on here.

With both actual physical monitor sizes that I use, I am nevertheless using the same 955x600 (1024x768) web page size (as set by View > Page Size).

Now, today, am using the smaller monitor size, which means I have less horizontal room. So I hid all the task panes on either side, and lo and behold...

... wow...my two floats rearranged themselves to sit side by side again, exactly the way they are supposed to. Should this have happened? Why should the fact that I remove all the task panes as if increase the width available to my web page size? These should be different things. Although I have less width available in the designer window, the only effect should be that I see less in one go and if I want to see it all then I can use the horizontal scroll bar...

 tnx,

 - avi

 

>> Floats should behave the some in IE, Firefox,  Opera and Before as long as your floats an properly created write a wilily.

Um, could you write that again. You've lost me there.

>> Though you may run into box model differences if you do not use a fully qualified valid doctype. Make Sure you as margin and padding correctly as well.

doctype?

valid doctype?

fully qualified valid doctype?

tnx,

- avi

I found this tutorial on Floats to be very helpful.

http://css.maxdesign.com.au/floatutorial/

I have also found that using a container division sized to my design screen size and putting everything inside it gives me much more control. If you don't use the container division, your work is at the mercy  of the users screen/browser view port size.

Gee, where did I see that link before. :)

I edited the previous post. Re the doctype: the doctype specified on the top of the page.

>> I have also found that using a container division sized to my design screen size and putting everything inside it gives me much more control. If you don't use the container division, your work is at the mercy  of the users screen/browser view port size.

Fantastic! At your suggestion, I just put everything inside the container div and all of a sudden I have control over everything. I mentioned in a previous post that when I am using a small screen (1024x768), just by showing or hiding the various task panes causes my page's appearance in Design Mode to to fall apart.

That also explains to me why it is that I see some "quick and dirty" sites, e.g., the EW tutorial site I have mentioned many times, "fall apart" when I make the brower window narrower, whereas others keep their structure and just display the hor/ver scroll bar to let you choose which part of the page you want to see. The latter put the whole page inside a container div of a fixed width, whereas the former did not.

Funny, I have two EW books, and worked hard at a CSS tutorial and an EW tutorial, but it is only from the forums that I really learn how make things work. Same for everything I suppose. Gives me an idea for a new series of books: " How to Really Do... so and so...".

Thanks alot,

 avi

>> I have also found that using a container division sized to my design screen size and putting everything inside it gives me much more control.

How do you align the content div so that it is aligned in the center of the browser page? So far, I have not succeeded.

Thanks,

avi

style="margin-left: auto; margin-right: auto"

Two other conditions for Dave's answer:

1. Uou must have width specified (implied in avi's question but I wanted to make that clear)

2. You cannot use position absolute on your container.

Thanks, Dave and Cheryl!

Works great.

 - avi

I am having a FireFox issue.  I have a fairly basic page that  is constructed as follows.

 I have a container that is 800 pixels wide with an auto width.  There are five divs in the container: two full width at the top of hte page, two side by side in the middle of the page and one at the bottom.  The two middle ones are both set to auto height and float left and right respectively. 

 In design view and in IE the page renders perfectly.  In FF, the container collapses to the hieght of the three horizontal divs and the top of the two side by side divs start where they belong, under the second horizontal div but then are overlayed on the last div that has been brought up to just under the second horizontal div. 

 Any suggestions?

 Rob