Safari preview problem
Budo Cat Oct 5, 2010 7:48 AMMy pages preview fine in Firefox, Opera and Chrome, as well as "Live View." But when I preview them in Safari, there is no spacing between the paragraphs. All the type looks like one big paragraph. Also, my photos in Safari do not float right (per my CSS rule). Rather, they're on on the left side or center of the page.
Is this a Safari glitch, and if so, how can I correct? Or is it a problem with my code? I suspect it's the latter, but I've reviewed it for hours and cannot find anything amiss.
(Also, in a slightly related question, I can preview my pages in Chrome only if I open the browser, then click on File > Open File. When I try to open Chrome with the little globe icon in Dreamweaver, I get a page that reads, "This webpage is not found. No webpage was found for the web address...." Any suggestions on how I can get Chrome to preview pages with the icon, or is this a common problem?)
I'd be very grateful to anyone who can help. Coding follows:
CSS:
* {
margin-right: auto;
margin-left: auto;
}
#wrapper {
background-image: url(../templates2/mainBody.jpg);
background-repeat: repeat;
overflow: hidden;
width: 800px;
background-color: #CCC;
}
#wrapper #header {
height: 150px;
width: 800px;
background-color: #CCC;
background-image: url(../templates2/header.jpg);
}
#wrapper #navBar {
height: 55px;
width: 800px;
background-color: #666;
background-image: url(../templates2/navBar.jpg);
}
#wrapper #mainBody {
width: 80%;
padding-top: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
}
#wrapper #footer {
background-image: url(../templates2/footer.jpg);
width: 800px;
height: 60px;
text-align: center;
font-size: 16pt;
}
.intro {
font-style: italic;
}
img {
margin-top: 15px;
margin-bottom: 15px;
margin-left: 20px;
float: right;
border: 1px solid #000;
}
.byline {
font-weight: bold;
text-align: center;
}
.tagline {
font-style: italic;
HTML:
<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>2000_template</title>
<!-- TemplateEndEditable -->
<link href="../CSS/layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
-->
</style>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div><!--close header-->
<div id="navBar">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">home</a> </li>
<li><a href="#">about</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">contact</a></li>
<li><a class="MenuBarItemSubmenu" href="#">index</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">topic name</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
</ul>
</div><!--close navBar-->
<div id="mainBody"><!-- TemplateBeginEditable name="mainContent" -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dolor libero, aliquam vitae scelerisque in, malesuada non neque. </p>
<p>Phasellus dignissim arcu eget velit posuere vel varius magna dapibus. Phasellus pharetra imperdiet nunc, vel interdum dolor fermentum id. Integer luctus mollis tempor. Nunc lacus urna, blandit sollicitudin cursus at, ultrices et erat. Sed rhoncus, ipsum vitae dictum scelerisque, diam felis euismod augue, a facilisis massa augue ut nibh. </p>
<p>Sed ac ante magna. Nulla consequat posuere ullamcorper. In interdum, elit sed tempor suscipit, quam mauris egestas justo, sed lobortis sem magna a mi. Etiam tincidunt fringilla sapien, congue condimentum augue adipiscing ut. Nam pretium egestas lacus in elementum. Vivamus eros erat, varius nec aliquam quis, congue at orci.</p>
<!-- TemplateEndEditable --></div>
<!--close main body-->
<div id="footer"><!-- TemplateBeginEditable name="footerPage" -->
<p> << Previous 1 :: 2 :: 3 :: 4 Continue >></p>
<!-- TemplateEndEditable --></div><!--close footer-->
</div><!--close wrapper-->
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>



