Website site looks fine in Dreamweaver but...

So I am creating my own website for the first time and after a bunch of problems, I've ran into one I am unsure of how to fix.
ngkevin-art.com/about.html
This is how it looks like in Dreamweaver and how I want it to look:
http://i.imgur.com/wlOIR.jpg
But when I go into Live View, or see it online, it falls apart. Any help would be appreciated.
CSS:
@charset "utf-8";
/* CSS Document */
/* General HTML Tag Rules */
body {
          width:auto;
          height:auto;
          background-image:url(images/bg_demo2.png);
          background-color:#2d2d2d;
          background-repeat:no-repeat;
          background-position:center;
          margin-top:30px;
@font-face {
    font-family: Harabara;
    src: url(Harabara.ttf);
    font-weight:200;
h1 {
          font-family: Harabara, Helvetica, Arial, sans-serif;
          font-size:150%;
          color:#CECEBC;
h2 {
          font-family: Harabara, Helvetica, Arial, sans-serif;
          font-size:100%;
          color:#CECEBC;
.text {
          margin-left:75px;
          width:auto;
          float:left;
#text2 {
          width:408px;
          text-align:center;
.text3 {
          margin-left:25px;
          width:auto;
          float:left;
#container {
          width:1280px;
          height:960px;
          margin-left:auto;
          margin-right:auto;
#wrapContact {
          width: 520px;
          height: 100px;
          margin-left:735px;
          margin-top: 10px;
          clear: both;
#linked {
          float:left;
          margin-top:35px;
          width: 175px;
#facebook {
          float:left;
          width: 200px;
          margin-left:32px;
          margin-top:25px;
#email {
          float:left;
          width:75px;
          margin-left:35px;
          margin-top:20px;
#wrapNav {
          width: 475px;
          margin-left:750px;
          margin-top:60px;
#demo {
          width: 500px;
          text-align:center;
          margin-top: 70px;
          margin-left:auto;
          margin-right:auto;
#flatbook {
          width:250px;
          margin-left:auto;
          margin-right:auto;
          margin-top:20px;
#wrapAbout {
          margin-left:auto;
          margin-right:auto;
          margin-top:75px;
          width: 1100px;
          height:auto;
#picture {
          width:408px;
          margin-top:100px;
          float:left;
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kevin Ng Art Portfolio</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8">
</script>
<link rel="stylesheet" type="text/css" href="default3.css"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.smooth-scroll.min.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link href="lightbox.css" rel="stylesheet" />
</head>
<body>
<div id="container">
                    <div id="wrapContact">
                  <div id="linked">
                <a href="http://www.linkedin.com/pub/kevin-ng/25/558/75b">
                <img src="images/logo_linked_large.png" width="auto" height="auto" border="0" alt="linkedin_logo" /> </a>
            </div>
            <div id="facebook">
                <a href="http://www.facebook.com/profile.php?id=1309131548">
                <img src="images/logo_fb_large.png" width="auto" height="auto" border="0" alt="facebook_logo" /> </a>
            </div>
                              <div id="email">
                      <a href="mailto: [email protected]">
                <img src="images/gmail.png" width="auto" height="auto" border="0" alt="email_icon" /> </a>
            </div>
                    </div> 
              <div id="wrapNav">
            <a href="index.html">
                            <img src="images/bg_tab_main.png" width="auto" height="auto" border="0" alt="Main" /> </a>
            <a href="demo.html">
                            <img src="images/bg_tab_demo.png" width="auto" height="auto" border="0" alt="Demo" /> </a>
            <a href="about.html">
                            <img src="images/bg_tab_about.png" width="auto" height="auto" border="0" alt="About" /> </a>
        </div>
              
        <div id="wrapAbout">
                              <div id="picture">
                      <img src="images/picture.jpg" width="auto" height="auto" alt="picture" />
                <div id="text2">
                    <h2> Me in the middle left, my buddies, Jordan Gabriel on the left and Edmund Zhu on the right,
                        and finally, Epic Games VIP, Cliff Bleszinski! Taken at GDC 2010. </h2>
                </div>
            </div>
            <div class="text">
                <h1> Resume: <br/>
                <br/> Email: <br/> <br/>
                <br/> About Me:</h1>
                                 </div>
            <div class="text3">
                        <h1> <a href="resume/Kevin Ng Resume2.doc"> Click Here </a>
                        <br/> <br/> <a href="[email protected]"> [email protected] </a> <br/>
                <br/> <br/> <font size="4">
                          My desire to be in the game development industry is to work with other individuals that take pride in creating a game,
                          something that can be enjoyed by a multitude of people. There is nothing I would like better than to lend my talents and
                    artistic skills for that purpose. <br/> <br/>
                    I believe the key to creating memorable game art, whether it be characters or environments, is the story.
                    Just like reading a good book or watching a thrilling movie, I loved to be immersed in the world of the game. As a result,
                    I had an affinity to Role-Playing Games. Classic games of my generation such as Chrono Trigger, Final Fantasy, and Zelda
                    showed me a world of endless imagination. <br/> <br/>
                    The characters which are the focal point of the story, their goals and motivations, their trials and tribulations,
                    their victories and defeats... These are the things I think about constantly when I look at them.
                    A character without depth doesn't exist, but if they do, I can only imagine how boring that would be.
                </font></h1>
            </div>
                      </div>
          </div>
</body>
</html>

Hi there, and welcome to the forums!
Could you please provide a screenshot of the website when it is previewed in a browser/live view? This way I can better understand the conflicts that are occuring in your code.
It is always a good practice when coding a website to preview it in the browser as you code, to make sure there are no conflicts. It's important to remember that in the end, your viewers will be viewing your site in a browser, not in Dreamweaver's preview. : )

Similar Messages

Dreamweaver text looks fine in Safari but not Firefox NEED HELP!!!

Dreamweaver text looks fine in Safari but not Firefox, all my text goes out of alignment and the fonts look like different sizes. Please let me know your thoughts. Here is a link to the page I'm having problems with. http://www.alexandrasantibanez.com/bio.html

I had the same problem for days what a waste of time trying
to figure out code... the code was fine. I was running flash player
7.0 Upgrade your flash plugin to 9.0 and it should work fine in
Firefox and IE. It did for me.

I made an iMovie, 6.0.3 using music from iTunes and photos from the Internet. It looked fine on iMovie, but when I uploaded it to youtube,some of the photo near the beginning was corrupted.What steps should I take to export iMovie for youtube?

I made an iMovie, 6.0.3 using music from iTunes and photos from the Internet. It looked fine on iMovie, but when I uploaded it to youtube, some of the photo near the beginning were corrupted on youtube. I tried a different photo, and the corruption took place at the same moment of the video. How do I prepare the video for export to get it ready for youtube? I wasn't sure whether to clik web or web streaming. Am I supposed to clik Quick Time after I clik Share?

I unfortunately cannot remember where I got the 'trrndlines' plugin... I assume that it must have been from CFX (as it is located under /Users/Dom/Library/iMovie/Plug-ins/cfx/XXXtrrndlines.bundle).
As for what it does, I also do not know, as I do not think I ever used it in my previous video projects.
At this stage, I think I just need to uninstall it so that iMovie doesnt try to use it.
Do you know how to uninstall a CFX plugin in iMovie?
NOTE: I have re-installed iMovie 6.0.4 (instead of iMovie 6.0.3), but still encounter the same issue.

PDF looks fine on screen but text does not print

PDF created from Word looks fine on screen but text does not print (graphics do). Alos loses text on FTP or Email. Windows 8.1 64bit. Acrobat XI Std. Word2013. Print to PDF from Word 600dpi, use doc fonts, download as softfont. Arial, calibrai - all fonts lost. Same issue as Phillipio61 and alacker2?.

Problem not with all fonts. Problem with arial and calibri fonts - maybe others. Times New Roman, gil sans, viner are OK for example.

Dreamweaver site looks fine in IE and Safari but not Firefox

I am fairly new to web desgin so I am hoping someout there can give me a hint as to why my site looks poorly or doesn't load on Firefox. It loos fine in Internet Explorer and Safari.
- PC system
- Windows xp professional
- CS4
Here is the website: www.biggiantsale.com
Thanks for your help!
Sarah

Looks like a mess of repeated background images to me.
To use a non-repeating background image, put the following CSS code between the
<style type="text/css"> and </style> tags in your HTML page.
body {
width: 1000px; /**choose your own page width in px**/
margin:0 auto;/**this centers page in modern browsers**/
text-align: center; /**this centers page in old browsers**/
background: red url(Images/Home-Page.png) no-repeat top middle;
Then remove the Home-Page.png background from your table.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

PHP page looks fine by itself, but CSS Divs fall apart on PHP include

Hi everyone. Thanks for your help in advance, this problem I'm having really has me puzzled.
The issue I'm having is, I have two php files. body.php with content to be included and index-3.php as the container. When I load body.php by itself in the browser, the layout looks fine. When I load the index-3.php file that uses the php include function to load body.php through itself, some of the divs in the body.php file come apart.
I'm old hat at building pages with tables and Iframes, but very new at using divs and php.
Here are the two files, so you can see for yourselves:
http://www.hitn.tv/index-3.php (the container)
http://www.hitn.tv/body.php (the included)
Is this a CSS issue, or a php issue?
The index:
The Body:
                                                                                                                            Content on this page requires a newer version of Adobe Flash Player.
    Temas de interés para la
comunidad hispana Hoy
debatiremos un interesante
asunto que afecta a nuestra
comunidad
7/27 - Venezuela en la mira
por   tráfico de drogas
    7/27 - Venezuela en la mira
    por   tráfico de drogas
      7/27 - Venezuela en la mira
      por   tráfico de drogas
        7/27 - Venezuela en la mira
        por   tráfico de drogas
          7/27 - Venezuela en la mira
          por   tráfico de drogas
            7/27 - Venezuela en la mira
            por   tráfico de drogas
The Stylesheet:
@charset "utf-8"; body { background-image: url(images/background.jpg); background-attachment: fixed; background-color: #FFE2BA; background-repeat: repeat-x; text-align: center; } .containerdiv { width: 953px; margin-left: auto; margin-right: auto; } .boxtext { font-size: 11px; color: #000; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-style: normal; line-height: normal; text-align: center; } .rightside { width:762px; height:584px; float: left; overflow: hidden; } .sidebar { } .lowerbar { } #mainsitedivcontainer { width: 762px; } .latestvideos { width: 699px; height: 61px; margin-bottom: 5px; margin-top: 0px; margin-right: 0px; margin-left: 0px; } #leftbookend { float: left; } #rightbookend { float: right; width: 31px; height: 142px; } #videobox { float: left; width: 550px; } #mainsitevideotextblock { float: right; width: 212px; } #mainsitevideotextblock { background-color: #F4F4F4; height: 420px; } .videothumbnaildivframe { height: 61px; width: 82px; overflow: hidden; float: left; } .videotextboxdescription { height: 61px; width: 151px; overflow: hidden; float: right; background-color: #FFF; border-top-width: 0px; border-right-width: 3px; border-bottom-width: 0px; border-left-width: 3px; border-top-style: none; border-right-style: solid; border-bottom-style: none; border-left-style: solid; border-right-color: #D4D4D4; border-left-color: #D4D4D4; text-align: center; } .picdivleft { float: left; height: 61px; width: 233px; } .picdivright { float: right; height: 61px; width: 151px; } .picthenvid { height: 61px; width: 233px; } .centerboxdiv { width: 233px; height: 61px; float: left; } #doubemenucontainer { height: 122px; width: 699px; float: left; } #middlebar { height: 15px; width: 762px; clear: left; } .boxtext { font-size: 11px; color: #000; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-style: normal; line-height: normal; } #finalvideowrap { height: 142px; width: 762px; background-color: #D4D4D4; overflow: hidden; }
Any help at all is much appreciated!
Thanks so much,
Evan

Hi there, and welcome to the forums!
Could you please provide a screenshot of the website when it is previewed in a browser/live view? This way I can better understand the conflicts that are occuring in your code.
It is always a good practice when coding a website to preview it in the browser as you code, to make sure there are no conflicts. It's important to remember that in the end, your viewers will be viewing your site in a browser, not in Dreamweaver's preview. : )

TS3946 Aperture Book: images look fine in Aperture but not in PDF preview. OS 10.9, Aperture 3.4.5

Aperture 3.4.5, OS 10.9. When making a PDF prior to ordering a book, I note that images look fine within Aperture book module, but about 10 out of 100 images look terrible in the PDF. Shall I ignore this and go ahead and order the book?

Hi,
Strangely I'm now having exactly the same problem all of a sudden. I've been building the book for about a month now (I've made about 6 before without any trouble) and along the way have been producing a pdf of the book to see how it will look. Yesterday I noticed some of the images seemed to have lost colour when looking at the pdf version and then today, many pictures all of a sudden look exactly like the example you've supplied above.
I've tried shutting down my imac and restarting thinking it was a memory issue, have checked if I had any filters activated (which I don't and I haven't used filters in books before either), have tried repairing then rebuilding aperture, copying the book to a new library, new location, opening on a different mac and then printing again but none of this had any positive effect.
So from what I understand from your last post, the workaround you came up with was to revert to the original of each image that had the problem and then make the adjustments again?

Why do photos look fine on camera, but too dark on iphoto? Have to edit almost every indoor shot to lighten

Why do my photos look fine on the digital, but too dark on iphoto? I have to edit almost every indoor picture to lighten. camera is new. have ilife. iphoto is crowded-could that be problem?

No - iPhoto probbably is not crowded (it workd up to 250,000 photos) and even if it is that has no effect on the screen display
what color profile are you using? What calibration is your screen set to?
LN

Page looks fine in browser, but layout completely messed up in DW

I created a 2 column page in DW and it looks fine in my
browser, even at different resolutions and text sizes. However,
whenever I look at it in DW, the right column drops under the left
column. It basically looks like a mess, and the person who will be
adding content will freak out. How can I fix this?

Never mind. I fixed it.

Dreamweaver Images look fine in view but messed up in BROWSER !!!

Hello Guys
I have been getting this weird messed up images since i started my project.
This is giving me a headache so i thought this is best place to solve my problme.
I'm not pro website designer just newbie.
HELP ME !!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website Discovery Mongolia</title>
<style type="text/css">
#Question {
          position: absolute;
          width: 189px;
          height: 23px;
          z-index: 3;
          left: 1100px;
          top: 30px;
          margin: auto;
#Container {
          position: relative;
          width: 1366px;
          height: 2532px;
          z-index: 1;
          margin: auto;
          background-color: #A22239;
#Destinations {
          position: absolute;
          width: 162px;
          height: 23px;
          z-index: 2;
          left: 35px;
          top: 310px;
#AboutDis {
          position: absolute;
          width: 288px;
          height: 24px;
          z-index: 2;
          top: 310px;
          left: 1045px;
#Activities {
          position: absolute;
          width: 338px;
          height: 28px;
          z-index: 2;
          left: 35px;
          top: 640px;
#LateAvail {
          position: absolute;
          width: 210px;
          height: 28px;
          z-index: 2;
          top: 640px;
          left: 1060px;
#LatestNews {
          position: absolute;
          width: 161px;
          height: 28px;
          z-index: 2;
          left: 35px;
          top: 980px;
#DisMongCom {
          position: absolute;
          width: 403px;
          height: 28px;
          z-index: 2;
          top: 979px;
          left: 328px;
          padding: 0px;
#PopTrips {
          position: absolute;
          width: 200px;
          height: 28px;
          z-index: 2;
          top: 980px;
          left: 1060px;
          padding: 0px;
#Read1 {
          position: absolute;
          width: 104px;
          height: 23px;
          z-index: 2;
          left: 35px;
          top: 734px;
#R1 {
          position: absolute;
          width: 110px;
          height: 25px;
          z-index: 2;
          left: 35px;
          top: 1135px;
#Read2 {
          position: absolute;
          width: 110px;
          height: 1px;
          z-index: 3;
          left: 35px;
          top: 1290px;
#Read3 {
          position: absolute;
          width: 110px;
          height: 25px;
          z-index: 2;
          top: 1440px;
          left: 35px;
#Video {
          position: absolute;
          width: 95px;
          height: 22px;
          z-index: 2;
          padding-left: 2px;
          top: 1135px;
          left: 325px;
#Pictures {
          position: absolute;
          width: 133px;
          height: 23px;
          z-index: 3;
          left: 328px;
          top: 1280px;
#Follow {
          position: absolute;
          width: 136px;
          height: 24px;
          z-index: 2;
          left: 329px;
          top: 1440px;
#Copytight {
          position: absolute;
          width: 200px;
          height: 58px;
          z-index: 2;
          top: 2260px;
          left: 410px;
#ViewTripButton1 {
          position: absolute;
          width: 160px;
          height: 40px;
          z-index: 2;
          top: 1405px;
          left: 1170px;
#ViewTrip2 {
          position: absolute;
          width: 160px;
          height: 40px;
          z-index: 3;
          left: 1170px;
          top: 1570px;
#ViewTrip3 {
          position: absolute;
          width: 160px;
          height: 40px;
          z-index: 2;
          left: 1170px;
          top: 1230px;
#BannerPhoto1 {
          position: absolute;
          width: 1015px;
          height: 180px;
          z-index: 2;
          top: 108px;
          left: 15px;
#SpryMenu {
          position: absolute;
          width: 1100px;
          height: 20px;
          z-index: 2;
          left: -1px;
          top: -25px;
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body bgcolor="#A22239">
<div id="Container">
<div id="BannerPhoto1">
    <div id="SpryMenu">
      <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="Indexpage.html">HOME    </a>    </li>
    <li><a href="#">TOURS</a></li>
    <li><a href="#">TRANSPORT</a>    </li>
    <li><a href="#">ABOUT MONGOLIA</a></li>
    <li><a href="#">TRAVEL GUIDE</a></li>
    <li><a href="#">CONTACT</a></li>
</ul>
</div>
    
    <script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
    <div class="dwuserEasyRotator" style="width: 1015px; height: 180px; position:relative; text-align: left;" data-erconfig="{autoplayEnabled:true, lpp:'102-105-108-101-58-47-47-47-67-58-47-85-115-101-114-115-47-66-105-108-107-97-83-109- 105-108-101-47-77-117-115-105-99-47-68-111-99-117-109-101-110-116-115-47-69-97-115-121-82- 111-116-97-116-111-114-80-114-101-118-105-101-119-47-112-114-101-118-105-101-119-95-115-11 9-102-115-47', wv:1}" data-ername="Roator" data-ertid="{pankqfmdhc4588799372931}">
      <div data-ertype="content" style="display: none;">
        <ul data-erlabel="Main Category">
          <li> <img class="main" src="New Images/BannerSlidePhotos/Photo3.jpg" /> <img class="thumb" src="New Images/BannerSlidePhotos/Photo3.jpg" /> </li>
          <li> <img class="main" src="New Images/BannerSlidePhotos/Photo2.jpg" /> <img class="thumb" src="New Images/BannerSlidePhotos/Photo2.jpg" /> </li>
          <li> <img class="main" src="New Images/BannerSlidePhotos/Photo1.jpg" /> <img class="thumb" src="New Images/BannerSlidePhotos/Photo1.jpg" /> </li>
        </ul>
      </div>
      <div data-ertype="layout" data-ertemplatename="NONE" style="">
        <div class="erimgMain" style="position: absolute; left:0;right:0;top:0;bottom:0;" data-erconfig="{__numTiles:3, scaleMode:'scaleDown', imgType:'main', __loopNextButton:false, __arrowButtonMode:'rollover'}">
          <div class="erimgMain_slides" style="position: absolute; left:0; top:0; bottom:0; right:0;">
            <div class="erimgMain_slide">
              <div class="erimgMain_img" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div>
            </div>
          </div>
          <div class="erimgMain_arrowLeft" style="position:absolute; left: 10px; top: 50%; margin-top: -15px;" data-erconfig="{image:'circleSmall', image2:'circleSmall'}"></div>
          <div class="erimgMain_arrowRight" style="position:absolute; right: 10px; top: 50%; margin-top: -15px;" data-erconfig="{image:'circleSmall', image2:'circleSmall'}"></div>
        </div>
        <div class="erabout erFixCSS3" style="color: #FFF; text-align: left; background: #000; background:rgba(0,0,0,0.93); border: 2px solid #FFF; padding: 20px; font: normal 11px/14px Verdana,_sans; width: 300px; border-radius: 10px; display:none;"> This <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">jQuery slider</a> was created with the free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">EasyRotator</a> software from DWUser.com. <br />
          <br />
          Use WordPress? The free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">EasyRotator for WordPress</a> plugin lets you create beautiful <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">WordPress sliders</a> in seconds. <br />
          <br />
          <a style="color:#FFF;" href="#" class="erabout_ok">OK</a> </div>
        <noscript>
          Rotator powered by <a href="http://www.dwuser.com/easyrotator/">EasyRotator</a>, a free and easy jQuery slider builder from DWUser.com. Please enable JavaScript to view.
        </noscript>
        <script type="text/javascript">/*Avoid IE gzip bug*/(function(b,c,d){try{if(!b[d]){b[d]="temp";var a=c.createElement("script");a.type="text/javascript";a.src="http://easyrotator.s3.amazonaws.com/1/js/nozip/easy_rotator.min.js";c.getElementsByTagName("head")[0].appendChild(a)}}catch(e){alert("EasyRotator fail; contact support.")}})(window,document,"er_$144");</script>
      </div>
    
</div>
<img src="New Images/MainBackgroundImages/Top.jpg" width="1030" height="287" /><img src="New Images/MainBackgroundImages/Form.jpg" width="336" height="287" />
<div id="Question"><img src="New Images/Buttons and Text/newdesign_03.jpg" width="189" height="23" /></div>
<img src="New Images/MainBackgroundImages/_03.jpg" width="1019" height="331" />
<div id="Destinations"><a href="Indexpage.html"><img src="New Images/Buttons and Text/newdesign_10.jpg" width="162" height="23" /></a></div><img src="New Images/MainBackgroundImages/About-Discovery-Mongolia.jpg" width="347" height="331" /><div id="AboutDis"><a href="www.wikipedia.com"><img src="New Images/Buttons and Text/newdesign_07.jpg" width="288" height="24" /></a></div><div id="Activities"><a href="www.google.com"><img src="New Images/Buttons and Text/newdesign_14.jpg" width="338" height="28" /></a></div>
<img src="New Images/MainBackgroundImages/Activities-and-Experiences.jpg" width="1019" height="342" /><img src="New Images/MainBackgroundImages/_06.jpg" width="347" height="342" />
<div id="LateAvail"><a href="www.quirky.com"><img src="New Images/Buttons and Text/newdesign_08.jpg" width="210" height="28" /></a></div>
<div id="LatestNews"><a href="www.google.com"><img src="New Images/Buttons and Text/newdesign_17.jpg" width="161" height="28" /></a></div><div id="DisMongCom"><a href="www.yahoo.com"><img src="New Images/Buttons and Text/newdesign_19.jpg" width="403" height="28" /></a></div><div id="PopTrips"><a href="www.exodus.co.uk"><img src="New Images/Buttons and Text/newdesign_21.jpg" width="169" height="28" /></a></div>
<img src="New Images/MainBackgroundImages/Contern2.jpg" width="297" height="669" /><div id="Read3"><a href="Indexpage.html"><img src="New Images/Buttons and Text/newdesign_27.jpg" width="110" height="25" /></a></div><div id="R1"><a href="Indexpage.html"><img src="New Images/Buttons and Text/newdesign_27.jpg" width="110" height="25" /></a></div><div id="Read2"><a href="Indexpage.html"><img src="New Images/Buttons and Text/newdesign_27.jpg" width="110" height="25" /></a></div><img src="New Images/MainBackgroundImages/Content1.jpg" width="722" height="669" /><div id="Follow"><img src="New Images/Buttons and Text/Bullet.jpg" width="30" height="21" /><a href="Indexpage.html"><img src="New Images/Buttons and Text/newdesign_43.jpg" width="103" height="20" /></a></div><div id="Pictures"><img src="New Images/Buttons and Text/Bullet.jpg" width="30" height="21" /><a href="Indexpage.html"><img src="New Images/Buttons and Text/newdesign_36.jpg" width="103" height="19" /></a></div><div id="Video"><img src="New Images/Buttons and Text/Bullet.jpg" width="30" height="21" /><a href="Indexpage.html"><img src="New Images/Buttons and Text/newdesign_30.jpg" width="63" height="22" /></a></div><div id="ViewTrip3"><a href="Indexpage.html"><img src="New Images/Buttons and Text/ViewTrip.jpg" width="160" height="40" /></a></div><div id="ViewTripButton1"><a href="Indexpage.html"><img src="New Images/Buttons and Text/ViewTrip.jpg" width="160" height="40" /></a></div><div id="ViewTrip2"><a href="Indexpage.html"><img src="New Images/Buttons and Text/ViewTrip.jpg" width="160" height="40" /></a></div>
<img src="New Images/MainBackgroundImages/Content3.jpg" width="347" height="669" /><img src="New Images/MainBackgroundImages/Footer.jpg" width="1366" height="398" /><div id="Copytight"><img src="New Images/Buttons and Text/Copyright_03.jpg" width="536" height="58" /></div><img src="New Images/MainBackgroundImages/Copyright-and-Privacy.jpg" width="1366" height="515" /></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

I'm having trouble with my graphics, too, not your trouble though.
As Murray above says,
absolute positioning is wrong! Don't do that. Browsers keep objects with absolute positioning on the coordinates you set, no matter what monitor size is viewing it and no matter how the rest of the page flows.
I took off absolute positioning and it made an immediate difference - code below. The graphics are now inside their containers.
go here to see what I did: http://mkcolling.com/morionadobe.html
go here to see what you did: http://mkcolling.com/BADmorionadobe.html
Two other things I noticed:
1) Remove the height on your containers, too. Instead, use padding to add blank space around the content inside your containers and use margin to add the outside space that separates the containers.
2)Your spry menu is wider than your outer container. You would fix that on the Spry css.

Images look fine in Bridge, but way off when opened in Photoshop

Not sure what I've done to my system, but am now having some color-management woes. I am using Photoshop and Bridge CS5.1, and for some reason, the color-management is not consistent between Bridge and PS... although it used to be until just recently. I am on a Mac Pro tower with a properly calibrated monitor (using an Eye One Pro), and all my other color-managed applications are behaving just fine, but I have this discrepancy now within Adobe where if I view an image in Bridge, it looks correct, but when I open that same image in Photoshop, it comes up way too light and desaturated. I have verified that a correct profile is embeded in each image, but this happens regardless of the source file. I have opened up grayscale images with a dot gain or gamma profile embedded, images with no profile embedded, sRGB and Adobe 1998 profiled images, and they all open up too bright. It seems like some kind of conversion must be happening, but I can't understand what that would be. Color Settings is set to preserve embedded and ask when opening for mismatches, but that's the same as it's always been on my system. I understand without a "suite" install, I cannot access the Creative Suite Color Settings dialog to sync color across multiple Adobe apps, but things have been fine for years between my PS & Bridge, so clearly I've done something wrong. It's also worth noting that RAW images in Bridge open up looking identical in the Photoshop RAW processing dialog, so somehow this is more related to TIFF, PSD & JPEG files.
I have used the Cocktail app for general system maintenance on my Mac, and in the dialog to delete old cahce files, I do recall it had an option to clear Color Sync cache (along with a bunch of other caches), so maybe that "clean up" somehow dirsupted my color matching abilities?
I was on CS5 when I noticed this problem, so I tried uninstalling that, downloading the slightly newer CS5.1 and re-installing, but the problem persists. Maybe the uninstaller app doesn't get rid of all the hidden support files, or maybe this is something else entirely? Have trashed prefs files and relaunched, still same problem.
Note how image on right is much lighter, shadows start to look posterized, colors lose saturation. Left is Bridge and Right is Photoshop. Screenshot done on calibrated monitor.
Thanks for any suggestions!

Thanks for your reply. Screenshot of my Color Settings attached. These are the same settings I've been using for many years.
What's most interesting is your reminder to look at Soft Proofing. I normally only use that when prepping an image for print, and want to predict what different paper types will "do" to my image.,, i.e. matte paper has less d-max, etc. SO, My assumption was that Soft Proofing is normally in the OFF position unless I turn it on, and/or toggle it on-off with Cmd-Y keyboard shortcut one engaged. BUT, your assessment was spot-on, in that when I opened up the View > Proof Colors dialog, it was set to Working CMYK. Not sure why, how, or when that became the default.
In all my time years with Photoshop, I've never needed to worry about soft proofing being ON without my permission, so I'm unclear how this came about. I honestly don't even know what the default has been for all the time that this was not on my radar as being a problem, I only know that when I did opt to soft proof an image, I woulp open the Proof Colors dialog, choose the appropriate device-specific paper profile to simulate, and then turn it back off when done. It would make sense to me that the default display in PS should match the (hopefully calibrated) monitor as a starting point.
Several more screenshots below, experimenting with various Proof conditions. This one is a 16-bit Grayscale image, with my usual 1.8 Gray Gamma color space embedded. This was my first experiment, not knowing what the correct default should have been (or was for many years). My assumption was that proofing the same color space as the document (G 1.8 = G 1.8), there should be no visible difference, but in fact there is. The left image is open in PS being soft proofed to it's own G 1.8 color space, and it appears visibly brighter than the same image to the right in Bridge.
Now here's the same comparison, with Proofing set to G 2.2, which should be wrong, but visually looks like a much better match.
Next I tried a color image, with Document Profile as the proof condition. Again, the Bridge image on the right looks correct, the PS image on the left looks washed out by comparison.
Here is the same image comparison, now with Monitor RGB enabled (which pulls my current monitor profile as the device to simuulate). I'd say this is either perfect, or a much better match. This also makes sense and correlates to my suspicion that PS should be showing you things in your native monitor profile until you ask it to do otherwise with a custom soft-proofing scenario.
So now that I think I've figured it out, I leave the Monitor RGB as the device to simulate, close the image, and re-open the image just to be sure, and this is what I get...
Essentially back to the same problem. I verified that View > Proof Colors is still set to my Monitor RGB, but it's as if it's not really being applied. SO, I changed it so something else, and then changed it back, and then it looks correct... as if I somehow need to kick it and remind it to do what it's already set to do.
So, the short answer is THANK YOU for reminding me to look at the proofing setup, becasue no I at least have a kind of workaround and know where to look. The tricker part is to understand why the default doesn't really stick to the Monitor RGB (if that is even the correct place for it to stay set to), and how or why did i get off into Working CMYK in the first place, as that's not a setting I've ever used on purpose.
Thanks again,
Eric

My site looks ok in IE but not in FF - I have validated my code

Hello
my site is www.pondviewtech.com
I have validated all of my pages of my site at validator.w3.org. I had errors and fixed them and now they all pass. My site still does not display properly in FF. I looked through my code and I can not find anything that sticks out. I read that % are not good to be used in the code for firefox but I do not have any of those. I searched for a FF code validator but all I could find were add-ons.
I attached my index.html file. I didn't create the site so if it is a total mees it will not hurt my feelings if you say so.
I am new to this so any direction would be helpful.
Thank you very much for any help
Larry C

It is a bit of a mess in there. Your floats are getting tangled up. I'd like to see you have contentLeft2 and contentRight2 both floated left. Make contentLeft2's markup come BEFORE contentRight2's content. Perhaps something like this?
<div id="contentLeft2" style="float:left;width:300px;clear:both;margin-right:10px;">
        <p class="style24">ACS can help your firm...</p>
... snip...
        <p class="style46 style51 style54"> </p>
      </div>
      <div id="contentRight2" style="width:460px;float:left;">
But it still doesn't look right in CS4's Design view, and it should. Hmmm....

Lyrics look fine on iTunes, but funny on iPod. Please help

So I've been taking the time to put lyrics to my songs in iTunes. It's fulfilling, but tedious all at the same time. Anyway, I'm having an issue with the way the lyrics appear on the iPod (its a 5G Video, by the way). Here's an example. In iTunes, the lyrics appear like this:
"Brother will kill brother
Spilling blood across the land
Killing for religion
Something I don't understand
Fools like me, who cross the sea
And come to foreign lands
Ask the sheep, for their beliefs
Do you kill on God's command?"
However, on the iPod itself, the lyrics appear continuously like so:
"Brother will kill brother Spilling blood across the land Killing for religion Something I don't understand Fools like me, who cross the sea And come to foreign lands Ask the sheep, for their beliefs Do you kill on God's command?"
I am somewhat OCD, and this issue is absolutely driving me crazy. I've searched Google and these forums (they're a bit difficult to navigate) and I've found nothing on this specific topic. Sorry if I've missed it. But if anyone has any answers, can you please send them my way.
Thanks for your time,
Chris

Phil, thanks for the input. I originally used a lyrics importer program to get the lyrics, so I'm not sure the exactly how it decided to format the imported lyrics. As you mentioned, I went to manually edit the lyrics of the songs. I went to the end of each verse, hit delete twice to get rid of one empty space and then pull the next verse up, and then hit return immediately afterwards to put the next verse back where it should normally go. After I synced the iPod, it came up normally as it should.
Thanks so much for the advice. This has been driving me nuts for a while now. It seems I have some work to do . Happy Holidays.
Take care,
Chris

HTML doc not attaching to style sheet but looks fine in DW. Problem

Hello once more,
I posted this problem the other day but it was mistaken for something else, this was my fault as I posted incorrectly.
The current problem with this page, is that it looks fine in Dreamweaver, but as soon as it is viewed in any browser, even firefox, it loses all of the style commands. The problem is with the text on the page, the menu seems to be behaving fine and I cannot comment on whether it is interfering with the page in a manner which causes the text to not find the styles.
Here is a screenshot of how the page should be appearing:
http://postimage.org/image/wp16tgqid/
Here is the page live on the internet:
Page
Here is an except of one of the styles:
.readingtextborder9{
    width:471px;
    height:173px;
    background:url(../images/reading%20border9.png);
    margin-top: 20px;
    margin-left: 36px;
    margin-right: 10px;
    margin-bottom: 5 px;
    text-align:justify;
    padding-left: 180px;
    padding-top: 10px;
    padding-right: 13px;
The page did work fine up until a point which I cannot distinguish, but at one point the menu was working together with the page, correctly. Hence why I find it hard to believe the menu is causing the problems.
Any help would be hugely appreciated.
Thank you

Validate code and fix reported errors.
You have a messed up Meta tag on line 26 and an extra </div> tag on line 208.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.entasistours.com%2Freading.ht ml
On lines 4-11, you have this style inside comments. Why?

On line 11 you have this which doesn't do anything. Remove it.
<style type="text/css"></style>
On lines 33-47, you have these styles.
<style type="text/css">
.style1 {font-size: 12px}
a:link {
color: #666666; }
a:hover {
color: #333333; }
.style2 {
font-size: 12px;
color: #666666; }
.style3 {color: #666666}
.style4 {font-size:12px; font-weight: normal; line-height:1; font-family: verdana; padding-top: 2px; margin-top: 5px; text-align:center; width: 100%;}
a:visited {
color: #333333; }
</style>
And even more styles on lines 58-71, also inside comments, why?
<style type="text/css">

</style>
Organize your code better.
Use meaningful .class names instead of style1, style2, style37, style42 which don't tell you what the style is being used for.
Put CSS code into your external style sheet. This will make problem solving and site management much easier.
Nancy O.

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?

Website site looks fine in Dreamweaver but...

Similar Messages

Maybe you are looking for