[css-d] CSS menu problems

[z e n]

I've got problems with CSS menu ( http://testingzone.50webs.com ), It looks 
different when checking it with different browsers, Could you please help me to 
figure that out or give me a hint.

 

With best regards, Eugene Kravchenko.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS menu problems

[James Smith]

z e n wrote:
>I've got problems with CSS menu ( http://testingzone.50webs.com ), It looks 
>different when
>checking it with different browsers, Could you please help me to figure 
>that out or give me a hint.

>With best regards, Eugene Kravchenko.

Hi Eugene,

Your problem is caused by the fact that your DOCTYPE declaration is not on 
the very first line in your source code; this bug causes IE6 to render pages 
in Quirks Mode - using the IE5-style box-model with all its faults.

James


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Unwanted three pixel padding-bottom of image in div

[Michael Williams]

On 6 Mar 2006, at 02:21, Philippe Wittenbergh wrote:
> Images are inline elements, and thus rest on the base-line.
> Solutions:
>   #wrapper img {display:block;}
> or
>   #wrapper img {vertical-align:bottom;}
>
> Read more in this oldie:
>  Images,_Tables,_and_Mysterious_Gaps>

Thanks very much. That makes perfect sense. I should have picked up  
the clue in the fact that the size of the padding is sensitive to  
font size, which is because room required by the descenders of p, q,  
etc. changes (thanks David!)

-- Mike
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] when is css width applicable?

[Martin Olsson]

Hi,

On which elements can I use the width property? It seems like some
elements respond very nicely to setting "width: 100px" but other elements
just ignore it.

Can I affect whether a given element respond to width somehow? I tried
using "display:block" but this also seems to add a newline char after the
element which is not acceptable.


regards,
martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] when is css width applicable?

[Mark Stickley]

Width is only applied to block level elements as far as I know so  
you'll have to set display: block;

To fix the line clearing you should just have to float the element  
either left or right.

Hope that helps!

Mark

On 6 Mar 2006, at 12:13, Martin Olsson wrote:

> Hi,
>
> On which elements can I use the width property? It seems like some
> elements respond very nicely to setting "width: 100px" but other  
> elements
> just ignore it.
>
> Can I affect whether a given element respond to width somehow? I tried
> using "display:block" but this also seems to add a newline char  
> after the
> element which is not acceptable.
>
>
> regards,
> martin
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] when is css width applicable?

[Adam McGrath]

Yep the width element can be used on block-level and replaced elements
(eg HTML, IMG, INPUT, TEXTAREA, SELECT, and OBJECT element)

from: http://www.w3.org/TR/REC-CSS2/conform.html

Replaced element
An element for which the CSS formatter knows only the intrinsic
dimensions. In HTML, IMG, INPUT, TEXTAREA, SELECT, and OBJECT elements
can be examples of replaced elements. For example, the content of the
IMG element is often replaced by the image that the "src" attribute
designates. CSS does not define how the intrinsic dimensions are
found.

cheers
ad

On 3/6/06, Martin Olsson <[EMAIL PROTECTED]> wrote:
> Hi,
>
> On which elements can I use the width property? It seems like some
> elements respond very nicely to setting "width: 100px" but other elements
> just ignore it.
>
> Can I affect whether a given element respond to width somehow? I tried
> using "display:block" but this also seems to add a newline char after the
> element which is not acceptable.
>
>
> regards,
> martin
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Problem with right column overlap when main contains uncompressible table

[Carl Youngblood]

Both Ingo and Gunlaug's solutions were very helpful!  Thanks so much guys
for taking the time to answer my questions in depth.  That was really above
and beyond the call of duty.
Cheers,
Carl

On 3/4/06, Ingo Chao <[EMAIL PROTECTED]> wrote:
>
>
> Georg already solved it.
>
>
> The (still) experimental drop-it method [1] could be useful here. The
> scrollbar might not be desired:
>http://www.satzansatz.de/cssd/dropit/cl/index.html
>
> CSS with comments added
>http://www.satzansatz.de/cssd/dropit/cl/index.css
>
> Ingo
>
> [1] http://www.satzansatz.de/cssd/dropit.html
>
> --
> http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] simple problem?

[Peter Lloyd]

Hi,

Is it possible to force text to go below floated elements?

I have an image floated left with some related text flowing to the  
right. But I want to begin the next section of text below the floated  
image and tight to the left margin (see 1).  At the moment the next  
section of text simply begins to the right of the image and flows  
round the image (2).

(1)
---  text text text
|  |  text text text
|  |  text text text
|  |
|  |
---
Next section
Next section
Next section

(2)
---  text text text
|  |  text text text
|  |  text text text
|  |
|  |  Next section
---  Next section
Next section
Next section

Is there any way to guarantee that 'Next section' always begins below  
the image floated left (even if the size of the image varies on  
different pages?

I've tried (1) carriage returns but these render differently in  
different browsers, (2) a fixed height div surrounding the image and  
text but this provides problems with rendering when the right text  
goes below the image - 'Next section' appears written over the text.  
(3) using a table but this interacts with the menus in the left hand  
column.

Thanks for any help,

Peter.

An example of the basic page layout is at:

  http://design.open.ac.uk/individual_pages/jeff_johnson/ 
people_jeff_johnson.htm
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] simple problem?

[Christian Heilmann]

> Is it possible to force text to go below floated elements?
>
> I have an image floated left with some related text flowing to the
> right. But I want to begin the next section of text below the floated
> image and tight to the left margin (see 1).  At the moment the next
> section of text simply begins to the right of the image and flows
> round the image (2).

Yes, simply make the paragraphs clear any float that was defined beforehand.

p img{float:left}
p{clear:both;}

then you can do a

 Lorem Lorem ad nauseam
Next stuff

And next stuff will always be below the image




--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] simple problem?

[Gunlaug Sørtun]

Peter Lloyd wrote:
> Is it possible to force text to go below floated elements?

> Is there any way to guarantee that 'Next section' always begins below
>  the image floated left (even if the size of the image varies on 
> different pages?

Yes, at least three ways.

1: declare 'clear: both' or 'clear: left' on element holding "Next section".

2: make sure the element holding "Next section" is a block-element and
make it so wide that it can't fit alongside any image. That's usually
solved by giving it a width of close to 100% of available space in that
part of the page.

3: add a wide element (an empty div, maybe) that's defined close to 100%
wide, in the markup just above the element holding "Next section".

Solution 2 and 3 may come handy if unwanted clearing below elements
outside a page-part/column happens to be a problem. Otherwise solution 1
is the usual way to 'clear' below a float.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Problems with a floated menu... (IE)

[Philip Munksgaard]

I am in the process of building a website of my own... Right now it is a 
mostly like a sandbox, testing design ideas, css and such.

So, i've now made this site http://munksgaard.frac.dk

My problem is, that the menu in the left seems to screw up in IE... 
Needless to say there is no problem in any other browsers...

I would be very pleased if anyone could point out the problem for me!

Thanks a lot in advance
Philip Munksgaard
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] simple problem?

[Peter Lloyd]

Guys, thanks for the suggestions...

The problem with clear: left; used in the main content area is that  
it not only clears the image, but also the bottom of the search box   
in the left-had column!  So I guess the question then becomes can I  
stop the interaction between the floated elements in the left column  
and the clearing elements in the main content area?

Peter.

Basic layout: http://design.open.ac.uk/individual_pages/jeff_johnson/ 
people_jeff_johnson.htm



On 6 Mar 2006, at 17:16, Cunniff, CJ wrote:

> I believe you can just use the following style on the next section:
>
> style="clear: left;"
>
> Of course, you could also do that within your style sheet instead on
> inline.
>
> Hope that helps,
> CJ
>
> -Original Message-
> From: [EMAIL PROTECTED]
> [mailto:[EMAIL PROTECTED] On Behalf Of Peter Lloyd
> Sent: Monday, March 06, 2006 11:12 AM
> To: css-d@lists.css-discuss.org
> Subject: [css-d] simple problem?
>
> Hi,
>
> Is it possible to force text to go below floated elements?
>
> I have an image floated left with some related text flowing to the
> right. But I want to begin the next section of text below the floated
> image and tight to the left margin (see 1).  At the moment the next
> section of text simply begins to the right of the image and flows  
> round
> the image (2).
>
> (1)
> ---  text text text
> |  |  text text text
> |  |  text text text
> |  |
> |  |
> ---
> Next section
> Next section
> Next section
>
> (2)
> ---  text text text
> |  |  text text text
> |  |  text text text
> |  |
> |  |  Next section
> ---  Next section
> Next section
> Next section
>
> Is there any way to guarantee that 'Next section' always begins below
> the image floated left (even if the size of the image varies on
> different pages?
>
> I've tried (1) carriage returns but these render differently in
> different browsers, (2) a fixed height div surrounding the image and
> text but this provides problems with rendering when the right text  
> goes
> below the image - 'Next section' appears written over the text.
> (3) using a table but this interacts with the menus in the left hand
> column.
>
> Thanks for any help,
>
> Peter.
>
> An example of the basic page layout is at:
>
>   http://design.open.ac.uk/individual_pages/jeff_johnson/
> people_jeff_johnson.htm
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by  
> evolt.org
> -- http://www.evolt.org/help_support_evolt/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] margin/padding-bottom relative to canvas bottom

[Frank Van Damme]

Hello,

I am trying to achieve a certain effect. I am trying to put a box on a
web page where the content (a box, say) is positioned - either
absolutely or using margins on top or sides - BUT I want it to always
remain the same height and have the content scroll nicely in that
area. Also, I would like to avoid using overflow: scroll and have a
scroll bar in the middle pf my page.

So I figured, if I could set margin-bottom to be always (total height
of the canvas) minus (fixed number of pixels) , and clip the rest of
the page, it would be as if my web page was scrolling inside of the
small box. The only problem (and therefor my problem with the bottom
margin) is that if the user enlarges his browser window, not all the
content will be shown (some of it will fall in the clipped area...)

Anyone an idea?


--
Frank Van Damme
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Problems with a floated menu... (IE)

[~davidLaakso]

Philip Munksgaard wrote:
> So, i've now made this site http://munksgaard.frac.dk
>
> My problem is, that the menu in the left seems to screw up in IE... 
> Needless to say there is no problem in any other browsers...
> Philip Munksgaard
> _
Philip,
I am unable tom boot to IE, at the moment, I think /maybe/ you've got a 
simple markup error?
Run the page through Tidy Online.
Tidy will point out the error and correct it for you.
Then run the corrected file through file through the w3c markup 
validation service to make sure it's valid.
Then validate the CSS: .
Providing the CSS and markup are valid, see if this corrects the menu 
problem in all win versions of ie.
Regards,
~davidLaakso
trivial aside: pixel font-sizes and small-caps on unserifed fonts are 
not helping your cause typographically in any browser...
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] margin/padding-bottom relative to canvas bottom

[cj]

something like http://www.456bereastreet.com/lab/cssframes/ ?

if that's kind of what you're looking for, the full wiki page can be
found at http://css-discuss.incutio.com/?page=EmulatingFrames .
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Floating elements at an 'edge'

[Keith Sader]

Greetings,

I've got a link I'd like to align at the top right of an 80% width
table such that the link's right edge is always in alignment with the
table's right edge.

So far I've got the following selectors :

a.printLink {
font-size: 11px;
padding: 0 0 0 15px;
margin-left: 67.5%;
}

#detailTable {  
padding-top: 2px;
width: 80%;
min-width: 488px;
}

And the the html is as such:

Printable Report


...




This gets the link pretty close the right edge of the table for most
browser widths but doesn't really 'stick' the link to the correct
place.

Any suggestions?

thanks,
--
Keith Sader
[EMAIL PROTECTED]
http://www.saderfamily.org/roller/page/ksader
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] margin/padding-bottom relative to canvas bottom

[~davidLaakso]

Frank Van Damme wrote:
> Hello,
>
> I am trying to achieve a certain effect. I am trying to put a box on a
> web page where the content (a box, say) is positioned - either
> absolutely or using margins on top or sides - BUT I want it to always
> remain the same height and have the content scroll nicely in that
> area. Also, I would like to avoid using overflow: scroll and have a
> scroll bar in the middle pf my page.
>   
I am not sure I understand the question. If the box in the center has a 
fixed height, it is likely, the text in that box will break out the 
bottom on zoom. Would something like this work for you, instead?

> --
> Frank Van Damme
> _
Regards,
~davidLaakso
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating elements at an 'edge'

[Els]

Keith Sader wrote:

> I've got a link I'd like to align at the top right of an 80%
> width table such that the link's right edge is always in
> alignment with the table's right edge.

[snip code]

> This gets the link pretty close the right edge of the table
> for most browser widths but doesn't really 'stick' the link to
> the correct place.
>
> Any suggestions?

Wrap the  element in a div, which you give the exact same 
width and min-width as the table, and set text-align:right; to 
it.

-- 
Els
http://locusmeus.com/
http://locusoptimus.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating elements at an 'edge'

[Paul Novitski]

At 10:55 AM 3/6/2006, Keith Sader wrote:
>I've got a link I'd like to align at the top right of an 80% width
>table such that the link's right edge is always in alignment with the
>table's right edge.
...
>Printable Report
>
>
>...
>This gets the link pretty close the right edge of the table for most
>browser widths but doesn't really 'stick' the link to the correct
>place.


Keith,

I would shrinkwrap both the link and the table in a div so that I 
could align the anchor right and know that it wasn't going to extend 
past the table.

Numerous techniques:
http://google.com/search?q=css+%28shrinkwrap+%22shrink+wrap%22+shrink-wrap%29

My own tendency would be to float the wrapper left, then clear the 
float afterward:

 
 
 

 #wrapper
 {
 float: left;
 }

 #wrapper a
 {
 text-align: right;
 }

 #nextItem
 {
 clear: left;
 }

Regards,
Paul 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Need help with a few quirks

[Webmaster]

Hello, I am currently working on a layout for a friend, which can be 
found at http://www.exillon.com/test/ and the css is 
http://www.exillon.com/test/main.css
Rather than making the stretched/melted part of the background one huge 
image, I made a basic tiled version  for the straight lines and an 
postion: absolute floating box with the stretched/melted graphic over it.
Now in Firefox, the image looks fine. In IE6 for PC, though, the colours 
are showing up for some reason darker. The tiled version is a .gif and 
the floating image version is a .png. Would that be the cause for such? 
I've never seen an image rendered darker in one browser compared to 
another only due to it being a .png file. The only problems I recall 
that IE has with .pngs is transparency issues, which this does not have.
Also, would anyone be able to suggest how to best stretch a div, or any 
element,  the entire width of a page and be elastic? I noticed that if I 
shrink my window enough to show a horizontal scroll due to my temp 
stretched/melted background images size, the header and the footer both 
cut short of it. Is there a way to make this elastic as well?
One last request, if possible, would be if anyone would know how to best 
make a col stretch an entire page vertically but also have a footer 
remain beneath it, like mine has.
Please keep in mind that the layout is not complete. So if you want to 
make any critiques, at the moment I am merely tackling the layout.
Thank you,
D.

PS. Sorry for not getting a chance to research too much of this on my 
own at the moment, I am tied up at work and I am not able to get to a PC.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] simple problem?

[Gunlaug Sørtun]

Peter Lloyd wrote:


> ... So I guess the question then becomes can I stop the interaction 
> between the floated elements in the left column and the clearing 
> elements in the main content area?

Complete isolation is achieved by adding...

#content {float: left; margin: 10px 0 0 10px; width:535px;}

...in accordance with CSS2.1[1].

Georg

[1]http://www.w3.org/TR/CSS21/visuren.html#q15
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Safari 2.0.3 background-repeat problem

[rolfsf]

I've bumped into a background-image display problem on Safari 2.0.3  
-- I've heard of the no-repeat bug showing up in older versions of  
Safari, but I was under the impression it was fixed... and perhaps it  
is, but I'm doing something wrong.

I'm using a little display box with rounded corners on the top left  
and right. The corners are accomplished via 2 background images. The  
background-image on the right appears to be repeating vertically,  
despite a no-repeat. The right corner is vertically positioned 10px  
due to the icon in the left corner (see the test page).

I've posted a test file at http://www.monkeypuzzle.net/testfiles/ 
safari_repeat/

A screenshot of what I'm seeing is here: http://www.monkeypuzzle.net/ 
testfiles/safari_repeat_screenshot.gif

the html looks basically like this:


header
 content here 
 footer content here 


and the css looks something like this:

.box {
border: 0;  
font-size: 100%;
width: 300px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}

.boxhead {
background-color: #FFF;
background-image:url(Package/App/images/branding/hdr/ 
cap_type1_right.gif);
background-repeat: no-repeat;
background-position: 100% 10px;
text-align: left;
}

div.schedule .boxhead h2 {
background:  url(Package/App/images/branding/hdr/ 
capLeftSchedules.gif) no-repeat top left;
}

I've put all relevant css into the page head

In IE6-Win and FF1.5-Mac there are no problems. Any insights?

Thanks as always,
Rolf
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Safari 2.0.3 background-repeat problem

[rolfsf]

On Mar 6, 2006, at 1:05 PM, [EMAIL PROTECTED] wrote:

> I've posted a test file at http://www.monkeypuzzle.net/testfiles/
> safari_repeat/
>
> A screenshot of what I'm seeing is here: http://www.monkeypuzzle.net/
> testfiles/safari_repeat_screenshot.gif

Sorry - One of the links I posted was incorrect:

I've posted a test file at
http://www.monkeypuzzle.net/testfiles/safari_repeat/

A screenshot of what I'm seeing is here:
http://www.monkeypuzzle.net/testfiles/safari_repeat/ 
safari_repeat_screenshot.gif

Rolf
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] margin/padding-bottom relative to canvas bottom

[Frank Van Damme]

On 3/6/06, ~davidLaakso <[EMAIL PROTECTED]> wrote:
> Frank Van Damme wrote:
> > Hello,
> >
> > I am trying to achieve a certain effect. I am trying to put a box on a
> > web page where the content (a box, say) is positioned - either
> > absolutely or using margins on top or sides - BUT I want it to always
> > remain the same height and have the content scroll nicely in that
> > area. Also, I would like to avoid using overflow: scroll and have a
> > scroll bar in the middle pf my page.
> >
> I am not sure I understand the question. If the box in the center has a
> fixed height, it is likely, the text in that box will break out the
> bottom on zoom. Would something like this work for you, instead?
> 

Not exactly what I mean. I meant more something like this:

http://vandamme.homeunix.net/~frank/html-tryouts/smallwindow.html

That demonstrates my problem in a more visual way.


--
Frank Van Damme
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] margin/padding-bottom relative to canvas bottom

[cj]

On 3/6/06, Frank Van Damme <[EMAIL PROTECTED]> wrote:
> http://vandamme.homeunix.net/~frank/html-tryouts/smallwindow.html


the example i linked to doesn't do this?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] trying to put text at the bottom of an image

[Dale Lists]

Hello,

Trying to do something new (for me) with css. Using various bits and 
pieces I have learned from various sites (including Eric Meyer's great 
css/edge) I am trying to place header text at the bottom of the 
background image as shown on the below linked page.



The css is at: http://conditioncritical.net/css/test.css

I am sure I am just doing something very stupid to not get this to work. 
I am testing with FireFox on Mac and Windows.

Thanks in advance!

Dale
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] CSS Forms -- A few IE issues

[Bill Moseley]

Hi,

I'm looking for a bit of input on css form layout:

http://hank.org/demos/form.html
http://hank.org/demos/form.css

General suggestions or improvements are welcome. ;)

Not sure I want to, but can I set the width of the nested fieldsets
to adjust based on the length of the text labels?

Problems I'm seeing:

- The long label in the radio group doesn't wrap very nicely in
FireFox.  The entire label is moved to the next line, leaving the
radio button widget the only element on that line.

Although uncommon to have such a long label, is there a better way to
go to make it wrap nicely?

Oddly, in Opera, the long label wraps ok on the checkbox but not on
the radio buttons.  IE wraps both nicely.

Also, if you turn off stylesheets in FireFox then the long labels
wrap nicely.


- On IE 6.0 the last "yes/no" frameset is not aligned with the other
inset fieldsets.  I'm not seeing why that's happening.


- Safari 2.0.3 on Tiger is formatted ok, but I cannot click on any of
the  tags.  Is that just a problem with Safari?

- IE 5.2 on the Mac doesn't work at all.  I have no idea if any of the
users of this form will use that client.  I suspect any Mac users
these days use Safari or FireFox.

- Opera 6.01 Win has rendering problems, but that's a really old
version.


- On my iBook I don't see the background color on the first two
fields -- in any of Safari, IE, or Firefox.  That's weird.


Hum. The form even looks better in lyxn than in w3m.


Thanks,


-- 
Bill Moseley
[EMAIL PROTECTED]

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Problems with a floated menu... (IE)

[francky]

~davidLaakso wrote:

>Philip Munksgaard wrote:
>  
>
>>So, i've now made this site http://munksgaard.frac.dk
>>
>>My problem is, that the menu in the left seems to screw up in IE... 
>>Needless to say there is no problem in any other browsers...
>>Philip Munksgaard
>>_
>>
>>
>Philip,
>[...]simple markup error? [...] w3c markup validation service [...]
>validate the CSS.
>Providing the CSS and markup are valid, see if this corrects the menu 
>problem in all win versions of ie.
>Regards,
>~davidLaakso
>trivial aside: pixel font-sizes and small-caps on unserifed fonts are 
>not helping your cause typographically in any browser...
>
Hi Philip,
This moment the html-validator and css-validator are very happy. :-)
Not IE about lining up the left side of the sidebar...
But: hocus-pocus 
!

See Ingo Chao's article On having Layout 
.

Greetings,
francky

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE footer problem

[Michael Clayton]

I nabbed this layout from the famous
http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtml

My current progress is here: http://www.twilighted.com/ntc/

In IE 6, the footer is only pushed down by the left and right columns, but
not the center column.  This can be fixed by resizing the window, but the
initial load is bugged.  This bug is mentioned in the source code, sort of:

CSS HACK:  position:relative needed by IE6 otherwise the header and col 2
don't show up on initial rendering - they're there but you have to minimise
the window or switch to another app and back to see the full effect. But
IE5(pc) doesn't like it. And nor does NN4.
NB. the use of pos:rel has to go way beyond skin-deep - any nested element
that needs a background colour appears to require to be be relatively
positioned

That's not exactly the same bug I'm seeing, but it's similar.  I've tried
adding everything with a background color to the pos:rel list, but it hasn't
helped.  I've also tried removing the background color from everything, but
that hasn't helped either.

Another slightly more minor bug is that when the window is shrunk, IE 6
pushed the navs to the bottom of the page.  Any advice for either problem?

Thanks for any help. :)

--
Michael Clayton
www.twilighted.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Safari 2.0.3 background-repeat problem

[Philippe Wittenbergh]

On Mar 7, 2006, at 6:05 AM, [EMAIL PROTECTED] wrote:

> 've bumped into a background-image display problem on Safari 2.0.3
> -- I've heard of the no-repeat bug showing up in older versions of   
> Safari, but I was under the impression it was fixed... and perhaps it
> is, but I'm doing something wrong.
>
> I'm using a little display box with rounded corners on the top left
> and right. The corners are accomplished via 2 background images. The
> background-image on the right appears to be repeating vertically,
> despite a no-repeat. The right corner is vertically positioned 10px
> due to the icon in the left corner (see the test page).
>
> I've posted a test file at http://www.monkeypuzzle.net/testfiles/
> safari_repeat/
>
> A screenshot of what I'm seeing is here: http://www.monkeypuzzle.net/
> testfiles/safari_repeat_screenshot.gif

Yes, that is the same background-repeat bug when the image is larger  
than the size of the box.

The bug has been fixed in nightly Webkit builds, (future versions of  
Safari).

BTW - Konqueror 3.5 appears to suffer from the same bug.

Philippe
---
Philippe Wittenbergh





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] trying to put text at the bottom of an image

[Gunlaug Sørtun]

Dale Lists wrote:
> ... I am trying to place header text at the bottom of the background
>  image as shown on the below linked page.
> 
> 

> I am testing with FireFox on Mac and Windows.

Firefox will like the following on all platforms, I think.

1: move that background-image to #main, and tidy up a bit...

div#main {
position: absolute;
top: 70px;
left: 180px;;
color: #000700;
font: 13px Verdana, sans-serif;
padding: 10px;
border: solid 5px #00;
background: #ff url(/css/images/header_bg.jpg) no-repeat;
width: 620px;
}

2: position h1 with 'padding-top', and make it adjust somewhat to
font-resizing by applying a 'negative margin-top'...

h1 {text-align: right;
color: #FF8C1A;
letter-spacing: 0.4em;
text-transform: lowercase;
font: bold 25px sans-serif;
white-space: nowrap;
padding-top: 145px;
margin-top: -1.1em;
}


Opera 9tp2 tested: fine.
Firefox 1.5.0.1 tested: fine.
IE6 tested, and it is a bit unhappy since it can't resize those px-fonts
without 'ignoring' them, but otherwise it is doing fine too.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating elements at an 'edge'

[Keith Sader]

Thanks Paul and Els for the suggestions.  I knew there was a way.

On 3/6/06, Paul Novitski <[EMAIL PROTECTED]> wrote:


--
Keith Sader
[EMAIL PROTECTED]
http://www.saderfamily.org/roller/page/ksader
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Safari 2.0.3 background-repeat problem

[rolfsf]

On Mar 6, 2006, at 4:00 PM, Philippe Wittenbergh wrote:

> Yes, that is the same background-repeat bug when the image is larger
> than the size of the box.
>
> The bug has been fixed in nightly Webkit builds, (future versions of
> Safari).
>
> BTW - Konqueror 3.5 appears to suffer from the same bug.
>
> Philippe


Thanks Philippe

So... is there no hack or fix, other than to create a new graphic  
with added white space on top? It's not the end of the world, but I  
was hoping not to create a unique graphic just for this situation.  
I've tried everything I can think of short of doing that...

Rolf
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Safari 2.0.3 background-repeat problem

[Philippe Wittenbergh]

On Mar 7, 2006, at 9:09 AM, [EMAIL PROTECTED] wrote:

>> Yes, that is the same background-repeat bug when the image is larger
>> than the size of the box.
>>
>> The bug has been fixed in nightly Webkit builds, (future versions of
>> Safari).
>>
>> BTW - Konqueror 3.5 appears to suffer from the same bug.
>>
>> Philippe
>
>
> Thanks Philippe
>
> So... is there no hack or fix, other than to create a new graphic  
> with added white space on top? It's not the end of the world, but I  
> was hoping not to create a unique graphic just for this situation.  
> I've tried everything I can think of short of doing that...


As your box has a fixed width, you should be able to do it with just  
on image, applied boxhead h2.
Else, add the 10px white part to the cap_type1_right.gif image.

What works as well, is the  CSS3 (draft) property: background-position-y

background-position: 100% 10px ;  /* all browsers */
background-position-y: 10px;  /* Safari 1.3 and 2.0 */

Note, I haven't tested this extensively, It works in a quick and  
dirty test here, and doesn't appear to have side effects on other  
decent browsers.
Please let us know how this goes.


Philippe
---
Philippe Wittenbergh





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Safari 2.0.3 background-repeat problem

[rolfsf]

On Mar 6, 2006, at 4:54 PM, Philippe Wittenbergh wrote:
>
> As your box has a fixed width, you should be able to do it with just
> on image, applied boxhead h2.

It's only fixed width in this test file - I've pulled this out of a  
much more complicated page to try and isolate the problem.


> Else, add the 10px white part to the cap_type1_right.gif image.
>
> What works as well, is the  CSS3 (draft) property: background- 
> position-y
>
>   background-position: 100% 10px ;  /* all browsers */
>   background-position-y: 10px;  /* Safari 1.3 and 2.0 */
>
> Note, I haven't tested this extensively, It works in a quick and
> dirty test here, and doesn't appear to have side effects on other
> decent browsers.
> Please let us know how this goes.

The CSS3 property did not seem to work for me. But I will modify my  
graphic and be done with it for now.

Thank you!

Rolf

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Validator Gives Margin Error I Can't Find

[[EMAIL PROTECTED]]

I have been trying to change my 3-column layout from % right left 
columns to fixed width right/left columns and I keep getting a weird 
error in the validator  It reads:

* Line: 255

  Invalid number : margin
   px is not
  a margin-top value : px

* Line: 255

  Invalid number : padding
   px is not
  a padding-top value : px

* Line: 255

  Invalid number : width
   Parse
  Error -

But when I look on and around line 255 in my code, I don't see anything 
amiss.  Would someone mind checking it and see if there is something I 
need to change?

Also, my middle column keeps overlapping my left column by a few pixels 
in FF (not in IE) and it drops the right column in IE when the font 
resizes to larger and largest.  I am pretty sure it is because I used % 
instead of fixed width right and left columns, but I haven't been able 
to get a fixed width right/left column with a liquid center to work and 
I have tried several examples.  Any pointers here would be appreciated. 
I am hoping whatever the validator is trying to say is a key to solving 
my problem.

Site: http://www.girlscantwhat.com.
CSS: http://girlscantwhat.com/templates/gcwtheme/css/template_css.css


Thanks a bunch!

-- 
Gretchen

Girls Can't WHAT?
www.girlscantwhat.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Float Right Nav Bar Verses a Form SELECT in Firefox

[Les Mizzell]

Here's one that's got me tearing my hair out...

Have a right floated nav column. Works great UNTIL it ends up on a page 
with a form on it.

As long as the form contains NO , it works 
great. As soon as I add a select anywhere on the form, the floated nav 
drops down below the form on the page.

I have NO CSS styles set for the select. So I figured, the right float 
doesn't know how wide the select might be, so it dropping below it..

So, I've tried setting a width to the select. No go.
Tried floating it left. No go.


Anybody else run into something like this? I'm about to take the select 
out and use a group of radio buttons instead! Ack!

This is all it takes to blow the whole page:


  Anything Here
  Anything Here


No problems in I.E.

I tried  "position: relative; right:0; top:0;" to "stick" the nav in 
place instead of a float. Works in I.E. Works in Firefox UNTIL I put the 
select back in...

So, what's the problem with Firefox and a form select box?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Need help with a few quirks

[francky]

Webmaster wrote:

>Hello, I am currently working on a layout for a friend, which can be 
>found at http://www.exillon.com/test/ and the css is 
>http://www.exillon.com/test/main.css
>  
>
Hi webmaster D,
Your link appeared to lead to a frame page, so we have to go to the 
source code of the frame page to get the URL of the real page, if we 
want to see the source code of the page itself in order to analyse what 
is happening. - Think it is easier for us to give the direct link...

>Rather than making the stretched/melted part of the background one huge 
>image, I made a basic tiled version  for the straight lines and an 
>postion: absolute floating box with the stretched/melted graphic over it.
>Now in Firefox, the image looks fine.
>
Image? Not yet: the CSS has an error in the first h2-styles, which is 
disturbing all the rest of the page: the page cannot bee seen ...

To see what the images are, we have to dive in the css, and call them 
separatedly...
So for the next time: please deliver the material as good as possible, 
and let the helping hands not have to invest their time in solving puzzles!
This said, we can go on.

>In IE6 for PC, though, the colours 
>are showing up for some reason darker. The tiled version is a .gif and 
>the floating image version is a .png. Would that be the cause for such? 
>I've never seen an image rendered darker in one browser compared to 
>another only due to it being a .png file. The only problems I recall 
>that IE has with .pngs is transparency issues, which this does not have.
>  
>
Reading this, I remembered to have remarked something like this before. 
With FF and IE both on my pc: testing time! I could take 2 times a 
screenshot of the bgwarp.png and pasted them together in a painting 
program. I mirrored one to make it clear, and pasted in both "the bg.gif 
with the same colours".
The result is this 
.
*Indeed there is a difference*: compared with the bg.gif, Firefox is 
performing good (as expected).
But *IE is shifting the hue and giving less brightness in png's*.
Then the png directly downloaded, opened in paint program, and compared. 
Same result: IE is showing an image with slightly different colours.
Will IE7 be better? - Another one for the ToDo-list of the MS-IE-team!
Conclusions:

   1. As long as you have an isolated png, nobody will remark a
  difference between the IE-performance and the real thing.
   2. If you need to connect a png and a gif (or jpg) as one image, IE
  can give a problem.
   3. In your case there is no problem: the png has only 128 colours,
  and can be saved as a 256 color gif before uploading! :-)

>Also, would anyone be able to suggest how to best stretch a div, or any 
>element,  the entire width of a page and be elastic? I noticed that if I 
>shrink my window enough to show a horizontal scroll due to my temp 
>stretched/melted background images size, the header and the footer both 
>cut short of it. Is there a way to make this elastic as well?
>  
>
This is rather difficult to say because of the lacking of a working 
testpage.

>One last request, if possible, would be if anyone would know how to best 
>make a col stretch an entire page vertically but also have a footer 
>remain beneath it, like mine has.
>  
>
In the CSS-discuss WIKI 
 you can choose what 
you like. ;-)

Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] simple problem?

[Don - HtmlFixIt.com]

Peter Lloyd wrote:
> Guys, thanks for the suggestions...
> 
> The problem with clear: left; used in the main content area is that  
> it not only clears the image, but also the bottom of the search box   
> in the left-had column!  So I guess the question then becomes can I  
> stop the interaction between the floated elements in the left column  
> and the clearing elements in the main content area?
> 
> Peter.

I don't think you are using it right.  If it is the contact info then 
name that a special paragraph that clears left.  Because it is contained 
in the content div it only clears on that div and should not be affected 
by/or affect the search box.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Validator Gives Margin Error I Can't Find

[Roger Roelofs]

Gretchen,

On Mar 6, 2006, at 8:40 PM, [EMAIL PROTECTED] wrote:

> I have been trying to change my 3-column layout from % right left
> columns to fixed width right/left columns and I keep getting a weird
> error in the validator  It reads:
>
> * Line: 255
>
>   Invalid number : margin
>    px is not
>   a margin-top value : px
> 
> But when I look on and around line 255 in my code, I don't see anything
> amiss.  Would someone mind checking it and see if there is something I
> need to change?
it is an inline style in the html check out around line 337, a div with 
class "mosimage"  Inline styles always give headaches.

> Site: http://www.girlscantwhat.com.
> CSS: http://girlscantwhat.com/templates/gcwtheme/css/template_css.css


-- 
Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
  ~Allison Gappa Bottke
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Validator Gives Margin Error I Can't Find

[francky]

[EMAIL PROTECTED] wrote:

>I have been trying to change my 3-column layout from % right left 
>columns to fixed width right/left columns and I keep getting a weird 
>error in the validator  It reads:
>
>* Line: 255
>
>  Invalid number : margin
>   px is not
>  a margin-top value : px
>
>* Line: 255
>
>  Invalid number : padding
>   px is not
>  a padding-top value : px
>
>* Line: 255
>
>  Invalid number : width
>   Parse
>  Error -
>
>But when I look on and around line 255 in my code, I don't see anything 
>amiss.  Would someone mind checking it and see if there is something I 
>need to change?
>  
>
Yup! Line 255 says:



There is no value before the "px" of the margin, but an empty space ("px 
is not a padding-top value", because the first expected thing after a 
margin-declaration is the value for the margin-top). The same for the 
padding. Is it: margin: 0px and padding: 0px?



Here is no value and no unity for the width: is it style="width: 154px;" 
(the same as the img)?

>Also, my middle column [...]
>
Hoping someone else can have a look.

Greetings,
francky

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Need help with a few quirks

[Webmaster]

Hi webmaster D,

> Your link appeared to lead to a frame page, so we have to go to the 
> source code of the frame page to get the URL of the real page, if we 
> want to see the source code of the page itself in order to analyse 
> what is happening. - Think it is easier for us to give the direct link...

I dearly apologise. I just realised the person who is in charge of the 
hosting itself and DNS registration has set it up very oddly. I am not 
sure why the frame thing is like that and will speak with them tomorrow 
about it. The link that their DNS is linking towards is actually at 
http://exillon.tribal-treble.com/test/

>> Rather than making the stretched/melted part of the background one 
>> huge image, I made a basic tiled version  for the straight lines and 
>> an postion: absolute floating box with the stretched/melted graphic 
>> over it.
>> Now in Firefox, the image looks fine.
>
> Image? Not yet: the CSS has an error in the first h2-styles, which is 
> disturbing all the rest of the page: the page cannot bee seen ...
>
> To see what the images are, we have to dive in the css, and call them 
> separatedly...
> So for the next time: please deliver the material as good as possible, 
> and let the helping hands not have to invest their time in solving 
> puzzles!
> This said, we can go on.
>
>> In IE6 for PC, though, the colours are showing up for some reason 
>> darker. The tiled version is a .gif and the floating image version is 
>> a .png. Would that be the cause for such? I've never seen an image 
>> rendered darker in one browser compared to another only due to it 
>> being a .png file. The only problems I recall that IE has with .pngs 
>> is transparency issues, which this does not have.
>
> Reading this, I remembered to have remarked something like this 
> before. With FF and IE both on my pc: testing time! I could take 2 
> times a screenshot of the bgwarp.png and pasted them together in a 
> painting program. I mirrored one to make it clear, and pasted in both 
> "the bg.gif with the same colours".
> The result is this 
> .
>  
>
> *Indeed there is a difference*: compared with the bg.gif, Firefox is 
> performing good (as expected).
> But *IE is shifting the hue and giving less brightness in png's*.
> Then the png directly downloaded, opened in paint program, and 
> compared. Same result: IE is showing an image with slightly different 
> colours.
> Will IE7 be better? - Another one for the ToDo-list of the MS-IE-team!
> Conclusions:
>
>   1. As long as you have an isolated png, nobody will remark a
>  difference between the IE-performance and the real thing.
>   2. If you need to connect a png and a gif (or jpg) as one image, IE
>  can give a problem.
>   3. In your case there is no problem: the png has only 128 colours,
>  and can be saved as a 256 color gif before uploading! :-)

Very strange indeed! Glad to have that one sorted. I will change the 
format. As I said, I would test that option myself, but at the moment I 
am away from my testing PC.

>> Also, would anyone be able to suggest how to best stretch a div, or 
>> any element,  the entire width of a page and be elastic? I noticed 
>> that if I shrink my window enough to show a horizontal scroll due to 
>> my temp stretched/melted background images size, the header and the 
>> footer both cut short of it. Is there a way to make this elastic as 
>> well?
>
> This is rather difficult to say because of the lacking of a working 
> testpage.

Should now be updated to show correctly. Sorry once again.

>> One last request, if possible, would be if anyone would know how to 
>> best make a col stretch an entire page vertically but also have a 
>> footer remain beneath it, like mine has.
>>  
>> In the CSS-discuss WIKI 
>>  you can choose what 
>> you like. ;-)
>
Thank you very much for all the help, Franky.
Hope my new link helps sor out some of the problems. Also, all the html 
and stuff and any possible bugs with FTP uploads, etc should be sorted.

Cheers,
D.

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Validator Gives Margin Error I Can't Find

[[EMAIL PROTECTED]]

[EMAIL PROTECTED] wrote:

>I have been trying to change my 3-column layout from % right left 
>columns to fixed width right/left columns and I keep getting a weird 
>error in the validator  It reads:
>
>* Line: 255
>
>  Invalid number : margin
>   px is not
>  a margin-top value : px
>
>* Line: 255
>
>  Invalid number : padding
>   px is not
>  a padding-top value : px
>
>* Line: 255
>
>  Invalid number : width
>   Parse
>  Error -
>
>But when I look on and around line 255 in my code, I don't see anything 
>amiss.  Would someone mind checking it and see if there is something I 
>need to change?
>
>Also, my middle column keeps overlapping my left column by a few pixels 
>in FF (not in IE) and it drops the right column in IE when the font 
>resizes to larger and largest.  I am pretty sure it is because I used % 
>instead of fixed width right and left columns, but I haven't been able 
>to get a fixed width right/left column with a liquid center to work and 
>I have tried several examples.  Any pointers here would be appreciated. 
>I am hoping whatever the validator is trying to say is a key to solving 
>my problem.
>
>Site: http://www.girlscantwhat.com.
>CSS: http://girlscantwhat.com/templates/gcwtheme/css/template_css.css
>
>
>Thanks a bunch!
>
>  
>
Thanks - I know what is causing it now.  I was loading a module with an 
image and that was adding the inline style.  I know how to fix that. 

Now can anyone help me with the 3-column issue.  Why is my center column 
overlapping the left one?

-- 
Gretchen

Girls Can't WHAT?
www.girlscantwhat.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Need help with a few quirks

[francky]

Webmaster wrote:

> I dearly apologise. I just realised the person who is in charge of the 
> hosting itself and DNS registration has set it up very oddly. I am not 
> sure why the frame thing is like that and will speak with them 
> tomorrow about it. The link that their DNS is linking towards is 
> actually at http://exillon.tribal-treble.com/test/

It's o.k. - Think they use the frame as an alias-Url, but a refresh to 
the real page can do that too (I heard that with some serverside code 
you can mask the new url - a sub of the tribal-treble.com host). Be 
happy it's not a Yahoo frame or something with terrible javascript you 
cannot influence!

> [...]
> Also, would anyone be able to suggest how to best stretch a div, or 
> any element,  the entire width of a page and be elastic? I noticed 
> that if I shrink my window enough to show a horizontal scroll due to 
> my temp stretched/melted background images size, the header and the 
> footer both cut short of it. Is there a way to make this elastic as well?
>
>> This is rather difficult to say because of the lacking of a working 
>> testpage.
>
> Should now be updated to show correctly. Sorry once again.

Yes, I can see the page! No time left today to analyze what is going on; 
so if I have some idea later on, I'll come back.
Aha, I see one anyway:
#footer { position: relative; z-index:2; }
solves the problem that the footer is covered by the bgwrap-image in 
case there is not enough height for both (still some other issues 
remaining).

francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE footer problem

[Michael Clayton]

I discovered that the following code is what breaks the site in IE.

ul.nav {
list-style: url(bullet_small.jpg);
line-height: 1.5em;
margin-left: 18px;
padding: 0;
}

The list-style specifically is what kills it.  Does anyone know why applying
a bullet image mucks up IE?  I guess that's a dumb question. ;)  Does anyone
know how to get around it?  For now I'll just apply a background image, I
guess.

--
Michael Clayton
www.twilighted.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE footer problem

[Cem Meric]

> In IE 6, the footer is only pushed down by the left and right columns, but
> not the center column.  This can be fixed by resizing the window, but the
> initial load is bugged.  

Tough one. Try adding these lines at the end of your style,

* html .column-one { 
margin-left: 25%;  float: none; 
}
* html .column-two { 
position: absolute; top: 0.1em; width: 25%; margin: 0; 
}
* html .column-three { 
float: right; margin: 0.1em 2.5em 0 0; 
}

You can see the result here;

http://kalkadoon.net/sandbox/ie-footer/footer.html


How many browsers sacrificed with this fix = not known :(

-- 
Cem Meric | http://www.kalkadoon.net/ 
Kalkadoon Corporate Solutions


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Problem with errant link tags - ie only want to apply to nav class, or footer class but all affected

[Si - Jujumi]

Hi,

I'm stuck with what's going wrong on www.iiYoga.com

The a:link classes work independently, but it looks likes something in the
css is messing up.
In that the left border I was using for the NAV is affecting any other link
on the page.

I thought I'd fixed it last night, but adding no borders to content class,
but that then overides the NAV class for some reason?

But I thought it should only affect the NAV class?

I look forward to your help,
Si


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/