Looks fine in FF and Safari, disaster in IE8

http://www.jdcdemo.com/d4/index.html
This site displays as I set it up in FF and Safari for Windows. In IE8, it is a disaster. The menu spacing is doubled and the main image is way down in the page. I'm guessing it is a CSS and/or Doctype problem, but have not figured it out. Can someone help??
Thanks in advance,
Joe

Give your page a valid document type.  As it stands now, you're page is in Quirks Mode which produces unexpected results.
Modify > Page Properties > Title/Encoding.  Select either HTML or XHTML transitional.
Also, I'm not sure you need Float:Right on your #mainContent division.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Similar Messages

  • 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

  • Layers don't appear properly inside table in Internet Explorer, but are fine in Firefox and Safari

    How can I get layers that are inside tables that are
    inside another layer to appear properly in Internet Explorer. It
    works fine in Firefox and Safari on Mac and PC? The layers that are
    causing the problems contain a table with an image and a caption,
    so 2 cells. Then the layers are within a larger table that is
    within a layer. I don't use IE (cause it is the bain of my
    existence) but for a client they may want it to look good on all
    browsers, even if it is IE 6 on a PC, maybe the browser version is
    too old and I shouldn't worry about it? I know IE is not compliant
    with web standards so is this the problem or is there a way to fix
    the problem so it will look good in all the browers? The URL is
    http://uweb.txstate.edu/~ts20/scevents/spec-coll-events.html
    so if anyone could look at it IE and firefox and see how I could
    fix it, this would be very appreciated!
    Much needed help. Thanks for any input.

    >>I knwow IE is not compliant with web standards
    That is too broadly stated to be credible. Certainly IE6 has
    its problems
    but is highly compliant with most web standards. To be an
    effective
    designer/developer one must have a working knowledge of IE's
    deficiencies,
    not just write it off as non-compliant. After all, it is
    still used by some
    70% or web users (based on W3C Schools data.)
    Please post a link to your site.
    Walt
    "starryeyestara" <[email protected]> wrote
    in message
    news:eq3jc0$7cs$[email protected]..
    >
    How can I get layers that are inside tables that are
    inside
    > another
    > layer to appear properly in Internet Explorer. It works
    fine in Firefox
    > and
    > Safari on Mac and PC? The layers that are causing the
    problems contain a
    > table
    > with an image and a caption, so 2 cells. Then the layers
    are within a
    > larger
    > table that is within a layer. I don't use IE but for a
    client they may
    > want it
    > to loog good on all browsers, even if it is IE 6 on a
    PC. I knwow IE is
    > not
    > compliant with web standards so is this the problem or
    is there a way to
    > fix
    > the problem so it will look good in all the browers?
    > Much needed help. Thanks for any input.
    >

  • Images loaded fine in the previous version of firefox, but now do not open in firefox 5. It is our business' website. it opens and looks fine in explorer and other browsers.

    Images (actually graphics) loaded fine in the previous version of firefox, but now do not open in firefox 5. It is our business' website. it opens and looks fine in explorer and other browsers. However, please goto www.trinitystone.biz (using Firefox 5)and look at how the top menu bar has a black box surrounding it and the bottom menu also has this black bar. It is not supposed to be there, if you view the site from IE, you will see what it is supposed to look like. Any help would be appreciated! Thanks

    You can modify the pref <b>keyword.URL</b> on the <b>about:config</b> page to use Google's "I'm Feeling Lucky" or Google's "Browse By Name".
    * Google "I'm Feeling Lucky": http://www.google.com/search?btnI=I%27m+Feeling+Lucky&ie=UTF-8&oe=UTF-8&q=
    * Google "Browse by Name": http://www.google.com/search?ie=UTF-8&sourceid=navclient&gfns=1&q=
    * http://kb.mozillazine.org/keyword.URL
    * http://kb.mozillazine.org/Location_Bar_search

  • Why are some jpg images scrambled when they appear in my screen saver?   The same images look fine in Preview and Finder.  Some images appear scrambled in the screen saver 'preview' window and the actual screen saver. Other jpg images look fine.

    Why are some jpg images scrambled when they appear in my screen saver?   The same images look fine in Preview and Finder.  Some images appear scrambled in the screen saver 'preview' window and the actual screen saver. Other jpg images look fine.

    The desktop image is fine, taken from the exact same pool of jpg photos.  However, as soon as the slide show screen saver comes on, the images are scrambled.  What is it about the apple screen saver algorithm that scrambles the pics?

  • Swap Image Looks fine in Firefox, not Safari? Can Javascript be an issue in Safari?

    Hi, Im new to web design as you may guess.
    I'm trying to put together a website navigation page with several swap image div tags. When I view the page in Firefox it looks fine, after the behavior is applied the page doesn't view at all in safari?
    Can anyone please help with this?
    I have used a lot of different images and styles (some of which are no longer relevant). Please see below for code -
    <!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>Untitled Document</title>
    <style type="text/css">
    <!--
    body {
    background-image: url(images/Background.png);
    background-repeat: no-repeat;
    background-color: #15A13B;
    background-position: center top;
    #Container {
    height: 600px;
    width: 800px;
    padding-top: 10px;
    padding-bottom: 0px;
    background-image: url(images/PaintTheTownText.png);
    background-repeat: no-repeat;
    margin-right: auto;
    margin-left: auto;
    position: absolute;
    visibility: visible;
    #FeatherFan {
    height: 405px;
    width: 800px;
    padding: 0px;
    left: 2px;
    position: absolute;
    top: 188px;
    clear: none;
    z-index: 1;
    visibility: visible;
    #IntroText {
    float: right;
    width: 402px;
    font-family: "Franklin Gothic Medium";
    font-size: medium;
    color: #FFFFFF;
    text-align: right;
    height: 120px;
    position: absolute;
    left: 378px;
    top: 0px;
    padding-right: 20px;
    visibility: visible;
    .Over {
    position: absolute;
    left: 227px;
    top: 26px;
    height: 100%;
    width: 100%;
    z-index: 3;
    #CorpLitType  {
    left: 7px;
    z-index: 4;
    position: absolute;
    top: 452px;
    visibility: visible;
    #Container #CorpRollO {
    position: absolute;
    z-index: 2;
    left: 7px;
    top: 452px;
    visibility: visible;
    .CorpType {
    z-index: 4;
    #Container #Display graphics {
    position: absolute;
    z-index: 6;
    .DGOver {
    position: absolute;
    z-index: 6;
    left: 96px;
    top: 292px;
    .DGOver2 {
    position: absolute;
    z-index: 7;
    left: 187px;
    top: 15px;
    .BOver {
    position: absolute;
    z-index: 8;
    left: 253px;
    top: 197px;
    .AdPromo {
    position: absolute;
    z-index: 9;
    left: 422px;
    top: 15px;
    .Packaging {
    position: absolute;
    z-index: 10;
    left: 570px;
    top: 314px;
    .ConPhoto {
    position: absolute;
    z-index: 11;
    left: 634px;
    top: 270px;
    </style>
    <script type="text/javascript">
    <!--
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    //-->
    </script>
    </head>
    <body bgcolor="#FFFFFF" onload="MM_preloadImages('images/CorpLitRollO.png','images/DisplayGraphRollO.png','images /BrandRollOai.png','images/AdvertProRollO.png','images/PackRollO.png','images/ConPhotoRoll O.png')">
    <div id="Container">
      <div id="IntroText">All Introductory text here<br />
      and here<br />
      and here.</div>
      <div id="FeatherFan">
        <div class="DGOver" id="Display Graphics"> </div>
      <img src="images/FeatherFan.png" alt="Feathers Green" name="Feathers" width="800" height="405" hspace="0" vspace="0" id="Feathers" /><img src="images/ConPhotoType.png" alt="Concept Photography" width="164" height="134" class="ConPhoto" id="Image6" onmouseover="MM_swapImage('Image6','','images/ConPhotoRollO.png',1)" onmouseout="MM_swapImgRestore()" /><img src="images/AdvertProType.png" alt="Advertising and Promotions" width="134" height="158" class="AdPromo" id="Image4" onmouseover="MM_swapImage('Image4','','images/AdvertProRollO.png',1)" onmouseout="MM_swapImgRestore()" /></div>
      <div class="CorpType" id="CorpLitType" onmouseover="MM_swapImage('Image1','','images/CorpLitRollO.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/CorpLitType.png" alt="Corporate Literature" width="162" height="133" id="Image1" onmouseover="MM_swapImage('Image1','','images/CorpLitRollO.png',1)" onmouseout="MM_swapImgRestore()" /></div>
      <div id="CorpRollO"><img src="images/CorpLitRollO.png" alt="corporate literature image" width="162" height="133" /></div>
    <div class="DGOver" id="Display Graphics Image"><img src="images/DisplayGraphType.png" alt="Display Graphics" width="154" height="150" id="Image2" onmouseover="MM_swapImage('Image2','','images/DisplayGraphRollO.png',1)" onmouseout="MM_swapImgRestore()" /></div>
    <div class="BOver" id="Branding"><img src="images/BrandType.png" alt="Branding" width="137" height="163" id="Image3" onmouseover="MM_swapImage('Image3','','images/BrandRollOai.png',1)" onmouseout="MM_swapImgRestore()" /></div>
    <div class="Packaging" id="Packaging"></div>
    </div>
    <span class="Packaging"><img src="images/PackType.png" alt="Packaging" width="150" height="147" id="Image5" onmouseover="MM_swapImage('Image5','','images/PackRollO.png',1)" onmouseout="MM_swapImgRestore()" /></span>
    </body>

    becky ss wrote:
    Hi, Im new to web design as you may guess.
    Welcome to the forum. Please take a few moments to read How to get help quickly. As the advice on that page tells you, please upload your problem page to a website and provide the URL.
    Since you're new to to forum, also take a moment to check out the Dreamweaver FAQ and bookmark it so you can find answers to common questions quickly.

  • Page looks funny in IE, looks fine in Chrome, Firefox, Safari

    Hi Everyone,
    Any advice would be greatly appreciated. This page looks fine in Firefox, Safari, and Chrome, but the formatting gets screwed up in Internet Exploder. Since I'm on a mac, checking is rather difficult for me. Aside from fixes to the code to get this to display properly, does anyone have any advice as to how to check stuff in IE from a mac, aside from 1) buying a PC or 2) asking PC friends to take screen shots? Here's the link:
    http://www.sarahegeller.com/suggested.html
    Thanks,
    Nick

    Ok, that is weird.  It seems to only be altering IE 8.  I did a screenshot test of IE 7 and looked at it in 9 and it doesn't seem to be affected.
    I had run your page through the validator before and only came up with unnecessary code for tracing and missing alt tags.  Here is the block of code that first seems to be affected:
    <td valign="top" class="style9"><span class="style12">Astor Piazzolla (Arg.)<br />
    Alberto Ginastera (Arg.)<br />
    Camargo Guarnieri (Brazil)<br />
    Juan Orrego-Salas (Chile)<br />
    Paquito D’Rivera (Cuba)<br />
    Joaquín Nin (Cuba)<br />
    Carlos Chavez (Mex.)<br />
    <br />
    Manuel Ponce (Mex.)<br />
    <br />
    Silvestre Revueltas (Mex.) <br />
    Ricardo Lorenz (Venezuela)<br />
    Manuel de Falla (Spain)/ Arr. Kochanski<br />
    Xavier Montsalvatge (Spain)</span></td>
    I then look at "class='style9'" and "class="style12" right after that:
    .style12 {     font-size: 8pt;
         font-family: Arial, Helvetica, sans-serif;
         line-height: 12pt;
         background-color: #FFFFFF;
         color: #000000;
         font-weight: normal;
    .style9 {font-size: 9pt;
         font-family: Arial, Helvetica, sans-serif;
         font-weight: bolder;
         color: #0099FF;
         text-align: right;
    This tells me that you are not very familiar with code because DW created 2 classes named "style#".  As you can see, both classes are defined, and both want different things, one is 9pt the other 8, one is normal font-weight, the other is bold, but both are defined on the same element.  I see a pattern of this throughout your page which leads to apdivs that don't seem to have a purpose and a long line of <br /> tags to insert line breaks and create spacing instead of using margins and padding.  Most here will argue that while DW is a great tool, a knowledge of HTML & CSS will always be better.  Overall, I don't see any need for anything more complex than 3 styles; one for blue header, one for bold header and one for body text.  Then insert your header 1, header 2, body text, and then put the following content inside table and repeat.
    Based on what is there, in order to solve the problem efficiently, I would recommend starting at your template file (assuming you are using one, if not you should look at it for this type of layout).  Then re-layout the body content on the page with the template in tact using the suggestions above.  I would also recommend giving the below tutorial a quick read through in case some of the CSS comments I made did not make sense.
    http://w3schools.com/css/

  • Quicktime video looks different in Firefox and Safari, is there a fix?

    My full problem is described in this thread:
    http://discussions.apple.com/thread.jspa?messageID=4451761
    but to keep it simple, my immediate issue is that Safari and Firefox are displaying my video differently. Firefox appears darker and Safari appears brighter. With my monitor set to a gamma of 1.8 (default for OS X) Firefox looks perfect and Safari looks washed out, and with my monitor set to 2.2 (Windows default and all-together better looking) Firefox is too dark and Safari is perfect.
    All I want to know is WHY they look different and how to fix this.

    Thanks for your response. While this may work with audio and video originating from your own computer it doesn't seem to effect audio and video viewed from the Firefox 5.01 browser which uses a QuickTime plugin. Audio and Video viewed from Safari and Firefox 3.6.19 work fine which leads me to believe the QT plugin and Firefox 5 browser are not working correctly.

  • CSS layout problems in Explorer (fine in Firefox and Safari)

    Firstly apologies to the mods, I had mistakenly posted this
    in the dynamic section also...
    My problem - I am working on a CSS site (my first!) here
    http://www.benfrain.com
    It appears fine in Firefox (PC and Mac) and Safari (mac) but
    when I view it in Explorer for Mac (5.2.3) I get a over long page
    and I get no auto margin on the left.
    Another small curiosity - I have noticed that my background
    image on my div id "header" seems to start off again on the right.
    Again, Explorer 5.2 for mac only...
    My html and css both validate.
    Anybody know why this is happening?

    quote:
    Originally posted by:
    bregent
    >It appears fine in Firefox (PC and Mac)
    Have you tried increasing the text size?
    Do you mean in the browser? I just tried it in Firefox and
    after two increases the layout/style of the page kind of 'falls
    apart' - how would this be rectified?

  • Why does the code look fine in Explorer and Chrome, and WAY off in Firefox?

    Here is the example link, but there are a lot of pages that turn out like this. Help?
    http://www.rv-wireless-internet.com/RV_Wireless1.html
    As you can see, looks ok in chrome and IE, terrible in Firefox. ANyone have the tip? I am boggled.
    J

    To start with, you have no document type declaration on first line of your pages which sends them into Quirks Mode.
    File menu > Convert > select a document type that fits your coding skills (HTML 4 transitional or strict).
    Run your code through these on-line tools and fix any reported errors. If that doesn't fix the problem, post back.
    HTML Validator - http://validator.w3.org
    CSS Validator - http://jigsaw.w3.org/css-validator/ 
    HTML & CSS Tutorials - http://w3schools.com/
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb

  • Links no longer work when I try to use Etsy in Firefox, but work fine in Explorer and Safari.

    Until fairly recently, I had no trouble using Etsy in Firefox, but after the last update, I noticed that the site stopped working. I cannot click on any links, even the one that would allow me to log in. I originally thought the issue might be that I have OS X 10.5.8 on my computer, so the newest upgrade is not compatible, but I use a computer with Windows 7 at work and am having the same problem. Etsy works fine in both Explorer (at work) and in Safari (at home).

    When you have a problem with one particular site, a good "first thing to try" is clearing your Firefox cache and deleting your saved cookies for the site.
    (1) Bypass Firefox's Cache
    (WIN) Use Ctrl+Shift+r to reload the page fresh from the server.<br>
    (MAC) Use Command+Shift+r to reload the page fresh from the server.
    (You also can clear Firefox's cache completely using:
    (WIN) orange Firefox button ''or'' Tools menu > Options > Advanced<br>
    (MAC) Firefox > Preferences > Advanced
    On the Network mini-tab > Cached Web Content : "Clear Now")
    (2) Remove the site's cookies (save any pending work first) using either of these. While viewing a page on the site:
    (WIN) right-click and choose View Page Info > Security > "View Cookies"<br>
    (ANY) Tools menu > Page Info > Security > "View Cookies"
    Then try reloading the page. Does that help?
    If that doesn't make any difference, perhaps an add-on is at fault? A standard diagnostic to bypass interference by extensions (and some custom settings) is to try Firefox's Safe Mode.
    First, I recommend backing up your Firefox settings in case something goes wrong. See [[Backing up your information]]. (You can copy your entire Firefox profile folder somewhere outside of the Mozilla folder.)
    Next, restart Firefox in Firefox's Safe Mode ([[Safe Mode]]) using
    Help > Restart with Add-ons Disabled
    In the dialog, click "Start in Safe Mode."
    If the site works correctly, this points to one of your extensions or custom settings as the problem.
    Any change?

  • PDF addresses not longer load and display PDF in Firefox and solutions suggest to other users with problem DON'T WORK (work fine in Chrome and Safari)

    This is an ongoing problem with other users. When putting a PDF in address window of Firefox and clicking go to address FIREFOX WILL NOT LOAD AND DISPLAY THE PDF. This problem has come up in questions from other users on your site. NONE OF THE SUGGESTED SOLUTIONS WORK! (trying either the Firefox PDF viewer or the Acrobat viewer as default viewer)
    I am using Firefox 23.0.1 (as some of the other users with the same problem). This was not a problem in the past with Firefox. Safari and Chrome continue load and display PDFs just fine from their addresses. This is a big problem as I now have to inform people who want to view my PDFs NOT TO USE FIREFOX BUT TO USE SAFARI OR CHROME.

    It appears that a link to a PDF on an internet page will not download in Firefox either!
    I went to this page:
    http://www.nasa.gov/connect/ebooks/earth_art_detail.html#.UjYEzrwsU08
    and tried to download the PDF link at the bottom of the page (Download: PDF 11.3 MB) It didn't work! Nothing happens. Tried it in Safari and it worked flawlessly.
    I have a PDF file of my work in the public_html folder on my URL. I give the address generated by that file to people who want to view my work---this works perfectly in Safari and Chrome. As to your other question, can't bookmark it if I can't get to it in Firefox.

  • Why is my logo img rendering poorly on IE, but looks fine on FF and Chrome?

    For some reason my logo img looks pixelated in IE, but smooth in both FF and Chrome.  Any idea why this would be?  To see an example you can look at www.threebearsrealty.com.

    Have you tried viewing the site with Compatibility Mode turned on?
    Start here: 
    http://windows.microsoft.com/en-us/internet-explorer/use-compatibility-view#ie=ie-10-win-7
    I trust that answers your question...
    Thanks
    C
    http://crayveon.com/blog |
    SharePoint Scripts
    LinkedIn |
    Facebook | Quix Utilities for SharePoint

  • Recently firefox loads LinkedIn home page as text only. Was no problem before I installed latest version and the page loads fine in Explorer and Safari.

    See image.

    Thank you for the screenshot. Something is preventing the style from loading.
    There is an option in page permissions I would check first:
    # Right click on the page and select "Page Info"
    # Under Media make sure "Block Images from..." is not checked
    Then check out: [[Websites look wrong or appear differently than they should]]
    Mainly I would focus on the cache, as the cached page might be corrupt. To clear any corrupt pages it is possible to forget the site from the about:permissions page -> this is not recoverable.
    You can open the Web Console (Firefox/Tools > Web Developer).
    Check on the Network tab if any content is blocked and has a file size 0 (zero).
    * https://developer.mozilla.org/Tools/Web_Console

  • The body text on my website shows as white on firefox, it is fine on IE and Safari...what is wrong?

    I have two websites that I update via dreamweaver. I haven't made any changes to either and suddenly I can't view the body text on one of the sites on Firefox it should be blue, and it come up as white. All the rest of the site is visable, including the text in hyperlinks and toolbars. I can see it on Safari and IE ..any clues on what might be wrong. My other site isn't effected.

    You're missing a pound sign in your color hex code.
    .body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #002e54;
    Overall, you have quite a few code errors that require attention.
    98% of browser problems are caused by invalid code.  See links below for details.
    W3C CSS Validator results for http://www.theinnonthepondnutfield.co.uk/ (CSS level 2.1)
    [Invalid] Markup Validation of http://www.theinnonthepondnutfield.co.uk/ - W3C Markup Validator
    Nancy O.

Maybe you are looking for