Forum Moderators: not2easy

Message Too Old, No Replies

removing borders with CSS

document to be HTML 4.01 Strict using CSS for borders

         

magic_mushy

5:27 am on Jan 22, 2007 (gmt 0)

10+ Year Member



Hi,

I'm a newbie, so please be gentle.

I'm constructing a website [snip], which I would like to be compliant with HTML 4.01 Strict. At the moment I've setup most of image properties in css. For example

#Logo {
position:absolute;
width:228px;
height:148px;
z-index:1;
top: 0px;
}

There is one property, the border property, which I can only get to work by inputing it to the <div> tag. This means the document doesn't comply to strict docutype. So at the moment I have code as follows.

<div id="Logo"><a href="index.html"><img src="images/Logo.png" alt="Limousine Logo" width="228" height="148" border="0" ></a></div>

If I remove the border="0" from the <div> tag my graphics is repositioned slightly (it is indented by 1 pixel from the top and left margins of the page). I would appreciate any assistance.

[edited by: SuzyUK at 7:10 am (utc) on Jan. 22, 2007]
[edit reason] Please no site specifics for review [/edit]

Setek

5:57 am on Jan 22, 2007 (gmt 0)

10+ Year Member



Welcome to Webmaster World :)

Please remember you're not allowed to drop URIs like that - please see the Webmaster World Terms of Service [webmasterworld.com] and the CSS Forum Charter [webmasterworld.com].

About your problem, I'm not entirely sure what you're asking, but do you want to remove the border from the

#Logo
?

If so, all you have to do is add this:

#Logo { ...
border: 0;
... }

Add the border property to your

#Logo
selector and it will be removed.

However, you don't actually have

border="0"
on your
div
element, so I'm guessing what you want is to remove the border from the
<img />
within the
div
:

#Logo img { border: 0; }

It's as simple as that :)

Let us know if this isn't what you're after.

magic_mushy

6:49 am on Jan 22, 2007 (gmt 0)

10+ Year Member



First off I apologise for breaching terms of service. I went back to remove URI but too much time had passed, sorry. (hopefully a mod can fix for me).

Thanks for the quick response Setek.

I have attempted to use

#Logo { ...
border: 0;
... }

I then go to my <div> tag and remove the reference to border="0"

The end result is my graphic is repositioned, so it's not where it should be. Instead of the graphic sitting flush with the top left-hand boarder of the page. The graphic moves down and to the right a pixel or two. I can created a demo/test page so you can see the difference if this is convenient?

Setek

8:20 am on Jan 22, 2007 (gmt 0)

10+ Year Member



I can created a demo/test page so you can see the difference if this is convenient?

No no, it's fine :) If we can show the test code that's having a problem, future people with the same problem can read through this post and get the answers they need too.

I have attempted to use

#Logo { ...
border: 0;
... }

I then go to my <div> tag and remove the reference to border="0"

In the code you've posted, there is no proprietary

border="0"
on your
<div>
element itself, rather, on the
<img />
element.

<div id="Logo"><a href="index.html"><img src="images/Logo.png" alt="Limousine Logo" width="228" height="148" border="0" ></a></div>

(my big :D)

If you mean removing the proprietary

border="0"
on the
<img />
, you'll have to use the other bit of code I posted:

#Logo img { border: 0; }

Which will do what the proprietary attribute is trying to do - remove the border on the image.

magic_mushy

8:56 am on Jan 22, 2007 (gmt 0)

10+ Year Member



Big brownie points to you Setek. Well spotted it was an <img> tag.

Adding:

#Logo img { border: 0; }

was the fix, thanks a mill