squemish

Author Topic: Browser looks different than DW page  (Read 2386 times)

shulamis

  • Guest
Browser looks different than DW page
« on: November 20, 2012, 10:17:53 pm »
Hi,

I noticed when I check a page I am developing in the Browser, it doesn't match the DW page. Why is this and how can I tell where to place my elements?

I am attaching 2 screenshots. I have noticed this before when working on different projects.

Thanks
Shulamis

erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: Browser looks different than DW page
« Reply #1 on: November 21, 2012, 05:53:51 am »
That's part of the joy of being a web designer.  :)

You should always test your page in different browsers to make sure it renders as you want it to. You should NEVER trust how it looks in Dreamweaver. Always test it in the major browsers: IE, Firefox, Chrome, Safari, etc.

Each browser (including Dreamweaver) has it's own set of rules on how a page should render. Most of them render pages fairly the same...the problem child is usually Internet Explorer.
Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu

shulamis

  • Guest
Re: Browser looks different than DW page
« Reply #2 on: November 21, 2012, 09:32:05 am »
Thanks

How do I make sure the page renders the same in all the browsers?

Also will using the absolute verses relative code make the look more cohesive in all the browsers?

Shulamis

erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: Browser looks different than DW page
« Reply #3 on: November 21, 2012, 02:56:09 pm »
Well, there isn't a single answer to that question unfortunately. The typical workflow for a designer is to write some HTML and CSS and then test it on different browsers. Make adjustments and repeat until it looks right in all of the browsers.

You have to be careful with how you use absolute positioning. Absolute positioning can make it very difficult to make your layout look the same across different sized monitors.  One common problem I see is when designers use absolute positioning to move elements around based on the monitor resolution they are using. As soon as the site is viewed in a different resolution, it can break the layout. Here is a pretty good discussion on the subject that includes arguments from both sides: http://stackoverflow.com/questions/186044/is-it-considered-bad-practice-to-use-absolute-positioning

Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu

shulamis

  • Guest
Re: Browser looks different than DW page
« Reply #4 on: November 21, 2012, 03:35:51 pm »
Thanks Erikk,

That discussion was helpful. The idea to make the container relative position and another container within that relative is excellent and just what I needed. I made my header relative and the style within the header absolute. Where I placed them in DW looked the same in IE.

Shulamis

erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: Browser looks different than DW page
« Reply #5 on: November 22, 2012, 06:43:12 am »
Awesome, glad to hear that helped you out!
Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu