Content in browser view is not aligned properly but looks fine in design/live view
Here is my site: www.kaleongdesigns.com
Here is the coding:
<!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 {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #6E6C64;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 1024px;
background: #FFF; /* the auto value on the sides, coupled with the width, centers the layout */
height: 768px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
height: 89px;
width: 1024px;
background-color: #ADB96E;
background-image: url(images/KADhomepage2_01.jpg);
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
.content {
height: 536px;
width: 1024px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
background-image: url(images/KADhomepage2_02.jpg);
/* ~~ The footer ~~ */
.footer {
height: 101px;
width: 1024px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
background-color: #CCC49F;
background-image: url(images/KADhomepage2_03.jpg);
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
#apDiv1 {
position:absolute;
width:433px;
height:41px;
z-index:1;
left: 300px;
top: 24px;
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head><body>
<div class="container">
<div class="header"><!-- end .header -->
<div id="apDiv1">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html"><strong>Home</strong></a></li><li><a href="KADres.html">Resume</a></li><li><a href="KADport.html">Portfolio</a></li><li><a href="KADproc.html">Process</a></li><li><a href="KADcon1.html">Contact</a></li>
</ul>
</div>
</div>
<div class="content">
<h1> </h1>
<!-- end .content --></div>
<div class="footer">
<p> </p>
<!-- end .footer --></div>
<!-- end .container --></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body></html>
Your Menu is situated in an absolutely positioned div
#apDiv1 {
height: 41px;
left: 300px;
position: absolute;
top: 24px;
width: 433px;
z-index: 1;
AP divs are removed from the document flow and remain in exactly the same place regardless of user preferences. For example if text size is changed, your design moves, but your menu stays where it was.
Try this
#apDiv1 {
height: 41px; left: 300px;
position: relative;
top: 24px;
width: 450px;
z-index: 1;
Similar Messages
-
Content not aligning properly?
I'm Having trouble getting my content to align properly, it looks right in dreamweaver but when I put it (doesn't matter what internet browser) it is not aligned the same way it is in dreamweaver. The site is www.thecrowdedroom.ca It's pretty obvious what isn't linging up.... The nave container the page identifier and the page content
Here's my code, I've put the code for the style sheets below the source code
SOURCE CODE:
<html>
<head>
<title>crowded room - home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stylesheet1.css" rel="stylesheet" type="text/css">
</head><center>
<body>
<div id="container">
<div id="navbar" align="left">
<ul>
<li><a href="CRhome.html"><img src="images/home-button.jpg" alt="Home" width="75" height="23" border="0"></a></li>
<li><a href="CRprojects.html"><img src="images/projects-button.jpg" alt="Projects" width="87" height="23" border="0"></a></li>
<li><a href="CRinfo.html"><img src="images/rundown-button.jpg" alt="Info" width="131" height="23" border="0"></a></li>
<li><a href="CRcontact.html"><img src="images/contact-button.jpg" alt="Contact" width="89" height="23" border="0"></a></li>
</ul>
</div>
<div id="display">
<img src="images/home-display.jpg" width="182" height="34">
</div>
<div id="content">
Welcome to the Crowded Room<br><br>
Home of Web Developement, Media Production, and Event Planning<br>
Take a look around, check out our current and past projects
</div>
<div id="footer">
Copyright © 2009 CROWDED ROOM PRODUCTIONS. All rights reserved
</div>
<this is the container div nothing goes below it>
</div>
</body></center>
</html>
STYLE SHEETS
#container {
background-image: url(images/CRhome.jpg);
background-repeat: no-repeat;
height: 800px;
width: 800px;
margin-top: 30;
margin-right: auto;
margin-left: auto;
#container #navbar ul {
list-style-type: none;
clip: rect(auto,auto,auto,auto);
height: 4px;
width: 100px;
#container #navbar ul li {
margin-top: 6px;
#navbar {
height: 100px;
width: 100px;
float: none;
margin-top: 202px;
margin-left: 50px;
position: absolute;
left: 254px;
top: 87px;
#display {
position: absolute;
left: 311px;
top: 630px;
#content {
letter-spacing: normal;
text-align: left;
word-spacing: normal;
overflow: auto;
height: 122px;
width: 760px;
margin-top: 635px;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
position: absolute;
font-family: "Myriad Pro";
font-size: 14px;
font-style: normal;
line-height: 25px;
vertical-align: middle;
left: 284px;
top: 30px;
#footer {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 9px;
height: 14px;
width: 800px;
position: absolute;
text-align: center;
left: 283px;
top: 785px;
margin-top: 30;
margin-right: auto;
margin-left: auto;
#contentpic {
letter-spacing: normal;
text-align: left;
word-spacing: normal;
overflow: auto;
height: 150px;
width: 200px;
margin-top: 635px;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
position: absolute;
font-family: "Myriad Pro";
font-size: 14px;
font-style: normal;
line-height: 25px;
vertical-align: middle;
left: 12px;
top: 32px;
#contentwordpic {
letter-spacing: normal;
text-align: left;
word-spacing: normal;
overflow: auto;
height: 150px;
width: 560px;
margin-top: 635px;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
position: absolute;
font-family: "Myriad Pro";
font-size: 14px;
font-style: normal;
line-height: 25px;
vertical-align: middle;
top: 31px;
left: 214px;http://www.thecrowdedroom.ca
I can tell you that having no document type declaration (DTD) on the first line of your HTML docs is not a good thing and sends your page into Browser Quirks Mode.
DW automatically applies a doc type to new pages so you may have copied & pasted this code from someplace else ??
To fix this problem, Go to File Menu > Convert > Select a Doc type that fits your coding skills. Either XHTML or HTML (transitional).
HINT: It's a good idea to use HTML heading <h1> <h2> <h3> or paragraph <p> tags around your text content for search engines to find. Heading 1 carries greater importance than heading 2 and so on...
Related Links:
HTML Validator - http://validator.w3.org
CSS Validator - http://jigsaw.w3.org/css-validator/
HTML & CSS Tutorials - http://w3schools.com/
Creating your first website in DW CS4 -
http://www.adobe.com/devnet/dreamweaver/articles/first_cs4_website_pt1.html
Good luck with your project,
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com -
IPad air Smart Cover not aligning properly
Is anyone else having issues?
My nice new iPad air arrived on Tuesday, 3 days latter I received my apple Smart Cover! Why not send them together? That's another storey.
After a days use, I notice that the cover is not aligning properly, then I read online that it could be an issues with the actual iPad not the cover, anyone else having these problems?
Experienced outcomes?
Regards
Norm.You don't have this option?
Open Settings->General->Lock/Unlock...make sure it is toggled on.
Also, try restarting the iPad then check Settings again.
When the iPad recognizes that the cover is installed that setting should appear and as I can recall, it defaults to that setting being ON. Are you using an Apple Smart Cover or a third party cover. If it's an Apple cover & that setting doesn't appear, take the cover back to the store & exchange it, there may be a problem with the magnet placement in the cover. If that doesn't fix the issue then you may have to make an appointment at a Genius Bar to have them run a diagnostic on your iPad. -
New Macbook Pro Lid not Aligned Properly
Hi all,
I received my new 2010 15" HR i7 Macbook Pro earlier this month (May) and have been very happy with it up until yesterday when I noticed that the screen lid and the rest of the body do are not aligned properly when the lid is closed. There is an offset of about 1.5mm in the left-to-righthand direction.
The computer is only weeks old and hasn't been dropped or mishandled, so I was wondering where I stand here. It's not a massive deal really, but I feel as a virtually brand new machine, this thing should be perfect. Would I be entitled to a replacement for this defect, and if so, how long would I likely be without a machine whilst I send it back etc. (it has some customisations so can't be exchanged in a retail store).
Thanks in advanceHi chapowski and welcome to Apple Discussions!
You are asking questions here which we don't really have any way of answering. Your best bet is to contact Apple ((44) 0844 209 0611 in the UK) and let them know your problem, and ask what they can do for you.
Just FYI, Apple typically does not replace computers unless they are unable to repair them. Since it is not a stock machine, a repair would likely take less time than a replacement anyway.
Best of luck. -
Why page looks fine in Design view but not live view?
I am new to DW. I created a page that looks fine in design view but now I cant get it to show up in live view or the browser preview. Can some one give me some areas to troubleshoot. Most of the code is from a previous page I created that still looks fine in every view. I am not sure what I could be doing different in setting up this site.
Thanks for taking the time to reply to question. Aftr taking a break. I came back realized I inserted the stylesheet before I changed site settings. I just needed to remove the forward slash from my stylesheet declaration. FYI for anyone else new to DW: if stuffs not showing in Live View and Browser Preview eg background images, Go to Manage Sites and check your site setting for Links relative to: You may have switched between document and site root. Thus breaking your links to images or in my case the entire style sheet.
-
Hi Someone Know why my charger is not working properly but always it was been working good but now when conect my iphone (3gs) appears a golden triangle saying :Charging is not Supported with this accessory. Please I Need Some Help Here. Thanks =D
sounds like the cable or the iphone connector are somehow damaged
-
Viewing header info not aligning properly
I've been using Microsoft Entourage for about 6 years or so and decided to try out the Mail program. I'm running Mail 2.1.2 on OS 10.4.11. Everything is working fine except the way the emails are displayed. Header info, "From" and "To" are not aligning up properly with the names.
The sender's name (email address) is at the top and there are approx 12 line spaces (blank) before the "From:". "Subject" and "Date" info are aligned properly. Following the Date info, the receiver's name and email address is displayed followed by about 12 line spaces (blank) before the "To:". This makes the header info take up a lot of space with empty area.
I tried changing fonts and sizes with no luck. I ran all the updates which also didn't fix the problem. FYI, I use the Suitecase to manage my fonts.
Any suggestions will be greatly appreciated.
Thank you!This is a font issue. You’ve probably either disabled or removed a font that Mail needs to work properly (e.g. Helvetica):
Font Management in Mac OS X Tiger and Panther
You can only change in Preferences the fonts that Mail uses for some things. The font that Mail uses for other things, and for message headers in particular, is fixed (Helvetica). -
Div tags not aligning properly
I can not get my div tags to align properly. I have one div tag set to float left, and the other to float right. I can get the first set to work, but as soon as I add in another set, they both float left. I have played around with margins, borders, and padding and nothing seems to be working. Here is the code:
<style type="text/css">
.pageborder {
width: 795px;
height: 1000px;
border: medium solid #008478;
font-family: Verdana, Geneva, sans-serif;
font-size: 10pt;
.prodboxleft {
font-family: Verdana, Geneva, sans-serif;
font-size: 10pt;
background-color: #76c6be;
text-align: left;
width: 369px;
float: left;
height: 150px;
border: medium dashed #008478;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 12px;
padding: 0px;
.prodboxright {
font-family: Verdana, Geneva, sans-serif;
font-size: 10pt;
background-color: #76c6be;
text-align: left;
width: 369px;
float: right;
height: 150px;
border: medium dashed #008478;
margin-top: 5px;
margin-right: 12px;
margin-bottom: 5px;
margin-left: 5px;
padding: 0px;
</style>
</head>
<body>
<div class="pageborder"><div class="prodboxleft">Content for class "prodboxleft" Goes Here</div>
<div class="prodboxright">Content for class "prodboxright" Goes Here</div>
<div class="prodboxleft">Content for class "prodboxleft" Goes Here</div>
<div class="prodboxright">Content for class "prodboxright" Goes Here</div>
<div class="prodboxleft">Content for class "prodboxleft" Goes Here</div>
<div class="prodboxright">Content for class "prodboxright" Goes Here</div>
</div>Thank you, unfortunately that is not the issue. The border is set in pixels and it is wide enough to accommodate the floated containers. As I mentioned in my first post, the first set of containers work perfectly, then the second set does not, and yet a third set does. It is almost as if there is something in the middle of the space that is not allowing the containers to behave properly. I have attached a screen shot to show what I am talking about.
-
Help! My browser window is suddenly not formatting properly. (losing browser formatting, glitch, bug) I'm using FCP 7 on an iMac with OS X 10.8.5 and have been successfully doing so for a couple of years. I fear my Final Cut Pro is corrupt and I have to re-install. Anyone ever see this problem? Old projects display and behave fine in the browser, but any new project I create, totally loses the formatting in the browser and the browser also does not display the "effects" window properly anymore. (see below)
YOU ARE A LIFE SAVER! I reinstalled the program and everything. THANK YOU! THANK YOU! MY HERO!!!
-
Front panel not aligning properly on scale print
So I've created a custom print VI with various graphics that I'd like to print on an 11x17 sheet of paper in landscape mode, but for the life of me I can't get the thing to align properly. I want the front panel to print centered with 0.1 - 0.2 inch margins all around, but instead of doing this, the front panel will sometimes print aligned to the left and top or other times to the right and top (with wrong margins always on two sides, sometimes three or four). I'm using a programmatic call to the easy print function that scales the front panel to fit on this size. However, even after making the proportions of objects on the VI 11:17 (vertical: horizontal) I still can't seem to get this thing to center properly. Any ideas of what the problem could be?
Ok, So I created a blank VI with a 1280 x 1978 frame decoration, yet the print preview in labview still doesn't seem to show the thing with proper alignment.
Looking at the picture, looks like it's aligned along the right and top of the page rather than uniformly centered. Ideally, the frame would uniformly cover all the edges around the page in the preview. I suspect this is an issue with LabVIEW and not my printer, as I can set my printer to borderless printing.
Any ideas?
Attachments:
print align.JPG 22 KB -
Images not aligning properly in table cells
I have a simple table (1 row, 4 columns).
Three of the images have identical dimensions (108 x 200 pixels). After placing them each into a cell of the table, the middle image is not aligned with the other two. Instead, it is higher in the cell.
I looked at source code, and everything appears to be identical. Also, every image has the default setting for alignment (center, middle).
How can I fix this?
ThanksOK thanks for posting a link to your site. The error is in Line 73 . The code snippet looks like this:
Click on the above picture to get a magnified version of it and you will see that in Line 73 you have something like this:
& nbsp;
Delete it and your problem is solved.
Good luck. -
"disk not ejected properly" but is still mounted on desktop?
Hi,
I get a "The disk was not ejected properly" message, yet if I go to the Finder's desktop the drive is still mounted and accessible and read/write works fine.
I've witnessed it happen once while viewing the desktop. The drive disappears momentarily for about 1.5 - 2 seconds, then shows up again. So It DOES eject, but it instantly re-mounts, and I mean in under 2 seconds and I've neder experienced a drive intentioanlly unmount/remount this fast in my life. It does happen more often when waking from sleep, but not only in that instance.
Been having this bug since OS X Lion and on to the current version of Marveicks. I am posting this under Mavericks because it's not hardware specific to anything other than USB and LaCie. I am experiencing it on multiple machines, different models, with different external LaCie drives of differing types, with different USB cables. This does not only happen when waking from sleep (as most threads seem to indicate), it sometimes happens for no reason.
The common factors:
All the external drives are LaCie drives (though vastly different models).
Both affected Macs are 2012+ models with Thunderbolt interphases and USB 3 ports (am using USB ports for USB drives, no Thunderbolt adaptors).
I could suspect LaCie, but since it's new since Lion... well you get the picture. Something leads me to suspect a bug in OS X USB protocol, possibly on software, maybe even in firmware. Might be linked to energy saving. I have "sleep drives when possible" enabled, and though it might help to turn that off (I haven't tested yet) I just don't feel I should need to, I want unused drives to spin down and save energy.Hello there The Heftster,
It sounds like your external drives are periodically disconnecting on their own from the computer causing the prompt saying that the drive was not ejected properly. I would start by resetting the PRAM on your computer with this article:
OS X Mavericks: Reset your computer’s PRAM
http://support.apple.com/kb/ph14222
Shut down your Mac.
Locate the following keys on the keyboard: Option, Command (⌘), P, and R. You will need to hold these keys down simultaneously in step 4.
Turn on your Mac.
Immediately press and hold the Option-Command-P-R keys. You must press this key combination before the gray screen appears.Continue holding the keys down until your Mac restarts, and you hear the startup sound for the second time.
Release the keys.
Resetting PRAM may change some system settings and preferences. Use System Preferences to restore your settings.
As well as the SMC on your computer:
Intel-based Macs: Resetting the System Management Controller (SMC)
http://support.apple.com/kb/ht3964
Shut down the computer.
Unplug the computer's power cord.
Wait fifteen seconds.
Attach the computer's power cord.
Wait five seconds, then press the power button to turn on the computer.
Thank you for using Apple Support Communities.
Take care,
Sterling -
Downloaded icloud control panel to Win 7. Everything seems ok until you "apply" synching at the icloud control panel. Then you get an error message that says "icloud control panel did not install properly". Repairing in Windows control panel as suggested does not help. If you do not try to sync Outlook data (2010) then it seems to work just fine.
I was able to finally stop ITunes from crashing after many days of searching n restarting my computer many times.
a) First I went to this site ->http://forums.techarena.in/guides-tutorials/1119812.htm that showed me how to disable DPE. Please make sure that u have good virus...etc.. protection first before doing this. I have Avast Internet Security. RESTART UR COMPUTER..
b) I then uninstall ITunes by following this site ->http://support.apple.com/kb/ht1923 RESTART UR COMPUTER..
c) I then downloaded a beta version of ITunes. I happen to download beta 7 before the final of 10.5 version came out. Installed it. After installing I click on it n it said somewhere along the line of "this ITune ver. expired" I checked in my Programs n Features n notice that QuickTime was installed w that beta version.
d) Go online n download the final version of ITunes ->http://www.apple.com/itunes/download/ ...... After u finish dling install that. After that's done connect your IPod, IPhone...etc... n click on ITunes, it should sync all the way.
I was finally able to sync all thru the steps insteading of it crashing on me midway. Hopefully this will work for you. Good luck !
IPhone4, Gateway Windows Vista 32bit -
Help me uninstall silverlight off of my computer because it is not working properly. please help
Hi s,
Follow Perry's and others' instructions in this thread and see if it works: https://discussions.apple.com/message/18908481#18908481 -
DW CS4 - Design/Live view not available with PHP
I am working with PHP documents but both Live View and Design View are grey and unavailable with PHP documants open. I am using MAMP and have set up local info and testing server in the site set up dialog several times myself and with the help of some web search with no difference. Any thoughts on what may be some things to check would be greatly appreciated.
Hoooo Leeeee Moe Leeee...
QUOTE"
Have you changed your preferences to open PHP pages in Code view?
In the File Types/Editors category of Preferences, if you add .php to the list of file name extensions in "Open in code view", it disables Design view and Live View for that type of file.
I can not believe I searched for over 30 minutes to find out that adding .php to this field; disables one of the ONLY reasons I purchased CS5.
Just for giggles, why would it be designed like this? "Open in code View" = a prefrence to what screen type you see, not, "I want to disable CS5 to pre CS2 version"...
Well, just my two cents. Now that I know, I will never do that again... So, Next question. Is there a way to make Dreamweaver by default open in code view, without setting the tempting box to do it for you?
Thanks ahead of time. By the way, I am greatful that someone has the answers! and I am glad that person is you sir = Enter the Adobe Expert.
Maybe you are looking for
-
The wireless radio is not functioning
The wireless radio is not functioning on my HP Photosmart C309a (Vista 32-bit) - Contact HP support on Wireless Network Test Report This question was solved. View Solution.
-
OSB-due to service configuration in flux
Hi, I am seeing this error continuously in the server log. I am trying to read a file from a directory location using file protocol, and after reading the file I am archiving it. Here the file is getting read and archiving continuously in the archive
-
Regarding sales and distribution
how to create condition type with reference to an existing condition type
-
Hi, I am working on a requirmen, in which I am trying to connect two PI systems with each other, the scenario is like ECC ==> SAP-PI 7.1 ==> SAP-PI 7.0 ==> Third Party. I am using XI adapters for this, My scenario is working fine till 2nd PI. I am ab
-
Panel doesn't display properly until I resize the frame
Hiya folks, I'm currently trying to write a simple piece of music notation software. This is my first time using swing beyond a relatively simple JApplet and some dialog stuff. Anywho, I ran into a pretty discouraging issue early on. So far I've got