alignment_problem_help

compfix

New Member
Hey, so what I can't get is why am I having this crazy alignment problem with any rollover/image I insert through dreamweaver. I thought that DW is WYSIWYG and I apparently its not the case. I'm guessing it will be something wrong with my code SO can some one PLEASE help me find it!?!?!!?

First see pictures of what I mean than at the bottom is my code. Great thanks in advance.

1)in the live_view_DW the green_button is in the possition where it should be BUT other views shows different - THIS IS WHAT I DON't GET
live_view.jpg

2)this is the firefox and as you see we have the discrepancy where Green_button is already misplaced.
firefox_view.jpg

3)design_view
design_view.jpg



PS. what I just noticed is that DW WYSIWYG works on IE NOT firefox so I don't know if thats the code issue or browser... anyway this is my code:
 

compfix

New Member
1st part


<!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>DK design </title>

<link rel="stylesheet" type="text/css" href="demo.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

<!--[if lte IE 7]>
<style type="text/css">
ul li{
display:inline;
/*float:left;*/
}
</style>
<![endif]-->

<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: fffffff;
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: fffffff;
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: fffffff;
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;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}

/* ~~ 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 {
background: fffffff;
}
.content {

padding: 10px 0;
}

/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background: fffffff;
}

/* ~~ 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;
left:1092px;
top:90px;
width:55px;
height:29px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:932px;
top:94px;
width:71px;
height:21px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:1109px;
top:94px;
width:32px;
height:14px;
z-index:3;
}
#apDiv4 {
position:absolute;
left:1074px;
top:98px;
width:44px;
height:25px;
z-index:4;
}
#apDiv5 {
position:absolute;
left:1300px;
top:90px;
width:40px;
height:29px;
z-index:4;
}
#apDiv6 {
position:absolute;
left:1152px;
top:90px;
width:42px;
height:28px;
z-index:5;
}
#apDiv7 {
position:absolute;
left:1240px;
top:90px;
width:25px;
height:29px;
z-index:6;
}
#apDiv8 {
position:absolute;
left:1023px;
top:622px;
width:253px;
height:106px;
z-index:7;
}
#apDiv9 {
position:absolute;
left:1016px;
top:868px;
width:261px;
height:97px;
z-index:7;
}
#apDiv10 {
position:absolute;
left:1160px;
top:582px;
width:60px;
height:23px;
z-index:7;
}
#apDiv11 {
position:absolute;
left:148px;
top:1221px;
width:46px;
height:27px;
z-index:8;
}
#apDiv12 {
position:absolute;
left:861px;
top:586px;
width:156px;
height:39px;
z-index:7;
}
 

compfix

New Member
2nd part


-->
</style>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
</div>
<body onload="MM_preloadImages('buttons/contact_after.png','buttons/portfolio_after.png','buttons/home_after.png','buttons/about_after.png')">
<div align="center">
<div id="apDiv1"><a href="web_design.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','buttons/home_after.png',1)"><img src="buttons/home_before.png" name="Image12" width="58" height="29" border="0" id="Image12" /></a></div>
<div id="apDiv5"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','buttons/contact_after.png',1)"><img src="buttons/contact_before.png" name="Image13" width="86" height="29" border="0" id="Image13" /></a></div>
<div id="apDiv6"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','buttons/portfolio_after.png',1)"><img src="buttons/portfolio_before.png" name="Image14" width="86" height="29" border="0" id="Image14" /></a></div>
<div id="apDiv7"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','buttons/about_after.png',1)"><img src="buttons/about_before.png" name="Image15" width="58" height="29" border="0" id="Image15" /></a></div>
<div id="apDiv12"><img src="buttons/green-button.png" width="219" height="40" /></div>
<div class="container">
<div class="header"><!-- end .header --><img src="images/design_site_head_panel.png" width="1024" height="150" /></div>
<div class="content">
<div id="main">


<div id="gallery">

<div id="slides">

<div class="slide"><a href="http://compfixusa.net/" target="_blank"><img src="portfolio_pics/portfolio_1.jpg" width="920" height="400" /></div>
<div class="slide"><img src="img/sample_slides/under_constraction.jpg" width="920" height="400" alt="side" /></div>
<div class="slide"><img src="img/sample_slides/under_constraction.jpg" width="920" height="400" alt="side" /></div>
<div class="slide"><a href="http://google.com/" target="_blank"><img src="img/sample_slides/last_from_portfolio.jpg" width="902" height="400" /></a></div>

</div>

<div id="menu">

<ul>
<li class="fbar">&nbsp;</li><li class="menuItem"><a href=""><img src="img/sample_slides/1_thumb.png" width="24" height="24" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/2_thumb.png" width="24" height="24" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/3_thumb.png" width="24" height="24" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/info_thumb.png" width="24" height="24" /></a></li>
</ul>


</div>

</div>

</div>
<!-- end .content --></div>
<div class="footer">
<p><img src="images/seperator.png" width="1024" height="72" />
<img src="images/services_body.png" width="920" height="300" /></p>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Footer</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
 

d a v e

New Member
so is it ok in a browser? DW is only a guide. as long as it displays ok in all popular browsers then you're fine
 

compfix

New Member
here is the zip file

here you go... i created new html from template and tried to add rollover image BUT with the same issue the image will NOT stay where it should WYSIWYG is not working don't know what that is. Please help

please see attachment and let me know what is the problem.

thanks
 

Attachments

  • alignment problem2.zip
    14.3 KB · Views: 7

d a v e

New Member
sorry - i don't open unkown zips.
post a url - upload to a test directory if it's not live.

also all those absolutely postioned divs are going to cause you trouble if you're not careful - as you're starting to find out ;)
 

compfix

New Member
sorry - i don't open unkown zips.
post a url - upload to a test directory if it's not live.

also all those absolutely postioned divs are going to cause you trouble if you're not careful - as you're starting to find out ;)


it has to be something that I'm doing wrong, the zip contains the default html by DW with my button. What I do is this:

1. layout, draw AP Div
2. then I choose my rollover/image in (common rollover/image)
3. I center/adjust the button wherever I want to. On LIVE_VIEW_DW it appears to be normal but other than that is not... ;( I have no clue


help plz


ps. what you don't have antivirus at home?....
 

d a v e

New Member
"1. layout, draw AP Div"
that's not a good method right there. you need to use the normal document flow and use your AP divs sparingly

yes i do have AV at home (like who doesn't?!) but i don't have viruses because, for example, i don't open zip files from people i don't know :)

i tried to open your zip at college but it's corrupted...

as i said before - upload the page, in a test directory if you need to

here's some reading for you too so you can get rid of all those AP divs and learn how to layout a page properly
http://www.htmldog.com
http://www.opera.com/company/education/curriculum/
http://www.w3schools.com/
http://www.cssbasics.com
http://www.sitepoint.com/article/html-css-beginners-guide/
http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first -website-in-easy-to-understand-steps/
 

compfix

New Member
thx

Thx dave I will look into website....as far as ziped file is not corrupt you just have to change extension to .rar from .zip because forum didn't allow .rar

will keep you posted..... anyway I will do my website for ie cuz statistics shows biggest usage.

"1. layout, draw AP Div"
that's not a good method right there. you need to use the normal document flow and use your AP divs sparingly

yes i do have AV at home (like who doesn't?!) but i don't have viruses because, for example, i don't open zip files from people i don't know :)

i tried to open your zip at college but it's corrupted...

as i said before - upload the page, in a test directory if you need to

here's some reading for you too so you can get rid of all those AP divs and learn how to layout a page properly
http://www.htmldog.com
http://www.opera.com/company/education/curriculum/
http://www.w3schools.com/
http://www.cssbasics.com
http://www.sitepoint.com/article/html-css-beginners-guide/
http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first -website-in-easy-to-understand-steps/
 

d a v e

New Member
if it's rar then you need to tell us it's rar :)

do your site so it works in all modern browsers, and IE so firefox, opera, safari (for windows too)
 
Top