[css-d] CSS menu problems
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
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/
[css-d] when is css width applicable?
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?
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] Problem with right column overlap when main contains uncompressible table
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?
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?
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
pimg src=badger.gif alt=A badger / Lorem Lorem ad nauseam/p
pNext stuff/p
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?
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)
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?
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
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/
[css-d] Floating elements at an 'edge'
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:
a class=printLink href=/printPrintable Report/a
table id=detailTable
tbody
...
/tbody
/table
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
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? http://limpid.nl/lab/css/fixed/header-and-footer -- 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'
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 a 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'
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.
...
a class=printLink href=/printPrintable Report/a
table id=detailTable
tbody
...
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:
div id=wrapper
a href=...
table...
/div
div id=nextItem
#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
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?
Peter Lloyd wrote:
http://design.open.ac.uk/individual_pages/jeff_johnson/people_jeff_johnson.htm
... 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
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:
div class=schedule box
div class=boxheadh2header/h2/div
div class=boxbody content here /div
div class=boxfoot footer content here /div
/div
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
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
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? http://limpid.nl/lab/css/fixed/header-and-footer 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
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 h1 text at the bottom of an image
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. http://conditioncritical.net/test.php 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
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 label 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)
~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 http://home.tiscali.nl/developerscorner/css-discuss/test-munksgaard.htm! See Ingo Chao's article On having Layout http://www.satzansatz.de/cssd/onhavinglayout.html. 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
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
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 http://emps.l-c-n.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] trying to put h1 text at the bottom of an image
Dale Lists wrote:
... I am trying to place header text at the bottom of the background
image as shown on the below linked page.
http://conditioncritical.net/test.php
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'
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
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
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 http://emps.l-c-n.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
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] Float Right Nav Bar Verses a Form SELECT in Firefox
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 select name=mySELECT, 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: select name=Tshirts option value=xoxAnything Here/option option value=xoxAnything Here/option /select 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
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 http://home.tiscali.nl/developerscorner/css-discuss/images/png-colors_in-FF-IE.gif. *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 http://css-discuss.incutio.com/?page=CssLayouts 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] Validator Gives Margin Error I Can't Find
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 http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin px is not a margin-top value : px snip 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
[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 http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin px is not a margin-top value : px * Line: 255 Invalid number : padding http://www.w3.org/TR/REC-CSS2/box.html#propdef-padding px is not a padding-top value : px * Line: 255 Invalid number : width http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-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: div class=mosimage style=border-width: 0px; float: right; margin: px; padding: px; align=center 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? div class=mosimage_caption style=width: ; text-align: center; align=center 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] Validator Gives Margin Error I Can't Find
[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 http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin px is not a margin-top value : px * Line: 255 Invalid number : padding http://www.w3.org/TR/REC-CSS2/box.html#propdef-padding px is not a padding-top value : px * Line: 255 Invalid number : width http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-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
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
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/
[css-d] Problem with errant link tags - ie only want to apply to nav class, or footer class but all affected
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/
