Best way to containing floated images in articles?
@import"styles.css"; (without whitespace) stops IE3/Win, IE4/Win and IE5/Win getting the style sheet, but not IE5.5/Win.
@import "styles.css"; (with whitespace) stops IE3/Win and IE4/Win getting the style sheet.
I use the latter and include Tantek's midpass filter at the end of the style sheet to import a separate style sheet with a few hacks for IE5/Win and IE5.5/Win only.
| Code: |
| /* Mid Pass Filter imports IE5/Win only styles */
@media tty { i{content:"\";/*" "*/}} @import url('ie5win.css'); /*";} }/* */ |
Share: 
I definitely don't want to use hacks and also want to avoid vendor-specific code if possible.
I'm trying this out:
| Code: |
| <style type="text/css" media="screen,projection">@import"../../style.css";</style>
<link rel="stylesheet" type="text/css" media="handheld" href="../../handheld.css"> <link rel="stylesheet" type="text/css" media="print" href="../../print.css"> |
After some playing around I've found that the problem is with the width property of the #content .picture class. IE5.5/Win is measuring this width from the <body> and not from the <div id="content">. By using width: 50%; it matches the <div id="content> container and the floated pictures work. Obviously this messes up in all other browsers, though.
This looked like an absence of hasLayout although it works in IE6. So, I added height: 1%; to the #content and then changed the .picture back to width: 100%; and, guess what? It works.
The results are:
- Lynx2.8.5/Win: Unstyled page, renders correctly.
- IE4.01/Win: Unstyled page, renders correctly.
- IE5.01/Win: Unstyled page, renders correctly.
- IE5.5/Win: Styled page, renders correctly but not pixel perfect.
- IE6.0/Win: Styled page, renders correctly.
- IE7.0b2/Win: Styled page, renders correctly.
- Firefox1.5/Win: Styled page, renders correctly.
- Opera8.54/Win: Styled page, renders correctly.
- IE5.x/Mac: Unstyled page, renders correctly. [Zcorpan tested.]
- Safari2.0/Mac: Styled page, renders correctly. [Zcorpan tested.]
- PSP2.0/PSP Firmware 2.5: Unstyled page, renders correctly. [James Moorehead tested.]
Some [more] results in Mac and Linux browsers would be appreciated! I'll apply this to all the Calthorpe Park School pages if they will render correctly in Mac browsers (styled or unstyled).
(EDIT) Added more testing results.
Last edited by Ben Millard on 19 May 2006 08:59 pm; edited 9 times in total
Share:
| Cerbera wrote: |
| Some results in Mac and Linux browsers would be appreciated! |
Simon Pieters
Share:
Cheers for that Simon. Looks like this could be a winner?
I think there are some other browsers for Mac but I can't remember their names (Camino?). I'd like to be sure they will work with this technique as well. I'm hoping to get a friend to test in some Linux browsers (Konqueror?) before I apply it.
If anyone can test in mobile devices that would be helpful, too! Even a quick comment without a screenshot is useful.
Share:
I've now applied this to Calthorpe Park School and it seems to be working well.
The new Yorkshire Trip 2006 page is up so people can see how it turned out.
I've also refined the Students' Work areas. Now the thumbnail lists only require a class on the <dl>. Also, there is no <div class="picture"> elements inside the <dd> which contains the thumbnailed picture any more. Which is nice.
Best of all, it's hackless and no CCs are used.
Share:
Yeah, excellent work Ben.
Share:
I've updated the Browsercam captures. The navigation borders and footer are misbehaving in a couple of browsers. Other than that it's looking good.
Share:
I think the disappearence of some borders in Mozilla and old versions of Firefox are to do with rounding errors. Not sure if increasing the borders from 0.08em by a few thousands of an em would make the borders 1 pixel big at normal text size. It might just be something wrong with those browsers, since Firefox 1.5 doesn't have it.
I didn't test in IE 7.0 beta...d'oh! It looks really messed up.
Anyway, thanks for the update. And the kind comments from everyone!
Share:
I've got Mozilla 1.7.12 on my XP machine and there's no problem with the borders. So it could just be a problem with Linux Fedora Core 4.
Share:
I've reinstalled IE7 and tested in it. The weird effects were being caused by the height attribute I use in the body {} ruleset to ensure the left border extends the full height of the viewport.
I've now revised this technique to use min-height property in this ruleset, which seems to be working. That was the only change made and it doesn't seem to have upset any other browsers. Whew!
I've retested in:
- IE5.5/Win
- IE7.0/Win
- Firefox1.5/Win
- Opera8.54/Win
Share:
I'm not getting the text wrapping the images in Firefox 1.5.0.3, not sure I can make the text large enough to check in IE6 - or am I missing the point somehow?
Share:
The thumbnails in the Student's Work area won't get the text wrapping around them unless you use very extreme text sizes. The text wrapping is more obvious in normal articles like the the Yorkshire Trip 2006.
Normal articles use a different floating method to the thumbnail gallery list things.
(EDIT) You might need to use F5 or Ctrl+F5 if you have been to the school's site before today.
Share:
Share:
On the Ski Trip 2006 page you should see text wrapping around the third image even at normal text sizes. Using a narrower browser window will increase the likelihood of text getting wrapped around images, as will bumping the text size up a couple of times.
The images have a bottom margin to stop text getting too close to them as it wraps around. From the screenshot, it looks like this margin stops the penultimate line of the first paragraph of the Yorkshire Trip page from wrapping in your particular setup -- even though there would be space.
I've now reduced the bottom margin of the images from 1em to 0.5em so that the text will wrap closer to the image. You'll need to do a Ctrl+F5 for your browser to download the altered CSS.
Thanks for taking the time to prod this.
Share: