Design View/Browser Compatibility

Is there any setting that changes the view in Dreamweaver 5 Mac to make the design view show up as it would (or close to as it would in) in IE? It appears to be similar to Safari. Currently, I'm only concerned about the webpage being aesthetically pleasing to IE users. Also are there any easy ways to make a webpage compatible with all major browsers (IE, Safari, Firefox, Chrome, Opera)? Here is the link to the homepage of the site. It looks fine in IE, but is crappy in Safari, Firefox, and Chrome. Any help is much appreciated.
Thanks, LD

Is there any setting that changes the view in Dreamweaver 5 Mac to make the design view show up as it would (or close to as it would in) in IE?
No. Design view is only a rough approximation of the layout - to be accurate, you will need to preview in your desired browser.
It appears to be similar to Safari.
It's not similar to any browser because it's not a browser, but Live view is a WebKit rendering (although the version of WebKit is not the latest), so it's pretty close to Safari.
Also are there any easy ways to make a webpage compatible with all major browsers (IE, Safari, Firefox, Chrome, Opera)? Here is the link to the homepage of the site.
The two best things you can to to optimize this are:
Make sure your code validates (http://validator.w3.org)
Make sure you are using best-practice methods (with a table-based layout like yours, that would mean not overusing merge and split - see this article: http://www.apptools.com/rants/spans.php). I'm guessing that this alone would improve the rendering of your page cross-browser.

Similar Messages

Design view dreamweaver compatibility

Importing project from Proto to Dreamweaver 5.5 through adobe cloud, CSS files can only edit in Code view, Design view button is dissabled. Can Design view be activated?

Marcfbcn wrote:
Importing project from Proto to Dreamweaver 5.5 through adobe cloud, CSS files can only edit in Code view, Design view button is dissabled. Can Design view be activated?
When you are editing a CSS file then it can only be done in code view because the file contains the styles to your markup. To see the design, you need to be in HTML files.
Hope this helps.

Design view and browser view in DW are different than when I view from local folder

I'm brand new to Dreamweaver CS5.5 and here is my problem:
I've made an html page in dreamweaver with a banner, with an additional graphic and some text on top of the banner. It displays just fine in every browser when I view from the local folder, but when I open DW and view, it displays incorrectly in all three design, live and browser views within DW. If I make changes to the css file until it views correctly in design view, it no longer displays correctly from the local folder and it still doesn't view correctly in live or browser view within DW. If what I'm doing isnt going to display accurately in any of the views provided by Dreamweaver as compared to the live server, whats the point in having this software? I could just keep building webpages in notepad and uploading with CoreFTP.
Any suggestions? Is it some setting that I dont know about that I need to change within DW? Please help.

align="center" is deprecated (obsolete) code in XHTML & HTML5 doc types. Instead of styling markup with HTML, you should be using CSS.
CSS
.center {text-align:center}
HTML
<p class="center">some centered text here</p>
With respect to break tags, in XHTML doc types the correct syntax is <br /> not <br>. However your usage of line breaks is inconsistent with good symantic markup. Use headings <h1> <h2> <h3> <h4> for important keywords. Use <p> for descriptive paragraphs. Use <ul> <li> or <ol> <li> for lists. Line breaks should be used minimally if ever.
XHTML doc types require all tags to be lowercase. Uppercase tags will throw errors.
Your design is too rigid. When text size is increased in browsers, your content is unreadable. See screenshot.
SOLUTIONS:
1) DO NOT USE POSITION ABSOLUTE. You don't need it. Absolute positioning removes content from the normal document flow resulting in a jumbled mess. Use default CSS positioning (none) with margins, padding & floats to align elements.
2) Remove HEIGHT values from all CSS containers. Height limits a container's capacity to hold more content when needed. Container height should always be determined by the amount of content it holds; not explicit values. If required to reveal a background image, for example, use CSS min-height instead of height.
CSS Box Model
http://www.w3schools.com/css/css_boxmodel.asp
CSS Floats
http://www.w3schools.com/cssref/pr_class_float.asp
CSS min-height
http://www.w3schools.com/cssref/pr_dim_min-height.asp
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

Font in Design View different from font in Live View and browser preview

My external style sheet has the body set for a sans-serif font and there is nothing to contradict it in the HTML documents. But while I get sans-serif in the Design View (as you would expect), I get a serif font in Live View and Browser Preview, not to mention on the Web itself.
How is this possible (and what should I do about it)?
--Paul

Murray and David: it worked! It is a rare and joyous experience to have a straightforward solution to the sorts of problems I come up with (including other realms). But I have to say that with HTML and CSS (and hence with Dreamweaver), solutions to difficulties have seemed within easier reach than in other parts of the computer world.
By the way, I wanted to choose "correct answer" for both your posts, but after making the first click it was no longer available for the remaining post--so I typed "helpful" even though that one was correct too.
Thanks again.
--Paul

Design View not matching Browser View

I mostly work in Design View and sometimes I notice there are extreme differences in what I am seeing in Design View and what I see when I preview the site with various browsers.
I now have a footer that I can't even see in design view but when I preview in a browser it's placed perfectly at the bottom of my main div. I later noticed that it's at the very top of the design view
out of view so that the very bottom of my footer div is barely showing on the very top of my design view window. Do I have code issues that are interfering? I am a complete newbie with code by the way.
My site is at: dev.soundscapemedia.com
Many thanks

Design view should never be considered accurate. It is Dreamweaver's rough guestimation of how things will look if rendered in a browser. The only "view" that may be considered accurate is the "Live" view - because it actually is rendered using a browser engine. Even with Live view though, one should always test against several major browsers.
So my suggestion/solution would be to ignore whatever crazy stuff Design view shows and just make sure you code to web standards and preview in a browser (or use Live view).
Remember: Design view is only a rough guestimate by Dreamweaver and should not be considered accurate.

Discrepancy between browser & design view; Hor. Rule Question

These are actually two issues, but I'm using one page as an example. I'm encountering this throughout other pages on the site.
Design view is absolutely killing me. I get the layout correct, but in brower view (this is both FF and IE) the margin space is not consistent at top and bottom and throws the design out of whack. Additionally, I love the look of horizontal rules, but there's a LOT of margin space around it. I'd like to reduce it. When I look in the code, I'm not seeing any errant p tags or line breaks.
Be advised the page I'm sending you is a child page from a template. I've set up one editable region. I've edited the padding / margin for the editable div on the template, which works well site-wide. There's also a little bit of padding in the CSS "body_text" that controls the formatting. It's cool site-wide as well.
I don't have this page linked yet, so it's not published. However, I've attached PDFs of the browser and design views, as well as the code as a word doc. The actual editable text region has been shaded gray so you don't have to wade through the template stuff.
Thanks.
W!

Often when you fix one code validation error, it takes care of several others.
Line 153 and 156 - take out the background="filename.html" attribute in your <td> tags
<td background="anniversaries.html"
<td background="firstfedonthemove.html"
Line 179 - change this
... Masters of Education Degree in Instructional Technology.</div>
to this
... Masters of Education Degree in Instructional Technology.</p> </div>
Republish the page and see if that helps.
Gotta run now. Maybe Murray can pick up from here.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics |
Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

Page showing up differently in design view then in web browser

I am working on creating a page that advertises two products
that we are selling. I have a table that shows up just how I want
it to in design view. As soon as I view it in live view or in a
browser it shows up differently. It is like table rows are being
invisibly inserted.
Does anyone have any advice on how to fix this?
Thanks

Here is the code for the page that I am working on:

Design view differs from browser view

When viewing in Design view my code correctly shows 2
overlapping rectangles. In browser view it shows two smaller
rectangles that do not overlap. I am using DW MX 2004. I have
attached small sample code.
Thanks,
Alexariel

DMX2004's Design view is not a browser, and can only
approximate (poorly)
how a page will look. The browser is always right. For
example, DMX2004 is
insensitive to the CSS error here -
div {width:250px; height:100;px; position:absolute; }
(note the ';' between '100' and 'px')
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Alexariel" <[email protected]> wrote in
message
news:gqh83o$kld$[email protected]..
> When viewing in Design view my code correctly shows 2
overlapping
> rectangles.
> In browser view it shows two smaller rectangles that do
not overlap. I am
> using
> DW MX 2004. I have attached small sample code.
> Thanks,
> Alexariel
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
> "
http://www.w3.org/TR/html4/loose.dtd">
> <html>
> <head>
> <title>Untitled Document</title>
> <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
> <style type="text/css">
> body {margin: 0px; padding: 0px;}
> div {width:250px; height:100;px; position:absolute; }
> div.one {background-color:#FF0000; left: 0px; top: 0px;
> div.two {background-color:#00FF00;left: 75px; top:
25px;}
> </style>
> </head>
> <body>
> <div class="one">one</div>
> <div class="two">two</div>
> </body>
> </html>
>

Font display in design view is wrong / browser displays it correctly

The links I place on my webstie pages display with the wrong (too large) font in design view but when the page is viewed in a browser, the links are displayed correctly. I have CSS entries in place that control link behavior and display and they work just fine in a browser but in design view, the link displays as a larger font than it should. I make all of the links bold. If I put a "class= " specification inside the <a> tag, then the size is right but if I then make the text bold, the size is once again displayed too large. If the text is not inside the <a> tag and it it's part of <p class="..." and I make it bold, it displays as bold and as specified by the class..
In other words
<p class="class1">text1
<strong><a href="reference">text2</a></strong>
</p
Tthe size of text2 is always too large in display mode but is correctly displayed in a browser.
Any ideas?
B. Berkov

Good point ... I inherited the code and CSS and changed a couple of 10pt to 12px so changing the CSS for links to 12px instead of 10pt will probably fix it. Still, I would have thought that design view would match what's seen in the browser regardless.
Thanks,
B. Berkov

Design view vs. browser view

Why does the design view (horizontal) change to a square when i look at the site in the browser preview and/or test mode?
I am using the default setting and have tried it numerous ways -- w/ gray browser fill, with an image as browser fill, etc.
I have looked at it on 4 different monitors. Any suggestions would be welcome!!

This is in accordance with the page height. In Muse, the page height is content dictated, so, you can set a minimum height for the page. The page will be atleast that height, but if there is a lot of content in the page, the page height will keep increasing so as to fit the contents. That said, in the design view, it shows you the page height and a view of the browser area too, but in the preview in browser mode, you can see the whole browser area. Now, if the minimum height of the page is defined as 500 px, and the amount of content fits well in it, then the rest of the space below that page dimension will be the browser area (with sticky footer disabled), but the design view doesn't show that whole thing. It shows the page area zoomed in, so that it's easy and comfortable to work on the page area (since that's where most of the work is done).
Here's what I see on my end for a test site (with Sticky Footer disabled):
Design Mode: http://take.ms/1t19r
Preview In Browser: http://take.ms/0Sxw1
As you can see, it's pretty much the same behavior that can be seen on your end.
Cheers
Parikshit

Javascript Navigator shows in Browser but not in DW Design View

I am trying to install a javascript navigator on a web page.
When I do this and view it in the design window, I get a message
that says "Your browser does not support script". When I try to
preview this with the IE browser, the navigation bar shows up. I am
new at this so what am I missing? It shows up in the browser but
not in the DW design page.
Thanks

>I am trying to install a javascript navigator on a web
page. When I do
>this
> and view it in the design window, I get a message that
says "Your browser
> does
> not support script". When I try to preview this with the
IE browser, the
> navigation bar shows up. I am new at this so what am I
missing? It shows
> up
> in the browser but not in the DW design page.
DW's design view does not interpret/execute javascript.
-Darrel

CS4 Design view does not render CSS correctly but browser does !?!?

I am designing a layout using primarily CSS. I want to insert a table inside one of the div's. In design view the table gets pushed way out of position but in live view and on the web, the page looks correct. Why? Am I missing something in design view?
Here is the actual page I am working on Sample Page
Here is what I see in design view Design View
This glitch is making it difficult to add content to the table.
I tried to edit the page with Contribute CS4 and the table gets pushed so far out of position that it is impossible to access it. The page looks fine when I am connected but as soon as I try to edit it does not render properly.

This question comes up almost daily, and I dont recall seeing an answer that is much different. It comes down to that it does not matter what DV shows, it is the browser view that counts. How frustrating it is to spend time and effort to correct a view in DW Design, only to find out it throws your browser view all askew. Its hard enough to make x number of different browsers all look good with however many screen resolutions, to worry about something that in the end does not matter.....
Work more in code view, let F12 be your companion.
Gary

Design View and Browser show different layout

I am having an issue with a site I am working on. The site
looks great in
the browser, but it doesn't look right in design view in
Dreamweaver. I
have posted 2 screenshots (they are around 140k apiece), they
are linked
below,
Dreamweaver -
http://www.swvtc.dmhmrsas.virginia.gov/dreamweaver/dreamweaver.jpg
Browser -
http://www.swvtc.dmhmrsas.virginia.gov/dreamweaver/browser.jpg
What would be causing this?
Thanks in Advance,
Drew

It could be a number of things, but until we see the code it
would only be,
at best, a guess. Please post the link to the page.
Jo
"Drew" <[email protected]> wrote in message
news:edn3u8$lc1$[email protected]..
>I am having an issue with a site I am working on. The
site looks great in
>the browser, but it doesn't look right in design view in
Dreamweaver. I
>have posted 2 screenshots (they are around 140k apiece),
they are linked
>below,
>
> Dreamweaver -
>
http://www.swvtc.dmhmrsas.virginia.gov/dreamweaver/dreamweaver.jpg
> Browser -
http://www.swvtc.dmhmrsas.virginia.gov/dreamweaver/browser.jpg
>
> What would be causing this?
>
> Thanks in Advance,
> Drew
>

Why doesn't my CSS render in design view or browser view?

Suddenly my CSS won't render in design or browser views. I have checked View>Style Rendering>Display styles and there's a checkmark beside it. Is there any other reason(s) why this would have suddenly stopped working?? Help please! Thanks! I am using DW CS5

#1 Ensure that the path to your external stylesheet is correctly pointing to the CSS file in your local site folder.
#2 Validate your code & fix reported errors.
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

My Spry Menu bar is different in design view and when I preview in Browser.

When in design view my Spry Meny Bar is horizontal like I chose. But when I preview it in browser it appears as just type verically down the side of the screen. With no boxes around it. Please help.

Did you define a local site folder in DW before you began your project?
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
A link is the very best way to get help here.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

Design View/Browser Compatibility

Similar Messages

Maybe you are looking for