Forum Moderators: not2easy
<a class="imgBorder" href="picture.php?id=2"><img src="images/uploads/thumbs/2.jpg" alt="" /></a>
And this CSS:
a.imgBorder, a:link.imgBorder, a:active.imgBorder {
background-color: #fff;
border: 1px solid #3B5998;
padding: 3px;
}
a:hover.imgBorder {
background-color: #fff;
border: 1px solid #000;
padding: 3px;
}
Now for some reason this works fine in IE7 and gives the effect I want, but in firefox the border and background do not cover the whole image...
Any reason for this or do you think it just might be conflicting with another setting in my CSS file?
[edited by: encyclo at 12:16 am (utc) on Jan. 9, 2007]
[edit reason] no screenshot links please, see forum charter [/edit]
IE7 finally honors the XML prolog/preamble (That <?xml string at the top of the pages).
Start by giving your page a valid DOCTYPE. IE 6 and above should honor it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I had gotten a lecture on this in another thread [webmasterworld.com].
For whatever reason, I never worry about quirks mode in my designs. I use pretty intricate layouts, and my pages maintain consistency across a wide range of browsers.
Firefox (and Safari, and Opera) renders borders, margins and padding correctly. IE does not.
However, IE accounts for about 75%-95% of the browsers out there (depending upon what kind of site you are hosting).
That causes large amounts of angst amongst the standards and Web design communities.
You'd be crazy not to design for IE, and many sites that only work in IE do fine.
What you need to do is figure out how to force IE to get out of quirks mode. Your site will then render "wrong," just like Firefox. At that point, make it work OK in Firefox, and it will do fine in IE 6 and above.
What you need to do is figure out how to force IE to get out of quirks mode. Your site will then render "wrong," just like Firefox. At that point, make it work OK in Firefox, and it will do fine in IE 6 and above.
Going by this:
I have, this is always at the top:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
... it seems to indicate that FiRe indeed does have the page rendering in IE's standards mode.
I'd be more inclined to find out what else might be affecting it - are there any properties assigned to
img[edited by: Setek at 1:01 am (utc) on Jan. 9, 2007]
... it seems to indicate that FiRe indeed does have the page rendering in IE's standards mode.
That's what I would have thought, too. I just found out a couple of days ago why I never worry about quirks mode. It's because I've been writing valid pages as a religious obligation for the last five years.
However, I remember having issues with IE not reading my DOCTYPE properly on a couple of occasions. I just re-did the DOCTYPE, and everything went well. It may have been because of "gremlins" in the text file, or not having a tab character before the URI, whatever. I replaced the DOCTYPE, and everything worked.
Setek I do have an img code (see above) however when removed the problem was still there...
[edited by: FiRe at 10:22 am (utc) on Jan. 9, 2007]
8.1 Box dimensions [w3.org] says:
The dimensions of the content area of a box — the content width and content height — depend on several factors: whether the element generating the box has the 'width' or 'height' property set, whether the box contains text or other boxes, whether the box is a table, etc. Box widths and heights are discussed in the chapter on visual formatting model details.
So, skip forward to the chapter on visual formatting model details:
9.2.1 Containing blocks [w3.org] says:
The details of how a containing block's dimensions are calculated are described in the next chapter.
So, skip forward to 10.1 Definition of "containing block" [w3.org] which says:
... if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block-level, table cell or inline-block ancestor box.
Since the <a> element is an inline element, the "containing block" of your image is actually the block level ancester "above" the <a> in the DOM tree. In other words, the <a> does not "contain" the img.
Thus, if you change your <a> element to be a block level element, it will contain your image, and the border will surround it, but it will fill the rest of the horizontal space (probably not what you want). Setting it to inline-block does not seem to work (I'm not sure why). Setting it to table seems to produce the result you're trying to achieve.
a.imgBorder,
a:link.imgBorder,
a:active.imgBorder
{
background-color: #fff;
border: 1px solid #ff0000;
padding: 3px;
}
a:hover.imgBorder
{
background-color: #fff;
border: 1px solid #000;
padding: 3px;
}
a.imgBorder
{
display: table;
}
There may be other ways around this, but upon initial glance, this seems to be what you're looking for.
Alternatively, you might set <a> to display: block, and give it a fixed width that is big enough for your image.
[edited by: Fotiman at 4:07 pm (utc) on Jan. 9, 2007]
