Page looks different in Dreamweave than online...why?

This is a fairly basic question, but it's driving me nuts! When I look at my menu in dreamweaver, it looks like this:
But when it's live it looks normal, like this:
Does anyone know why that happens? I think it has something to do with the
position: relative
in the menu DIV tag but it's the only way I know how to position the menu where I want it.
Also, what is that black box off to the left side in the first screen shot? I can't find anything in my code that would create it. Here is the style sheet code (still a work in progress, please bear with me):
body {background: #e1eae6;
      background-image:url(_img/wave.jpg);
      padding: 0;
      margin: 0;
      margin-bottom: 100px;
      font-family: "Arial", sans-serif;
h1 { width: 198px;
height: 50px;
h2 {
    color: #afd1c1;
    font-size: 9px;
    font-family: "Arial", sans-serif;
    position: relative;
    bottom: -45px;
h3 {
    color: #7da391;
    font-size: 11px;
    font-family: "Arial", sans-serif;
    width: 600px;
    text-align: justify;
h4 {
    color: #074573;
    font-size: 11px;
    font-family: "Arial", sans-serif;
    text-align: justify;
    padding-bottom: 0px;
h5 {
    color: #7da391;
    font-size: 11px;
    font-family: "Arial", sans-serif;
    text-align: justify;
.stmnt {
    color: #074573;
    font-size: 11px;
    font-family: "Arial", sans-serif;
    width: 540px;
    text-align: justify;
.stmntheader {
    color: #074573;
    font-size: 11px;
    font-family: "Arial", sans-serif;
    width: 540px;
    text-align: justify;
.arrow {
    color: #074573;
.text {
    color: #7da391;
    font-size: 11px;
    font-family: "Arial", sans-serif;
    font-weight: bold;
a {
   color: #7da391;
   text-decoration: none;
   font-family: "Arial", sans-serif;
a.copy {
   color: #afd1c1;
   text-decoration: none;
   font-family: "Arial", sans-serif;
a:hover { color: #074573;
          text-decoration: none;
          font-family: "Arial", sans-serif;
a:active {
    text-decoration: none;
    color: #074573;
    font-family: "Arial", sans-serif;
/*CENTERING AND WIDTH - CONSISTENT ON ALL PAGES*/
#all {
    position: relative;
    top: 25px;
    margin: 0px auto;
    padding-top: 20px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
    width: 777px;
    background: #ffffff;
    border:none;
/* BEGIN NAVIGATION */
#menu li {position: relative;
          left: -38px;
          top: -10px;
          padding-right: 25px;
          list-style-type: none;
          display: inline;
          color: #7da391;
          font-family: "Arial", sans-serif;
          font-size: 13px;
/* END GLOBAL NAVIGATION */
and here is the HTML code for the menu portion of that particular page (all pages with the same menu behave this way though):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">

</script>
<title>Liz Lantz Photography | Sirens - Photographs of Women in Surfing </title>
<link href="../_main_test.css" rel="stylesheet" type="text/css"><script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-4396735-2']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
</head>
<body>

<div id="all">

<h1><a href="http://www.lizlantz.com"><img src="../_img/logo.jpg" border="0" alt="Liz Lantz Photography"/></a></h1>
<div id="menu">
<ul>
<li><a href="_menu.htm">PORTFOLIO</a>
<li><a href="../_info.htm">INFO</a> </li>
<li><a href="../_contact.htm">CONTACT</a> </li>
<li><a href="../_links.htm">LINKS</a> </li>
<li><a href="http://blog.lizlantz.com" target="_blank">BLOG</a></li>
</ul>
</div>


<table align="center" bgcolor="#ffffff" cellpadding="4" width="540">
<tr>
<td align="center"><a href="siren01.htm"><img src="thumbs/siren01.jpg" border="0" width="100" height="100" /></a></td>
<td align="center"><a href="siren02.htm"><img src="thumbs/siren02.jpg" border="0" width="100" height="100" /></a></td>
<td align="center"><a href="siren03.htm"><img src="thumbs/siren03.jpg" border="0" width="100" height="100" /></a></td>
<td align="center"><a href="siren04.htm"><img src="thumbs/siren04.jpg" border="0" width="100" height="100" /></a></td>
<td>
<div align="center"><a href="siren05.htm"><img src="thumbs/siren05.jpg" border="0" /></a></div>
</td>
</tr>
<tr>
<td>
<div align="center"><a href="siren06.htm"><img src="thumbs/siren06.jpg" border="0" /></a></div>
</td>
<td>
<div align="center"><a href="siren07.htm"><img src="thumbs/siren07.jpg" border="0" width="100" height="100" /></a></div>
</td>
<td>
<div align="center"><a href="siren08.htm"><img src="thumbs/siren08.jpg" border="0" /></a></div>
</td>
<td>
<div align="center"><a href="siren09.htm"><img src="thumbs/siren09.jpg" border="0" width="100" height="100" /></a></div>
</td>
<td>
<div align="center"><a href="siren10.htm"><img src="thumbs/siren10.jpg" border="0" width="100" height="100" /></a></div>
</td>
</tr>
<tr>
<td>
<div align="center"><a href="siren11.htm"><img src="thumbs/siren11.jpg" border="0" width="100" height="100" /></a></div>
</td>
<td>
<div align="center"><a href="siren12.htm"><img src="thumbs/siren12.jpg" border="0" width="100" height="100" /></a></div>
</td>
<td>
<div align="center"><a href="siren13.htm"><img src="thumbs/siren13.jpg" border="0" width="100" height="100" /></a></div>
</td>
<td>
<div align="center"><a href="siren14.htm"><img src="thumbs/siren14.jpg" border="0" width="100" height="100" /></a></div>
</td>
<td>
<div align="center"><a href="siren15.htm"><img src="thumbs/siren15.jpg" border="0" width="100" height="100" /></a></div>
</td>
</tr>
<tr>
<td>
<div align="center"><a href="siren20.htm"><img src="thumbs/siren20.jpg" border="0" width="100" height="100" /></a></div>
</td>
<td>
<div align="center"><a href="siren17.htm"><img src="thumbs/siren17.jpg" border="0" width="100" height="100" /></a></div>
</td>
<td>
<div align="center"><a href="siren21.htm"><img src="thumbs/siren21.jpg" border="0" width="100" height="100" /></a></div>
</td>
<td>
<div align="center"><a href="siren18.htm"><img src="thumbs/siren18.jpg" border="0" width="100" height="100" /></a></div>
</td>
<td>
<div align="center"><a href="siren25.htm"><img src="thumbs/siren25.jpg" border="0" width="100" height="100" /></a></div>
</td>
</tr>
<tr>
<td>
<div align="center"><a href="siren16.htm"><img src="thumbs/siren16.jpg" border="0" width="100" height="100" /></a></div>
</td>
<td>
<div align="center"><a href="siren27.htm"><img src="thumbs/siren27.jpg" border="0" width="100" height="100" /></a></div>
</td>
<td>
<div align="center"><a href="siren22.htm"><img src="thumbs/siren22.jpg" border="0" width="100" height="100" /></a></div>
</td>
<td>
<div align="center"><a href="siren26.htm"><img src="thumbs/siren26.jpg" border="0" width="100" height="100" /></a></div>
</td>
<td>
<div align="center"><a href="siren19.htm"><img src="thumbs/siren19.jpg" border="0" width="100" height="100" /></a></div>
</td>
</tr>
<tr>
<td>
<div align="center"><a href="siren23.htm"><img src="thumbs/siren23.jpg" border="0" width="100" height="100" /></a></div>
</td>
<td>
<div align="center"><a href="siren24.htm"><img src="thumbs/siren24.jpg" border="0" width="100" height="100" /></a></div>
</td>
<td>
<div align="center"></div>
</td>
<td>
<div align="center"></div>
</td>
<td>
<div align="center"></div>
</td>
</tr>
<tr>
<td colspan="5"><p class="stmnt" align="justify">SIRENS<br />
2007-Present<br />
San Diego County, CA<br>
<br>Work in progress - statement coming soon. Email me with comments and inquiries.</p>
</td>
</tr>
</table>
 
<h2>Site design & content © 2010 Liz Lantz<br /> Background pattern © 2010 <a href="http://laracameron.com/" target="_blank" class="copy">Lara Cameron</a></h2>
</div>
</body>
</html>

You are mixing in a lot of XHTML in an HTML doctype:
http://validator.w3.org/
Fix some of those errors to get yourself started.

Similar Messages

Page looks different in Dreamweaver than browser with no errors!

My url is uchargeproject.com and the site looks horrible in Dreamweaver, but fine in my browser. I have also checked for errors with http://validator.w3.org/ and my site has only one now but still it doesn't work! (also why does it say height is not an attribute?)

When I look at your page in DW's Design view with CS6 (10.8.3/Mac), it looks pretty much the same as it does in the browser.
The page is much too wide, though. If you are targeting a general demographic (i.e., not a specialty one) then your page should be about 980px wide - no wider (since 1024 is still pretty much a lowest common screen size).
Which version of DW are you using?

Why does the gmail page look different in windows than linux e.g. no stars available

gmail looks like a more "bare bones" page with no column to add stars. Also the boxes across the top: Archive, Report Spam, Delete, etc. do not work

See:
* http://kb.mozillazine.org/Website_colors_are_wrong
* http://kb.mozillazine.org/Websites_look_wrong

Team Blog: Why does my page look different in BrowserLab?

Duane O'Brien, engineer on the BrowserLab team has a new blog post on the BrowserLab Team blog that you might find interesting. It covers when/why you might see rendering differences between the BrowserLab browsers and your local browsers. Good info.
http://blogs.adobe.com/browserlab/2011/07/11/why-does-my-page-look-different-in-browserlab /
Bruce
Bruce Bowman
BrowserLab product manager
BrowserLab Team Blog: http://blogs.adobe.com/browserlab
Twitter: @brucebowman, @adobebrowserlab

As Wyodor indicated IE is not the most advance, up-to-date browser out there.
See Roddy’s tips for making iWeb pages more compatible with IE.
OT

Colors look different in titler than on timeline

Colors look different in titler than on timeline. Here's a screen grab. The upper image is the program monitor and the lower image is the titler. Both are on the same monitor.
I guess it's a bug and I will report it but I wonder if anyone else is seeing this.

What is your Premiere Monitor Playback Res set at?
What is the Preview Setting?
Jims advice is useless in this instance. He expects you to do an output file everytime you make a tweak in Titler or Sequence just to see what you might abitrarily be getting.

Layout Looks Different from Dreamweaver to Email?

I am currently using Adobe Dreamweaver CS5 to create emails for my work. Last month I started having an issue where the 3 columns I have in the template would look even in Dreamweaver, but when I sent a test email to myself they looked completely off. This past week I have encountered another issue where the cellpadding of the email looks different from Dreamweaver to email. I am new to HTML and coding so it could just be me, but is anyone having a similar problem and if so, is there a way to fix it?

Nancy-O posted this recently. You might find it helpful.
Martin
http://alt-web.com/Articles/HTML-Emails.shtml
Achieving consistent results across email clients is not as straightforward as it should be!

My firefox home page looks different from your tutorial

I am trying to learn to use firefox. Sometimes the firefox home page looks different from the one in your tutorial. Fox example, now I am looking above and the "plus sign" symbol to add a new tab is not there. Please advise me. Thank you.

You can find the New Tab button showing as a '+' on the Tab bar.
You can open the Customize window and drag the New Tab button that shows as a plus sign (+) from the Tab bar on another toolbar and it will become a regular toolbar button like the New Tab button that you have in Firefox 3 versions.
If you can't find the New Tab button then click the "Restore Default Set" button in the Customize window.
*http://kb.mozillazine.org/Corrupt_localstore.rdf
If you want the New Tab button at the far right end of the Tab bar then place a flexible space to the left of it.
* New tab toolbar button: https://addons.mozilla.org/firefox/addon/new-tab-toolbar-button/

My Firefox page does not look like yours...I do not hava a fox in the corner to click on,,,,the whole page looks different why?

I am trying to delete history and it says that I should click on the fox in the upper left corner? I have no fox and also, the whole page seems different than the one you show...why?

WinXP versions of Firefox don't have the Firefox button like with Windows Vista and WIn7, because with XP the default is to show the Menu Bar. The Firefox button appears when the Menu Bar is not being shown.
Right-click a blank spot on the Menu Bar ''(to the right of Help)'', and de-select Menu Bar by clicking on that contextual menu item.

Why do my Organizer & Editor pages look different from those in books and the brochure that came?

Why do my Organizer and Editor screens look different from the ones in books and in the brochure that came with installation cd?

Which version of the photoshop elements are you using.
You can get the help files of the latest version of photoshop elements 11 from the following link:
http://helpx.adobe.com/photoshop-elements.html
Thanks
Harshit yadav

Why does my lock screen settings page look different?

I just got my S4 mini and I am trying to set up lock screen widgets but according to all the tutorials, my options under Settings > Lock Screen looks different. I do not have the "Multiple Widgets" option. I DO have the "Favorite Apps or Camera" option that needs to be switched on or off, BUT it's grayed out! I just did the updates so that can't be it. What do I do??

The options are dependent/limited based on which lock screen you choose. For example, if you choose a lock screen of Swipe, you'll see a choice for the Multiple Widgets that you were originally asking about. If you choose a lock screen of Pattern or PIN, the Multiple Widget option (along with several others) isn't available with those particular lock screens.

Page looks different in IE and Firefox

I am creating web pages in Dreamweaver, with tables and
images,.but when preview, one page looks totally normal in IE, but
messed up in Firefox, another page looks nomal in firefox, but
messed up in IE. I checked all the assets in dreamweaver, they are
all right.
Could you please advise me how to change or where to change?
Thank you so much!
Esther

Go to that location, and paste your page's code into the
direct input tab.
Or give it a URL where it can find your page to validate it.
> I was wondering what might be the causes lead to
different looks in
> different
> browers (in one brower, pages messed up?in another
brower pages look
> normal),
> and what to do to fix them?
The point that we are trying hard to make, is that there is
no easy button.
The largest (by far) reason that a page would not look the
same in all
browsers would be the use of invalid HTML. That's why I
steered you to the
validator.
> I can send you some screenshot of the pages
A screenshot is of no use at all. Sorry. The answer is in the
code.
> I do not have link address for those pages yet.....
Without seeing your code, nobody can give you substantive
help.
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
==================
"EstherH" <[email protected]> wrote in
message
news:[email protected]...
> Hi Murray,
>
> The web pages I am creating is to show my homeworks and
projects for
> school.
> And right now, I am working on local site and I haven't
putting them
> online
> yet.
>
>
http://validator.w3.org/ showed
me: "Sorry! This document can not be
> checked."
>
> I was wondering what might be the causes lead to
different looks in
> different
> browers (in one brower, pages messed up?in another
brower pages look
> normal),
> and what to do to fix them?
>
> If it is useful, I can send you some screenshot of the
pages. Sorry that I
> do
> not have link address for those pages yet.....
>
> Thanks a lot for your patience and help!
>
> Esther
>
>
>
>
> -------
>
> The first thing to do is to make sure your page's
validate. Do they?
>
>
http://validator.w3.org
>
> --
> 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
> ==================
>
>
> "EstherH" <[email protected]> wrote in
message
> news:[email protected]...
> > Hi Murray,
> >
> > Could you please also advice me how to adjust or
modify in Dreamweaver
> > so
> > that my pages will look normal on all the browers
(IE, firefox,
> > Safari....)?
> >
> > Thanks a lot
> >
> > Esther
>
>
>
>
>

Print job looks different in html than it did in Flash preview

I have created a .swf that contains several movie clips. I have inserted a print button in each movie clip - and managed to get everything in working order on the Flash end of things. Then I inserted the .swf into a new HTML document in Dreamweaver. So far so good - but when I preview in the browser and hit the print button in one of the nested movie clips, the output looks different than it did when testing it in flash.
My main .swf has a dark blue background so I used a large white rectangle to act as the background of the movie clips so it would not waste a lot of ink. When I print from the browser, the background is blue and the large white rectangle I see in Flash does not appear.
This is the first time that what I insert in Dreamweaver doesn't match up with my Flash preview. Can anyone help?

I'm still not sure why it looked different when inserted into an HTML file. However, I went back into my flash file and changed the document background to white and added a blue rectangle instead of the blue background with a white rectangle in the movie clip for printing - this seems to have solved my problem.
Thanks to anyone thinking about my problem!

Photos look different in Photoshop than when viewed with Picture Viewer

I am running Windows XP, using Photoshop CS2, with a Samsung SyncMaster LCD monitor. I have recently noticed that my picures look different when viewing with Picture Viewer than when the same picture is opened in Photoshop. The photoshop version is much lighter while the pic viewer version is darker. I want to make sure of what I'm sending to my online printers. Do I have color setting wrong? My color setting in Photoshop are: sRGB IEC61966-2.1, U.S. Web Coated (SWOP) v2, Dot Gain 20%, and Dot Gain 20%. And preserved embedded profiles for RGB, CMYK, and Gray. Is the problem with calibrating my monitor, and if so, do you know of any free calibration software? I'm on a budget.
I appreciate any help. Thanks.

Well, it surely is a problem with your monitor settings, but, forgive me for saying this, mentioning "sending stuff to the printers" and then asking for free calibration software is a bit naive. If Adobe Gamma, the settings in PS itself and the color calibration in Windows don't cut it, then your system is seriously bent in terms of color and some other steps are required first.
a) reset your monitor to its default color temperature and brightness
b) get rid of any color tweaking your graphics card may introduce
With a clean slate, create a color reference image (pure colors, grayscale gradient) with all color calibration turned off and see how it looks at the system level and in PS. Now you can begin to adjust settings everywhere and re-enable color profiles until the results match in sRGB space.
The rest is pretty much unpredictable. Unless you gain access to the exact color profiles of the target device (the printer) and your monitor is properly hardware calibrated, there will always be minute variations. The only thing you can do is to solely rely on your visually aligned sRGB setup and have all color profile adjustments and color space conversions done at your printer. However, even that's assuming you do not wander too far off the default values and the sRGB is indeed "intact".
Mylenium

My Muse page looks different on Firefox and Chrome - both are the latest versions

On Firefox, my pre-loader wants to load each time it encounters an Edge Animate on my scroll page. Page anchors are slightly changed in Firefox and this messes up my scroll, opacity and Ege Animate triggers.
I'm not sure if this is relevant but I also receive this error message in my browser immediately after exporting to HTML - http://www.broadcastgems.com/mediastreamer5/Muse_js_Error.jpg
Here's my Muse Webpage - http://www.broadcastgems.com/MoGraphIntensity_ShapesText_PreLoad/
Lastly, I can't get my Form on the said page to work - on both Chrome and FIrefox. I can fill in the boxes but clicking 'Send' doesn't seem to do anything. Also, the text column for "Message" is ridiculously narrow - only 2-3 words long and I can't seem to change this. Visually it looks long but once I start typing it wordwraps after only 2-3 words. I'm using the built-in Form widget that comes with Muse.BTW, the form is right at the bottom of the page/URL I provided in the previous para - you can get there via the menu button, Inquiry.
Thanks for any assistance
- Roland

Hi Aish, here's the screen recording I made http://www.broadcastgems.com/mediastreamer5/Muse_Browser_Issue_Jan29_2014_01.zip
Notice how Firefox initiates the Muse pre-loader each time it reaches an Edge Animate object AND how the layout looks different when I use the menu buttons to access page anchors. Unfortunately, I forgot to record the form's Message Text Field, to show how narrow the column is. Any idea on how to fix/enlarge the column for this?
BTW, I just received a form submission that I made a while back - like half an hour ago.
Cheers
- Roland

Footer in Master page looks different in other pages

I've tried everything and need help pls. I just try to make a textbox in the footer of the master page. it should look like this:
Master Page:
But in every other Page the alignment changed, the footer changed and the textbox in the footer too. It looks like this:
This only happens, when I put the textbox in the footer of the master page. When there is no textbox, if have no problems with the alignment and every page looks like the master page.
I really don't know what i am doing wrong.
Info: The checkbox "Footer" of the textbox is on and i deactivated "sticky footer" in the properties. All pages are using the master page.

Hi Isabella,
Can you please upload the Muse file and share the link.
Regards,
Akshay

Page looks different in Dreamweave than online...why?

Similar Messages

Maybe you are looking for