[css-d] IE height of td's containing block problem.
[Resending, as original didn't appear on list - apologies for duplicates] Hi everyone, Here's an IE6 problem I would appreciate your opinion on... I'm trying to create a page with: 1) a header which expands it's height to the size of its content (also with 100% width) 2) an iframe which fills the remainder of the viewport The iframe can have scrollbars (depending on it's content), but the parent page should not (unless the window is /really/ small). I've implemented this with a simple 2 row table, where: html, body, the table, the iframe, and the iframe's tr are all height=100%; and the header's tr height isn't specified. This works fine in Firefox (1.5b1) and Opera (8.5), but IE adds a vertical scrollbar the height of the header. See my test page here: http://tall.conted.ox.ac.uk/testarea/david/iframe.html It seems that when height=100% on a td, looks to the table as containing block, rather than the tr. Could anyone confirm my observations and/or find a way to make it work in IE? Cheers, Dave. -- David Balch. | Web developer. T: +44 (0)1865 280979 | Technology-Assisted Lifelong Learning. F: +44 (0)1865 280982 | University of Oxford. E: [EMAIL PROTECTED] TALL, OUDCE and the University of Oxford accept no legal responsibility for the contents of this message. Any views or opinions presented are only those of the author and not those of TALL, or OUDCE, or the University of Oxford. If this email has come to you in error please delete it and any attachments __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Multiple IR in IE 5.0/Win
On 10/8/05 2:32 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
It appears to be a cascading issue - due to how flip-flopping the h1
and h2 CSS order changes the display - but I cannot pinpoint where
the problem is occuring.
Interference from 'voice-family hack' I think. It isn't needed anyway.
Any idea how to fix this for IE 5.0?
h1.replace {
padding-top: 59px;
width: 252px;
background-image: url(images/h1-header-logo.gif);
background-repeat: no-repeat;
overflow: hidden;
height: 59px;
heigh\t: 0;}
h2.replace {
font-size: 130%;
padding: 58px 0 0 0;
width: 192px;
background-image: url(images/h2-logo-tag.gif);
background-repeat: no-repeat;
overflow: hidden;
height: 58px;
heigh\t: 0;}
Working in IE5.0, IE6, Op, FF, Saf, IE/Mac. Can't check IE5.5.
regards
Georg
Thanks George, I'll give it a shot and see how it goes.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Opacity in Suckerfish
Problem is that if I do it like this, the text in the ul also has the opacity applied. That's not supposed to happen. Actually, that *is* supposed to happen. Opacity affects the entire element and all its children. Is there a way around that? I've tried specificity tricks and !important but they didn't work I have a page that is designed to make it easier to crop images to a specified size and aspect ratio. I do this by having the original image as a background, and a div of the right size shape, and border inside that div. When the inner box is moved its background-position is set so that it stays in step with the larger image around it. What I wanted to do was have the bit that isn't bounded by the box greyed out slightly, so theres a visual indication that its not being used. So I set a grey background, and set the opacity of the large image to be 0.5. Then I had hoped to set the opacity of the smaller bounding box to be 1.0, but that doesn't work. Though in IE it does. This is what I had hoped it would do, if you look at it in IE, then the effect works quite nicely. http://www.sampartington.co.uk/imagecropper/?skip_opacity_hack As a work around for non-IE browsers I create a darker image for the background on the server, and deliver that instead, and leave out the opacity rules. (It loads significantly slower as a result) Here you can see the workaround : http://www.sampartington.co.uk/imagecropper/ I suppose the obvious solution is to have the inner div not be a child of the outer div, but it makes the positioning a lot more complicated. Any ideas anyone? Sam __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] ie5 and ie5.5 bugs
snipThe comment in there makes IE 5.5 ignore the rule (IE 5.1 is OK) #menu
a:hover,#menu a:focus,
/* comment */
.current #current {some declarations}/snip
Are you sure that it isn't because you're missing a comma between .current
and #current?
-chris
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie5 and ie5.5 bugs
Chris Hardy wrote:
snipThe comment in there makes IE 5.5 ignore the rule (IE 5.1 is
OK) #menu a:hover,#menu a:focus,
/* comment */
.current #current {some declarations}/snip
Are you sure that it isn't because you're missing a comma between
.current and #current?
No comma there, it's contextual (selectors are separated by whitespace)
Thierry | www.TJKDesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Positioning of a div
Hi All I am still working on the Lostwithiel site. I have taken out the cms for the moment. You can see the latest at: http://www.swmug.co.uk/index.html The css is embeded. I am still working fonts through! So any further thoughts would be greatly appreciated. I am trying to get a 'Ye Olde English' font that will work for Mac and Windows... I do also have a div positioning problem. On this page: http://www.swmug.co.uk/antiques.html The small boxes are pushing the side column further down. Can anybody tell me how to stop this please? The css is again embeded. Thanks Rich http://www.cregy.co.uk So here's what I want you to do, God helping you: Take your everyday, ordinary life--your sleeping, eating, going-to-work, and walking-around life--and place it before God as an offering. Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] ie5 and ie5.5 bugs
Oh well, it worth a try! So out of curiosity, does IE 5.5. ignore the entire rule for #menu * as well? or does it ignore the rule after the comment? - chris __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie5 and ie5.5 bugs
Chris Hardy wrote: Oh well, it worth a try! So out of curiosity, does IE 5.5. ignore the entire rule for #menu * as well? or does it ignore the rule after the comment? The whole thing is ignored, nothing is styled Thierry | www.TJKDesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Some print problems with tables (row splitting, controlling footer placement, page-break)
Hi, I am having these problems while printing my jsp pages. 1) First I have put name, authorization, dat and signature in a table. But I don't want this table to break. So, everything should print on one page only and if there is not enough space, everything should move to next page. I tried page-break-inside:avoid , didn't work. 2) Is there any way to control the printiing of footer in table to last page only. I am using footer to print the Sum of each column in the last line. I am using display:table for the table. But while IE is only showing the footer on last page, Mozilla shows footer on each page. 3) If I am using IE, my last row gets split on two pages. But mozilla is showing right i.e. not splitting the row. How to avoid row splitting in IE. I would highly appreciate if someone could help mw with these issues. Thanks, Pankaj __ Yahoo! Music Unlimited Access over 1 million songs. Try it free. http://music.yahoo.com/unlimited/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] bottom page spacing problem in Firefox
page: http://www.5finger.com/css/bottom.html css: http://www.5finger.com/css/bottom_stylesheet.css problem elements: footer-graybar footer-bluebar If you open the page in Explorer, it works fine, but if you open it in Firefox, you get extra spacing between the footer-graybar and the footer-bluebar, when there should be none. Anyone have any ideas how to get Firefox to render the footer like Explorer? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] bottom page spacing problem in Firefox
Magenta Placenta wrote:
page: http://www.5finger.com/css/bottom.html Anyone have any ideas
how to get Firefox to render the footer like Explorer?
It is the top margin of content inside footer-bluebar that's not contained.
Firefox got it right, according to my 'book on standards'. It just looks
stupid :-)
#footer-bluebar {padding-top: 1px;}
...or a 'border-top' is all that's needed.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Opacity in Suckerfish
On Tue, 11 Oct 2005 21:14:26 +0800, Sam Partington
[EMAIL PROTECTED] wrote:
Problem is that if I do it like this, the text in the ul also has the
opacity applied. That's not supposed to happen.
Actually, that *is* supposed to happen. Opacity affects the entire
element
and all its children.
Is there a way around that? I've tried specificity tricks and
!important but they didn't work
No. As you mention, you could try positioning, but...
As a work around for non-IE browsers I create a darker image for the
background on the server, and deliver that instead, and leave out the
opacity rules. (It loads significantly slower as a result)
Any ideas anyone?
I created a halfscreen PNG (checkerboard of alternating black and
transparent pixels). Then I changed #crop_grey to use the required image
as the background instead of black, then #crop_area to use the halfscreen
as *it's* background (repeating). The halfscreen gives the effect of
darkening the image. #crop_box is unchanged and has the required images as
it's background, without the halfscreen.
*Changes*:
#crop_grey
{
background: transparent url('create_src.php') no-repeat top left;
}
#crop_area
{
background: transparent url(halfscreen.png) repeat;
}
HTH,
--
Andrew Gregory, URL: mailto:[EMAIL PROTECTED]
URL: http://www.scss.com.au/family/andrew/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] How to style a column of a table?
I want to apply a style to a whole column of a table. For example, second column to be blue and centered. But the below code does not work in Firefox. (IE okay). I don't want to tack on a style to each of the td's. table width=100% border=1 colgroup col width=400 align=left / col width=120 align=center class=centercol bluetext/ col width=56 align=center class=centercol/ col width=56 align=center class=centercol/ col width=56 align=center class=centercol/ /colgroup tr tdWhy the next four columns are not centered?/td tdOct 4, 2005/td tdo/td tdx/td tdl/td /tr /table -artcoder (at) http://webmarksonline.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] RE: 100% width with margins
Thank you Gunlaug Sørtun and David Laakso for your feedback. The solution was so simple it was almost to obvious :-) Just don't set a 100% width on the div and it will play nice with the margins. To clear up my vauge description of the problem. I have two divs, one 800px wide, centered (margin: 0 auto / text-align: center) and one below which should be 100% wide minus the margins. Works like a charm =) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning of a div
Richard Brown wrote:
I am still working on the Lostwithiel site. I have taken out the cms
for the moment. You can see the latest at:
http://www.swmug.co.uk/index.html
The css is embeded. I am still working fonts through! So any further
thoughts would be greatly appreciated. I am trying to get a 'Ye Olde
English' font that will work for Mac and Windows...
Think what is a readable font that will work for Mac and Windows.
Period. (same answer as yesterday).
Delete the min/max stuff from the /body/ and change the font stuff to:
font: 200 100.01%/1.5 Georgia, Book Antiqua, Palatino, Times New
Roman, Times, serif;
Delete ***all*** other font-selections throughout style sheet.
Amend this to to include:
#header h1 { font: 200 200% Papyrus, Georgia, Book Antiqua, Palatino,
Times New Roman, Times, serif; }
You'll need to adjust positioning of h1-- it's crawling over stuff in XP/FF
State font-size of individual sectors in % or em *not* pixels.
Add 2 new wrappers. They will be the first 2 wrappers to open and the
last 2 to close:
#gatekeeper { border: 1px solid red; margin: 0 auto; padding: 0; width:
100%; margin: 0 auto; max-width: 1200px; min-width: 590px; overflow:
visible; position: relative; text-align: left; }
#gatekeeper-ie { width: 100%; }
Add these corrections min/max stuff for ie immediately after /style
!--[if lte IE 6]
style type=text/css media=screen
#gatekeeper {width:expression(document.body.clientWidth
1202? 1200px: 99% ); overflow: hidden;}
#gatekeeper-ie {width:expression(document.body.clientWidth 610?
590px: 99.98% );}
#right {width: 385px; }
#navcontainer {width: 235px;}
#navcontainer a {width: 222px;}
#sidebar { margin-right: 10px; width: 270px;}
/style
![endif]--
Move
div id=right
p../p
/div
from where it is to immediately below the close of the sidebar and
*above* the clearing division.
Tweak all and cross your fingers.
I have no idea what you mean about putting it back in CMS?
I did not look at the below problem.
I do also have a div positioning problem. On this page:
http://www.swmug.co.uk/antiques.html
The small boxes are pushing the side column further down. Can anybody
tell me how to stop this please? The css is again embeded.
Rich
Regards,
~dL
--
David Laakso
http://www.dlaakso.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE Wierdness - List Margin
Hi, I'm experiencing a problem with spacing between list items in Internet Explorer 6 (not tested it on other version). Works fine in Firefox and Opera. The margin between the list items is coloured with the background colour of the list items. (The margin isn't being ignored, if I specify the margin to 50px, I get a 50px block of colour). If you scroll around or re-size the browser window, the layout sometimes fixes itself. Example of the problem: http://adamfletcher.com/dev/iecssprob.html (Excuse the awful colour scheme, this was a quick mockup of the problem). Any ideas on how to fix? If there is a better way of achieving a similar layout to the lists, please suggest. Apologies if this is a well know bug, its certainly something I've never come across. Thanks for your help. Adam. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Jumping text in IEWin
Hello list, In a fluid layout I have a container with a head (h2) and a p. Within this container, I am also floating an image right. As I change the width of my viewport, the text wrapping changes as expected - except in IEWin (6 and 5.5). As the length of the lines of, I believe the h2, change the h2 and p jump up and down approximately the height of the floated image. Unfortunately I can't post the page... NDA and all but if this sounds familiar I would love to hear your tricks or thought processes on stopping this behavior. I think I know what is conceptually happening, but can't get it to stop. I will get it at one width, but then as I change the window width, it will do it again at a different width. I can post code snippets if it will help, otherwise I might have to slap together a test page... TIA for thinking about it... -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning of a div
Richard Brown wrote:
http://www.swmug.co.uk/antiques.html
The small boxes are pushing the side column further down.
One /div missing just _above_ div id=sidebar
Nothing will work without it.
Next, adjust the right way for that type of layout.
#container {
width: 100%;
float: left;
margin-right: -10px;
margin-left: -300px;
}
#content {
margin-left: 400px;
}
Now you have to deal with the height of those 'div.box', as there's no
way you can set a small height on those floats and make it reliable
across browser-land. IE6 is breaking the line-up.
There's also a width-problem with your sidebar in IE6. Content is
pushing outwards.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Width of floats
I have a problem with the following css:
#colleft {
text-align:justify;
width:49%;
float:left;}
#colright {
text-align:justify;
width:49%;
float:left;
margin-left:2%;}
This a two-column layout which works well in for example Firefox, but not
so well in Internet Explorer, which insists on a sum of the widths which is
smaller than 100 percent.
This makes it impossible to get the floated columns to line up with header
and footer, se example page at
http://www.webdesign101.dk/x/cssdiscuss/ex1.html
It would be nice to have some sort of explanation for this behavior,
perhaps even a better remedy than the one I have used, to pass a smaller
margin width to IE?
Best regards
Jørgen Farum Jensen
www.webdesign101.dk
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Width of floats
Margin values are added to your block element width, not included in that
width. So you've set a width of 49%, plus a margin of 2%, for a combined
width of 51% for each column.
Your total layout width is 102%, so it is not surprising that the float is
not working properly.
Try a width of 48% instead, and that should clear up your problem. That's
assuming no padding values or borders are involved, since they too are added
to the block element width. To calculate total widths, use this formula:
left margin width + left border width + left padding width + block width +
right padding width + right border width + right margin width = Total width
Carmen
On 10/11/05, Jørgen Farum Jensen [EMAIL PROTECTED] wrote:
I have a problem with the following css:
#colleft {
text-align:justify;
width:49%;
float:left;}
#colright {
text-align:justify;
width:49%;
float:left;
margin-left:2%;}
This a two-column layout which works well in for example Firefox, but not
so well in Internet Explorer, which insists on a sum of the widths which
is
smaller than 100 percent.
This makes it impossible to get the floated columns to line up with header
and footer, se example page at
http://www.webdesign101.dk/x/cssdiscuss/ex1.html
It would be nice to have some sort of explanation for this behavior,
perhaps even a better remedy than the one I have used, to pass a smaller
margin width to IE?
Best regards
Jørgen Farum Jensen
www.webdesign101.dk http://www.webdesign101.dk
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org http://evolt.org --
http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Width of floats
Carmen Carter wrote:
Margin values are added to your block element width, not included in that
width. So you've set a width of 49%, plus a margin of 2%, for a combined
width of 51% for each column.
Your total layout width is 102%, so it is not surprising that the float is
not working properly.
Try a width of 48% instead, and that should clear up your problem. That's
assuming no padding values or borders are involved, since they too are added
to the block element width. To calculate total widths, use this formula:
left margin width + left border width + left padding width + block width +
right padding width + right border width + right margin width = Total width
Carmen
On 10/11/05, Jørgen Farum Jensen [EMAIL PROTECTED] wrote:
I have a problem with the following css:
#colleft {
text-align:justify;
width:49%;
float:left;}
#colright {
text-align:justify;
width:49%;
float:left;
margin-left:2%;}
This a two-column layout which works well in for example Firefox, but not
so well in Internet Explorer, which insists on a sum of the widths which
is
smaller than 100 percent.
This makes it impossible to get the floated columns to line up with header
and footer, se example page at
http://www.webdesign101.dk/x/cssdiscuss/ex1.html
Internet Explorer is including the margin *inside the box width*, while
W3C-spec browsers (rightly) are not. This is why you're getting
different results. Carmen would be correct if *both* boxes had a 2%
margin, but because only one does (#colright), so this should sum to
100%. The escape character is handy What you can do is add:
width: 51%;
margin: 2%;
w\idth: 49%;
And IE will not parse the w\idth attribute, while FF, Saf, Opera, etc
will, and each will then correctly render the 49% width + 2% margin.
Alternatively, you can create an * html body #colright {} rule; for some
reason, IE accepts that there is a mysterious parent object above HTML
(which there isn't), and applies the rule, but it is ignored (rather,
applied to nothing) by all other browsers. Or you could just override
the #colright with a CSS2 selector: html body #colright. Either way,
pass IE and everyone else different values, and you'll be off to the
races. There's Tantek's boxmodel hack, too, but I havee always found it
detrimental to css readability, but I think it's just how my brain
interprets it.
One of the above ideas is likely to work. Hope I hit the basics. I'm
sure there are examples of these and other hacks on the CSS-discuss wiki
and other sites. If I've missed anything, or missed the point entirely,
please let me know. ;)
Regards,
Derek
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Width of floats
Jørgen Farum Jensen wrote:
This makes it impossible to get the floated columns to line up with
header and footer, se example page at
http://www.webdesign101.dk/x/cssdiscuss/ex1.html
In that particular case you'll get a better line-up by not using a
margin, like so:
#colleft {
text-align:justify;
width:49%;
float:left;
}
#colright {
text-align:justify;
width:49%;
float:right;
}
The space between the columns is now 2% in all browsers.
(Det skulle gi deg ett perfekt '2-spaltet textlayout'.)
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Nested Div Negative Margin On IE6
Now i've come around something I really can't understand.
I'm trying to have a div which contain another div just like this
div id=main
pspan bla bla bla bla/span/p
div id=menu
ullione/lilitwo/lilithree/li/ul
/div
/div
I want the div#menu to have a negative margin on the right or left to go
over the border of the main div (just in project 10 of eric meyer on
css) so I floated it and everything works fine until i give a min-height
to the div#main.
div#menu {float: right; width: 5em;
padding: 0; margin: 0 -1.5em 0.25em 0.5em;
border: 1px solid black;}
to work around the fact that IE doesn't see min-height i've done this:
div#main {
min-height: 193px;
height:auto !important;
height: 193px;
}
but when I set the height (which explorer should interpret as a
min-height) the div#menu with negative margins shows only in the part
which is actually inside the div#main, the rest just disappear.
here you'll find 2 pictures of what I'm talking about
with no height/min-height set http://www.alisha.it/lj/noheight.jpg
with height/min-height set http://www.alisha.it/lj/height.jpg
any idea of how working around this and what is causing? is it a bug of
IE? cause in firefox it just display perfectly
Thanks in advance
*Alisha*
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Multiple IR in IE 5.0/Win [Solved]
On 10/8/05 2:32 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
It appears to be a cascading issue - due to how flip-flopping the h1
and h2 CSS order changes the display - but I cannot pinpoint where
the problem is occuring.
Interference from 'voice-family hack' I think. It isn't needed anyway.
Any idea how to fix this for IE 5.0?
h1.replace {
padding-top: 59px;
width: 252px;
background-image: url(images/h1-header-logo.gif);
background-repeat: no-repeat;
overflow: hidden;
height: 59px;
heigh\t: 0;}
h2.replace {
font-size: 130%;
padding: 58px 0 0 0;
width: 192px;
background-image: url(images/h2-logo-tag.gif);
background-repeat: no-repeat;
overflow: hidden;
height: 58px;
heigh\t: 0;}
Working in IE5.0, IE6, Op, FF, Saf, IE/Mac. Can't check IE5.5.
It was the voice-family hack that was causing the second IR not to work;
replacing it with heigh\t: 0; did the trick.
Works in IE5.0, IE 5.5 IE6, Op, FF, Saf, IE/Mac.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] weird problem w background image
I'm helping a colleague with the top nav on her project. I think I have everything working right except (big except) this one weird thing. Every background image centers but one. Would you take look and see if you can tell what is causing the one underneath About Encaustic not to center? http://www.thewebgenies.com/demo/MBR/MBRheader.html Thanks! Syble __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] weird problem w background image
On 10/11/05, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: I'm helping a colleague with the top nav on her project. I think I have everything working right except (big except) this one weird thing. Every background image centers but one. Would you take look and see if you can tell what is causing the one underneath About Encaustic not to center? I think it's because about encaustic breaks into two lines... the image is in the center of the link, which happens to be at the left of the container. Try just about instead of about encaustic and you should see that image right in the center like you want. -- - C Montoya rdpdesign.com http://rdpdesign.com ... liquid.rdpdesign.comhttp://liquid.rdpdesign.com... montoya.rdpdesign.com http://montoya.rdpdesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] background image on text/search box?
Is it possible to use a background image as a search box? If so, will the search box outline still be there or can the image be the actual box? Thanks __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Multiple IR in IE 5.0/Win [Solved]
Jono wrote:
On 10/8/05 2:32 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
It appears to be a cascading issue - due to how flip-flopping the h1
and h2 CSS order changes the display - but I cannot pinpoint where
the problem is occuring.
Interference from 'voice-family hack' I think. It isn't needed
anyway.
Any idea how to fix this for IE 5.0?
h2.replace {
font-size: 130%;
padding: 58px 0 0 0;
width: 192px;
background-image: url(images/h2-logo-tag.gif);
background-repeat: no-repeat;
overflow: hidden;
height: 58px;
heigh\t: 0;}
This technique, as well as the negative text indent technique, doesn't
address the issue of styles ON / images OFF. What about people browsing with
images off?
Also, the font-size declaration seems useless since the text is only visible
with CSS *off*...
Thierry | www.TJKDesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image on text/search box?
Is it possible to use a background image as a search box? If so, will
the search box outline still be there or can the image be the actual
box?
--CSS--
.searchbox{
background-image:url(the_image_worthy_of_sacrificing_accessibility.jpg);
width:125px;
height:30px;
padding:2px 10px;
border-width:0px;
}
--HTML--
INPUT type=text class=searchbox ...
A side note: There's no such thing as a search box; only text input
form elements...
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Page printing problem
The layout is definitely not very robust. It falls apart at wide and narrow widths. There are a lot of things you can do to deal with this. Are you considering re-building the layout? -- - C Montoya rdpdesign.com http://rdpdesign.com ... liquid.rdpdesign.comhttp://liquid.rdpdesign.com... montoya.rdpdesign.com http://montoya.rdpdesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
