CSS layout not looking right in DW preview or IE...

Hi,
I'm working in Dreamweaver 8 on a mac and have built the
following page:
http://www.distancemedia.co.uk/hps/index_template2.html
This looks fine when previewing in Safari and Firefox, but in
the Dreamweaver preview and my clients IE, the coloured boxes on
the right hand side are a lot lower down than they should be. The
top box should be level with the top of the main text, but it's
not, it's level with the bottom.
If anyone can help I'll be very grateful!
Thanks,
David

On Fri, 26 Oct 2007 13:39:02 +0000 (UTC), "Dava"
<[email protected]> wrote:
>Hi,
>
> I'm working in Dreamweaver 8 on a mac and have built the
following page:
>
http://www.distancemedia.co.uk/hps/index_template2.html
>
> This looks fine when previewing in Safari and Firefox,
but in the Dreamweaver
>preview and my clients IE, the coloured boxes on the
right hand side are a lot
>lower down than they should be. The top box should be
level with the top of the
>main text, but it's not, it's level with the bottom.
>
> If anyone can help I'll be very grateful!
>
> Thanks,
> David
Not sure - but you have used several ID's many times on the
one page -
which is not valid html - even though some browsers don't
misbehave -
so it could be that. If you need to use more than once on a
page you
should use classes
a few other things to check
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.distancemedia.co.uk%2Fhps%2Findex_templ ate2.html&charset=%28detect+automatically%29&doctype=Inline&ss=1&group=0&verbose=1
~Malcolm N....
~

Similar Messages

Date time picker script does not look right when calender pops up

When I use this script in my header, my date time picker does not look right. The pop up calender works but the layout is off, here is the code I am adding to my header:
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="style.css" type="text/css" media="screen"
     href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min .css">
And here is the code I am adding to the body of the html page below: Is it the placement of the code in the header? I've tried the beginning and the end of the hearder but no difference. Thanks for your time on this....
<div id="datetimepicker" class="input-append date">
<input type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min. js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-B R.js">
</script>
<script type="text/javascript">
$('#datetimepicker').datetimepicker({
format: 'MM/dd/yyyy hh:mm:ss',
language: 'en'
</script>

Page is not up yet, can I attach the html to this forum? I'l cut and paste the html below, thanks
<!DOCTYPE html>




 <html class="no-js"> 
<head>

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="style.css" type="text/css" media="screen"
     href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min .css">
      
    <meta charset="utf-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
    <title>Hawaii Beach Weddings</title>
    <meta name="description" content="">
     
    <meta name="viewport" content="width=device-width">
    <link href="style.css" rel="stylesheet">
    
    <link href="//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700|Merriweathe r:400,700,900" rel="stylesheet">
    
        <script src="js/modernizr-2.6.1.min.js"></script>
    <script src="js/modernizr-2.6.1.min.js"></script>
</head>
<body>
    
    
    <header id="master-header" class="clearfix" role="banner">
        <hgroup>
            <h1 id="site-title"><a href="index.html" title="Your Site Name">Hawaii Beach Weddings</a></h1>
            <h1 id="site-title2"><a href="index.html" title="Your Site Name">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a></h1>
            <h2 id="site-description">Where the Sun, Sand and Love come together...</h2>
        </hgroup>
    </header> 
<div id="main" class="row">
    
    <nav class="main-navigation span12 clearfix" role="navigation">
        <h3 class="assistive-text">Main menu</h3>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li class="current">
                <a href="about.html">About</a>
                <ul class="sub-menu">
                    <li><a href="http://www.google.com">Subpage 1</a></li>
                    <li><a href="#">Subpage 2</a></li>
                </ul>
            </li>
            <li><a href="contact.html">FAQ's</a></li>
        </ul>
    </nav> 
<div id="content" role="main" class="span12">
    <article class="page hentry">
        <header class="entry-header">
            <h1 class="entry-title">Simple Beach Weddings</h1>
        </header> 
        <div class="entry-content">
            <p>We specialize in simplicity for your beach wedding. Let us keep it simple by offering what you need to make your beach wedding easy </p>
            
            <section id="typography">
                <h1>I am first a photographer who loves to<small></small>capture "the moment."</h1>
                <p>By organizing Hawaii Beach Weddings, I have allowed myself to do what I do best: capture your moment. I use industry professionals to make a sometimes stressful event easy. By keeping it to a few simple choices: A Minister (necessary), Flowers, Music, Video, Chairs (optional), I have allowed you to quickly design your wedding event and enjoy your stay in the islands. </p>
                    <div class="row">
                        <div class="span7">
                            <h2>Ministers:</h2>
                            <h3>Reverand Robert Hoyt</h3>
                                            <p> </p>
                        </div>
                </div>
                  <h2> </h2>
                    <div class="row"></div>
                    <div class="row">
              </div>
                <h2> </h2>
            </section>
            <section id="tables">
              <div class="row">
              </div> 
            </section> 
            
            <section id="forms">
                <h1>Let's begin with your contact information.</h1>
                <form class="row">
                    <fieldset class="span5">
                      <p>
                        <label>Name
                          <input type="text" required></label></p>
                          <br>
                          <p><label>Phone number with area code <input type="text" pattern="\d{5}(-\d{4})?" title="a US Zip code, with or without the +4 exension" placeholder=" 123-456-7891"></label></p>
                          <br>
                          <p>
                          <label>Email
                          <input type="email"></label></p>
                          <br>
                          <h1>Where would you like your wedding to be?</h1>
             <p><label>Honolulu (South Oahu)<input type="radio" name="rad"></label></p>
             <p><label>Waimanalu (East Oahu) <input type="radio" name="rad"></label></p>
                <br>
                <h1>What date & time would you like to have your wedding?</h1>
                 
                      <div id="datetimepicker" class="input-append date">
      <input type="text"></input>
      <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
      </span>
    </div>
    <script type="text/javascript"
     src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
    <script type="text/javascript"
     src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
    </script>
    <script type="text/javascript"
     src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min. js">
    </script>
    <script type="text/javascript"
     src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-B R.js">
    </script>
    <script type="text/javascript">
      $('#datetimepicker').datetimepicker({
        format: 'MM/dd/yyyy hh:mm:ss',
        language: 'en'
    </script>
    <br>
                     <h1>What type of flowers would you like to have?</h1>
                     <p>
                            <label>Bouquet<br>
                                <select>
                                    <option>None</option>
                                    <option>Red roses</option>
                                    <option>White roses</option>
                                    <option>Hibiscus</option>
                                </select>
                            </label>
                        <p>
                            <label>Flowers<br>
                                <select>
                                    <option>None</option>
                                    <option>Roses</option>
                                    <option>Orchids</option>
                                    <option>Hibiscus</option>
                                </select>
                            </label>
                              <h1>What type of Leis would you like to have?</h1>
                            <label>Leis<br>
                                <select>
                                    <option>None</option>
                                    <option>Kukui nut (male)</option>
                                    <option>Orchids (inexpensive)</option>
                                    <option>Stephanotus (sweet smelling</option>
                                </select>
                            </label>
</fieldset>
<fieldset class="span4">
                      <p>
                       
                        <p>
                           <label>Music<br>
                                <select>
                                    <option>None</option>
                                    <option>solo singer with ukulele</option>
                                    <option>solo singer with guitar</option>
                                    <option>solo guitar instrumental</option>
                                    <option>small ensemble</option>
                                </select>
                            </label>
                          <br>
                          <label for="s">Number of Chairs</label><p>
                            <select id="s">
                                <option>none</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>6</option>
                                <option>7</option>
                                <option>8</option>
                            </select>
                        </p>
                        <p>
                          <label for="t">Notes</label> <textarea id="t" cols="30" rows="5">Textarea text</textarea></p>
                    </fieldset>
            
        </div> 
    </article> 
</div> 
</div> 
    <footer id="footer" role="contentinfo">
        
    </footer> 
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
    
    <script src="js/script.js"></script>
</body>
</html>

After firmware update to V2.0.03, the web UI dos not look right. (WRT160 V2)

Hi
After firmware update from V2.0.01 to V2.0.03, the web UI dos not look right.
I can't see menus, just version number and the basic setup page.
Router Linksys WRT160 v2.
Allan

Hi
Thanks for the reply.
I't works ok now.
Thanks again.
Allan

Exported Video Does Not Look Right

I am sure this is a basic setting I am overlooking, but a lot of this is new to me - any help would be GREATLY appreciated.
My goal is to create a high quality 640x480 movie for Computer/Web viewing only.
• I shot a short video using a Canon Vixia HV30 to mini DV tape using the SD standard - no problem. I guess that records at 720x480 non-square pixels at 29.97fps - is that right?
• I used log and capture inside of FCP v6.0.5 to capture the various clips I needed - no problem (I don't think). If I open each of those clips from the finder in Quicktime they look "pretty" good, but a bit of aliasing on the diagonals and somewhat blurry, but not sure why? Everything looks sharp on the smaller camera LCD screen? and looks pretty good inside of FCP on the Canvas? If I open one of these captures directly inside of Quicktime and do a get info, it says...
DV 720x480 (640x480)
FPS: 29.95
Normal Size: 640x480 pixels
Current Size: 640x480 pixels (Actual)
All these Quicktime movies appear slightly larger in height and width than the same clips when viewed in the FCP Canvas?
If I open the Sequence Settings in FCP it says...
Frame Size 720 x 480 NTSC DV (3:2)
Pixel Aspect Ratio NTSC - CCIR 601 /DV (720x480)
Field Dominance: None
Editing Timebase: 29.97
Everything looked pretty good inside FCP so I Exported a QT Movie using "Current Settings". Then opened the resulting self-contained movie in QT and it looks pretty bad. When I get info in QT on the rendered final movie it reads...
DV 720x480 (640x480)
FPS: 29.97
Normal Size: 720x480 pixels
Current Size: 640x480 pixels (Actual)
So... the FPS and the Normal Size are not the same as the captured original clips.
Can anyone tell me what I am doing wrong?
Is this just the wrong Sequence Settings, Export Settings or do I have to start over an re-capture all my footage some other way?
PS - I am assuming that the DV Camcorder is recording interlaced (60 fields) rather than progressive - is that right. Do I need to de-interlace the video somehow?
Message was edited by: ChoreoGraphics

I'm far from being an expert, but since no one has replied to you yet, and because I've been helped out here plenty of times, I'll post something and who knows -- it may be the answer.
Your post was really long but from what I can gather, you're wondering why your exported video does not look good when you open it in QuickTime. Try this: Open the video in QT, hit command-J, then click on Video Track, then at the bottom right (under Visual Settings) you'll see High Quality, Single Field, and Deinterlace. Click around on those to see if that improves what you see.

MacBook Pro 13 on LG Monitor Not Looking Right

I am using a 13" MBP with an LG W2040T Monitor. I believe it is running in Clamshell mode. The MBP is closed, but I am using the external display. The monitor is running in 1600x900, and when I click on the display icon on the finder bar on top it says it is running in 1600x900. For some reason though the fonts and display in general isn't looking quite right. It almost seems like the resolution isn't supported or something. The only way I could really explain it would be saying it seems like the computer is trying to run in a lower resolution than the monitor. Is 1600x900 not supported in Snow Leopard?

Yes, you're right, and I read your post carelessly. In clamshell mode you should be able to select the 1600 x 9000 native (maximum) resolution of your external display. If you've selected that, then your display is as sharp as it can be. It may just not look very good because by today's standards, that's a low resolution for a 20" display. At $150 plus or minus $10 brand new, you can't expect the 2040T to compare very well with higher-quality monitors.
You may be able to improve text crispness slightly by tinkering with the font smoothing settings in System Preferences > Appearance, but your LG display will never look as good as the MBP's own screen.

Why are my webpages not looking right or my personas not working as they were?

I opened up my browser yesterday and no matter where I go on the web, the pages don't look right. The graphics are off. I can't even see my yahoo mail. It loads, but I see no words or graphics. My Personas is actually rotating, but all I get visually is a color, no graphics at all. I have tried uninstalling and reinstalling twice to no avail. I'm not sure what to do now. I can use Explorer without any graphics issues, but I really like Firefox much better and would like to get this issue resolved.

In FCE make sure nothing is selected in the timeline before exporting
In the Chapter Marker submenu do NOT erase the <Chapter> slug; it doesn't show up in the chapter title but it must be there
When exporting from FCE try exporting as DVD Studio Pro markers (if it gives you that option) just for a change
In iDVD I believe there is a Preference setting to make sure it recognizes chapter markers; check for that

I have today purchased iMovie but does not look right

I have today purchased iMovie for £2.99 (through iTunes I recall) but when I start the app it does not look much like the on line tutorial details. Just has Video/Projects/Theater and create a new project. Any advice please? Have I actually purchased the app or some simple equivalent?

Thanks for your time. I have another response which has clarified my situation. I have the right app for an iPad, which is not so comprehensive as the version for a MAC. I have also found some learning material for the iPad version, which matches what I have, so all is resolved. Thanks!

Css layout not working in firefox

I've created a css layout using divs, it works fine in IE,
but in firefox, the container div doesn't stretch far enough to
contain all the content.
here's the link to the page:
http://www.claremckenzie.co.uk/tryshahunt/profile.html
can anyone help?

I've solved it myself with the clear both rule. doh!

I want to print an 8 x 10, but the photo does not look like the print preview - it truncates part of the picture

I am using an HP PSC 2355 printer - and have not had trouble printing before. The 8 x 10 photo does not print like the print preview does - everything elarges when the actual print completes, which truncates all details that need to be printed. Is ther a setting that I should be choosing?

There is no O or L in my Serial Number, and it starts with one single D, then a set of 3 numbers, 3 letters, 4 times, then 3 letters closing it down. When I check my Final Cut's serial number in the help section of the software, I get the same number. Yet, when I enter it in the site, it says, I have an invalid serial number. So I will call Apple Care. I hope I will be able to talk to a representative in an hour or so. It always takes so long that I grow beard while I wait.

Live View worse than Design view, both bad, CSS & layout not applying

Howdy,
So I'm trying to do some work on the the page seen here:
http://www.juniper.net/us/en/products-services/network-management/
(I've attached a screenshot of it.)
I view the source for that page and copy it into a new blank page in code view using DW CS4.
I copy all the relevant related files, as far as I know, including at least all the CSS and image files.
I view the page in Design View, and some of the styles, primarily on the text are clearly being applied. The layout, though, is all wrong, with the navigation spread out over the top without any text styling or background images, tho a few other images do show up (one in the header area and some in the body, ones that should all be about in the same directory), and the content area pushed waay out the right.
Live View is even worse, no styling at all on any of the text, and it doesn't seem to be able to locate any of the images, so it's all plain default HTML-styled text.
This is a fresh installation of CS4.
DW 8 seemed to have a similar problem rendering this layout in design view, but appplying a few design-time stylesheets, ones that should have been applying, but somehow weren't, seemed to do it, or at least pretty close. That same strategem did not seem to work here. Plus, doesn't the fact that the correct stylesheets show up as "related files" in the related files bar mean that DW knows about them and are/should be doing its level best to be applying them already?
I'm not sure how much more I can share, but does anyone have any thoughts about how to make DW render correctly?

So here's a little more info for a more complete picture of the problem...
I do have access to the original CSS, JS, and image files...When I said that I copied all the files that I believe to be relevant, I mean that I downloaded all the files from the \assets and \shared directories from the content management system, which should contain all the CSS, JS, and image files that the page uses.
When I view the file into which I saved the page's View Source on my testing server via an actual browser window, the page looks as expected.
So, to sum up:
All the support files and "related files" seem to be in place.
When viewed through a browser fed by a web server, the file/page looks as expected. Checked in Firefox v3.5.3, IE 8, and Chrome v3.0.195.24.
When viewed in Design View, the layout looks wonky, some of the styles seem not to be applied to the navigation/header area (notably, I guess, the positioning of the navigation and content area relative to the navigation, as well as some of the text styling on the navigation), and most if not all the styling (text formatting, layout) seems to be applying in the content area. The Related Files bar seems to list all the expected related files.
When viewed in Live View, no styling is being applied anywhere. Live View is based on an integrated WebKIT browser, so it should render most closely to Chrome, right?
I know little to nothing about relevant web server configuration. Could it be possible there's some web server configuration that's set up on Juniper's web server that Dreamweaver doesn't mimic, at least by default? Are there web server configuration settings for the integrated Live View "server" that I could check?

CSS layout not rendering correctly in IE

Hello, I have two websites and both of them are having issues with rendering the layout properly in IE. FireFox and Safari are fine.
Both sites are built with CSS, DreamWeaver CS5.I was told that I might have to add some Java script for it to work. Is this true?
The sites: www.rifp-engineeredwood.com, and www.customizedhair.net/services.html
Thank you!

First off, you might like to check your page in a validator?
I saw this in your code:
<h1>Design Freedom – Universal Choice<h1/>
It's wrong and it might cause some layout anomolies. It should be:
<h1>Design Freedom – Universal Choice</h1>
I don't think it's the only place it's happening.
I only looked at the first site.
Martin

Why is my layer style not looking right in Lightroom or when exported?

Hey everyone! I am working on a fun little storybook project as a part of a Halloween-themed photoshoot and I am running into something that has me stumped. Check the screenshots below:
The first image is as-seen in Photoshop and the second is the messed up version that shows up in Lightroom and also in jpeg exports. As you can see, the Lightroom/jpg/png version doesn't look nearly as fancy.
So longer story somewhat shorter: the layerstyle isn't translating over to Lightroom preview or to jpeg exports through Lightroom or png and jpeg exports via Photoshop's "Save for Web" or "Save As" features.
The file was created in Photoshop and imported into LR with no import presets.
Can't wait to hear what you think and thanks for your time!

iPhoto does not change the size of photos (or make any other changes)
You are accessing them incorrectly
Either export them to a desktop folder and upload from there or use the media browser to locate your photos - do not go directly into your iPhoto library for any reason
Click here for a longer discussion about accessing your photos from other programs
LN

Canon 7d footage not looking right

OK- so I have been struggling with this for hours, even browsing through forums such as the one I'm making in now. I'm having a difficulty trying to get my sequence settings to match to my canon 7d video files which are at 1920x1080 24p and apple ProRes 422 HQ.
The problem is that I've already edited the clips and I've tried to find a loophole, by trying to make a new sequence and copying/pasting the clips from the other sequence. But when I copy and paste them into a new sequence that has the right settings, the video files look small amidst a black box that takes up the preview. Any suggestions? Or do I really need to start over with the editing?

>Why did it have basic motion and distort settings? Just trying to understand how that worked.
You started editing in a sequence that didn't match your clip settings. Most likely DV. So when you cut the clips into the sequence, they adjusted their size to fit. But when you copy and paste to a new sequence, they retain the dimensions they have in that old sequence. You just removed them, so they are now normal.
As for the text from CS4... if you put the rendered movie on the timeline, it is smaller than the frame? And does it say 100% in the Motion tab after you double click on it to load it into the Viewer again? Do you need to blow it up larger than 100%?
If you want to export a freeze frame, press SHIFT-N to get a freeze frame into the Viewer. Drop that into the timeline. Then export that small section...for as long of a duration you want/need...as a self contained QT file. Bring that into AE.

Iweb pages hosted on a web server do not look right. Funny characters appea

any web experts here?
I have designed a bunch of pages in iWeb. Published them and uploaded them to my web host. However when I view the files via the web, they are not correct. The most obvious is that quote marks, bullets and paragraph markers are shown with funny characters.
Take a look at www.dancingacademy.co.uk to see an example. Excuse the URL but its the only way I know of showing an example of what's wrong.
If I view the files locally on my mac (ie publish from iweb to a folder and open them from the local folder) then the files look fine.
It's only when they get sent from a webserver they look funny.
Any ideas what my web hosting company is doing wrong?

The server you are using is (mis)configured to force all browsers to use the wrong encoding. See this note (Server Settings section) for possible fixes:
http://homepage.mac.com/thgewecke/iwebchars.html

Sharing Indesign on CC show low-resolution images and not the right font in preview

Dear Adobe,
I really want to make use of CC Files and the sharing ability with my clients. I have shared an Indesign file, whereas all the links in that indesign file are on CC Files too. The font is a regular Futura Std. But both the links in the files (background and logo) and the font used are not showing up correctly. I deleted the file and uploaded it again, but it is still showing a bad preview. This is not something I can share with my clients.
Am I doing something wrong? It appears that another Illustrator file is showing its preview in low-resolution and after 2 seconden it renders it at a higher resolution.
Regards,
Daniel

Fonts may not and links will not show up correctly in the image preview on the Files page. The preview being created on the server is not able to access the links, and only the default fonts are available.
You can export a PDF and share this with your clients (and you can always include a link to the InDesign files if the clients need to download them).

CSS layout not looking right in DW preview or IE...

Similar Messages

Maybe you are looking for