So, I'm trying to learn web development using CSS with Dreamweaver CS3 and
Photoshop CS3. Admittedly, I don;t have a clue as to what I am doing, so I am
making liberal use of video tutorials and I have amassed a small library on CS3
apps, XHTML, CSS, PHP and MySQL.

Using these tools, I have successfully developed a simple template for a
website - ALMOST. But, (and this is just the kind of thng that makes me fart
fire) when I drag a link in Dreamweaver to one of the pages that I want to link
to (using the provided crosshair icon), it breaks the CSS and drops down the
last image on my menu line to beneath the menu effectively destroying my site's
look.

How the hell do people use this crap? With stupid stuff like PS CS3 grids
dropping BETWEEN pixels by default (and screwing up the width measurements of
your layout when copying to DW) and Dreamweaver breaking CSS just by adding an
"a" tag to an image, it'll take MONTHS to learn how to effectively code a
relatively simple web page using industry standards.

F'ing ridiculous!! And, it's not just Dreamweaver...but I do expect more from
what is supposedly the industry standard in web development tools.

Anybody know how to work around this flaw?

> How the hell do people use this crap?

To fully appreciate DW, you really have to know HTML and CSS.

So, if you want to save yourself some time/stress, avoid learning DW, and
instead learn HTML and CSS. Once you learn those, DW becomes a lot more
intuitive.

-Darrel

Hello,

....Dreamweaver breaking CSS just by adding an "a" tag to an image...

The addition of the link element simply adds to the HTML.
Depending on your layout structure and any existing link styles that may now
be applied to this newly added link, it definitely could change things. That
really has nothing to do with DW, the change is likely because of how HTML
and CSS work.
You'd get the same result if you manually changed the code in notepad.

Can you post a link to the page, or post the code and your CSS?
We'll be able to tell you why adding a link changes the layout.
It really could be a number of things...

Take care,
Tim

"Cerksees" <webforumsuser@macromedia.com> wrote in message
news:gd5l7p$38l$1@forums.macromedia.com...
> So, I'm trying to learn web development using CSS with Dreamweaver CS3 and
> Photoshop CS3. Admittedly, I don;t have a clue as to what I am doing, so
> I am
> making liberal use of video tutorials and I have amassed a small library
> on CS3
> apps, XHTML, CSS, PHP and MySQL.
>
> Using these tools, I have successfully developed a simple template for a
> website - ALMOST. But, (and this is just the kind of thng that makes me
> fart
> fire) when I drag a link in Dreamweaver to one of the pages that I want to
> link
> to (using the provided crosshair icon), it breaks the CSS and drops down
> the
> last image on my menu line to beneath the menu effectively destroying my
> site's
> look.
>
> How the hell do people use this crap? With stupid stuff like PS CS3 grids
> dropping BETWEEN pixels by default (and screwing up the width measurements
> of
> your layout when copying to DW) and Dreamweaver breaking CSS just by
> adding an
> "a" tag to an image, it'll take MONTHS to learn how to effectively code a
> relatively simple web page using industry standards.
>
> F'ing ridiculous!! And, it's not just Dreamweaver...but I do expect more
> from
> what is supposedly the industry standard in web development tools.
>
> Anybody know how to work around this flaw?
>

Cerksees wrote:
> Admittedly, I don;t have a clue as to what I am doing

Well, at least you're honest.

> How the hell do people use this crap?

The first step is to understand the limitations of your own knowledge,
which you seem to have done, so you're moving in the right direction.
Judging from your comments, you're trying to learn everything at once.
Put PHP and MySQL aside for the moment, and concentrate on (X)HTML and
CSS. Once you have a good understanding of the basic technologies
underpinning web design, and realize that Dreamweaver is not a desktop
publishing application, you'll make a lot more progress.

Getting started with web design is relatively easy. Getting to a level
of competence takes time. There are a lot of interacting technologies
involved. They take time to master.

--
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

How do you suppose that answers the question?

Just so you know (since you obviously don't) you can go around this particular
Dreamweaver CS3 bug by adding " border="0"" to each img tag in the menu OR you
can add "img {border:0;}" to your CSS file. (Note that "style="border-style:
none"" will not work here.)

The problem with this work around is that image borders should be 0 by
default. The image borders are evidently read as 0 until the links are added.

I find nothing in the CSS documentation that says that links should have a
border of any size. Why would they? Links within text don't seem to have a
border assigned to them, so why are they assigned in this case?

DW is merely obeying the rules of HTML and CSS and showing you, in advance,
the visual impact of your drag-and-drop workflow before it goes live. In
other words, it's doing you a favour before you put the site live and wonder
why it's broken :-)

Browsers read the code in your website so the more you understand about that
code, the less frustrations you'll encounter regardless of what design tools
you use.

For example:

>>Dreamweaver breaking CSS just by adding an "a" tag to an image

It sounds like you've got a finely-tuned, pixel-perfect sliced Photoshop
image which has a tolerance of less than a pixel before the page breaks.

By default browsers add a 1 pixel blue border to linked images to indicate
that they're linked. That's supposed to be helpful to end users but many
designers don't like the visual impact of the blue border. Sounds like this
single extra pixel is breaking your design which suggests to me that your
design needs more tolerance built in since you've got no idea of the device
(monitor, PDA etc) or browser viewport dimensions on which your site will be
viewed globally.

If you want to eliminate the blue border, add "a img { border: 0; }" to your
stylesheet.

Got a link to your current design?


--
Regards

John Waller

Cerksees wrote:
> Just so you know (since you obviously don't) you can go around this particular
> Dreamweaver CS3 bug by adding " border="0"" to each img tag in the menu OR you
> can add "img {border:0;}" to your CSS file.

It's not a bug. It's the way that browsers treat images embedded in a
link, and it has been that way since I first started creating websites
more than 13 years ago.

> I find nothing in the CSS documentation that says that links should have a
> border of any size. Why would they? Links within text don't seem to have a
> border assigned to them, so why are they assigned in this case?

Because the HTML specification says so:

http://www.w3.org/TR/html401/struct/....html#h-13.7.3

--
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

TC2112,

Here is the template page code and the CSS files.

You can view the page at
http://www.worryfreepc.net/team2lear...est/index.html. It looks fine with
the "border=0" code added to every img tag in each menu item....but, should
that even be neccessary?

Could we please rewrite the web? HTML was developed for text. EVERYTHING
added since then has been a hack. it has served it's purpose well, but it is
high time we rewrote the basic code of the internet with the rich tapestry of
images and dynamic content that we currently wedge into it in mind.

And, while I am pissing into the wind, the WC3 should stop with all of the
suggestions and just develop an open source engine (including javascript) that
all browsers could use to show web pages. Then we'd have a single goal to code
for.

But.....that'd make too much sense wouldn't it?




<!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>Team 2 LEarn</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<link href="../wfpc_global.css" rel="stylesheet" type="text/css" />
</head>

<body class="oneColFixCtrHdr">

<div id="container">

<div id="header">

<div id="header-logo"><img src= "../images/t2l ibm logo.jpg"
width="955" height="70" /></div>

<div id="header-menu">
<div id="btnHome"><a href="../index.html"><img src="../images/t2l ibm
btnHome.jpg" alt="Home Button" width="85" height="25" lowsrc="t2l ibm
model.psd" border="0" /></a> </div>
<div id="btnChapter1"><a href="../chapter1.html"><img
src="../images/t2l ibm btnChapter1.jpg" alt="Chapter 1 Button" width="100"
height="25" border="0" /></a></div>
<div id="btnTestimonials"><a href="../testimonials.html"><img
src="../images/t2l ibm btnTestimonials.jpg" width="120" height="25" border="0"
/></a></div>
<div id="btnAboutJoeSasso"><a href="../aboutjoesasso.html"><img
src="../images/t2l ibm about joe Sasso.jpg" alt="About Joe Sasso Button"
width="145" height="25" border="0" /></a></div>
<div id="btnContactUs"><a href="../contactus.html"><img
src="../images/t2l ibm btnContactUs.jpg" alt="Contact Us Button" width="105"
height="25" border="0" /></a></div>
<div id="menuRightGraphic"><img src="../images/t2l ibm menu right
graphic.jpg" alt="Menu right graphic" width="400" height="25" border="0"
/></div>
</div>

<div id="header-bottom"><img src="../images/t2l ibm
header-bottom.jpeg" alt="lower menu image" width="955" height="30" border="0"
/></div>
</div>

<div id="mainContent">
<div class="mainContentLeftGraphic"><img src="../images/t2l ibm left main
text graphic.jpg" alt="Left main text graphic" width="48" height="330" /></div>
<div class="mainContentText"><!-- TemplateBeginEditable name="MainText"
--><img src="../images/t2l ibm main text graphic.jpeg" width="860" height="330"
/><!-- TemplateEndEditable --></div>
<div class="mainContentRightGraphic"><img src="../images/t2l ibm right
main text graphic.jpg" width="47" height="330" /></div>
</div>

<div id="footer"><img src="../images/t2l ibm footer.jpg" width="955"
height="145" /></div>

</div>
</body>

</html>


-------------------------------------------


@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #ffffff;
margin: 0; /* it's good practice to zero the margin and padding of the body
element to account for differing browser defaults */
padding: 0;
text-align: left;
}
.mainContentLeftGraphic {
float: left;
height: 330px;
width: 48px;
}

#container {
width: 955px;
text-align: center; /* this overrides the text-align: center on the body
element. */
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
}
.btnChapter1 {
float: left;
height: 25px;
width: 100px;
clear: none;
}

#header {
padding: 0; /* this padding matches the left alignment of the elements in
the divs that appear beneath it. If an image is used in the #header instead of
text, you may want to remove the padding. */
width: 955px;
float: left;
}

.mainContentLeftGraphic {
float: left;
height: 330px;
width: 48px;
}
#mainContent {
padding: 0;
float: left;
height: 330px;
width: 955px;
}
.mainContentText {
float: left;
height: 330px;
width: 860px;
background-image: url(images/t2l%20ibm%20main%20text%20graphic.jpeg) ;
margin-right: auto;
}
#header-logo {
float: left;
height: 70px;
width: 955px;
}
#header-menu {
float: left;
height: 25px;
width: 955px;
}
#btnChapter1 {
float: left;
height: 25px;
width: 100px;
clear: none;
}
#btnHome {
float: left;
height: 25px;
width: 85px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#btnTestimonials {
float: left;
height: 25px;
width: 120px;
}
#btnAboutJoeSasso {
float: left;
height: 25px;
width: 145px;
}
#btnContactUs {
float: left;
height: 25px;
width: 105px;
}
#menuRightGraphic {
float: left;
height: 25px;
width: 400px;
}

#btnChapter1 {
float: left;
height: 25px;
width: 100px;
}

#header-bottom {
float: left;
height: 30px;
width: 955px;
}


#footer {
padding: 0;
float: left;
height: 145px;
width: 955px;
}


----------------------------------------------------


@charset "utf-8";
/* CSS Document */

img { border:0; }

body { padding:0; margin:0; }

David,

Thanks for the link. I did notice that the link says "may be surrounded by a
border" not "must be surrounded by a border".

IMHO, everything optional should be left up to the developer, not the browser.
When you have browsers making the decisions, you wind up with the incompatible
crap that we currently must code for.

I have made the decision to only code for the last 2 versions of IE and
Firefox. It is not worth the effort to try and code for everything else. And,
since IE and FF are free, there is really no intelligent reason to not have the
latest version.

Thanks again for the link.

It looks fine with
> the "border=0" code added to every img tag in each menu item....but,
> should
> that even be neccessary?

No.

border="0" in every img tag is the old-fashioned and labour intensive HTML
method. That's why DW CS3+ dropped it.

Use an external, linked stylesheet and insert the line "a img {border: 0; }"

Then it's fixed for good on every page.

--
Regards

John Waller