Dreamweaver CS4 check tutorial Magazine - browser issue

Hi all, I am fairly new to web design (coming from a graphic design background) and I'm going through the (Super) tutorials for Adobe Dreamweaver. I recently finished the 'Check Magazine' tutorial but have two slightly different results when I view the site in Safari/Firefox, it's probably something really obvious so apologies in advance for my craziness! Please can someone help? I have attached a screenshot of them being viewed in Safari/Firefox, also copied the code/CSS below.

Thank you in advance!

Lee

safari screenshot.pngfirefox screenshot.png

< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 > check < /title > Magazine

< link href = "check_magazine.css" rel = "stylesheet" type = "text/css" / > "

< script src = "SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script > "

< link href = "SpryAssets/SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" / > "

< / head >

< body >

< div id = "container" >

< div id = "banner" >

< ul id = "check_menu" class = "MenuBarHorizontal" >

< li > < a href = "news.html" > features < /a > < /li >

< li > < a href = "news.html" > mode < /a > < /li > ""

< li > < a href = "news.html" > lifestyle < /a > < /li >

< li > < a href = "news.html" > calendar < /a > < /li > ""

< li > < a href = "news.html" > News < /a > < /li > ""

< /ul >

< / div >

< div id = 'main_image' >

< div id = "main_text" >

KEYWORDS < h3 > < / h3 >

< h4 > obstacles in the intimate circle of Mark S. < / h4 >

< p > the star of the Double identity, who prefers to install a skylight at the scene, about work on one of the most difficult film shoots in history and family, as well as the starlet who doesn't do a very good job hiding in her bathroom. < /p >

< / div >

< / div >

< div id = "left_column" >

< p > < img src = "images/car.jpg" width = "316" height = "130" alt = "Car" / > < / p > "

Inside Tesla Motors® < h3 > < br / >

< / h3 >

< p > the company that made the first sports car performance, respectful of the environment opened its factory, share some of their secrets and puts the vehicle to the ultimate test: put two enemies jurors the same two-seater. < br / >

< a href = "news.html" > learn more < /a > < /p >

< / div >

< div id = "column_container" >

< div id = "right_column" >

< p > < img src = "images/helmet.jpg" width = "316" height = "130" alt = "Headset" / > < / p > "

Improvement of < h3 > today < br / >

< / h3 >

< p > if you want some advice on how to throw together a killer outfit, dinner for two, or a killer punch, we're here for you cover. < br / >

< a href = "news.html" > learn more < /a > < /p >

< / div >

< div id = "center_column" >

< p > < img src = "images/data_addict.jpg" width = "316" height = "130" alt = "Data" / > < / p > "

Facts and figures of < h3 > < br / >

< / h3 >

< p > how push would be a Jet engine need to obtain the entire city of London to the ground? We leave that to the lesser spirits. But if you want to talk about Kierkegaard, you've come to the right place. < br / >

< a href = "news.html" > learn more < /a > < /p >

< / div >

< / div >

< / div >

< script type = "text/javascript" >

<!--

var MenuBar1 = new Spry.Widget.MenuBar ("check_menu", {imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});})

->

< /script >

< / body >

< / html >

CSS...

@charset "utf-8";

{body

are-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

are-size: 1em;

color: #000;

}

#container {}

Width: 968px;

background: #FFFFFF;

margin: 0 auto;

padding-left: 10px;

padding-right: 10px;

overflow: hidden;

}

#banner {}

background-image: url(images/banner.gif);

height: 25px;

width: 563px;

padding-top: 75px;

padding-left: 405px;

}

{#main_image}

background-image: url(images/main.jpg);

height: 231px;

width: 383px;

padding-top: 145px;

padding-left: 585px;

}

{#main_text}

background-color: #FFF;

width: 300px;

line-height: 120%

are-family: 'Myriad Pro', Helvetica, Arial, sans-serif;

padding: 12px;

}

#main_text h3 {}

are-size: 120%;

color: #00b4e1;

auto margin: 0;

margin-bottom: 10px;

}

#main_text h4 {}

are-size: 100%;

auto margin: 0 ;}

#main_text p {}

are-size: 90%;

auto margin: 0;

}

{#left_column}

float: left;

width: 316px;

}

{#column_container}

float: left;

width: 652px;

}

{#right_column}

float: right;

width: 316px;

}

{#center_column}

width: 316px;

margin-left: 10px;

}

Hi all, I am relatively new to web design (coming from a graphic design background)

If you allow me, I would like to give you some advice.  Based on the people I've seen come and go through this forum since I arrived here with DW2 (NOT CS2), I must say that people of demographic data are generally those who struggle the most with DW.  I think it's because they have difficulty with the notion that the web is NOT a printed page, which means that things can flex size width/height and the same text after you have created the page.  I think it is also because they are so accustomed to using a "drag and drop" approach layout design that they extrapolate approaching (or try) in DW.  I can tell you categorically that being stuck in these two modes will drive you nuts in DW.  I invite you to bite the bullet and learn some HTML and CSS.  You will probably find without this basic understanding, totally mysterious DW.

Now - your screenshots illustrate my first point.  Your Firefox is configured to display text in a larger default size than Safari.  The container for this text extends vertically accordingly, and this text box becomes greater.  You can't stop that from happening - the user has always the option to change their browser to display text larger or smaller as you expected.  The key is that all of your page layouts must be built to accommodate this kind of unexpected text size change.

A good place to start your familiarity with HTML and CSS by ramp is here - http://www.w3schools.com!

Good luck...

Tags: Dreamweaver

Similar Questions

  • Dreamweaver CS4 Portable border issue

    Hello

    , I am working on a site and have a small table on a page that is styled with CSS. Whatever I can't do black stripper borders to each individual cell. There seems to be no border to the table, just each cell. The page can be found here:http://www.colinbowling.com/monster_banners/contact.html>. I use Dreamweaver CS4.

    Can anyone on me any advice for what to do?

    Cheer

    Colin.

    First of all, I highly recommend you read up on CSS.  I have the impression that you have downloaded a template from somewhere and do not understand how to edit.

    http://www.w3schools.com/CSS/

    The table is id is table2 by code:

    For now, all you have in your code is:

    {#table_2}

    border: thin solid #000;

    border-collapse: collapse;

    make-weight: bold;

    text-align: center;

    do-size: 14px;

    }

    Simply apply a style to the cells as table2:

    #table_2 td {border: thin solid #000000 ;}}

  • Issue installing Dreamweaver Cs4 on Windows 7

    grettings to everyone:

    After I have sucessfully Dreamweaver CS4 in Windows 7, when I try to open it the message of missconfiguration by-side. I went to the log viewer and general information for her:
    Quote:
    Activation context generation failed for "C:\Program Files\Adobe\Adobe Extension Manager CS4\Adobe Extension Manager CS4.exe". Assembly Microsoft.VC80.MFC, processorArchitecture = "x 86" publicKeyToken = "1fc8b3b9a1e18e3b", type ="wi n32', version = '8.0.50608.0' was not found." Please use sxstrace.exe for detailed diagnosis.
  • Problems of Dreamweaver CS4 on Windows 7

    Recently got a new computer running Windows 7 Home Premium 64-bit, I reinstalled Dreamweaver CS4 32 bit and copied all the files data for my sites on my old computer running Windows XP Professional. The data on the XP machine files were located in Documents and Settings / My Documents/Web site on the Windows 7 machine I put the site in Documents / My Documents/Web site.

    When I open Dreamweaver on the Windows 7 machine and use Site Manager to add the site to the repository and try to view the site in Firefox or Internet Explorer preview will load the page however no style sheet information load only the Javascript for my Gallery work. I checked the source references and it of the same on the Windows 7 machine and the XP machine. Thinking it was just a matter of a broken link source (even if the images in the Gallery appear correctly in Dreamweaver) I added images from the source to the gallery in Dreamweaver on Windows 7 computer. When I went to the preview of the browser once more the Gallery did not work.

    I also noticed that the options and sometimes signs disappear and reappear not until the program is closed and then reopened.

    Is there a compatibility issue with Dreamweaver CS4 32-bit and 64-bit Windows 7 which would cause this kind of problem?

    Have you set up your site in DW on new computer - Site > new Site?

    Nancy O.

  • I upgraded from Dreamweaver CS4 to CS6. but now "a Technical error occurred - cannot connect to the host. I spent hours with the technician of the host and we can't find the error. I reinstalled DW4 and it connects to accommodate perfectly. Anyone else se

    I upgraded from Dreamweaver CS4 to CS6. but now when I want to download, I "MFP error - cannot establish a connection to the host. I spent hours with the technician of the host and we can't find the error. I reinstalled DW4 and it connects to accommodate perfectly. Anyone else seen this problem?

    Mac OS 10.8.5

    DW6 error code.png
    None of these issues are causing the error in DW CS6. We double-checked all of them and we did everything right. Also I have exactly the same SiteSetup in DW CS4 and that works perfectly well. Might need to factor 6 which did not exist in the 4? Something that is not in the SiteSetup but in a hidden dialog box?

    I can also download my host using Fetch, a third party FTP. And like I said that DW CS4 works very well. So the problem is not with my host, sound with DW CS6 in particular.

    You are most likely missing something fairly simple (some goofy box cache you in some menus random). The best way to solve this problem, without playing 20 questions...

    1 open the site in DWCS4 and go to Site > Manage Sites > export to create a your site settings .ste file.

    2. close DWCS4 and open DWCS6

    3. go to the Site > Manage Sites > Import to import the .ste file to create a new site at DWCS6

    This will create an exact copy of your CS4 settings in CS6. If it still does not work, let know us and someone should have another idea for you.

  • Problems with Dreamweaver CS4, and Internet Explorer 8?

    I'm on iMac with a site Dreamweaver CS4 that most browsers recognize and show, except the new Internet Explorer 8.

    It loads the index page, but all it shows is "FINISHED" or a blank page.

    Is anyoone knows why this is? As a Mac user, I can't Internet Explorer 8, and when I check "compatibility of Internet browser, all the he shaows, it's a single line has"expanded boxes""

    It's a battle of Microsoft/Mac?

    Please provide a lik on the site.

    There is no way we can comment without one.

  • Dreamweaver CS4 and IE 5.2 for Mac problem

    I'm testing my new/first site.  I use Dreamweaver CS4. Horizontal Spry menu bar works very well in Internet Explorer and Safari, but not in Microsoft Internet Explorer 5.2 for Mac 5.2.3 (5815.1). The menu bar horizontal becomes vertical and the submenus are not available. I ran to each Web page and my CSS files browser compatibility tests and they don't come back "no problems found". What can I do to fix the problem?  I have a PC (Vista) and use my neighbor's Mac to check the browser. Thank you.

    Don't worry if your site doesn't work at all in Internet Explorer for Mac.  It's outdated software that has not been developed since Jaguar/Panther.  In no way reflects IE on Windows, and statistics show the majority of Mac users use Safari or Firefox with Camino and opera in behind them.

  • Problems using frames in Dreamweaver Cs4

    I use Dreamweaver cs4 and am trying to create a new web site. Using 3 images on my page. Try to have a B & W photo as background for 1 frame and pictures of children of color in another frame. Looks great in the browser Viewer, but once downloaded, frames with photos are blank or display only text and no pictures are displayed. In addition, none of the fonts that I have chosen for the test in one of the frames appear. Only fonts for all basic text. Any help would be greatly appreciated.

    Frames?

    Executives have not been used for more than ten years. Use DIV tags

    Why not show us your code. It is often the best way to help.

  • Number of reg does not not for dreamweaver cs4

    I used Dreamweaver CS4 on old PC Vista for years. Bought laptop Win10, deactivate CS4 on old PC, load CS4 on the new laptop computer and he returns the number invalid reg. I am able to reactivate the CS4 on old PC. All the ideas!

    Hi Daved65972939,

    Creative suite Adobe CS 4 is a very old software and the operating system you are using is the most recent, so there may be compatibility issues that adobe has not tested these applications on newer operating systems.

    However, you can try downloading & installing the installer for Adobe creative suite 4 CS from following link:

    Download Adobe Creative Suite 4 products

    Compare the size of the file downloaded with the display on the Web page.

    Please be sure to select the language as Universal English as when I saw your Adobe ID (email address) you used to post here, I found that you have a Dreamweaver CS 4 to WIN what EU language recorded thereon.

    See also,

    Error: "serial number is not valid for this product". Adobe Creative Suite

    Error: "this serial number is not for a product calling it" | Adobe Creative Suite

    Let us know if that helps.

  • ADOBE DREAMWEAVER CS4 is compatible with WINDOWS 7?

    Hello

    I need to know if ADOBE DREAMWEAVER CS4, is compatible with WINDOWS 7

    Thanks in advance

    Best regards

    Hello Christina,

    Dreamweaver CS4 installed directly in x 86 mode and works perfectly. There is a source of error after installation: Please check that "resource.dll" has NOT disappeared.

    Hans-Günter

    P. S.

    For various reasons, I still use the older versions.

  • Dreamweaver CS4 access ASP VBScript - Serverwechsel keine Datenbankanbindung durch

    Seit vielen Jahren am ich an einer application mit Dreamweaver in der Version CS4, und einer Microsoft Access data base. Die Servertechnologie ist ASP mit als script language VBScript.

    Nun official mir mein bisheriger provider a dass mein appearance auf einem veralteten Webserver so welcher die Sicherheitsbestimmungen nicht mehr und von nicht mehr wird supported Microsoft standards. Systembedingt von der Wirtschaftlichkeit Webserver to Pascal Zukunft often werden.

    Was Wenn mein appearance weiter tumors soll, muss das Ganze a new server postage ore werden auch passiert ist schon auf. Ist auf dem neuen Server die data base nicht mehr Nur mit der application can.

    Geändert hat sich folgendes: auf dem previous server so:

    .NET framework 1.1.4322 und 5.8 VB-Script

    Auf dem neuen server so ein Windows-IIS 8 mit ASP 3.5 4.5 und sowie VBScript 5.8.

    DAS sind die ich bekommen habe bisher information. Unklar ist von nach wo wo (ASP? und zu 3.5 ASP VBScript? zu VBScript 5.8) ich upgraden would.

    Mein rat dazu provider (da er selbst keine zu ASP browser skills) einen programmers mit ASP - und Serverkenntnissen zu suchen, der mir die results will im Code physician kann. ICH würde ja auch like meinen Dreamweaver al, faith aber nicht dass ich allein das jetzige problem losen wurde damit, sei denn ich mire frock von a und das möchte ich eher draft.

    VIELLEICHT kann ja mit recht wenig justification die Datenbankverbindung wiederhergestellt werden.

    Oder're gibt einen other provider der mich mit meinem system aufnehmen wurde und mir mehr Zeit gibt something're auf den newest Stand zu bringen.

    WER kann mir helfen oder Tipps give?

    As far as I know, ASP 3.5 and 4.5 is for ASP.NET, which is different from the classic ASP. Dreamweaver used to have server for ASP.NET, but these behaviors have been removed from Dreamweaver CS4, because they were very up to date. Update to the latest version of Dreamweaver will not help you. I wish I could offer more help, but I think that you must find a competent programmer in ASP.NET.

  • Dreamweaver CS4 software updates

    Hi people,

    I bought Dreamweaver CS4 (version 10) a few years ago and just reinstalled the software. The product went very well. I'm trying to re - install the patches for this product, but can't seem to find on the Adobe site. The function of updates... no longer works for CS4 because of this product being retired. I noticed on the site of patches/updates to Dreamweaver Adobe - Dreamweaver Support Center: Updaters ( ) http://www.adobe.com/support/dreamweaver/downloads_updaters.html ) there are tasks for the editions of Dreamweaver earlier and later to CS4 / Version 10. Interesting.

    Anyone know if this is an oversight by Adobe? I chatted with the customer service, who directed me to this forum. I may end up buying the new features of Adobe Creative Cloud, but wanted to check with you first.

    Thank you

    Jeff

    I'm reasonably sure that dwcs4 ever updates.

  • Dreamweaver CS4, Microsoft Visual C * Runtime Library, "Runtime Error".

    Runtime Error Dreamweaver.jpg

    Hi, I got a runtime error when you work in Dreamweaver CS4. I searched the forum to find answers and I tried the only solution that I could find (change the name of the configuration file)... it has not worked for me, are there other solutions? My OS is Windows Vista Business thank you

    Thank you for your answer, I would have responded earlier but I couldn't connect to Adobe. My problem has been resolved to try another method:

    I got my first runtime error when I opened a text with Dreamweaver document I created on my desktop, as a first step, the file extension was. CSS.txt, I did a .css file and if I right click and 'open with' Dreamweaver I would get the runtime error.

    Since then, I created a site definition and created all things in Dreamweaver and had no problem with the runtime errors.

    I followed a tutorial on disk to decide and I really wanted to complete, but instead, I resized each image and put in model built-in Dreamweaver. I had to adjust because of the time sensitivity.

    I'll definitely try slicing on my own time from there, lol

    Thanks Preran!

  • Question of menus. XML trying to launch Dreamweaver CS4

    I used Dreamweaver CS4 for many years on my Mac. I had a disk failure and had to reload all my apps from scratch, because there seems to be a problem with the time Machine upwards. Everything works well outside of Dreamweaver CS4, which shows an error message telling me to remove my menus.xml file and rename menus.bak menus.xml that everything just works.

    I checked and this has been asked before but none of the previous answers I have found will work for me. Any new ideas?

    Apple MacBook Pro (mid 2010 model year) running up-to-date version of OSX bang Mavericks.

    Mavericks comes with Java SE7, DW must have Java SE 6.

    It may well be that question.

    http://forums.Adobe.com/thread/1111652

  • Dreamweaver CS4 and Windows 8

    I recently bought a new laptop with Windows 8.  I'm a private person who manages three sites using Dreamweaver CS4, one for a school and two nonprofit organization...  Local display contains all of the files on my disk instead of only the files in the files belonging to each Web site.

    Is this a compatibility issue?

    Can anyone offer assistance?

    neon700

    When you configure the Local root folder, make sure that DW is to put the right way. I know that there is a glitch in DWCS4 that would essentially "on upward directory" folder even if you asking in the right place and click OK. (until a few weeks ago, I was still using DWCS4 and fought this issue whenever I made a new site)

    Go to your site broken using Site definition > Manage Sites > change

    Click the Advanced tab

    Look at the text file box root Local. That's where DWCS4 love missing his shot upward. If the root folder of your site was supposed to be C:\Users\yourname\Desktop\Folder1 it will probably show C:\Users\yourname\Desktop instead. You should be able to change this manually by adding appropriate after the folder name.

    Otherwise, the way to fix when you make a new site is to navigate to the correct location, twice when adding the local root folder in the Site definition process. Usually, he'll get the correct location on the second attempt.

Maybe you are looking for

  • Mac Mail AppleScript help

    I use this script with 10.10 and I'm unable to use with 10.11 and more. 10.11 it creates the account, but once the mail app closes it disappears and in 10.12, he does nothing that I can see in mail preferences. Is there another way to add a mail acco

  • Deleting photos from my camera memory

    When I was using Photos to store pictures taken with my camera, I tick the box that seems to allow Photos to remove these from the memory card. I don't want the pictures too much room on the card after downloading. How can I delete pictures piling up

  • Reset password BIOS HP Pro Book 4520 s

    Hello I have a BIOS password needs to be reset. I have Pro Book 4520 s I'd like to get this if possible reset

  • Cannot download internet update to explore, old version of Explorer be found in respect of programs to remove

    I downloaded the new internet explorer 9. something went wrong past and internet no longer works, has obtained the support of tech on the internet in a suit of service and security has been reinstalled, virus eliminated. I'm trying to download intern

  • Is Berkeley DB XML 'death '.

    After enjoying the beautiful doc on XQuery Update, https://docs.oracle.com/cd/E17276_01/html/gsg_xml/cxx/modifydocument.html, I checked what the latest material was and am surprised that there is no update more.Is any activity (development) yet in th