Preview in Browser and Adobe Browser Lab show website differently? Please help
hi...working on first website , have question differences in viewing site through
choosing file...preview in browser....
from within dreamweaver, , using adobe browser lab view website.
there seems significant difference between two. when preview firefox within dreamweaver, site how want it.
when go browser lab, is...well... disaster.
i'm attaching screenshots of 2 code, can show how different are. here screenshot of website looks when use preview in browser function within dreamweaver view in firefox. how i'd look.
and here screenshot of looks when preview in adobe browser lab in firefox.
the quote underneath logo, left div text flowing on center div, nav bar graphics narrow, photo hanging outside div should contained in. not want.
does have insight how fix or version correct?
i'm stumped. first website: shouldn't these 2 things similar? , 1 correct?
and here code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>your career direction career , college counseling</title>
<style type="text/css">
<!--
@font-face {
font-family: 'museo_sans_500regular';
src: url('museosans-500-webfont.eot');
src: url('museosans-500-webfont.eot?#iefix') format('embedded-opentype'),
url('museosans-500-webfont.woff') format('woff'),
url('museosans-500-webfont.ttf') format('truetype'),
url('museosans-500-webfont.svg#museo_sans_500regular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'museo_sans_500italic';
src: url('museosans-500italic-webfont.eot');
src: url('museosans-500italic-webfont.eot?#iefix') format('embedded-opentype'),
url('museosans-500italic-webfont.woff') format('woff'),
url('museosans-500italic-webfont.ttf') format('truetype'),
url('museosans-500italic-webfont.svg#museo_sans_500italic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'binary_itcregular';
src: url('binaritcbol-webfont.eot');
src: url('binaritcbol-webfont.eot?#iefix') format('embedded-opentype'),
url('binaritcbol-webfont.woff') format('woff'),
url('binaritcbol-webfont.ttf') format('truetype'),
url('binaritcbol-webfont.svg#binary_itcregular') format('svg');
font-weight: normal;
font-style: normal;
}body {
margin: 0;
padding: 0;
color: #000;
font-size: 100%;
line-height: 1.4;
background-image: url(images/background.gif);
background-repeat: repeat;
}
/* ~~ element/tag selectors ~~ */
ul, ol, dl { /* due variations between browsers, it's best practices 0 padding , margin on lists. consistency, can either specify amounts want here, or on list items (li, dt, dd) contain. remember here cascade .nav list unless write more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing top margin gets around issue margins can escape containing div. remaining bottom margin hold away elements follow. */
padding-right: 15px;
padding-left: 15px;
font-family: "museo sans 500", "museo sans 500 italic", "museo 700", "museo 500", "museo 300", arial;
}
h1 strong {
color: #c60651;
font-size: 90%;
font-family: "binary itc bold";
}
h1 strong em {
}
a img { /* selector removes default blue border displayed in browsers around image when surrounded link */
border: none;
}
/* ~~ styling site's links must remain in order - including group of selectors create hover effect. ~~ */
a:link {
color:#414958;
text-decoration: underline; /* unless style links extremely unique, it's best provide underlines quick visual identification */
}
a:visited {
color: #4e5869;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* group of selectors give keyboard navigator same hover experience person using mouse. */
text-decoration: none;
}
/* ~~ container surrounds other divs giving them percentage-based width ~~ */
.container {
width: 80%;
max-width: 1260px;/* max-width may desirable keep layout getting wide on large monitor. keeps line length more readable. ie6 not respect declaration. */
min-width: 780px;/* min-width may desirable keep layout getting narrow. keeps line length more readable in side columns. ie6 not respect declaration. */
background: #fff; /* auto value on sides, coupled width, centers layout. not needed if set .container's width 100%. */
margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
font-family: "museo sans 500", "museo sans 500 italic", "museo 700", "museo 500", "museo 300";
border-right-width: thick;
border-left-width: thick;
border-right-style: solid;
border-left-style: solid;
border-right-color: #c60651;
border-left-color: #c60651;
}
/* ~~ header not given width. extend full width of layout. contains image placeholder should replaced own linked logo ~~ */
.header {
padding-top: 40px;
font-family: "museo sans 500", "museo sans 500 italic", "museo 700", "museo 500", "museo 300", arial;
}
#quote {
float: right;
clear: left;
margin-right: 50px;
}
/* ~~ these columns layout. ~~
1) padding placed on top and/or bottom of divs. elements within these divs have padding on sides. saves "box model math". keep in mind, if add side padding or border div itself, added width define create *total* width. may choose remove padding on element in div , place second div within no width , padding necessary design.
2) no margin has been given columns since floated. if must add margin, avoid placing on side you're floating toward (for example: right margin on div set float right). many times, padding can used instead. divs rule must broken, should add "display:inline" declaration div's rule tame bug versions of internet explorer double margin.
3) since classes can used multiple times in document (and element can have multiple classes applied), columns have been assigned class names instead of ids. example, 2 sidebar divs stacked if necessary. these can changed ids if that's preference, long you'll using them once per document.
4) if prefer nav on right instead of left, float these columns opposite direction (all right instead of left) , they'll render in reverse order. there's no need move divs around in html source.
*/
.sidebar1 {
float: left;
width: 15%;
padding-bottom: 10px;
margin-top: 40px;
border-top-color: #fff;
border-left: #fff;
margin-left: 25px;
background-color: #fff;
font-family: "museo sans 500", "museo sans 500 italic", "museo 700", "museo 500", "museo 300", arial;
}
.content {
width: 60%;
float: left;
margin-top: 40px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 0;
font-family: "museo sans 500", "museo sans 500 italic", "museo 700", "museo 500", "museo 300", arial;
}
.sidebar2 {
float: left;
width: 30%;
background-color: #d3ccb2;
margin-top: 40px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
border-top-color: #fff;
border-right-color: #fff;
border-bottom-color: #fff;
border-left-color: #fff;
border-right-width: 5px;
font-family: "museo sans 500", "museo sans 500 italic", "museo 700", "museo 500", "museo 300", arial;
}
/* ~~ grouped selector gives lists in .content area space ~~ */
.content ul, .content ol {
padding-top: 0;
padding-right: 25px;
padding-bottom: 15px;
padding-left: 60px;
font-family: "museo sans 500", "museo sans 500 italic", "museo 700", "museo 500", "museo 300";
font-size: 100%;
color: #666;
}
#quote {
float: right;
clear: both;
}
/* ~~ navigation list styles (can removed if choose use premade flyout menu spry) ~~ */
ul.nav {
list-style: none; /* creates space between navigation on content below */
font-family: "museo sans 500", "museo sans 500 italic", "museo 700", "museo 500", "museo 300", arial;
line-height: 250%;
}
.nav {
font-family: "museo sans 500", "museo sans 500 italic", "museo 700", "museo 500", "museo 300", arial;
}
ul.nav li {
font-family: "museo sans 500", "museo sans 500 italic", "museo 700", "museo 500", "museo 300", arial;
}
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure links retain button after being visited */
padding: 5px 5px 5px 15px;
display: block; /* gives link block properties causing fill whole li containing it. causes entire area react mouse click. */
text-decoration: none;
color: #333333;
background-color: #fff;
font-family: "museo sans 500", "museo sans 500 italic", "museo 700", "museo 500", "museo 300", arial;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* changes background , text color both mouse , keyboard navigators */
color: #c60651;
font-family: "museo sans 500", "museo sans 500 italic", "museo 700", "museo 500", "museo 300", arial;
background-color: #fff;
background-image: url(images/navbar2.gif);
}
/* ~~the footer ~~ */
.footer {
padding: 10px 0;
position: relative;/* gives ie6 haslayout clear */
clear: both; /* clear property forces .container understand columns end , contain them */
}
/* ~~miscellaneous float/clear classes~~ */
.fltrt { /* class can used float element right in page. floated element must precede element should next on page. */
float: right;
margin-left: 8px;
}
.fltlft { /* class can used float element left in page. floated element must precede element should next on page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* class can placed on <br /> or empty div final element following last floated div (within #container) if #footer removed or taken out of #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.container .content {
width: 50%;
font-size: large;
}
#footer { width: 100%;
background-color: #fff;
}
.container .sidebar2 h4 img {
padding-left: 20px;
padding-top: 0px;
}
.sidebar2 p img {
border: medium solid #c60651;
}
#insert_logo2 {
border-top-width: 4px;
border-right-width: 4px;
border-bottom-width: 4px;
border-left-width: 4px;
border-top-color: #fff;
border-right-color: #fff;
border-bottom-color: #fff;
border-left-color: #fff;
}
.container .content p .content strong {
font-family: "museo sans 500", "museo sans 500 italic", "museo 700", "museo 500", "museo 300", arial;
}
.container .content .content {
font-family: "museo sans 500", "museo sans 500 italic", "museo 700", "museo 500", "museo 300", arial;
}
.container .content ul li strong {
font-family: "museo sans 500", "museo sans 500 italic", "museo 700", "museo 500", "museo 300", arial;
font-size: 95%;
line-height: 150%;
list-style-type: disc;
}
test {
font-family: "binary itc bold";
}
.container .sidebar2 p img {
margin-right: auto;
margin-left: auto;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-top-color: #c60651;
border-right-color: #c60651;
border-bottom-color: #c60651;
border-left-color: #c60651;
}
li strong {
line-height: 130%;
list-style-type: circle;
color: #978980;
}
.container .content ul {
}
.container .sidebar1 .nav {
margin-top: 10px;
margin-bottom: 10px;
}
.nav li {
background-image: url(images/navbar2.gif);
background-repeat: no-repeat;
background-position: right center;
left: auto;
right: auto;
clip: rect(auto,auto,auto,auto);
}
.container .sidebar1 h6 {
padding: 0px;
color: #000000;
}
#footer h3 strong {
font-size: 60%;
color: #978980;
}
.container .content p {
padding-left: 5%;
padding-right: 5%;
font-family: "museo sans 500", "museo sans 500 italic", "museo 700", "museo 500", "museo 300", arial;
}
.container .sidebar2 p {
padding-right: 8%;
padding-left: 8%;
padding-top: 5px;
}
#insert_logo2 #insert_logo2 {
padding-left: 15px;
}
.container .content ul {
color: #c60651;
}
h6 {
color: #000;
font-family: "museo sans 500", "museo sans 500 italic", "museo 700", "museo 500", "museo 300", arial;
}
.sidebar1 h8 strong {
font-size: 80%;
font-family: "museo sans 500", "museo sans 500 italic", "museo 700", "museo 500", "museo 300";
}
.container .sidebar1 h7 {
font-size: 40%;
color: #978980;
}
.h7 {
font-family: "museo sans 500", "museo sans 500 italic", "museo 700", "museo 500", "museo 300", arial;
font-size: 15%;
}
.container .sidebar1 h8 {
font-family: "museo sans 500", "museo sans 500 italic", "museo 700", "museo 500", "museo 300", arial;
}
-->
</style><!--[if lte ie 7]>
<style>
.content { margin-right: -1px; } /* 1px negative margin can placed on of columns in layout same corrective effect. */
ul.nav { zoom: 1; } /* zoom property gives ie haslayout trigger needs correct whiltespace between links */
</style>
<![endif]--></head>
<body>
<div class="container">
<div class="header"><!-- end .header -->
<p class="clearfloat"><a href="#" id="insert_logo2"><img src="images/ycd-logo-tag-rgb-web-sm.gif" alt="insert logo here" name="insert_logo" width="638" height="110" id="insert_logo2" style="background: #fff
; display:block;" /></a></p>
<div id="quote"><img src="images/quote.gif" alt="choose job love" width="355" height="81"></div>
<p class="clearfloat"> </p>
</div>
<div class="sidebar1">
<ul class="nav">
<li><a href="#">home</a></li>
<li><a href="#">students</a></li>
<li><a href="#">parents/educators</a></li>
<li><a href="#">professionals</a></li>
<li><a href="#">bio/contact</a></li>
<li><a href="#">q & blog</a></li>
<li><a href="#">testimonials</a></li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<h8><strong>your career direction</strong><br></h8>
<h6>96 harvard avenue<br>
maplewood nj 07040<br>
lmark@yourcareerdirectionllc.com<br>
(973) 996-0207</h6>
<h7>© career direction, llc, 2012<br>
</h7>
<p> </p>
</div>
<div class="content">
<h1><strong><img src="images/whether-you-are.gif" width="266" height="48" alt="whether are"></strong></h1>
<ul>
<li><strong>considering college choices & career options</strong></li>
<li><strong>preparing world of work after college</strong></li>
<li><strong>seeking new position further career</strong></li>
<li><strong>in-transition , considering new opportunities</strong></li>
<li><strong>seeking make significant , meaningful career</strong> <strong>change</strong></li>
</ul>
<p> </p>
<h1><img src="images/one-thing-is-for-sure.gif" width="310" height="38" alt="one thing sure"></h1>
<p>we need direct our own careers, our own lives!</p>
<p>given today's competitive job market, global economy, , changed corporate culture, can no longer depend upon others ensure our professional futures. choosing or changing career direction requires self-reflection, career education , action plan. </p>
<p> building successful , rewarding career requires linking interests, education , skills, trending industries, job opportunities , experience. takes making smart decisions college major, vocational training , continuing education options. motivation, persistence , top notch job search skills, can succeed in finding path building career right you.</p>
<p>at career direction, advocate. listen, assess, strategize, inspire, counsel, , network on behalf. personalized, holistic approach, we'll work you create action plan; path designed want go. </p>
<p> </p>
<!-- end .content --></div>
<div class="sidebar2">
<p><img src="images/counselingastudent.gif" width="321" height="256" alt="lisa mark counseling student"></p>
<p>by combining understanding of interests , current skills what’s happening in today's marketplace we’re able partner develop new career ideas, target companies, , generate job , internship opportunities. provide step step assistance ensure success in written communications, presentation skills, job search, interviews , life choices.</p>
<p>at career direction, career our passion. our mission educate , counsel choose own path in life , become want be. </p>
<p> </p>
<p> </p>
<!-- end .sidebar2 --></div>
<div class="footer">
<div id="footer">
<h3 align="center"> </h3>
</div>
<p> </p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
thanks help.
always trust actual browsers more emulator.
the real browser more accurate, updates manufacturers may not make emulator.
that being said, have couple little errors in html. can see them , instruction on how repair them here:
certain errors in html markup cause browsers (and emulators) funky stuff. never know, might fix display issue.
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment