Re: [css-d] Help with IE8 and a caption for images

[Theresa Newman]

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] footer looks wrong in IE7

[Ghodmode]

On 10/12/09 06:39, Nicky McCatty wrote:
> The footer of this website looks fine in all Mac browsers, and PC
> browsers other than Internet Explorer 7. I cannot see anything, like a
> stray, that could explain the problem.
>
In IE7 all of the items in the "footer_tbl" table look okay, except for 
"About", which is a little lower than it should be.  Is this the problem 
you're talking about?  I just want to make sure we're looking at the 
same thing :)


> If anyone sees a posible explanation, please let me know.
>
Just a guess right now... It could be that IE7 is treating the margin 
for the paragraph differently than the rest of the browsers, and it's 
collapsing with the (lack of) margin on the element above it.  Try 
setting the margins for that paragraph to 0.  Something like 
p.footerplain { margin: 0 }


> Thanks,
> Nicky
>
> URL: http://grantsetcetera.com/
> URL for the CSS: css/ge_pages_06.css
>
> SPECIFIC STYLES:
>
> DIV: #footer_links {
>   width:966px;
>   background-color: #F3F3F3;
>   padding-top: 15px;
>   padding-bottom:15px;
>   padding-left: 7px;
>   border-bottom-color: #66;
>   border-bottom-style:solid;
>   border-bottom-width:1px;
>   border-left-color:#66;
>   border-left-style:solid;
>   border-left-width:1px;
>   border-right-color:#66;
>   border-right-style:solid;
>   border-right-width:1px;
> }
>
> TEXT STYLES:
>
> .footerbold {
>   font: 8pt/10pt Frutiger, "Frutiger Linotype", "Helvetica Neue",
> Helvetica, Univers, Calibri, "Myriad Pro", Myriad, "Gill Sans", "Gill
> Sans MT", "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L",
> Tahoma, Geneva, Arial, sans-serif;
>   font-style:normal;
>   font-weight:bold;
>   text-transform: uppercase;
>   color: #66;
>   padding-right: 10px;
>   letter-spacing: 0.05em;
> }
>
> .footerplain {
>   font: 8pt/10pt Frutiger, "Frutiger Linotype", "Helvetica Neue",
> Helvetica, Univers, Calibri, "Myriad Pro", Myriad, "Gill Sans", "Gill
> Sans MT", "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L",
> Tahoma, Geneva, Arial, sans-serif;
>   color: #77;
>   padding-left: 0px;
>   padding-right: 10px;
>   letter-spacing: 0.05em;
> }
>
> THE 3 NEIGHBORING COLUMNS WITH A DISCREPANCY:
>  id="footer_tbl">
>   
> ...
>  href="contact.html">contact
>  href="about.html">about
>  href="cheevers.html">Maria Cheevers
>   Nancy London
> Jane Zuroff
>   
>  href="fund.html">fundraising
>   ...
> 
>
> Nicky McCatty
> signify | Design
> fusing image&  information
> t...@signifydesign.com | www.signifydesign.com
>

-- 
*Ghodmode*
www.ghodmode.com 
__
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

[Mehmet Gultas]

 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

[Skip Knox]

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] i want to add a border

[Ghodmode]

On 09/12/09 19:47, andre petyan wrote:
> http://princesslimousine.net/
>
> okay i have this site i am working on
> the person that got me to do it is satisfied but i am not.
> i mean if i show this as a portfolio peace i will be laughed at
>
> what i wanted to do was add a border around everything to surround the main 
> content.
> right now it looks like its just nice centered content flowing in the middle 
> of the screen as separate information peaces.
>
> i want to add a 1 pixel border that is solid black and a new background layer.
> the new background is going to be an image of the driver helping someone into 
> the car. i don't have the image yet
>
> here is what is bothering me.
> i have a transparency layer. i hate it i have very high opacity set because i 
> need the text to be readable.
> all i wanted was to make the overall-background slightly more white so the 
> background gradient wouldn't be disturbed or removed.
> now you can barley tell there is even opacity or if i lower the opacity the 
> text is already bold so its harder to read.
>
> How can i make the background of the text/main content area more transparent 
> without it effecting the stuff inside the transparent area?
>

I think I understand what your goal is.  The problem is that the 
contents of an element can't have a different opacity than the background.

A solution I came up with for your page was to use three DIVs: one for 
the semi-opaque background, one containing the paragraphs (your 
"transbox_h" DIV), and a third one wrapped around the other two.  The 
wrapper DIV has relative positioning and the two inner DIVs have 
absolute positioning.

HTML


 


   Welcome to Princess Limousine!...




CSS
div.transbox_h {
   position: absolute;
   top: 0;
   left: 0;
   width: 600px;
   height: 230px;
   margin: 0;
   border: none;
}

div.transbox_bg {
   width: 600px;
   height: 230px;
   background-color:#ff;
   filter: alpha(opacity=45);
   opacity: 0.45;
   position: absolute;
   top: 0;
   left: 0;
}

div.transbox_wrapper {
   width: 600px;
   height: 230px;
   position: relative;
}

It works because the element which has the opacity applied doesn't 
contain the text.  It's just behind it.

I used 45% opacity because I have bad eyes.  You can switch it back to 
85 if that's what you want :)

I gotta tell ya, though, I hate this solution.  You're making it harder 
by using tables for layout.

> also
>
> i tried this code and it isn't working and i have just for some reason gone 
> silly and can't figure it out.
> i need a new background wrapping all the middle area from top to bottom that 
> is also transparent letting the gradient in and not dulling anything out.
>

This sounds like sort of the same problem.  You can probably apply the 
same technique I described above.

> exaple
>
> |page 100% opacity |  everything but the main content area 80% opacity with 
> 100% opacity on content | main content area 40% opacity with 100% opacity on 
> content | relative opposite side  | relative opposite side |
>
> here is a chunk of code i got i don't know what i have wrong or what i am 
> missing.
>
>
> body {font: 100% Verdana, Arial, Helvetica; background: 
> url(images/f_grad.jpg) repeat-x; margin: 0; padding: 0; text-align: center;}
>
> .thrColAbsHdr #container {position: relative; width: 845px; margin: 0 auto; 
> border: 0; text-align: left; border: 2px solid 00;} //need to add BG 
> image and tarns\\
>
> div.transbox_h {width: 600px; height: 230px; margin: 0; 
> background-color:#ff; border: none; filter:alpha(opacity=85); 
> opacity:0.85;} //need to remove the effect of the trans from content i only 
> want to apply to BG\\
>
>
> David and as always thanks in advance. you guys always help me out a lot. i 
> hope to be where you are one day.
>

-- 
*Ghodmode*
www.ghodmode.com 
__
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]

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

[Yogesh Agashe]

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

[Skip Knox]

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

[Skip Knox]

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

[Skip Knox]

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] Text Kerning and Other Oddities on MAC but not Windows

[Jukka K. Korpela]

Maslowski, Eric wrote:

> The site
> I've been working on (at link below) works as expected on FF, IE, and
> Safari on a Windows system. (Vista & XP) However, when the same pages
> are viewed on a Mac  (FF & Safari) the alignments are off, there
> seems to be additional kerning on the text, etc. In short, it's a
> mess. Everything is fully updated.

I have no idea of the alignment problems, and I don't have a working Mac to 
test with, but the kerning problem might be cause by advanced typography 
features in Firefox (and Safari?). I have found various descriptions of 
those features, including
http://opentype.info/blog/2008/06/14/kerning-and-opentype-features-in-firefox-3/
which is appetizing but not very rich in hard facts - but its bloggish part 
contains a link to page
https://developer.mozilla.org/en/CSS/text-rendering
which contains interesting information, including a live example of a way to 
affect ligature formation with a simple (browser-specific) CSS property, 
text-rendering (which follows the tradition of obscure naming in CSS...).

So I'd suggest the following quick test: add
* { text-rendering: optimizeSpeed; }
into your style sheet and see whether it turns off kerning.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/ 

__
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

[Mehmet Gultas]

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] Text Kerning and Other Oddities on MAC but not Windows

[Ingo Chao]

2009/12/9 Maslowski, Eric :
> Hello all,
>  I've mostly been silently following the list here and the advice given has 
> helped me in a few instances. So, thanks! What I've run into has completely 
> stumped me and I'm hoping someone here may have seen the problem before or 
> knows a quick workaround/fix. The site I've been working on (at link below) 
> works as expected on FF, IE, and Safari on a Windows system. (Vista & XP) 
> However, when the same pages are viewed on a Mac  (FF & Safari) the 
> alignments are off, there seems to be additional kerning on the text, etc. In 
> short, it's a mess. Everything is fully updated.
>
> Trying everything from using absolute positioning of my DIVs to specifying 
> every relevant component for my CSS classes I am unable to track this down. 
> Using Firebug everything seems to check out which just adds to the 
> frustration. Validating the HTML and CSS checks out as well. Has anyone else 
> encountered this or could offer some advice? I'm really at a loss here.
>
> simple page that exhibits problem (clipping at bottom, images are not where 
> they are supposed to be, etc.)
> http://um3d.dc.umich.edu/Temp/newsite/services/visualization/viz_intro_process.html
>
> The "projects" section has other offset and alignment issues...again, fine on 
> Windows but not on Mac.
>
> CSS (but it's a bit messy from my haste)
> http://um3d.dc.umich.edu/Temp/newsite/shared/styles/main.css
>
> Thanks
>
> Eric


.tab_content_bg {
 ...
 height:460px;
 ...
 overflow:hidden;
 ...
 }

This cannot work with text. You cannot control the text settings of
the user, you don't know how tall the container has to be. It's a
framed-sort of design you have here.

Ingo
__
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]

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/

[css-d] Text Kerning and Other Oddities on MAC but not Windows

[Maslowski, Eric]

Hello all,
  I've mostly been silently following the list here and the advice given has 
helped me in a few instances. So, thanks! What I've run into has completely 
stumped me and I'm hoping someone here may have seen the problem before or 
knows a quick workaround/fix. The site I've been working on (at link below) 
works as expected on FF, IE, and Safari on a Windows system. (Vista & XP) 
However, when the same pages are viewed on a Mac  (FF & Safari) the alignments 
are off, there seems to be additional kerning on the text, etc. In short, it's 
a mess. Everything is fully updated.

Trying everything from using absolute positioning of my DIVs to specifying 
every relevant component for my CSS classes I am unable to track this down. 
Using Firebug everything seems to check out which just adds to the frustration. 
Validating the HTML and CSS checks out as well. Has anyone else encountered 
this or could offer some advice? I'm really at a loss here.

simple page that exhibits problem (clipping at bottom, images are not where 
they are supposed to be, etc.)
http://um3d.dc.umich.edu/Temp/newsite/services/visualization/viz_intro_process.html

The "projects" section has other offset and alignment issues...again, fine on 
Windows but not on Mac.

CSS (but it's a bit messy from my haste)
http://um3d.dc.umich.edu/Temp/newsite/shared/styles/main.css

Thanks

Eric

__
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] footer looks wrong in IE7

[Nicky McCatty]

The footer of this website looks fine in all Mac browsers, and PC  
browsers other than Internet Explorer 7. I cannot see anything, like a  
stray , that could explain the problem.

If anyone sees a posible explanation, please let me know.

Thanks,
Nicky

URL: http://grantsetcetera.com/
URL for the CSS: css/ge_pages_06.css

SPECIFIC STYLES:

DIV: #footer_links {
width:966px;
background-color: #F3F3F3;
padding-top: 15px;
padding-bottom:15px;
padding-left: 7px;
border-bottom-color: #66;
border-bottom-style:solid;
border-bottom-width:1px;
border-left-color:#66;
border-left-style:solid;
border-left-width:1px;
border-right-color:#66;
border-right-style:solid;
border-right-width:1px;
}

TEXT STYLES:

.footerbold {
font: 8pt/10pt Frutiger, "Frutiger Linotype", "Helvetica Neue",  
Helvetica, Univers, Calibri, "Myriad Pro", Myriad, "Gill Sans", "Gill  
Sans MT", "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L",  
Tahoma, Geneva, Arial, sans-serif;
font-style:normal;
font-weight:bold;
text-transform: uppercase;
color: #66;
padding-right: 10px;
letter-spacing: 0.05em;
}

.footerplain {
font: 8pt/10pt Frutiger, "Frutiger Linotype", "Helvetica Neue",  
Helvetica, Univers, Calibri, "Myriad Pro", Myriad, "Gill Sans", "Gill  
Sans MT", "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L",  
Tahoma, Geneva, Arial, sans-serif;
color: #77;
padding-left: 0px;
padding-right: 10px;
letter-spacing: 0.05em;
}

THE 3 NEIGHBORING COLUMNS WITH A DISCREPANCY:

 
   ...
   contact
   about
   Maria Cheevers
 Nancy London
   Jane Zuroff
 
   fundraising
...
   

Nicky McCatty
signify | Design
fusing image & information
t...@signifydesign.com | www.signifydesign.com



__
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] Table-like design with numbered rows

[Jukka K. Korpela]

"G. Sørtun" wrote:

> Magnus Fahlström wrote:
>>  I don't know how to achieve this without using a table:
>>  http://www.magstorm.se/table.htm A table-like design with four
>>  columns, with every row numbered, wrapped in a float:left div.
>
> For content that fits the "tabular data" definition, use HTML tables.

I'm not sure whether the content is tabular data, as the example is very 
schematic.

HTML tables do not have any automatic numbering feature, so if you want the 
numbers to be generated automatically, you would need to use preprocessing, 
server-side generation of content, client-side generation of content, or 
CSS. An essential question is: would you like to have the numbers there even 
if style sheets and/or client-side scripting is disabled?

But if you consider the CSS approach here, then you could use counters and 
generated content (which means that the usual CSS caveats apply unusually 
strongly). In a simple case (just one table on a page, data rows start with 
td with empty content, heading rows don't start with td) you could use the 
following:

table { counter-reset: rowcount; }
td:first-child:after {
  counter-increment: rowcount;
  content: counter(rowcount);
  font-weight: bold; }

> For "table look-alike" designs, CSS tables may come handy.

Well, yes, and even for tables if you can't or just won't use HTML tables 
(e.g. when you directly format XML data with CSS). But "CSS tables" (e.g. 
display: table-cell) are relatively new in terms of browser support.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/ 

__
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

[Climis, Tim]

> 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] i want to add a border

[Tom Livingston]

To be honest, when I remove the white bg behind the text, it looks
completely fine to me. Can you just remove the white? I can send you a
screen shot if you need...

On Wed, Dec 9, 2009 at 1:47 AM, andre petyan  wrote:
> http://princesslimousine.net/
>



-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
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

[David Laakso]

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

[Skip Knox]

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/

Re: [css-d] Table-like design with numbered rows

[G. Sørtun]

Magnus Fahlström wrote:
>  I don't know how to achieve this without using a table:
>  http://www.magstorm.se/table.htm A table-like design with four
>  columns, with every row numbered, wrapped in a float:left div.

For content that fits the "tabular data" definition, use HTML tables.
Your example seems to fit that description since you have a "specific 
order" requirement.

For "table look-alike" designs, CSS tables may come handy.
Example of CSS table...


regards
   Georg
__
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] option fields in IE [Solved]

[Bradley, Peter]

Apologies, people.

I had IE8 and IE7 standalone installed.  It appears that if IE7
standalone is installed after IE8, there is some sort of conflict that
causes this problem to appear in both browsers.

Reinstalling IE8 fixed it.

Cheers


Peter


-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Bradley, Peter
Sent: 09 December 2009 10:10
To: css-d@lists.css-discuss.org
Subject: [css-d] option fields in IE

Hi,

I have a serious problem with dropdowns in IE on a form I maintain:

http://www.spanishintensives.com/booking.php

The dropdowns are being disabled by IE's popup blocker.  The problem is
detailed here:

http://www.mydigitallife.info/2006/07/02/internet-explorer-7-pop-up-bloc
ker-blocks-script-generated-drop-down-or-on-page-input-dialog-boxes/

Unfortunately, none of the fixes mentioned in the article works for me
(or for about half of the article's readers, judging by the comments).

Just to make sure, and because the article above mentions
"script-generated" dropdowns, I copied the generated HTML to a static
HTML page and tried again:

http://www.spanishintensives.com/booking2.html

The dropdowns still do not work and the popup blocker is still being
called.

The pages are valid XHTML 1.0 Strict.

I can't believe I'm the first to face this problem, but I can't find
anything via Google other than the mention above.  I'd be very grateful
if someone could explain to me what I have to do to make dropdowns work
in IE.

Many thanks


Peter

__
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/

[css-d] option fields in IE

[Bradley, Peter]

Hi,

I have a serious problem with dropdowns in IE on a form I maintain:

http://www.spanishintensives.com/booking.php

The dropdowns are being disabled by IE's popup blocker.  The problem is
detailed here:

http://www.mydigitallife.info/2006/07/02/internet-explorer-7-pop-up-bloc
ker-blocks-script-generated-drop-down-or-on-page-input-dialog-boxes/

Unfortunately, none of the fixes mentioned in the article works for me
(or for about half of the article's readers, judging by the comments).

Just to make sure, and because the article above mentions
"script-generated" dropdowns, I copied the generated HTML to a static
HTML page and tried again:

http://www.spanishintensives.com/booking2.html

The dropdowns still do not work and the popup blocker is still being
called.

The pages are valid XHTML 1.0 Strict.

I can't believe I'm the first to face this problem, but I can't find
anything via Google other than the mention above.  I'd be very grateful
if someone could explain to me what I have to do to make dropdowns work
in IE.

Many thanks


Peter

__
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/