Dreamweaver - div positionss fractured in Safari

Author

div positionss fractured in Safari

RTalbott

2005-12-12, 10:29 pm

I thought I was done with my first attempt at a completely table free page,
built with divs & CSS. However, I opened it in my partner's Safari browser on
her Mac, and found that several divs were out of position. The page works just
fine on all other browsers (not including IEMac, which we usually ignore). I
think the error must be in the CSS code, which I am attaching along with the
HTML code.

The problem seems to begin between divHeadNav and divIntro, which is the first
div improperly positioned.

The page can be viewed at www.arrica.com/joanwarrenstahl

Can anyone see my error(s)? Is this a peculiarity in Safari, or a principle
I'm violating?

Thanks very much in advance for help -- urgently needed

Richard

--------------------------------------------------------HTML
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>

<title>Joan Warren Stahl, Nature Artist</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<link href="../css/arrica_divsonly_joan.css" rel="stylesheet" type="text/css"
/>

<meta name="keywords" content="flower painting, floral art, botanical
paintings, nature paintings, nature studies, floral prints, drawing from
nature, painting from nature, garden art, fine art prints, prints, giclee
prints, fine art notecards, notecards, nature artist, botanical artist">
<meta name="description" content="Joan Warren Stahl, nature artist, portfolio
of prints and notecards">
</head>

<body>
<div id="divWrapper">
<div id="divHeader"><img src="../images/header.jpg" width="800" height="60"
/></div>
<div id="divContents">
<div id="divHeadNav"><a href="../index.htm">Home</a> | <a
href="../portfolio/portfolio01.htm">Portfolio</a> | <a
href="../statement/statement.htm">Artist's Statement</a> | <a
href="../contact/contact.htm">Contact</a></div>


<div id="divIntro">INTRODUCTION</div>

<div id="divFlower"><img
src="../images/image_flower.jpg" width="183" height="240" /></div>


<div id="divText">Content for id "divText" Goes Here</div>

<div id="divFootNav"><a href="../index.htm">Home</a> | <a
href="../portfolio/portfolio01.htm">Portfolio</a> | <a
href="../statement/statement.htm">Artist's Statement</a> | <a
href="../contact/contact.htm">Contact</a><br />
Copyright© 2005 Joan Warren Stahl. All rights reserved  Website:
<a href="http://www.arrica.com">ARRICA</a></div>
</div>

</div>
</body>
</html>

---------------------------------------------------------------------------css
code-----------------------------------------------------------------------
body {
min-width:800px;
background-color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
line-height: 14px;
}
#divWrapper
{
margin: 30px auto 0px;
padding: 0px;
width: 800px;
overflow: hidden;
background-color: #CCCCCC;
}
#divHeader {
overflow:hidden;
display:inline-block;
color: #996600;
font-style: italic;
font-weight: bold;
background-color: #999999;
float: left;
}
a {
text-decoration: underline;
font-weight: normal;
color: #000000;
outline: none;
font-size: 10px;
}
a:visited {
color: #999999;
font-size: 10px;
}
a:active {
color: #999999;
font-size: 10px;
}
a:hover {
color: #F95F17;
text-decoration: underline;
font-style: normal;
font-size: 10px;
}
#imgBridge {
}
#imgMotto {
position: relative;
left: 0px;
}
#divContents {
padding: 0px;
width: 800px;
background-image: url(../images/image_background.jpg);
height: 480px;
float: left;
background-repeat: no-repeat;
}
#divText {
width: 300px;
float: left;
padding: 0px 10px;
margin: 0px;
position: relative;
overflow: auto;
font-size: 11px;
height: 320px;
left: 350px;
top: -160px;
}
#divFooter {
z-index: 50;
position: absolute;
left: 120px;
top: 560px;
clear: both;
background-color: #FF99CC;
width: 340px;
}
#divHeadNav {
padding: 3.5px 0px 3.5px 10px;
font-size: 11px;
color: #FFFFFF;
background-color: #990000;
float: left;
width: 280px;
}
#divFootNav {
padding: 2px 0px 2px 10px;
font-size: 9px;
width: 380px;
float: left;
top: 180px;
position: relative;
left: -150px;
}
#divIntro {
background-image: url(../images/image_grad_intro.gif);
width: 540px;
position: relative;
left: 150px;
float: left;
color: #FFFFFF;
top: 20px;
padding: 3px 0px 3px 3px;
background-repeat: no-repeat;
}
#divFlower {
height: 240px;
width: 183px;
position: relative;
top: 80px;
left: -390px;
float: left;
}
#divHeadNav a {
color: #FFFFFF;
}
#divHeadNav a:visited {
color: #B2CFB9;
}
#divHeadNav a:active {
color: #0066FF;
padding-top: 5px;
}
#divHeadNav a:hover {
color: #B2CFB9;
}
#divPortfolioImageArea {
float: left;
position: relative;
top: 30px;
left: 250px;
background-image: url(../images/image_grad_imgarea.jpg);
background-repeat: no-repeat;
padding: 0px;
color: #000099;
text-align: left;
border: thin solid #000000;
height: 270px;
width: 390px;
margin: 0px;
}
#divGallery {
width: 390px;
height: 80px;
position: relative;
float: left;
left: -140px;
top: 300px;
font-size: 9px;
padding-top: 5px;
}
.divThumb {
background-color: #999999;
height: 50px;
width: 40px;
z-index: 100;
float: left;
position: relative;
margin: 10px 3.25px 2px;
}
#divFootNavPortfolio {
padding: 2px 0px 2px 10px;
font-size: 9px;
width: 380px;
float: left;
top: 310px;
position: relative;
left: -250px;
}
#divPrevious {
float: left;
margin-top: 10px;
}
#divNext {
float: left;
margin-top: 10px;
}

Osgood

2005-12-13, 6:27 pm

RTalbott wrote:
> I thought I was done with my first attempt at a completely table free page,
> built with divs & CSS. However, I opened it in my partner's Safari browser on
> her Mac, and found that several divs were out of position.

At the moment you don't have sufficient understanding of how to
construct a layout using css. Too many float and relatively positioned
<divs> when they are not necessary.

Here is the complete page code and css that is needed to get it working
in Safari. It will also work in Mac IE5x

<!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>
<title>Joan Warren Stahl Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

</style>

</head>

<body>

<div id="divWrapper">

<div id="divHeader"><img src="images/header.jpg" width="800"
height="60" /></div>
<div id="divContents">
<div id="divHeadNav"><a href="index.htm">Home</a> | <a
href="portfolio/portfolio01.htm">Portfolio</a> | <a
href="statement/statement.htm">Artist's Statement</a> | <a
href="contact/contact.htm">Contact</a></div>
<div id="divIntro">INTRODUCTION</div>
<div id="divFlowerTextHolder">
<div id="divFlower"><img src="images/image_flower.jpg" width="183"
height="240" /></div>
<div id="divText">
<p class="style1">"Drawing is the root of everything."<br />
—<span class="style2">Vincent Van Gogh </span></p>

<p>Welcome to my garden. This site offers you an opportunity to
view my portfolio of nature studies in watercolor and pencil. From
single plant species to mixed bouquets, my aim is always to capture each
flower's unique beauty in my own particular style. Always working from
nature, I take great pleasure in representing each stage of a plant's
development from the tiniest bud to the blossom in full bloom. Working
in opaque watercolor, I am able to build layers of color and detail,
petal by petal, as I "draw with my paintbrush." </p>
<p>The featured artwork is available for purchase as originals,
prints and note cards. You may contact me via email for pricing and
ordering information. I will also work with you to create a painting or
drawing on commission. Do you have a favorite flower or color palette?
Are you interested in designing a home or office space using nature
studies? Let us work together to bring your particular vision to life. </p>
</div>
<br style="clear: both;" />
<div id="divFootNav"><a href="index.htm">Home</a> | <a
href="portfolio/portfolio01.htm">Portfolio</a> | <a
href="statement/statement.htm">Artist's Statement</a> | <a
href="contact/contact.htm">Contact</a><br />

Copyright© 2005 Joan Warren Stahl. All rights reserved
 Website: <a href="http://www.arrica.com">ARRICA</a></div>
</div>

</div>

</div> 
</body>
</html>