[css-d] Site Check - Guardian search

[Philip Wills]

Hi all,

I work for Guardian Unlimited (http://www.guardian.co.uk) and we're
currently conducting a public beta for our new search engine at
http://browse.guardian.co.uk/search.  It's the first time we've really
made a big stab at a reasonably semantic css-based layout, as opposed
the nightmare of nested tables and spacer gifs that make up much of
our site, so I'd really appreciate the list's feedback.

There are a couple of issues I'm aware of; nasty old voice-family
style hacks which now cause CSS validation errors and lots of
unescaped ampersands in URLs which prevent HTML validation.  The
former is from legacy work elsewhere on the site and something I
intend to change.  The latter unfortunately is a feature of the new
search engine technology, which we're now raising with the provider.

If there's anything OT for the list that you'd like to give feedback
on then that would also be much appreciated, but please address it
just to me, or better still send it to [EMAIL PROTECTED]

Thanks in advance,

Phil Wills
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floats on Top of Absolutes and Horizontal Nav Woes

[Philip Wills]

Can't explain the exact behaviour, but using the align property of
images makes browsers do some special float type behaviour, see
http://www.w3.org/TR/html401/present/graphics.html#h-15.1.3 and
generally causes problems in combination with non-trivial css in my
experience.  It's presentational markup and doesn't belong there
anyway, so I just avoid using it.

Phil
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] stop text from wrapping around a floated image?

[Philip Wills]

On 6/28/05, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
 Isnt that what a clear is for? Correct me if Im wrong.

Clearing ensures a subsequent element appears below a floated element.
 There's no equivalent horizontally orientated clearing, however
margins allow us to mimic this behaviour easily as long as the width
of the floated element is known.

Hope that makes sense.

Phil Wills
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] stop text from wrapping around a floated image?

[Philip Wills]

 Is there any way to stop text from wrapping ar4ound a floated image?
 
 In my example, I have a list with images and text in, and the images are 
 floated to the left. This then means that the text, if it is long enough, 
 wraps around the underneath of the image. I am wondering if there is any 
 graceful way to stop this without wrapping the text in a div (or maybe a 
 p) as well and floating that to the right.

Why not just put the text in a paragraph, it's difficult to know why
this might be semantically dubious without seeing the page, then give
that paragraph a left margin?

Phil Wills
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floated blocks inside list items

[Philip Wills]

Hi Mike,

The following appears to work at least for the small test case:

li {clear: both;  border: 1px solid white;}
.question { margin-right: 200px; }
.button { width: 15%; float:right; }

ol

 li
 div class=buttoninput type=button value=Answer //div
 div class=questionQuestion text/div
 /li
/ol

Without the border the question text drops down in IE and if you put
any  width, or float the question then the numbers disappear.

Hope that helps.

Phil Wills
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Problem with links as block-level elements

[Philip Wills]

Hi Tony,

the only way I know to do that is to nest divs and float:right hence:
 
 div id=1
 div id=2
 a href=foo.htmlfoo/a
 a href=fooyootoo.htmlfooyootoo/a!--this is floated right--
 /div
 a href=fooyoothree.htmlfooyoothree/a!--this is floated right--
 /div
 
 If there's a better way to approach this type of layout, I'd really
 appreciate hearing about it 

The way I'd approach this is with something like:

ul id=navigation
li
a id=FAQ href=faq.htmlspanFAQ/span/a
/lili
a id=FORPRAC href=forprac.htmlspanFor Practitioners/span/a
/lili
a id=PAYME href=paymentcalc.htmlspanPayment Calculator/span/a
/lili
a id=CONTA href=contact.htmlspanContact Us/span/a
/li
/ul

then changing the css such that you add:

#navigation li {
margin: 0;
float: left;
}

and remove any mention of margins on the ids of anchors.  I'd probably
move those ids to the li elements as well.  I've only had a chance to
test this in FF, but I think you should be able to work something out
on that basis.

Phil
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/