[john545]

HI, and thank you in advance for the help. It is appreciated !

I can work my way around html and css, but basically Im still a novice. So I’m sure this is a simple fix

I'm using a template, built with XHTML 1.0 Strict, and Im working with Dreamweaver 4.

When trying to insert a jpg into the main text body, I cannot get it to appear without a border. I would like a borderless box wrapped by text but even when I set my Border parameter to “0”, I cant get rid of that border. The problem does not exist in the menu bar - only in the main body.

I can provide the site url and/or the CSS text file if desired.

Thank you !

john

[Advertisements]

At the very top of your CSS file type in:

* { margin: 0; padding: 0; border: 0; }

. That is the Universal Selector and will set to zero all before your styling takes over. Must be at the very top of the file.

Ron

Edited by Major Payne, 01 January 2008 - 08:57 PM.

[Major Payne]

At the very top of your CSS file type in:

* { margin: 0; padding: 0; border: 0; }

. That is the Universal Selector and will set to zero all before your styling takes over. Must be at the very top of the file.

Ron

Edited by Major Payne, 01 January 2008 - 08:57 PM.

[john545]

HI Ron,

Unfortunatley, the change didnt work. Perhaps I put int eh code wrong ? Here is the first section of my css. HOPe this helps.


[codebox]Version: 2.5 (Jan 11, 2007)

Screen layout: */

/***** Body and main container *****/

* { margin: 0; padding: 0; border: 0; }

body {
margin:0 auto;
padding:0;
font:76% Verdana, Tahoma, Arial, sans-serif;
background:#f4f4f4 url(img/bg.gif) top center repeat-y;
color:#404040;
}

#wrap {
background:#ffffff;
color:#404040;
margin:0 auto;
width:760px;
}

/***** Various tags *****/

a {
text-decoration:none;
font-weight:bold;
color:#286ea0;
background-color:inherit;
}

a:hover {
text-decoration:underline;
color:#286ea0;
background-color:inherit;
}

a img {
border:0;
}

p {
margin:0 0 1.4em 0;[/codebox]

[Major Payne]

Doesn't look like you have it wrong. Do you have a URL to page where you have the problem? What browser are you using?

Ron

[john545]

Ron,

Url is www.homesecuritysimplified.com

The only inserted image right now is in the body of the home page. I've tried it on others with the same problem. You should see the light blue border.

My browser is IE 6.0

Thanks again !

[Major Payne]

I see a banner image at the top, one image in the left column and no image in the body of your page. You do have a wrong path for this image:

file:///C|/Documents%20and%20Settings/JCP/Desktop/Home-Security/basics/Images/home-security.jpg

This will never work as it refers to a file on your computer.

Since you are using xhtml 1.0 strict, you need to correct the following code errors:

HTML Validator result
----------------------
http://www.homesecuritysimplified.com/

line 7 column 1 - Warning: <meta> element not empty or not closed
line 9 column 1 - Warning: <meta> element not empty or not closed
line 13 column 84 - Warning: <br> element not empty or not closed
line 13 column 34 - Warning: missing </h1> before <h2>
line 16 column 1 - Warning: discarding unexpected </h1>
line 22 column 13 - Warning: <br> element not empty or not closed
line 24 column 60 - Warning: <br> element not empty or not closed
line 24 column 64 - Warning: <br> element not empty or not closed
line 26 column 1 - Warning: <br> element not empty or not closed
line 26 column 42 - Warning: <br> element not empty or not closed
line 26 column 87 - Warning: <br> element not empty or not closed
line 27 column 54 - Warning: <br> element not empty or not closed
line 27 column 160 - Warning: <br> element not empty or not closed
line 27 column 171 - Warning: <br> element not empty or not closed
line 29 column 106 - Warning: <img> element not empty or not closed
line 49 column 68 - Warning: <br> element not empty or not closed
line 49 column 72 - Warning: <br> element not empty or not closed
line 49 column 76 - Warning: <br> element not empty or not closed
line 29 column 106 - Warning: <img> attribute value "LEFT" must be lower case for XHTML
Info: Doctype given is "-//W3C//DTD XHTML 1.0 Strict//EN"
Info: Document content looks like XHTML 1.0 Transitional
0 errors / 19 warnings

The image place holder and the following text start inside your banner at the top:

Electronic alarm systems are powerful deterrents. According to the National Burglar and Fire Alarm Association, homes equipped with an alarm system are 3 times less likely to be broken into than those without.

Apart from the obvious safety benefits, many insurance

You are also using font tags which are deprecated. The W3C Markup Validation Service is kicking out 174 coding errors for your page.

I would recommend that you design your pages using Firefox which is more compatible with CSS2 standards than IE will ever be.

Ron

Edited by Major Payne, 02 January 2008 - 04:03 PM.

[john545]

Ron,

The incorrect image path is fixed. But Im not savy enough to correct all the W3c errors. Everything looks good in IE 6. Is it not showing correctly in Firefox ?? Im not sure what I can do other than what Dreamweaver 4 codes for me, but I'm open to suggestions.

More importantly, it doesnt look like any of the errors are related to the image border. I also tried inserting an Adsense box, and the same border appeared - so the problem soesn't seem to be the img tag itself - anything inserted, except text, gets a border. Any other ideas ?

john

[Major Payne]

The code errors are not related to what you are seeing or any image border. I rechecked your page in Firefox and IE and now see all images and none have any borders. The image that wasn't showing before has a shadow border, but viewing image directly shows no such shadow border. I also get this flag: "Alt=The image “http://www.homesecuritysimplified.com/img/home-security.jpg” cannot be displayed, because it contains errors."

Will have to take a closer look as to what may be giving you a blue border. Possibly you have a div container set with a blue background that shows through.

Ron

[Major Payne]

Might take a closer look at this styling for your images:

#content img,#contentwide img, #contentwide2 img {
padding:1px;
display:inline;
background:#cccccc;
color:#303030;
border:4px solid #f0f0f0;
}

Ron

This is the way it looks in Firefox without the IE hacks: index page

Edited by Major Payne, 04 January 2008 - 07:22 AM.

[john545]

Ron,

Thank you !! Looks like I fixed the imaga issue by replacing that code with


[codebox]#content img,#contentwide img, #contentwide2 img {
padding:8px;
border:0;
}[/codebox]

I was stunned when I saw your Firefox rendering

I just dont know css, and Im afraid that if I try to use Dreamweaver to redo the hrml to fit Firefox, it'll then look all wrong in IE. Am I stuck, or is there another way to clean this up ?

Would it be better to use a different template doc type ?

john

[Major Payne]

Kinda thought that the border:4px solid #f0f0f0; wasn't what you wanted. It makes a dirty white border and is the same background color as called out on the CSS.

I would just use the plain strict document type as the one you have is a little more stringent and you were not adhering to it anyway. Or, at least Dreamweaver wasn't.

The page I made doesn't validate to xhtml 1.0 strict either as I didn't want to make a lot of changes in case you decided to use the page. It does have the CSS info at the top of page which can be placed on an external css file.

You really need to design your pages to Firefox as it is the best browser to use for viewing pages that adheres very closely to the CSS2 standards. After it looks good in FF, you can make a separate IE style (ie_only.css) sheet and put in the hacks to make IE behave. A conditional statement is used on your pages to direct IE browsers to the correct css. Lot of work, but worth it sometimes.

Ron

Edited by Major Payne, 05 January 2008 - 01:11 PM.

[john545]

You/re right, I sure didnt want that border. Thanks a ton !

That code fix also works to eliminate the same problem on some Adsense blocks I want to use on various pages. But I need the text to wrap. Is there a CSS tag that would do this with a script ? You can see what I mean here:

http://www.homesecur....com/test2.html

Also, I checked the page you built. Im assuming you only spent a couple minutes on it, so how the heck did you correct all those errors so fast ???? Wow !! Apart from just pointing out the rrors, is there a tool that would actually help me make the corrections ?

john

[Major Payne]

Well, I didn't correct all the errors for that doc type. Left some in. I'm use to hand coding my code and my HTML Editor has a built in customizable HTML Tidy I use. Then I double check at W3C.org's validator site.

For text wrapping, there may be a script, but I wouldn't recommend JS for that anyway as it will not work in browsers where JS is turned off. You might be interested in the following links:
CSS Image Text Wrap (best)
Text Wrap Around Image Generator
How To Make Text Wrap Around Photo
WRAP TEXT AROUND

The Universal Selector will normally set borders, margins, and paddings to zero on a page. The reason why you had the border for the image still is because the CSS called one out after the Universal Selector.

Missed the question about the tool to help you correct errors. There's one in Dreamweaver I believe, but you can check your pages and css at these links:
CSS Validation
HTML Validation

If you used Firefox with the Web Developers Tools Extension, you could have your page showing and use the Tools menu to check validation. If you ever get to the point where you can hand code HTML, you might want to get an HTML Editor that has a built in HTML Tidy checker tool.

Ron

Edited by Major Payne, 05 January 2008 - 04:59 PM.

[john545]

Ron, I think I have it figured out .

I put in a div that lets me float the ad block in any position. Here is what I used, and it seems to render in IE nicely.

</p><div style=”display:block;float:left;”> JS ad code goes here</div><p>

You can see the wrap I wanted here: http://www.homesecur....com/test2.html

Of course, I'm still stuck with my 200 errors, and I still have the 'ugly Firefox' problem. I tried deleting the little red indicators in the W3c errors messages, but that didnt help much. I just dont know CSS well enough. But I'll hunt around for a cleanup tool

[gunner12]

If you're just starting out learning HTML then I would not code using XHTML Strict, I would use HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR...ml4/loose.dtd">

It will be easier to validate.

I dont know about Dreamweaver 4 as I use Dreamweaver 8, but there is a built in validation tool here:

File->Check Page->Validate Markup