Thu, 2004-04-01 15:45
I'm freelancing at a print design firm and they asked me to do their website. This is what I got.
I've done my best to conform to web standards, the XHTML and CSS validate, but a couple problems (which I've posted about):
-The list-style .gifs (the +signs) display to high and too far right in IE6Win. What's up with that?
-In the portfolio section, the links in 2nd tier of the list (for "Brand Identity" I mean "Aon, Family Ventures...") are supposed to be white in all stages. I spent all of yesterday failing to make that work.
-Oh, 1 more: The tail of the "p" for the phone number gets cut off in IE6Win. Ugh, again. Ideas?
Thanks for the help!
Thu, 2004-04-01 16:04
#1
Design Firm Site
Hi
The p thing in IE is a known bug, see www.positioniseverything.net
Big John has a page (the piefecta design) that has this css in:
.italics-test, .italics-test-side {
font-style: italic;
text-align: justify;
background: #ccd;
border: 1px solid red;
}
/*** The following fixes prevent justified italic text from destroying the layout in IE/win.
The problem is that those properties together make IE force the container wider,
which in this type of floated layout causes a float drop. Pre-IE6 gets "width: 100%"
and "overflow: hidden", while IE6 gets "width: auto" and "overflow: visible, which
is the default, but explicitly stating it seems to keep IE6 happy. IE6 also needs
to see the "height: 1%" to give it some kind of box dimension. Browser coddling
we call it. Finally, Bruno found that "word-wrap: break-word;" disarranged the
justified text in IE5.5 and 6, so it is defaulted to "normal" for this text.
If you don't need justified and italicized text then forget all these fixes ***/
/* \*/
* html .italics-test, * html .italics-test-side {
overflow: hidden;
width: 100%;
o\verflow: visible;
w\idth: auto;
he\ight: 1px;
word-wrap: normal;
}
/* */
Trevor
Thu, 2004-04-01 16:53
#2
Design Firm Site
Wow. That's a lot for one p. I mentioned it to da' boss, and he said to just go with a normal p. Thanks, though.
No ideas on the list-style gif butting up against the text? I can't find anything on this anywhere. Any good places to look?
Thu, 2004-04-01 22:16
#3
Design Firm Site
Hi
Try this style instead:
ul {
list-style: url(/images/smallplus.gif) outside;
text-align:left;
margin-left:7px;
padding-left:7px;
}Don't know if it'll work. Vaguely remembered a similar problem and this did it for me. Haven't t tired it on your code (couldn't face the black, too harsh).
Trevor