Re: [css-d] Help with IE8 and a caption for images
I wish I know why. I believe it has to do with treatment of positioned elements and floating is a type of positioning. Would love to hear an experts explanation. On Wed, Dec 9, 2009 at 6:32 PM, Skip Knox wrote: > Well done, Theresa! You know, I looked at that and did the stupid thing: I > said, naw, no way it's that! > > FYI, the clear didn't work. Only removing the float on the img tag worked. > > I *knew* it was inheritance, but of course I was only looking at what the > div was inheriting and did not look more closely at what the classed img was > inheriting. > > So, Theresa or anyone else: any idea why IE8 had a problem with this but > FF and Chrome did not? Gotta be the rendering agent, but I'd be interested > to know what the precise issue is. > > > Skip Knox > Boise State University > > > > On Wed, Dec 9, 2009 at 3:34 PM, Theresa Newman > wrote: > >> remove the float:right on the img tag of the one not working. or if you >> want to leave it, you have to clear it so the caption falls under. >> >> >> On Wed, Dec 9, 2009 at 5:13 PM, Skip Knox wrote: >> >>> Terribly sorry. Inconsistent coding across the site. Try this one. >>> http://www.boisestate.edu/courses/westciv/class.shtml >>> >>> Works in IE8, uses divs. Compare to the Crusades one, which doesn't >>> lay out properly. >>> >>> >>> On Wed, Dec 9, 2009 at 3:03 PM, Theresa Newman >>> wrote: >>> > well, right off the bat, one is in a table and one is in a div >>> structure! 2 >>> > different animals. It is the one with div's that is not working right? >>> add >>> > clear:both to caption div >>> > >>> > >>> > >>> > On Wed, Dec 9, 2009 at 4:55 PM, Skip Knox >>> wrote: >>> >> >>> >> In IE8, remember. Check in Chrome or FF if you want to see working in >>> >> both pages. >>> >> http://boisestate.edu/courses/crusades/7th/04.shtml >>> >> is the one that is not working and >>> >> http://boisestate.edu/courses/westciv/babylon/ >>> >> is an example of one that is working >>> > >>> > >>> >> >> > __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with IE8 and a caption for images
The first page you wrote (
http://boisestate.edu/courses/crusades/7th/04.shtml ) has a different markup
than the other pages.
Louis IX at Damietta
I have found this in
http://boisestate.edu/courses/crusades/7th/09.shtmlDifferent markup
with same class names, i belive is the reason.
Recovering the dead on the Nileafter the
Battle of Mansourah(click picture for full image)
Without changing anything, .image { ... ; float:none; ... } may change
page's problem.
I am just i rookie and i don't have access to IE8 right now.
FYI: I have wrote the whole message and google show me the last message of
yours. :)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with IE8 and a caption for images
Thanks, Yogesh, but I was looking for a solution in the css, not in the
html. This is because I have literally hundreds of pages with images on
them, all of different sizes. Editing all those by hand was more than I
wanted to contemplate. Anyway, as noted elsewhere, Theresa Newman spotted
the real culprit.
Thanks again, though, to all who responded.
Skip Knox
Boise State University
On Wed, Dec 9, 2009 at 3:43 PM, Yogesh Agashe wrote:
> Hello,
>
> As Tim and Mehmet have mentioned, setting width should do the trick.
> Image wrapper's width is 231px and has 1px border. So total width is
> 233px. Set this width on imagewrapper. I tested it on IE8 and it works
> fine.
>
> DIV.imagewrapper {
> .
> width: 233px;
> }
>
> HTH.
> Yogesh
>
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with IE8 and a caption for images
Well done, Theresa! You know, I looked at that and did the stupid thing: I said, naw, no way it's that! FYI, the clear didn't work. Only removing the float on the img tag worked. I *knew* it was inheritance, but of course I was only looking at what the div was inheriting and did not look more closely at what the classed img was inheriting. So, Theresa or anyone else: any idea why IE8 had a problem with this but FF and Chrome did not? Gotta be the rendering agent, but I'd be interested to know what the precise issue is. Skip Knox Boise State University On Wed, Dec 9, 2009 at 3:34 PM, Theresa Newman wrote: > remove the float:right on the img tag of the one not working. or if you > want to leave it, you have to clear it so the caption falls under. > > > On Wed, Dec 9, 2009 at 5:13 PM, Skip Knox wrote: > >> Terribly sorry. Inconsistent coding across the site. Try this one. >> http://www.boisestate.edu/courses/westciv/class.shtml >> >> Works in IE8, uses divs. Compare to the Crusades one, which doesn't >> lay out properly. >> >> >> On Wed, Dec 9, 2009 at 3:03 PM, Theresa Newman >> wrote: >> > well, right off the bat, one is in a table and one is in a div >> structure! 2 >> > different animals. It is the one with div's that is not working right? >> add >> > clear:both to caption div >> > >> > >> > >> > On Wed, Dec 9, 2009 at 4:55 PM, Skip Knox wrote: >> >> >> >> In IE8, remember. Check in Chrome or FF if you want to see working in >> >> both pages. >> >> http://boisestate.edu/courses/crusades/7th/04.shtml >> >> is the one that is not working and >> >> http://boisestate.edu/courses/westciv/babylon/ >> >> is an example of one that is working >> > >> > >> > > __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with IE8 and a caption for images
Hello,
As Tim and Mehmet have mentioned, setting width should do the trick.
Image wrapper's width is 231px and has 1px border. So total width is
233px. Set this width on imagewrapper. I tested it on IE8 and it works
fine.
DIV.imagewrapper {
.
width: 233px;
}
HTH.
Yogesh
On 12/9/2009 3:41 PM, Skip Knox wrote:
> Oops, sorry guys. That working one is sent previously actually uses
> tables, which lets that out for comparison. Let's try this one:
> http://www.boisestate.edu/courses/westciv/babylon/
>
> That has the same doctype, same html markup, and essentially the same
> css as this:
> http://boisestate.edu/courses/crusades/7th/04.shtml/
>
> Yet the former looks fine in IE8 while the latter does not.
>
> And a further update. I tried pasting the image code from the site
> that works (WestCiv) into the one that doesn't (Crusades). Paste,
> save, and now that html code doesn't display correctly. I think that
> lets out the html as the variable, right? Lets out doctype, etc.
>
> Skip Knox
> Boise State University
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with IE8 and a caption for images
Did a quick firebug check. Nothing is being inherited down other than colors and fonts and the like. I use firebug only rarely, so I could be overlooking something. Skip Knox Boise State University On Wed, Dec 9, 2009 at 2:50 PM, Theresa Newman wrote: > do you use firebug? it shows what other css (from parent elements) cascade > down to the element > > > On Wed, Dec 9, 2009 at 4:45 PM, Skip Knox wrote: >> >> I also did the next obvious thing: paste the css over. >> >> I commented out the suspect code from the Crusades page and pasted in >> the working code from the WestCiv page. Guess what? Broken! >> >> Okay. It's not the html and it's not the css, and yet one works and >> the other doesn't. WTF? >> >> >> Skip Knox >> Boise State University >> __ >> css-discuss [cs...@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with IE8 and a caption for images
I also did the next obvious thing: paste the css over. I commented out the suspect code from the Crusades page and pasted in the working code from the WestCiv page. Guess what? Broken! Okay. It's not the html and it's not the css, and yet one works and the other doesn't. WTF? Skip Knox Boise State University __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with IE8 and a caption for images
Oops, sorry guys. That working one is sent previously actually uses tables, which lets that out for comparison. Let's try this one: http://www.boisestate.edu/courses/westciv/babylon/ That has the same doctype, same html markup, and essentially the same css as this: http://boisestate.edu/courses/crusades/7th/04.shtml/ Yet the former looks fine in IE8 while the latter does not. And a further update. I tried pasting the image code from the site that works (WestCiv) into the one that doesn't (Crusades). Paste, save, and now that html code doesn't display correctly. I think that lets out the html as the variable, right? Lets out doctype, etc. Skip Knox Boise State University __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with IE8 and a caption for images
You may use contained picture width for css width value.
div.imagewrapper {
...
width:231px; > as image width is 231px, and it is an image not a fluid
content
...
}
http://boisestate.edu/courses/latemiddleages/politics/france/ >This one
using css for layout
http://boisestate.edu/courses/crusades/7th/04.shtml >This one using table
for layout
Mehmet Gültaş
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with IE8 and a caption for images
Thanks to Tim and David for the response. I'd already tried both those, but I gave it another shot. Still the same issue. The caption insists on filling the entire space. Here's what's even more fun. I have other sites and these don't exhibit the behavior. Here's an example: http://boisestate.edu/courses/latemiddleages/politics/france/ If you look at the stylesheet for the Crusades page and then for the France page, you'll see that they have no significant differences (well, except that I've added the clear and the width over at Crusades, to no effect). Crusades stylesheet http://boisestate.edu/courses/crusades/styles/main.css France stylesheet http://boisestate.edu/courses/latemiddleages/styles/main.css Skip Knox Boise State University On Wed, Dec 9, 2009 at 9:38 AM, Climis, Tim wrote: >> I'm looking for an explanation as well > > Presuming that David's fix works (I think it should), here's what's happening: > > You didn't specify a width on #imagewrapper, which means that it will expand > to fit the content. That allows the caption to float up next to the image. > (or really, for the image to float next to the content, since the caption > isn't floated) > > So clearing the caption will send it below the image where it belongs. > Specifying a width on the image wrapper should also do the trick. > > ---Tim > __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with IE8 and a caption for images
> I'm looking for an explanation as well Presuming that David's fix works (I think it should), here's what's happening: You didn't specify a width on #imagewrapper, which means that it will expand to fit the content. That allows the caption to float up next to the image. (or really, for the image to float next to the content, since the caption isn't floated) So clearing the caption will send it below the image where it belongs. Specifying a width on the image wrapper should also do the trick. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with IE8 and a caption for images
Skip Knox wrote:
> I have constructed a couple of divs to allow me to place a caption
> underneath an image. The method works fine in FF and Chrome but not in
> IE8. Here's an example:
>
> http://boisestate.edu/courses/crusades/7th/04.shtml
>
> This is the stylesheet for it
> http://boisestate.edu/courses/crusades/styles/main.css
>
> I have done some looking around for solutions but it's difficult to
> frame the question properly to a search engine. I've tried various
> things blindly, like setting width:auto and that sort of thing, but
> the problem is that I don't understand the underlying issue here. So
> in addition to a fix, I'm looking for an explanation as well
> (references to documentation will do fine).
>
>
> Skip Knox
> Boise State University
>
It does not work in Opera/10.1 either.
div.imagecaption { clear:both; }
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Help with IE8 and a caption for images
I have constructed a couple of divs to allow me to place a caption underneath an image. The method works fine in FF and Chrome but not in IE8. Here's an example: http://boisestate.edu/courses/crusades/7th/04.shtml This is the stylesheet for it http://boisestate.edu/courses/crusades/styles/main.css I have done some looking around for solutions but it's difficult to frame the question properly to a search engine. I've tried various things blindly, like setting width:auto and that sort of thing, but the problem is that I don't understand the underlying issue here. So in addition to a fix, I'm looking for an explanation as well (references to documentation will do fine). Skip Knox Boise State University __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
