Re: [WSG] CSS Driven?
Bob Schwartz wrote:
I had hoped for some real solutions when I posted my original two
cents, but none came. I can only conclude there are none, yet.
I did think more than Rimantas would pop-up with a quick answer for your
question, Bob:
Which browser can correctly render the following:
3 columns, no height defined and a background color different from that of the
body
in column 1 goes a 1000px high image
in column 2 goes a 750px high image
in column 3 goes a 500px high image
the end result should be that all three columns are the same height
in other words:
below the image in column 1, no background color shows
below the image in column 2, 250px of background color shows
below the image in column 3, 500px of background color shows
My response (just for the record!) has a problem displaying the
background colour on Netscape 4.78 and Netscape 6.2 (as far as I can
tell via Browsercam), but otherwise rendering is pretty similar:
HTML:
div id=container
div class=column
img src=notableimg.jpg height=1000 width=100 alt= /
/div
div class=column
img src=notableimg.jpg height=750 width=100 alt= /
/div
div class=column
img src=notableimg.jpg height=500 width=100 alt= /
/div
/div
CSS:
* { margin:0; padding:0; }
body { background-color:#ff0; }
#container { width:90%; background-color:#fff; float:left;
margin-left:5%; _margin-left:2.5%; }
.column { float:left; width:33%; text-align:center; }
.column img { display:block; margin:0 auto; }
Have a look at http://www.stuarthomfray.co.uk/3col/
Unfortunately, due to the behaviour of our good buddy PC IE, an extra
hack is called for (the '_margin-left: 2.5%;')
I thought someone else might as well answer your request! ;)
cheers,
Stuart
--
http://www.stuarthomfray.co.uk/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] IE CSS Gap Problem? Anybody have a solution?
Josef Dunne wrote:
Thanks though, does anyone else have a solution to this problem?
I would HOPE that someone could come up with a cleaner solution, but I
could only do it by feeding IE alternate declarations for your 'span' rule:
span {
display:none;
_text-indent: -999px;
_display:inline;
}
(the underscore hack used here for speed!)
regards,
Stuart
--
- - -- --- - -
http://www.stuarthomfray.co.uk/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Cleaner two column float left?
tee wrote:
I am working on an order form that I set to two column float left
item 1 item 2
item 3 item 4
item 5 item 6
item 7 item 8
The floats will do it:
container {
width: (less than 3x the width of floatedItem);
}
floatedItem {
float: left;
width: 49%;
}
SHOULD work in everything!
cheers,
Stuart
--
- - -- --- - -
http://www.stuarthomfray.co.uk/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] best practice?
Mike wrote:
I guess you can't center a fluid width element. Does anyone know of a way?
I suppose you could go:
#container { margin: 0 20px; }
or
#container { margin: 0 5%; }
Stuart
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] help, please!!
Rachel Campbell wrote: I've been developing a site based on the Ruthsarian layouts and it's working ok except in IE 6.0, where there's a problem which is leaving me baffled, so I'm hoping that someone will be able to help. ... There isn't a problem if you set IE's options to refresh on every visit to the page, but that's not going to help most people! Hi Rachel, I cannot for the life of me replicate the problem - I've tried IE6 on two different PCs, one running WinXP and one Win98. The IE options on both are set to 'check automatically' but I've tried the other settings too without any luck! Perhaps you could try a version of IE6 on another PC - if the pages work on there, you may have at least narrowed the problem down to your machine! Good Luck!! Stuart ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] php-files get horizontal scrollbar ONLY IN IE
Daniela Hoffmann wrote: I get a horizontal scrollbar (only in IE) Jeez, I'd almost gotten over the days of framesets... *shiver* :) Dani, have you tried changing the 'scrolling' attribute from 'auto' to 'yes' on the 'mainFrame' frame? cheers, Stuart -- === El Bombin http://elbombin.stuarthomfray.co.uk Stuart Homfray http://www.stuarthomfray.co.uk === ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] multiple columns and 100% height
Vaska.Wsg wrote: A short while ago somebody wrote an article about achieving 100% height divs when using multiple columns. Their solution was something really simple but for the life of me I can't remember the trick - it was some kind of one line rule...height: ???. But I'm not sure. You don't mean the 'overflow:auto' float-clearing posting at Sitepoint's Web Design blog (http://www.sitepoint.com/blog-post-view?id=238086)? (a bit more at http://www.quirksmode.org/css/clearing.html Stuart -- === El Bombin http://elbombin.stuarthomfray.co.uk Stuart Homfray http://www.stuarthomfray.co.uk === ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] multiple columns and 100% height
Helen Court | Formandsubstance wrote: One of the recent suggestions on balancing columns without javascript was to put a tiny graphic in the columns set at the appropriate repeat. Well, I asked on here about something I was working on, early on Saturday morning (see http://www.mail-archive.com/wsg%40webstandardsgroup.org/msg16444.html ) if that's of any use... :) cheers, Stuart ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] IE problem
Javier wrote: What I did work well in Firefox, but when my friend saw it with his IE6 it was horrible !!! :( I used the classic two columns inside a container. Left column float to left and the other to right side. IE 6, ignores the width size of left side and show it bigger than expected then right side goes down. Also, right side right margin is bigger than in Firefox. I've seen hacks over the net and used one to define sizes in IE...but this problem is driving me crazy... Javier, I always find that the best course of action is to strip away all of the hacks, and rewrite the stylesheet from scratch - it doesn't take all that long as you know the required result and you have most of the style rules already (more or less!), so it's pretty much a 'cut-and-paste' job! In fact, I've just done this myself - it took about 10mins or so - have a look at trying http://www.stuarthomfray.co.uk/temp/newcss.css instead of your current stylesheets. cheers, Stuart -- === El Bombin http://elbombin.stuarthomfray.co.uk Stuart Homfray http://www.stuarthomfray.co.uk === ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] question about CSS menu (javascript)
Hi John, I use a similar drop-down menu on my El Bombín site http://elbombin.stuarthomfray.co.uk/ (javascript: http://elbombin.stuarthomfray.co.uk/menutoggle.js) - as far as I can tell it works on pretty much every browser (although Opera 7 seems to require an inline style for the 'display:none' declaration), and it stores the value in a cookie. Mike Foskett's version beat me to it, though, AND it's structured to allow multiple menu drop-downs, so it will probably suit your needs better! cheers, Stuart john wrote: Hello. I'm doing a drop-down menu (a bit differently than usual), and there is only one thing I can't seem to accomplish. The menu is at http://www.drzeus.net/lab/verticalmenu.html The user should be able to click on a tab to expand it, which it currently does, but clicking it again should contract the menu (that's the part I need help with, please). I realize that a javascript question isn't exactly about standards, but since the menu itself is XHTML/CSS, and hopefully others will find the menu useful. Thank you. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Problems with floats in IE
David Laakso wrote:
Stuart, I regret to say Opera7.54u2 is not happy with it.
Best,
~david
Absolutely - well spotted!! ;) (grins sheepishly)
Seriously, stupid of me not to have checked before posting - the
fieldset isn't clearing the submit button.
I noticed that Tatham has an empty paragraph within the fieldset: if
this is going to be utilised somewhere down the line, you could simply
clear that -
fieldset p {
clear: both;
}
Just added it to style sheet posted previously!
regards,
Stuart
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Problems with floats in IE
A quick answer would be to create a new left-hand side image with an extra 25px(?) of the grey gradient background on the left, and then set the horizontal background position to -25px(?) on decent browsers, eg. Firefox, et al. background-position: -25px 0; IE6 background-position: 0 0; Maybe use the 'underscore hack' (_background-position: 0 0;) to feed the declaration to IE6 (invalidate your CSS) or use MS conditional comments. It may not be pretty, there may well be a better way, but it works (at least on Firefox and IE6!) cheers, Stuart Tatham Oddie wrote: Hey boys/girls, Having a small problem with a page (of course the problem is only in IE6) basically the floated fieldsets are causing the top left corner of the white box to fall out of position. Otherwise everything seems fine. Would a few people who are good at IE hacks / floats mind looking at: http://members.stansw.asn.au/testdrive/ Thanks in advance! As always, any other comments are appreciated too. Thanks, Tatham Oddie Fuel Advance -- === = El Bombin http://elbombin.stuarthomfray.co.uk Stuart Homfray http://www.stuarthomfray.co.uk === ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Mac (IE5.2 + Safari) users: please could you check...
Oh well... As I don't have a Mac close by to play with IE5.2 (and even if I had, I might spend too much time *trying* to make it work), I'll just link to a page containing the same info as the pop-up - that way, everyone's a winner!! :) I would say this about it though - the problem only seems to occur when the relevant CSS is applied to the the a:hover/a:active selectors of the link. If you apply it to a:link/a:visited, IE5.2 at Browsercam displays it without any problems!! Anyway, thanks for looking, though, John! cheers, Stuart John D Wells wrote: Nope, 'Pure CSS Popups' doesn't work on Mac IE5.2. It manifests itself in a similar way to yours; all I see is a tiny black box appear in the top-left corner of the navigation section. I haven't seen that method before, but it certainly doesn't look tricky. Still, IE doesn't like it one bit. . . ah well. -John ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Mac (IE5.2 + Safari) users: please could you check...
Thanks John, I can't understand that 'see example' link problem - do Eric Meyer's 'Pure CSS Popups' work correctly on Mac IE5.2? url: http://www.meyerweb.com/eric/css/edge/popups/demo.html Just had a thought - maybe it's because mine are in a floated container... If THAT'S the case then I'll simply make the link on my page point to another page with the example info - that way, every browser where it works gets the 'pop-up' and any that don't get a clickable link. Re. Netscape 4.7 - cheers, I thought that I'd better get that one covered, especially as it wasn't too much trouble to do so! You're right about the menu of course. I'll give some thought to implementing a 'skip to nav' solution. cheers, Stuart John D Wells wrote: Stuart- Well done, the site is playing very nicely with Safari and IE5.2! Layout is great, VIEW COACHES dropdown still functioning fine over here. Still, IE5.2 doesn't successfully display the ADDITIONS/CORRECTIONS example, it behaves same as before. And since I can check it here at work, it behaves the same in IE5.1 on Mac OS9. I also took a look at it in Netscape 4.7 (for kicks), and everything looks good. I especially appreciate your accessible-friendly way of handling the VIEW COACHES link; since my netscape didn't understand the js, it followed the link to the coaches.php page instead. Very nicely done. The navigation is, however, at the end of the HTML document, making it hard to find. I'd suggest perhaps a couple of anchored links at the top of each page pointing to the various page elements (i.e. skip to navigation, skip to content, etc.). HTH -John On Mar 4, 2005, at 3:02 PM, Stuart Homfray wrote: I've just amended the CSS again for this site, thanks to the feedback from John and Barry, and I wondered whether they, or anyone else could take another quick look at the areas specified in the original message...? It seems that adding little more than a 'position:absolute' declaration to the problem containers cured it (at least, as far as I can tell with Browsercam) Thanks, Stuart Stuart Homfray wrote: ... I have tested the site with the usual PC browsers (IE4, IE5, IE5.5, IE6, Firefox, Opera 7, even NN4.7) and I'm reasonably happy, and I've looked at the layout using Browsercam for Safari, IE5.2, Konqueror and Opera 6 and (aside from a bit of trouble in Opera 6) ... The two areas that need checking are the 'VIEW COACHES' open/close menu toggle link, and, the 'see example' 'pop-up' help on 'Information' label in the small form at the bottom of the coach pages (the Jimmy Hogan/William Townley/Jack Reynolds pages). I've taken a couple of screen grabs of what they're SUPPOSED to look like as a comparison - see: menu: http://elbombin.stuarthomfray.co.uk/menu_beforeAfter.gif coach page info rollover: http://elbombin.stuarthomfray.co.uk/coachespage.png The site url is http://elbombin.stuarthomfray.co.uk/ ... ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Mac (IE5.2 + Safari) users: please could you check...
I've just amended the CSS again for this site, thanks to the feedback from John and Barry, and I wondered whether they, or anyone else could take another quick look at the areas specified in the original message...? It seems that adding little more than a 'position:absolute' declaration to the problem containers cured it (at least, as far as I can tell with Browsercam) Thanks, Stuart Stuart Homfray wrote: ... I have tested the site with the usual PC browsers (IE4, IE5, IE5.5, IE6, Firefox, Opera 7, even NN4.7) and I'm reasonably happy, and I've looked at the layout using Browsercam for Safari, IE5.2, Konqueror and Opera 6 and (aside from a bit of trouble in Opera 6) ... The two areas that need checking are the 'VIEW COACHES' open/close menu toggle link, and, the 'see example' 'pop-up' help on 'Information' label in the small form at the bottom of the coach pages (the Jimmy Hogan/William Townley/Jack Reynolds pages). I've taken a couple of screen grabs of what they're SUPPOSED to look like as a comparison - see: menu: http://elbombin.stuarthomfray.co.uk/menu_beforeAfter.gif coach page info rollover: http://elbombin.stuarthomfray.co.uk/coachespage.png The site url is http://elbombin.stuarthomfray.co.uk/ - if you feel it would be better to contact me directly, please use [EMAIL PROTECTED], and if you feel the need to give anything on there a 'good kicking' in public - maybe the use of an inline style on the toggle link (Opera seems to demand it in order to work correctly) or the use of a clearing div (IE needs one, so using the excellent Easy Clearing float at P.I.E. seemed a bit pointless) - I'm more than happy to take it! -- === = El Bombin http://elbombin.stuarthomfray.co.uk Stuart Homfray http://www.stuarthomfray.co.uk === ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Mac (IE5.2 + Safari) users: please could you check...
Hi John, Firstly, thanks for taking a look - it sounds like the same issues described by Barry Cranmer too (whom I should also thank publicly!) The main header content stretches to the left overlapping the navigation, obstructing not only view but also clickability of the nav items (they're clickable, just the left edges). Then the ad space from google shifts to the right, overlapping the main content. ...thought that I'd fixed that, but I was only viewing at 800x600 resolution in Browsercam! And if you scroll to the bottom, there's this large chunk of white space that juts out to the left. . . ...that was from my previous testing - whoops! By the way, John, the screengrab 'elbombin_01.pdf' doesn't seem to work, but 'elbombin_02.pdf' is really helpful! :) The method I use is to text-align: center; the body, and then have your wrapper margin set to margin: 0px auto 0px auto;, and text-align: left; to bring everything back to left aligned. Perhaps that starting point could prove promising. . . I've used that method previously, but I combined 'left:50%' with a negative left-hand margin because it *seemed* to be more stable across different browsers - I'll check that out again after having another play at Browsercam. As for the example pop-up, IE only displays a small bordered box to the left of the ADDITIONS/CORRECTIONS header, and Safari displays it fine but it sits underneath (z-index wise) your ending tagline of El Bombin is Produced. Okey-doke! Once again, thanks for that it's a big help, much appreciated. Now I've got a bit more idea as to what's happening, I can make some changes to the Mac IE -specific stylesheet. cheers, Stuart John D Wells wrote: Well I wish I could offer a solution, but right now all I can give you is as problem. Mac Safari looks great, but IE 5.2 looks pretty rough. !-- snipped --! HTH, John On Mar 2, 2005, at 7:44 PM, Stuart Homfray wrote: Hi all, ... I have tested the site with the usual PC browsers (IE4, IE5, IE5.5, IE6, Firefox, Opera 7, even NN4.7) and I'm reasonably happy, and I've looked at the layout using Browsercam for Safari, IE5.2, Konqueror and Opera 6 and (aside from a bit of trouble in Opera 6) I'm still reasonably happy, but it would be incredibly useful if a couple of 'kind souls' could spare a minute or two to test a couple of aspects of the site requiring user interaction. The two areas that need checking are the 'VIEW COACHES' open/close menu toggle link, and, the 'see example' 'pop-up' help on 'Information' label in the small form at the bottom of the coach pages (the Jimmy Hogan/William Townley/Jack Reynolds pages). I've taken a couple of screen grabs of what they're SUPPOSED to look like as a comparison - see: menu: http://elbombin.stuarthomfray.co.uk/menu_beforeAfter.gif coach page info rollover: http://elbombin.stuarthomfray.co.uk/coachespage.png The site url is http://elbombin.stuarthomfray.co.uk/ - if you feel it would be better to contact me directly, please use [EMAIL PROTECTED],... ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Mac (IE5.2 + Safari) users: please could you check...
Hi all, I've been reading this superb list (off and on) for a while now, but typically, the first time that I speak up is to ask for something!! I've set up a (currently rather small) site dedicated to a rather interesting aspect of the early days of football (soccer, to those who's football's played with the hands!!) - OK I *say* interesting, it *is* to a football geek like me, but that's not really the point. I have tested the site with the usual PC browsers (IE4, IE5, IE5.5, IE6, Firefox, Opera 7, even NN4.7) and I'm reasonably happy, and I've looked at the layout using Browsercam for Safari, IE5.2, Konqueror and Opera 6 and (aside from a bit of trouble in Opera 6) I'm still reasonably happy, but it would be incredibly useful if a couple of 'kind souls' could spare a minute or two to test a couple of aspects of the site requiring user interaction. The two areas that need checking are the 'VIEW COACHES' open/close menu toggle link, and, the 'see example' 'pop-up' help on 'Information' label in the small form at the bottom of the coach pages (the Jimmy Hogan/William Townley/Jack Reynolds pages). I've taken a couple of screen grabs of what they're SUPPOSED to look like as a comparison - see: menu: http://elbombin.stuarthomfray.co.uk/menu_beforeAfter.gif coach page info rollover: http://elbombin.stuarthomfray.co.uk/coachespage.png The site url is http://elbombin.stuarthomfray.co.uk/ - if you feel it would be better to contact me directly, please use [EMAIL PROTECTED], and if you feel the need to give anything on there a 'good kicking' in public - maybe the use of an inline style on the toggle link (Opera seems to demand it in order to work correctly) or the use of a clearing div (IE needs one, so using the excellent Easy Clearing float at P.I.E. seemed a bit pointless) - I'm more than happy to take it! I await your responses with bated browser... cheers, Stuart -- === = El Bombin http://elbombin.stuarthomfray.co.uk/ Stuart Homfray http://www.stuarthomfray.co.uk/ === ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
