Re: [css-d] Newbie question

[Cristian Palmas]

2009/2/5 Mark Blondin 

> Hello,
> I am undertaking a redo of my Website: www.datawisestorage.com . It
> currently has a tables base to it and I want to convert to CSS, add a menu,
> and expand it generally. My question is, would it be easier to start from
> scratch or convert the existing site to CSS?
> Thanks,
> Mark
>
>
Hi Mark,

I'm not such an expert, since I've been working as a web designer from 6
months, but If I were you I will start from scratch, indipendently from the
site space dimensions.
In your case, I think you have to work less than in other complex cases:
your page structure is very simple. So, in my opinion, you'd better start
from scratch.

Anyway, in this list there are great web designers, more and more expert
than me, so wait for a response from one of those to be sure of what to do.
Or, at least, wait for other two responses.
Regards

-- 
~ Cristian Palmas ~
http://www.cristianpalmas.it
__
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] Newbie question

[Mark Blondin]

Hello,
I am undertaking a redo of my Website: www.datawisestorage.com . It currently 
has a tables base to it and I want to convert to CSS, add a menu, and expand it 
generally. My question is, would it be easier to start from scratch or convert 
the existing site to CSS?
Thanks,
Mark



  
__
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] BG doesn't cover desired area

[Kim Brooks Wei]

Hi People,

I very much hope you're all well tonight. I'm working on this project 
http://tinyurl.com/bgzcjo

I have a black background which I want in place from the top of 
#bigcol through the end of #content. It should extend to the very 
edge of the right panel, but the black bg should not cover the right 
panel nor the footer/btmnav areas.

I can't get the black bg to cover the areas I wish it to.  Help 
resolving this appreciated as always,

Kimi


-- 
This email sent by
Kimi Wei
201-475-1854  |  k...@thewei.com  |  thewei.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/

[css-d] bg image not showing up on link

[A.K. Allen]

Hello All,

I have a problem that I should be able to solve.  On my navigation bar, I'm 
trying to add an arrow to the links that have flyouts.  For some reason, the 
arrow is not showing up.  Here is the page:

http://frank.mtsu.edu/~achcs/index.shtml

Here are the styles:

#sideBar {
 position: relative;
 z-index: 1000;
 float: left;
 display: inline;
 margin: 0;
 margin-left: 0px;
 padding: 0;
 width: 160px;
 background: #095aa6;
 }

#sideBar ul {
 _float/**/: left;
 list-style: none;
 margin: 0;
 padding: 0;
 width: 160px;
 background: #095aa6;
  }

#sideBar li,
#sideBar li.more {
 position: relative;
 z-index: 1000;
 color: #fff;
 padding: 5px 10px;
 _float/**/: left;
 width: 140px;
 _width /**/:160px;
}

#sideBar li, #sideBar li.more {
 border-bottom: 1px solid #188ae8;
}

#sideBar li.more {
 background: url("http://frank.mtsu.edu/~achcs/images/more_arrow.gif";) 
no-repeat right center;
}

Thanks for your help.

Kris
__
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] WebSite IE Debugging Help

[WEZ!]

Heya David and Co,

http://www.avize.com.au/avize13.html

My last reply didn't get to the list due to wrong email address but 
thsi one will. I've managed to solve the major issues with Davids 
help from earlier. Summaries are as follows:

Added Font:100.01%
-  Didnt' solve anything but its a standard problem reducer so its staying.

Changed Margins on right blocks:
Adding the 6pixel inner margin solved the centre and footer right 
hand block centering. I had reduced the inner margin in case of ie 
not positioning it correctly and then float dropping. How ironic. 
Seems fine now in IE7 and standards browsers.

I also altered the header block with the same logic. It appears that 
floated right blocks in IE7 are positioned by their left margin than 
their right margin which goes against the w3 standards from my 
recollection. Added an arbitrary 30 px seem to solve that problem.

David's solution of absolute positioning and fixed width worked and 
full width browser but the site is designed to scale down to a 640px 
browser. Though it did make me wonder how successful a layout would 
be with a negative margin content and two absolute positioned columns 
on either side. (logically it seems fine - as there would be no need 
for floats etc - but I'm sure practically there is something lacking 
- most likely vertical positioning down the page)

The Entire Content block had damaged margins due to Italic text when 
removed not only solved the odd margin fluctuation but also the 
layout of the inspire box.

So it looks mainly correct now. Few line height bugs remain but its passable.

>>>Prevent all versions of IE from going totally goofy with font scaling:
>>>body { font-size: 100%;}
>>
>>ahh forgot to put that back in from previous work. Though I recall 
>>font-size:100.01% was suppose to help Safari or Opera in certain 
>>cases as well. I didn't actually recall that being an IE helper but 
>>since I got sizing issues I'll have to see if it helps here.
>
>
>What more could anyone ask :-) ?


>
>>
>>
>>I'm focusing on IE7 at the moment as IE 6 is a complete disaster.
>>>
>>
>>is that for IE5? surely IE6/7 would ignore the commented css?
>
>
>Rules enclosed between /*...*/ means to delete same.

I missed your code alterations so all I was seeing was the comments 
and wondering how that was going to alter the output :)


>>How is it showing up hard to read. What OS/Browser/Resolution are 
>>you using? I coding on mac which has standard antialiasing which 
>>always makes fonts look good. Renders I have seen from PC look fine 
>>as well but there could be something I'm not using
>
>
>
>
>Whatever does it for you and yours is fine with me. As for myself, I 
>have difficulty with tiny-type set bold italic uppercase. Such is 
>life...

no that is perfectly valid point. The website isn't for me its for 
everyone who interacts with it. I've removed all the Italics as that 
was what was damaging the entire centre content. Without antialiasing 
the italics would be messed up.

The font should be a standard 12point arial which should be fine 
though I have noticed there is very little tracking between the 
letters on the standard arial which doens't help readability.

as for the small-caps that is there purely not to make a box of text 
quite so boring. I may have to tackle that another way.


5) Content Blocks have whacked out borders (this will be IE 
italic bug I haven't tackled yet)
>
>
>Holding on your solution...

ya Italics bug. IE alters the width of a container element containing 
full width italic text rather than let the italic's increased width 
flow out of the container. It was amusing see it stuff around the 
borders as it seemed to maintain the normal border underneath (let me 
guess, an IE7 patch over the IE6 bug) and then had a separate border 
ontop which moved with the text italics.

>
>

>>>
>>>

>>>
>>
>>Yeah not been validated yet. I run through that later in the 
>>cleaning step. It can solve problems if I've missed something type 
>>wise. Once its working correctly I can most likely halve the css if 
>>not more.
>
>
>That could be a nice touch :-) .

hehe now now, no mocking :). In the initial design stages the css is 
usually a horrible mess.

Though I'm guessing it will be complaining about zoom's use. 
Validating using css3 (to avoid complaints about text shadow)
23 errors, 20 zoom errors, one behaviour error and two * html errors.
hmm I'm actually surprised. all the errors I would have expected and no more.


>
>
>>
>>awesome work :) Thanks for your help. I'll work through what I can 
>>and post back up depending on outcomes.
>
>
>Trust me. I can't speak for others but personally, I can hardly wait.. ;-)

hahah such cheek :)

Thanks for you help once again David

Welsey Lamont

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.co

Re: [css-d] WebSite IE Debugging Help

[David Laakso]

WEZ! wrote:
>
>
>
>> Prevent all versions of IE from going totally goofy with font scaling:
>> body { font-size: 100%;}
>
> ahh forgot to put that back in from previous work. Though I recall 
> font-size:100.01% was suppose to help Safari or Opera in certain cases 
> as well. I didn't actually recall that being an IE helper but since I 
> got sizing issues I'll have to see if it helps here.


What more could anyone ask :-) ?

>
>
>>> I'm focusing on IE7 at the moment as IE 6 is a complete disaster. 
>>
>
> is that for IE5? surely IE6/7 would ignore the commented css?


Rules enclosed between /*...*/ means to delete same.



>
>
>
> How is it showing up hard to read. What OS/Browser/Resolution are you 
> using? I coding on mac which has standard antialiasing which always 
> makes fonts look good. Renders I have seen from PC look fine as well 
> but there could be something I'm not using




Whatever does it for you and yours is fine with me. As for myself, I 
have difficulty with tiny-type set bold italic uppercase. Such is life...



>
>
>
>
>>
>>
>>> 5) Content Blocks have whacked out borders (this will be IE italic 
>>> bug I haven't tackled yet)


Holding on your solution...


>>>
>>
>>
>>>
>>
>
> Yeah not been validated yet. I run through that later in the cleaning 
> step. It can solve problems if I've missed something type wise. Once 
> its working correctly I can most likely halve the css if not more.


That could be a nice touch :-) .


>
> awesome work :) Thanks for your help. I'll work through what I can and 
> post back up depending on outcomes.


Trust me. I can't speak for others but personally, I can hardly wait.. ;-)


>
> Wesley Lamont

~d


-- 

A thin red line and a salmon-color ampersand forthcoming.

http://chelseacreekstudio.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] Layout help in IE

[David Laakso]

Jonathon Suggs wrote:
>
> In a related question, any tools similar to Firebug available for IE?
>
>   

The tools needed are the same regardless of the target browser: a clear 
head and a clear mind will do the trick.

-- 

A thin red line and a salmon-color ampersand forthcoming.

http://chelseacreekstudio.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] Transparency in pre IE7

[Kenoli Oleari]

Thanks to the folks that gave me responses on this.  I will jump into  
it tomorrow.

--Kenoli

On Feb 4, 2009, at 5:33 PM, David Hucklesby wrote:

> On Wed, 4 Feb 2009 14:15:08 -0800, Kenoli Oleari wrote:
>> What file format can I use to get IE5 and IE6 to display  
>> transparency and a gradient?
>> I have an image with a gradient that goes from transparent to  
>> black.  As a png image it
>> works fine everywhere except these versions of IE.  A gif image  
>> screws up the gradient
>> and IE turns the transparency in png, jpg and tif images to white  
>> or off white. How do
>> I get these browsers to display both a gradient and transparency?
>>
>
> Some alternatives (all browsers) -
>
> 
>
> Cordially,
> David
> --
>

__
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] centering a jquery slideshow

[Kathy Wheeler]

On 05/02/2009, at 11:39 AM, Mark Vickers wrote:
> FWIW, your solution works perfectly in Opera and Safari on XP Pro  
> SP3. On
> IE, surprise surprise, it breaks: horizontal centring still works,  
> but the
> slideshow is still glued to the top of the black box. Haven't  
> checked any
> browsers on a Mac yet.

Ha ha Mark ... I was so blinkered by getting the centering working  
I'd not noticed the top margin had crept in :)

Anyway, adding one more line of css (margin) should make at least ie7  
behave and FF be consistent with it:

#slide_images p {
width: 100%;
margin: 10px auto; /* set to 0 auto for no top margin or whatever- 
you-want to put one in ... */
text-align: center;
color: rgb(255,255,255);
}

I'm on Mac, so IE testing atm is thru VirualPC. There seem to be some  
issues with ie6 displaying the images, and I am not sure if it's a  
jquery/innerfade issue or a VPC slow-as-a-dog-trying-to-load-remote- 
img-files issue ...

Cheers,
KathyW.
__
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] Transparency in pre IE7

[Philippe Wittenbergh]

On Feb 5, 2009, at 10:33 AM, David Hucklesby wrote:

> On Wed, 4 Feb 2009 14:15:08 -0800, Kenoli Oleari wrote:
>> What file format can I use to get IE5 and IE6 to display  
>> transparency and a gradient?
>> I have an image with a gradient that goes from transparent to  
>> black.  As a png image it
>> works fine everywhere except these versions of IE.  A gif image  
>> screws up the gradient
>> and IE turns the transparency in png, jpg and tif images to white  
>> or off white. How do
>> I get these browsers to display both a gradient and transparency?
>>
>
> Some alternatives (all browsers) -
>
> 

There is no need to use js to detect if a browser support rgba() or  
not. Just use the cascade.
selector {
 
filter:progid:DXImageTransform 
.Microsoft.gradient(startColorstr=#9900,endColorstr=#9900); / 
*AARRGGBB*/ /*ie5.5~7*/
background: transparent url(data:image/png;base64,iVBxx+); /*  
fx2, IE8, Opera9;*/
background: rgba(200,200,200,.5); /* gecko 1.9-fx3+,  
Safari2+,Opera10+ */
}

Note that using that filter can result in poor text-rendering on IE 6&  
7 with ClearType enabled.

Philippe
---
Philippe Wittenbergh
http://l-c-n.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] Transparency in pre IE7

[David Hucklesby]

On Wed, 4 Feb 2009 14:15:08 -0800, Kenoli Oleari wrote:
> What file format can I use to get IE5 and IE6 to display transparency and a 
> gradient?  
> I have an image with a gradient that goes from transparent to black.  As a 
> png image it
> works fine everywhere except these versions of IE.  A gif image screws up the 
> gradient
> and IE turns the transparency in png, jpg and tif images to white or off 
> white. How do
> I get these browsers to display both a gradient and transparency?
>

Some alternatives (all browsers) -

 

Cordially,
David
--

__
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] test - if someone could respond if this gets through

[WEZ!]

Thanks everyone. It does indeed seem my emails are getting through 
fine and responses to me are getting through as well.

I'm still not getting the regular posts however which is very odd. 
Anything I post is not showing up either. Going to have to take a 
look into my spam settings I think.

Thanks to all those replies.

Wesley Lamont
__
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] Layout help in IE

[David Hucklesby]

On Wed, 4 Feb 2009 11:28:58 -0600, Jonathon Suggs wrote:
[...]
>
> In a related question, any tools similar to Firebug available for IE?

I find these useful:

IE Debug Bar:
 

RNIB Surf Right Toolbar
 


Slayer Office Favelet Suite
 

Cordially,
David
--

__
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] centering a jquery slideshow

[Mark Vickers]

Wow, that was pretty darn' succinct and incontrovertible Kathy!

I know one day CSS will be that intuitive for me . . . maybe in the next
lifetime.

FWIW, your solution works perfectly in Opera and Safari on XP Pro SP3. On
IE, surprise surprise, it breaks: horizontal centring still works, but the
slideshow is still glued to the top of the black box. Haven't checked any
browsers on a Mac yet.

But then, those Micro$haft guys are gettin' real old now - you can't expect
them to concentrate like they useta'!

Cheers, Mark
__
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] Layout help in IE

[Gunlaug Sørtun]

Jonathon Suggs wrote:

> I'm needing some help with my layout in IE (common request, I know).
>  It is fine in FF, Opera (min), etc but sometimes has large gaps in 
> IE6/7. http://www.murmp.com

The addition of...

#sidebar {position: relative;}

...seems to stabilize that part in IE6.

You have a 'min-width' on #main that acts as a 'hasLayout' trigger in
IE7 and causes #main to drop on narrow windows. If you don't want that
drop you should remove 'min-width' from that element.

regards
Georg
-- 
http://www.gunlaug.no
__
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] testing layouts

[David Laakso]

David McGlone wrote:
> It bugs me to no end when positioning something and it isn't exact in none of 
> the browsers, some a little off, some way off.
>   

Forgot--

Code to compliant browsers, among them-- Opera, Firefox, Safari. and 
SeaMonkey. Fix IE 6/7.
Two good sites for coping with "fixing" IE 6/7:

See:

and



-- 

A thin red line and a salmon-color ampersand forthcoming.

http://chelseacreekstudio.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] Transparency in pre IE7

[Divya Manian]

On 2/4/09 2:32 PM, "Tim Arnold"  wrote:

> Kenoli,
> 
> You will have to use a 24-bit PNG graphic which will work perfectly in IE7+
> and Firefox.  To get IE6 and lower to correctly render the transparent PNG
> graphics you are going to have to use some javascript.  I don't think there
> is anyway around that.
> 
> Because I am already using jQuery for other things, I use:
> http://jquery.andreaseberhard.de/pngFix/
> 
> There is another one that works well and does not use jQuery:
> http://www.twinhelix.com/css/iepngfix/
> 

I use this fix: http://www.dillerdesign.com/experiment/DD_belatedPNG/ which
seems to also allow background positioning and is faster than some of the
other fixes I have found.

Regards,
Divya


__
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] centering a jquery slideshow

[Kathy Wheeler]

On 05/02/2009, at 3:08 AM, Daniel Kessler wrote:

> I have a slideshow using jquery:
>   http://sph.umd.edu/home/test_css2.cfm
>
> I'd like to center the images within the black box.

Looking at the JQuery docs for InnerFade you aren't limited to using  
ul li constructs. Perhaps replacing the list with an alternative tag  
like a p would be more suitable?

Test case here:

http://www.albury.net.au/~kathyw/temp/TestCase.html

Replacing the ul li with a p and the following css:

#slide_images p {
width: 100%;
text-align: center;
color: rgb(255,255,255);
}

Only tested in Firefox so far ...

Cheers,
KathyW.
__
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] Transparency in pre IE7

[Tim Arnold]

Kenoli,

You will have to use a 24-bit PNG graphic which will work perfectly in IE7+
and Firefox.  To get IE6 and lower to correctly render the transparent PNG
graphics you are going to have to use some javascript.  I don't think there
is anyway around that.

Because I am already using jQuery for other things, I use:
http://jquery.andreaseberhard.de/pngFix/

There is another one that works well and does not use jQuery:
http://www.twinhelix.com/css/iepngfix/

Cheers,
Tim



On Wed, Feb 4, 2009 at 5:15 PM, Kenoli Oleari  wrote:

> What file format can I use to get IE5 and IE6 to display transparency
> and a gradient?  I have an image with a gradient that goes from
> transparent to black.  As a png image it works fine everywhere except
> these versions of IE.  A gif image screws up the gradient and IE turns
> the transparency in png, jpg and tif images to white or off white.
> How do I get these browsers to display both a gradient and transparency?
>
> Thanks,
>
> --Kenolli
> __
> 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] testing layouts

[David Laakso]

David McGlone wrote:
> What I'm wondering is how everyone tests their layouts when not every browser 
> and resolution is available. I'm running Kubuntu with Firefox and Opera 
> running on 1440x900 resolution and I also check on my laptop running Win XP 
> with IE V. 6.0. with the same 1440x900 resolution.
>
> It bugs me to no end when positioning something and it isn't exact in none of 
> the browsers, some a little off, some way off. Install Safari on the XP.
>   

--Drag the layout do 800 to ensure it clears the scroll bar at 800, and 
that floats do not drop.
--Setting Opera at less than 100 percent (lower right corner) will give 
you an idea of how the page may look on a browser window wider than 1440.
--Install SeaMonkey. Install PC Safari on XP.
--Check the page at min-font size 24px in FF, and at min-font size 32px 
in Opera.
--Test in IE 6/7 at text-size "largest."
--View your stuff in a Lynx viewer, and design with it in 
mind.
--Become familiar with Tidy Online .
--Validate the markup and css (frequently).

--There's no such thing as too much testing...

Usability, functionality, accessibility and the accommodation of user 
preferences, whatever they may be, are more reasonable reality goals 
than pixel-perfect cross-browser rendering...


-- 

A thin red line and a salmon-color ampersand forthcoming.

http://chelseacreekstudio.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/

[css-d] Transparency in pre IE7

[Kenoli Oleari]

What file format can I use to get IE5 and IE6 to display transparency  
and a gradient?  I have an image with a gradient that goes from  
transparent to black.  As a png image it works fine everywhere except  
these versions of IE.  A gif image screws up the gradient and IE turns  
the transparency in png, jpg and tif images to white or off white.   
How do I get these browsers to display both a gradient and transparency?

Thanks,

--Kenolli
__
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] testing layouts

[Jenn Mears-Nickerson]

While having several different machines would be ideal, a quick way I try to 
see if I'm on the right track with a layout is to test the url in the IE 
Netrender's web application:

http://ipinfo.info/netrenderer/index.php?page=1

I have a mac so it allows me to view most of the page's design as it would 
appear in various versions of IE.  (Maybe it's a good tool if you are on the go 
somewhere)

Jenn Mears-Nickerson

Jenn Mears Web Design LLC
39B Northey Street 
Salem, MA 01970
617-816-1209
LinkedIn
Facebook
Twitter


From: Gunlaug Sørtun 
Sent: Wednesday, February 04, 2009 4:10 PM
To: David McGlone 
Subject: Re: [css-d] testing layouts 

David McGlone wrote:

> What I'm wondering is how everyone tests their layouts when not every
>  browser and resolution is available.

Back when I had fewer machines and screens, I used to set Opera to show
the exact window dimensions in its title-line, adjust window size on it
to various "often used" sizes, and overlay the other browsers on that
window for comparison. A bit clumsy but it worked rather well.

> It bugs me to no end when positioning something and it isn't exact in
>  none of the browsers, some a little off, some way off.

So many individual browser settings that can cause such deviations, and
one has to know and test them all if one wants to make sure one isn't
fooled by ones own tools.

Also so many ways to position elements in relation to each other, that
it is easy to create situations where deviations are unavoidable.

regards
Georg
-- 
http://www.gunlaug.no
__
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] WebSite IE Debugging Help

[David Laakso]

WEZ! wrote:
> http://www.avize.com.au/avize12.html
>   

Prevent all versions of IE from going totally goofy with font scaling:
body { font-size: 100%;}
> I'm focusing on IE7 at the moment as IE 6 is a complete disaster. 
> Porblems left are:
> 1) Header Right Image should be aligned to the end of the bar (floated right)
>   


Amend selectors to read (holds in compliant browsers-- IE 6/7 follow suit)::
#header {
position: relative;
font: 0.75em/1em arial, helvetica, sans-serif;
height:140px;
/*width: auto;*/
padding:0 160px;
margin:0 0 1em 0;
background: url(headerbi.png)/* repeat scroll left*/;
/*zoom:1*/;
}
#headerright img {
height:80px;
width: 285px;
/*float:right;*/
/*width:42%;*/
position: absolute;
top: 1.15em;
right: 0;
/*position: relative;
margin: 3px -155px;
position:relative;
display:inline;
zoom:1;*/}
> 2) Newcolumn should be centred on its column
>   
Amend to read (holds in compliant browsers-- IE 6/7 follow suit):
#newscolumn{
display:inline;
position:relative;
float:right;
margin: 5px -156px 5px 6px;
width:150px;
/*overflow:hidden;
z-index: 11;*/}

> 3) Footer Right same as above
> - top three all seem like the same float margin bug but can't seem to 
> get it resolved
> 4)Inspire block in middle should be centred
>   

#inspireblock (your site's primary content) is freaking hard to read :-) .


> 5) Content Blocks have whacked out borders (this will be IE italic 
> bug I haven't tackled yet)
>   
Not sure what you mean about the borders...

Amend to read:
clientbody p, .avizebody p {display:block; position:relative; margin:1em 
0.25em; color:#660066; font: /*bold italic small-caps*/ 
/*1.1*/1.2em/*/1em*/ Arial, Helvetica, sans-serif; 
text-align:/*center*/left;}

> 6)Footer Left Block has smaller line height than standards browser
>   
not done
> 7) Google CSE bar at top left has larger line height - set to 1px 
> height the bar loads as 1 px then something triggers it to enlarge 
> but another 5 or so
>   
not done
> 8) Login Text input not centered
> - the last three seem to be line height problems.
>   
not done
> You'll have to excuse the site is far from refined (and the various 
> zoom hopes) at the moment. If anyone can recommend solutions or where 
> I can read further to find solutions that would be fantastic.
>   
See:

and


Many those zoom:1 and position: relative; rules are not needed. 
Carefully weed them out. Validate the markup-- you have 40 errors...
Not all of your requirements have been met.
Test file here:

any changes made that I may have neglected to wite above are on the css 
file, here:


~d

-- 

A thin red line and a salmon-color ampersand forthcoming.

http://chelseacreekstudio.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] image link works in opera but not safari or firefox and ? in IE

[Gunlaug Sørtun]

Ron Zisman wrote:
> i'm trying to put  link on the logo to the home page
> (flippingpixels). while it's functional in opera, it's failing in ff
> and safari. could someone please have a glance.

Browsers don't seem to agree on stacking level of that image.

Add...

#bar img {position: relative; z-index: 1;}

...to get it stacked high enough to make the link work in FF and Safari.

regards
Georg
-- 
http://www.gunlaug.no
__
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] testing layouts

[Gunlaug Sørtun]

David McGlone wrote:

> What I'm wondering is how everyone tests their layouts when not every
>  browser and resolution is available.

Back when I had fewer machines and screens, I used to set Opera to show
the exact window dimensions in its title-line, adjust window size on it
to various "often used" sizes, and overlay the other browsers on that
window for comparison. A bit clumsy but it worked rather well.

> It bugs me to no end when positioning something and it isn't exact in
>  none of the browsers, some a little off, some way off.

So many individual browser settings that can cause such deviations, and
one has to know and test them all if one wants to make sure one isn't
fooled by ones own tools.

Also so many ways to position elements in relation to each other, that
it is easy to create situations where deviations are unavoidable.

regards
Georg
-- 
http://www.gunlaug.no
__
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] testing layouts

[Peter Bradley]

Ysgrifennodd David McGlone:
> Hi everyone,
>
> I have a question about techniques. 
>
> What I'm wondering is how everyone tests their layouts when not every browser 
> and resolution is available. I'm running Kubuntu with Firefox and Opera 
> running on 1440x900 resolution and I also check on my laptop running Win XP 
> with IE V. 6.0. with the same 1440x900 resolution.
>
> It bugs me to no end when positioning something and it isn't exact in none of 
> the browsers, some a little off, some way off.
>   

Hi David,

I develop under Linux using Quanta for straight html and Eclipse for
PHP, using FF as my main browser.  On my development box I check that
everything is OK in FF, then I test in Konq and Opera and IE6 (using
IEs4Linux).  I also have XP running in a virtual machine, on which I use
IETester (http://www.my-debugbar.com/wiki/IETester/HomePage).  To get
everything acceptable at this level, I only use hacks/browser-specific
html comments that correct for IE, but that are ignored by all compliant
browsers.

When everything looks OK, I check it out on a couple of laptops I've
got, and on a couple of netbooks.  I don't have to worry about things
like mobile phones (yet).

I try to make sure that I can hit [Ctrl]+[+] at least 5 times before
anything starts to downgrade significantly.

If possible, I try to use only relative units (ems and percentages
usually), possibly from a known start point (e.g. a base font size in
pixels to which everything else is relative).  Then I try to give the
browser as much "wiggle room" as I can by specifying as few dimensions
as I possibly can.  I don't think I ever specify every width across any
block, and I can't remember the last time I specified a height except
for cells in tabular data (usually things like timetables).

Having said all that, I also only tend to deal in relatively
straightforward designs.  I certainly don't have any designers on my
back who want pixel-perfect respresentations of their creations.  So I
have things pretty easy, I think.

I hope this is useful   The replies you get from other people will
certainly be more so.

Oh! and I'm just reporting what I do.  I'm not saying you should do the
same.

Cheers


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-d] testing layouts

[David McGlone]

Hi everyone,

I have a question about techniques. 

What I'm wondering is how everyone tests their layouts when not every browser 
and resolution is available. I'm running Kubuntu with Firefox and Opera 
running on 1440x900 resolution and I also check on my laptop running Win XP 
with IE V. 6.0. with the same 1440x900 resolution.

It bugs me to no end when positioning something and it isn't exact in none of 
the browsers, some a little off, some way off.
-- 
David M.
__
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] Layout help in IE

[Jonathon Suggs]

Hi,

I'm needing some help with my layout in IE (common request, I know).  It is
fine in FF, Opera (min), etc but sometimes has large gaps in IE6/7.
http://www.murmp.com

I'm about to do a minor redesign, but the general structure is going to
(hopefully) stay the same unless it just needs major rework to accommodate
IE.

In a related question, any tools similar to Firebug available for IE?

-- 
http://www.murmp.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/

[css-d] image link works in opera but not safari or firefox and ? in IE

[Ron Zisman]

i'm trying to put  link on the logo to the home page (flippingpixels).  
while it's functional in opera, it's failing in ff and safari. could  
someone please have a glance.

thanks in advance


link:

http://www.flippingpixels.com/images.html



code:
 

   

 

--ron

http://www.ricochet.org
the ox is slow but the earth is patient
__
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] Background extended by border property

[Cristian Palmas]

2009/2/4 Cristian Palmas 

> 2009/2/4 Gunlaug Sørtun 
>
> Cristian Palmas wrote:
>>
>>> Hi all,
>>>
>>> I have noticed a CSS behaviour that seems strange to me, so I thought
>>> of asking to someone for some explanation.
>>>
>>
>>  [...]
>>>
>>
>>  May anyone tell me why?
>>>
>>
>> See "collapsing margins"...
>> 
>> ...a rather complex part of CSS standards.
>>
>> Borders on .top will make .top expand to contain h1's vertical margins,
>> while .top without borders will only contain the h1 itself and not its
>> vertical margins.
>>
>> regards
>>Georg
>> --
>> http://www.gunlaug.no
>>
>
>
> Thanks Georg,
>
> I've already heard about it but I've never seen it in action.
> Bye.
>
>
> --
> ~ Cristian Palmas ~
> http://www.cristianpalmas.it
>



-- 
~ Cristian Palmas ~
http://www.cristianpalmas.it
__
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] Background extended by border property

[Gunlaug Sørtun]

Cristian Palmas wrote:
> Hi all,
> 
> I have noticed a CSS behaviour that seems strange to me, so I thought
> of asking to someone for some explanation.

> [...]

> May anyone tell me why?

See "collapsing margins"...

...a rather complex part of CSS standards.

Borders on .top will make .top expand to contain h1's vertical margins,
while .top without borders will only contain the h1 itself and not its
vertical margins.

regards
Georg
-- 
http://www.gunlaug.no
__
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] centering a jquery slideshow

[Daniel Kessler]

I have a slideshow using jquery:
  http://sph.umd.edu/home/test_css2.cfm

I'd like to center the images within the black box.  They are  
different widths.  I tried setting their widths in the  but that  
wasn't useful nor was setting the ul  width/margin:auto.
I have tried quite a few things and am not sure how to go about it -  
but it is validated!


thanks for any help.


-- 

Daniel Kessler

University of Maryland College Park
School of Public Health
3302E SPH Building
College Park, MD  20742-2611
Phone: 301-405-2545
http://sph.umd.edu




__
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] Background extended by border property

[Cristian Palmas]

Hi all,

I have noticed a CSS behaviour that seems strange to me, so I thought of
asking to someone for some explanation.
I have this snippet of XHTML 1.0 strict code:



Page Title



and the CSS code is:

* {
margin: 0;
padding: 0;
}

.a {
width: 700px;
margin: 20px auto;
border: 1px solid #00;
}

.b {
background: #cc;
}

.top {
border-bottom: 1px solid #cc;
border-top: 1px solid #cc;
}

h1 {
margin: 1em 0;
}

Now, I tested it only on FF 3.0.5 on Win XP SP3 and, if I comment the .top
properties, the background of the title container "b" is shortened to
contain h1 without margins (and till now it is obvious). What I cannot
understand is that if I uncomment the .top border properties, the background
is extended containing even the h1 margins. I achieve the same thing as the
following CSS code:

* {
margin: 0;
padding: 0;
}

.a {
width: 700px;
margin: 20px auto;
border: 1px solid #00;
}

.b {
background: #cc;
}

.top {

}

h1 {
padding: 1em 0;
}

May anyone tell me why?
Thanks in advance.

-- 
~ Cristian Palmas ~
http://www.cristianpalmas.it
__
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] WebSite IE Debugging Help

[WEZ!]

Heya All, well it seems my emails are getting through though I 
haven't had a normal list email for quite some time. Odd but I'll 
have to solve that bug once I get this sorted out.

http://www.avize.com.au/avize12.html

I've been developing my Business Site at the moment and got it to the 
state I want in compliant browsers without too much trouble. Now I'm 
back into the glorious stage of IE win testing and after a couple of 
days of testing, searching, researching etc I'm going to ask some of 
the gurus on here.

I'm focusing on IE7 at the moment as IE 6 is a complete disaster. 
Porblems left are:
1) Header Right Image should be aligned to the end of the bar (floated right)
2) Newcolumn should be centred on its column
3) Footer Right same as above
- top three all seem like the same float margin bug but can't seem to 
get it resolved
4)Inspire block in middle should be centred
5) Content Blocks have whacked out borders (this will be IE italic 
bug I haven't tackled yet)

6)Footer Left Block has smaller line height than standards browser
7) Google CSE bar at top left has larger line height - set to 1px 
height the bar loads as 1 px then something triggers it to enlarge 
but another 5 or so
8) Login Text input not centered
- the last three seem to be line height problems.

You'll have to excuse the site is far from refined (and the various 
zoom hopes) at the moment. If anyone can recommend solutions or where 
I can read further to find solutions that would be fantastic.

Wesley Lamont
__
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] Make scrollbar appear if remaining height is not enough to see all content

[Olivier Sannier]

Hi again,

First of all, thanks for the help with getting rid of layout tables, 
this was very nice.
I'm now moving onto the next step where I want to get rid of frames 
altogether. The production website with frames is here:
http://photos.obones.com/

As you can see, the bottom part has a vertical scrollbar when its 
content is too high for what remaining height there is in the window.
I am trying to reproduce this in the new website that can be seen here:
http://photos2.obones.com/

Right now, he vertical scrollbar is showing for the entire page. I want 
it to show only for the "vbox" div which is placed in the "hbox" div. 
This last one has a gray background which makes it easier to distinguish 
from the header.
As you can see in the stylesheet, I commented out a few "hacks" that I 
discovered on a website which were used to obtain the desired effect. 
However, they have some side effects, and as such, I would gladly accept 
a more standard way of achieving this.
Do you have any hints or pointers for getting the required effect?
The main targets for the website are IE7 and FF2. Compatibility with 
Opera would come as a bonus, while compatibility with older versions of 
IE or FF are not required at all.

Thanks in advance for your help
Olivier
__
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] test - if someone could respond if this gets through

[WEZ!]

just testing.

All my emails stopped from the list 10 Jan so I'm assuming that's 
spam assassin being changed but I've reverted back and still nothing.

Either I'm not receiving the emails, lost my subscription or something else.

If anyone could just reply if this does come through that way I'll 
know if I'm not getting the list to my mailbox or not even getting to 
the list in the first place.

Thanks

Wesley Lamont
__
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] firefox micro versions

[Gunlaug Sørtun]

Eric Cash wrote:
> My html/css is 100% standards compliant, and looks identical in 
> firefox 3.0.5, safari, opera, and all versions of ie.  Great, right? 
> But they just sent me a series of screenshots showing weird display 
> inconsistencies in firefox 3.0.1, 3.0.2, and 3.0.3, some of which are
> just plain wacky, and shouldn't even exist, but doesn't ff 
> auto-update, do you guys think I REALLY need to worry about this?

Worry, no.

Really "wacky" results in recent versions should make you go back and
check whether you or those browser-versions are at fault though.
This is especially important if you "fine-tune" CSS layouts for various
browsers, as such "tuning" - no matter how standard compliant the code
is - tends to be version-targeted and therefore not very reliable.

I always keep a few slightly older versions available for quick-checks,
since immediate upgrades at the user-end can not be guaranteed.
One can expect upgrade-delays of from a few months to a couple of years
for most browsers, and up to ten years for IE.

regards
Georg
-- 
http://www.gunlaug.no
__
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] Chrome an IE Clone?

[Gunlaug Sørtun]

Christopher R wrote:
> I've been using Opera for a long time and I think it is a good 
> browser but I will be making a switch over to chrome.

For browsing, OK - doesn't really matter which browser one uses as long
as it isn't too old.

For web development it is a little different, but we all have our
preferences. I develop in/for Opera, and make sure all others are
rendering fine.

> I have more of a statement to make about Chrome when I tried the beta
>  version (I know it's still lingers to some extent as a beta) did it 
> seem to anyone that it appears to render pages almost identical to IE
> ?

That Chrome render almost identical to IE should not come as a surprise.
For the average web page almost all relatively new browser versions
render the same. That's the result of having web standards, and that
pages are made to "appear the same" everywhere.
Browser developers are more and more onto the same route regarding CSS
standards, and all fixes we web developers use for old IE makes even
that browser appear to render most pages the same as all others.
(Some web developers do of course do this in reverse - build for IE and
fix others, but the result is in most cases the same.)

When challenged the various engines reveal differences, but apart from
bugs and lack of support for certain CSS parts the result on screens is
pretty much the same - for the reasons mentioned above.


Chrome uses the WebKit rendering engine, *and* identifies itself as
WebKit when probed for CSS based rendering.


That a browser is built on a specific rendering engine doesn't mean its
CSS rendering is identical to other browsers using the same engine, down
to the minutest details. Engine versions differ, and branching/forking
counts for some differences since not all development is ported - or is
really portable - back to the main engine and out to the other branches.

Example: WebKit was forked off of the KHTML engine, but modifications to
the WebKit engine has only to a small degree been ported back to the
KHTML engine. (The WebKit engine still responds to a few KHTML specific
CSS selectors, although most are replaced by specific WebKit selectors
by now.)

Browser developers historically don't cooperate well enough to help each
other keep the various engine versions coherent. Lots of competition out
there, and various browser developers are generally more interested in
presenting and promoting each browser's uniqueness than its relationship
to other browsers, to the regular web surfer.


A list over browsers vs. rendering engines is found here...

...and if in doubt you can use the "CSS Sledgehammer" probing - the
image above that list - to see which CSS rendering engine/engine-version
any browser has or uses. Around 99.9% accuracy for browsers in regular
use can be expected for the probing-method I use :-)

(One can't easily probe the latest Opera versions btw, but that's no
problem as long as one can probe all others.)

regards
Georg
-- 
http://www.gunlaug.no
__
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] Getting rid of layout tables using 100% width

[Olivier Sannier]

Holly Bergevin wrote:
> From: Olivier Sannier 
>
>   
>> I have trouble reproducing the top "frame" 
>> buttons. Using divs, I got the result visible at this address:
>> http://photos2.obones.com/
>> 
>
>
> Do the following changes have close to the effect you seek?


Yes, that helped. I had to adjust using a bit of padding, but it is now 
close enough to what it was before.
Many thanks to you and Lourens for suggesting to use float: left
I tried it before, but got it all wrong, so your example helped figuring 
out what was needed.

Cheers
Olivier
__
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] One problem in Safari, and another in IE7

[Philippe Wittenbergh]

On Feb 4, 2009, at 8:33 AM, Emily Songster wrote:

> http://www.emspacedesign.com/bio2.html
>
> I'm using the Faux Columns technique to create this layout. The  
> XHTML code and the CSS have both been validated.
>
> The page is showing up correctly in Firefox on the PC and on the  
> Mac. (And it doesn't break that badly when you enlarge the text size  
> in the browser.)
>
> PROBLEM: In Safari on the Mac, the "columnThree" div is jumping up  
> and covering the "TopColumnTwo" div.

fwiw, I don't see this. But read on.
You are assuming a certain height for the left floated column, and  
then pull that right floated block upwards based on that height (the  
computed value in _your_ browser). Change the font-size and watch the  
content in that right-hand column move up and down.

And yes, it is very possible for the height of that left-hand column  
to be (slightly) different between different browsers even if they are  
configured exactly the same. Different ways of rounding of values when  
the value does not compute to an integer. There are also very small  
differences between Safari and Gecko Mac when the line-height is  
computed (especially as you don't specify a line-height.

(That left column is 540px tall in Firefox Mac,  and 521px tall in  
Safari Mac - when I disable my minimum font-size settings).

I would use absolute positioning for that #columnThree div.

Philippe
---
Philippe Wittenbergh
http://l-c-n.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/