PDA

Click to See Complete Forum and Search --> : some issues with DreamWeaver cs3

camouflage
10-22-2007, 06:24 AM
Hi there, this is my first post.
I trying to build my own site using DW cs3, and it goes pretty good. (I have just studied basic html and css, so forgive my ignorance)
Anyhow, I'm having some issues with the css margins as in IE the display is different from the display in firefox. I use px instead of %, still while in IE it seems ok, in FF it's all messed up.
moreover, the "footer" appears to cover the "sidebar" even though I change the margins. this is my html/css code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 //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>title</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
padding: 0;
text-align: center;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 95%;
background-color: #f2f8fd;
background-image: url
margin-top: 10px;
margin-right: 30px;
margin-bottom: 15px;
margin-left: 30px;
}
.twoColLiqLtHdr #container {
width: 80%;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
background-color: #82B1BF;
background-image: url
}
.twoColLiqLtHdr #header {
margin-top: 10px;
margin-right: 704px;
margin-left: 20px;
padding: 0 10px;
background-color: #F2F8FD;
border: thin solid #000000;
}
.twoColLiqLtHdr #header h1 {
margin: 0;
padding: 10px 0;
}


.twoColLiqLtHdr #sidebar1 {

float: left;
width: 24%; /* top and bottom padding create visual space within this div */
background-color: #f2f8fd;
margin: 10px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 15px;
padding-left: 0;
border: thin solid #000000;
}
.twoColLiqLtHdr #sidebar1 h3, .twoColLiqLtHdr #sidebar1 p {
background-image: none;
margin: 10px;
padding-right: 10px;
padding-left: 5px;
cursor: auto;
border: thin outset #F0F0F0;
}


.twoColLiqLtHdr #mainContent {
background-color: #F2F8FD;
margin-top: -47px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 240px;
padding-right: 10px;
padding-left: 10px;
border: thin solid #000000;
}
.twoColLiqLtHdr #footer {
padding: 0 10px;
background-color: #DDDDDD;
background-image: url(Applied%20Phonology/Templates/IMG_1033.jpg);
border-top-width: thin;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;

}
.twoColLiqLtHdr #footer p {
margin: 0;apse
padding: 10px 0;
}


.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style>
<!--[if IE]>
<style type="text/css">

.twoColLiqLtHdr #sidebar1 { padding-top: 30px; }
.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 15px; }

</style>
<![endif]--></head>

<body class="twoColLiqLtHdr">

<div id="container">
<div id="header">
<h1 align="left"><font color="#6C3600" size="4" face="cambria"><strong>heading</strong></font></h1>
<!-- end #header --></div>
<div id="sidebar1">
<p align="left"><font size="2" face="lucida sans unicode" onmouseover="style.color='#6C3600'"
onmouseout="style.color='#000099'">Introduction</font></a></p>
<p align="left"><font size="2" face="lucida sans unicode" onmouseover="style.color='#6C3600'"
onmouseout="style.color='#000099'">h1 </font></a></p>
<p align="left"><font size="2" face="lucida sans unicode" onmouseover="style.color='#6C3600'"
onmouseout="style.color='#000099'">h2 </font></a></p>
<p align="left"><font size="2" face="lucida sans unicode" onmouseover="style.color='#6C3600'"
onmouseout="style.color='#000099'">h3</font></a></p>
<p align="left"><font size="2" face="lucida sans unicode" onmouseover="style.color='#6C3600'"
onmouseout="style.color='#000099'">h4 </font></a></p>
<p align="left"><font size="2" face="lucida sans unicode" onmouseover="style.color='#6C3600'"
onmouseout="style.color='#000099'">h5 </font></a></p>
<p align="left"><font size="2" face="lucida sans unicode" onmouseover="style.color='#6C3600'"
onmouseout="style.color='#000099'">h6 </font></a></p>
<p align="left"><font size="2" face="lucida sans unicode" onmouseover="style.color='#6C3600'"
onmouseout="style.color='#000099'">h7</font></a></p>
<p align="left"><font size="2" face="lucida sans unicode" onmouseover="style.color='#6C3600'"
onmouseout="style.color='#000099'">h8 </font></a></p>
<p align="left"><font size="2" face="lucida sans unicode" onmouseover="style.color='#6C3600'"
onmouseout="style.color='#000099'">h9</font></a></p>
<p align="left"><font size="2" face="lucida sans unicode" onmouseover="style.color='#6C3600'"
onmouseout="style.color='#000099'">h10</font></a></p>
<p align="left"><font size="2" face="lucida sans unicode" onmouseover="style.color='#6C3600'"
onmouseout="style.color='#000099'">h11 </font></a></p>
<p align="left"><font size="2" face="lucida sans unicode" onmouseover="style.color='#6C3600'"
onmouseout="style.color='#000099'">h12 </font></a></p>
<p align="left"><font size="2" face="lucida sans unicode" onmouseover="style.color='#6C3600'"
onmouseout="style.color='#000099'">h13</font></a></p>
</div>
<div id="mainContent">
<h2><font color="#660000" size="3" face="cambria"><img src="Applied Phonology/Images/brown square.jpg" alt="square" width="10" height= "10" /><strong> Introduction</strong></font></h2>
<div align="left">
<p><font color="#333333" size="2" face="verdana">ghj</font></p>
<p><font color="#333333" size="2" face="verdana">hgj</font>
</p>
</div>
<div align="left">
<p><font color="#333333" size="2" face="verdana">hgjgf</font></p>
<p><font color="#333333" size="2" face="verdana">gfhjf</font>
</p>
</div>
<div align="left">
<p><font color="#333333" size="2" face="verdana">fdghdf</font></p>
</div>
<hr width="100%" size="1" color="#DFDFDF" />
<div align="left">
<h2><font color="#660000" size="3" face="calibri"><img src="Applied Phonology/Images/brown square.jpg" alt="square" width="10" height= "10" /> <strong>heading2</strong></font> </h2>
</div>
<div align="left">
<p><font color="#333333" size="2" face="verdana">jhgkf</font></p>
<p><font color="#333333" size="2" face="verdana">dgfjdgf</font></p>
<p>&nbsp;</p>
</div>
</div>
<div id="footer"><font color="#663300" face="verdana" size="2">ghj</font><!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

thank for your help!!
KDLA
10-22-2007, 10:16 AM
Add this to your css:

* {margin: 0; padding: 0;}

This will eliminate all the unknown padding and margin settings that IE adds to things. You'll be able to control your layout better.

KDLA
camouflage
10-23-2007, 02:24 AM
Thanks alot for your help it saved me