Re: [css-d] IE6 vertical margin and padding differences
Thanks, I'll use one of those.
Do you know why this is happening? I thought I had encountered most IE bugs
before, but this doesn't seem to fall under any I've heard of - it doesn't even
seem to be down to the box model differences since I've not specified a height
on anything. It seems that the margin and padding are collapsing together since
IE6 will obey whichever one is higher in value, but not both.
> Date: Fri, 23 May 2008 18:05:11 +0300
> From: [EMAIL PROTECTED]
> To: [EMAIL PROTECTED]
> CC: css-d@lists.css-discuss.org
> Subject: Re: [css-d] IE6 vertical margin and padding differences
>
> What about adding the underscore hack ?
>
> h1 {
> ...
> _margin-top:200px;
> }
> That will get the same result in IE6 as the one in FF.
>
> James Smith wrote:
> > Hi there, this is hopefully an easy one, but I'm struggling to find a clean
> > solution for IE6 without resorting to adding an extra div, floating the h1
> > element, or removing the container's width (all of which are inconvenient
> > for various reasons) -
> >
> > Problem here is that IE6 doesn't honour both the container's padding-top
> > and the child's margin-top. Compare the following result in FF and IE6:
> >
> > Markup:
> >
> >
> > Heading 1
> >
> >
> > CSS:
> >
> > *{margin:0;padding:0;}
> > #content{
> > width:500px;
> > padding-top:100px;
> > background:red;
> > }
> > h1{
> > margin-top:100px;
> > background:blue;
> > }
> >
> > any help much appreciated,
> >
> > James
> >
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE6 vertical margin and padding differences
Hi there, this is hopefully an easy one, but I'm struggling to find a clean
solution for IE6 without resorting to adding an extra div, floating the h1
element, or removing the container's width (all of which are inconvenient for
various reasons) -
Problem here is that IE6 doesn't honour both the container's padding-top and
the child's margin-top. Compare the following result in FF and IE6:
Markup:
Heading 1
CSS:
*{margin:0;padding:0;}
#content{
width:500px;
padding-top:100px;
background:red;
}
h1{
margin-top:100px;
background:blue;
}
any help much appreciated,
James
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Keeping table rows together when printing.
I have a table that looks similar to... Product Name - Other details Order Order Order Another Product - Other Details Order Yet Another Product - Other Details Order Order When printing I would like the order detail rows to be kept with the product details and not page break in between (product and order) or (order and order) but only between (order and product). I know that css has the page-break-before, page-break-after and page-break-inside properties but I can't figure out how to use them to achieve this. I have even tried enclosing the groups in divs with page-break-inside set to "avoid" and that didn't work. I tried setting various combinations of before and after avoids with no success. I have tried using a tgroup around each group and a tbody around each group, again with page-break-inside set to "avoid" but nothing works. Any ideas? -- Jay No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.516 / Virus Database: 269.20.9/1292 - Release Date: 21/02/2008 16:09 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Image disapears in IE6
If you take a look at any of the product pages on our website (http://www.uwish.co.uk/details.cfm/productid/30742 for example) in IE6 you will notice that the product image and the Item Details box to the right of the image is missing. They work fine in all other browsers I have tested and I am sure until recently worked in IE6. Does anyone here have any idea what is going on and why they have vanished? -- Jay __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Centering a div
That didn't work, it did introduce a gap between each but didn't centre the
images.
-Original Message-
From: Ricky Zhou [mailto:[EMAIL PROTECTED]
Sent: 09 May 2007 22:36
To: James Smith
Cc: CSS Discuss
Subject: Re: [css-d] Centering a div
James Smith wrote:
> If you look at
> http://dev.jaysphotography.org.uk/index.cfm/page/images/ you will see
> thumbnails at the top of the page. No matter how hard I try I can't
> get these to the centre of the page and I have tried all of the normal
tricks.
Since the images are floated, it's somewhat difficult to center them.
If you don't mind having a small space between them (which I think looks
better anyway), you can remove float: left; from #Thumbs img and set #Thumbs
{ text-align: center; }.
Hope this helps,
Ricky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Centering a div
If you look at http://dev.jaysphotography.org.uk/index.cfm/page/images/ you will see thumbnails at the top of the page. No matter how hard I try I can't get these to the centre of the page and I have tried all of the normal tricks. What am I doing wrong! I have currently removed all of the centring code I tried since none of it worked anyway. -- Jay __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Submenus under container in horizontal dropdown--revisited
>And I have a general question on z-indexing...I see alot of really high >numbers used for z-indexing and I'm curious as to why...I thought you only >needed to use as many numbers as there were of elements that you are stacking. >I used a z-index of 1 here and it worked just fine. If you neatly index all stacked elements from 1-10 it becomes a slight pain if at a later stage in the design you want to slot in another stacked element because you have to change them all... otherwise it's fine. In my example I just used a *somewhat* extreme (!) 10 because I was too lazy to check through all your z-indexes to make sure it would be the highest! __ 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] Submenus under container in horizontal dropdown--revisited
ah, ok, I downloaded your htc file to test it properly, and the following works
for me-
adding the z-index and position:relative a step higher on your #menu ul:
#menu ul {padding: 0;margin: 0 0 0 18px; /*sets left margin for menu*/
list-style: none; /*removes bullets*/ position:relative; z-index:10;}
James
Date: Fri, 31 Mar 2006 10:02:17 -0800From: [EMAIL PROTECTED]: Re: Submenus
under container in horizontal dropdown--revisitedTo: [EMAIL PROTECTED]:
css-d@lists.css-discuss.org
>I also had this problem with my suckerfish menus... In theory z-index only
>works with positioned elements - Try putting your z-index declaration on the
>#menu li ul rather than the #menu li:hover ul. James,
I tried this putting the z-index here and several other places too but none
worked. :(
Debbie
P.S. If you reply, could you send it to my email and cc: the list? I get the
digest version of the list, so its much easier to reply to a direct email
message. Thanks!
__
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] Submenus under container in horizontal dropdown layout--revisited
Debbie wrote: >> I'm trying to put together a sample layout page for horizontal dropdown SOS >> menus based mostly on the code on alistapart.com. I've got it looking great, >> all except that the submenus appear *underneath* the container in IE only. >> The other week when I was trying to put a horizontal dropdown layout >> together, Georg on this list suggested I apply a z-index to the top level >> element...this worked okay then but there were other issues so I started >> from scratch, redoing the code according to alistapart.com. But for some >> reason, applying the z-index to the top element doesn't seem to be working >> this time, and I didn't see a specific reference to this problem on >> alistapart.com. Does anyone know of a (relatively) simple solution? http://www.drkdesign.com/sample_layouts/horiz_dropdown/ http://www.drkdesign.com/sample_layouts/horiz_dropdown/css/drk_menu_h.css Hi Debbie, I also had this problem with my suckerfish menus... In theory z-index only works with positioned elements - Try putting your z-index declaration on the #menu li ul rather than the #menu li:hover ul. 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] Opera, negative margins, positioning and z-indexes problem
http://www.ceridian.co.uk Georg wrote: >Page didn't look functional on latest reload in Firefox on win2K-pro. Hi Georg, I have just found an "old" machine to test with Win2K-pro - again it works fine in Firefox for me - no overlapping of images, and dropdowns work fine, so I'm still not sure why this is happening for you... I changed the min-font height to 14 and naturally it looked a bit weird but the dropdowns still worked ok and no overlaps. Thanks for pointing out the problems with user-resized text - I will look to changing all the sizes from px to something else... would ems be ok? - I don't really like using "small/x-small" etc because it is a bit restrictive from a design point of view (especially the massive difference between "medium and "large"! Also, this requires me to feed one size to most browsers and another one for IE which is a size bigger than the rest!). When I want to resize my browser text, I usually just hold down the ctrl key and move the scrolly wheel. I would say that you don't often see body text any larger than size 12 on a corporate site like this one, but obviously this is all down to personal taste. As for the Opera overlapping problem - 8.53 seems to be the most recent version, but it seems to look ok in 9, So (given that less than 0.5% of my hits are from Opera users, sorry you 4!... I will leave it as is.) thanks again for your time (and Ingo too), 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] Opera, negative margins, positioning and z-indexes problem
> James Smith wrote:> > www.ceridian.co.uk -> > I doubt that this problem is > within CSS. Does Flash work with > wmode=transparent on Opera?> > Don't know > where to search for information.> MM website? Opera Forums?> > Ingo Hi Ingo, thanks for the idea, but I think the problem is with the CSS, because it occurs on the other top-level pages which contain images instead of flash - for example: http://www.ceridian.co.uk/hr/nav/1,4102,108,00.html 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] Opera, negative margins, positioning and z-indexes problem
http://www.ceridian.co.uk Georg wrote: >Sorry, but am I missing something here, or are you in the middle of a>live >debugging-process?>Opera 8.5 (& 9tp2) looks fine.>IE6 looks fine - apart from >being given unreadable small text.>Firefox 1.5.0.1. not good - image covers >text and menu drop-downs.Hi Georg, thanks for the swift response... I am indeed doing a bit of post-launch live debugging! - I only just discovered that problem with Opera. I am using v.8.53 and there is definitely a problem with the images overlapping the text.My firefox works perfectly also version 1.5.0.1. Are you on Mac or PC? Can anyone else confirm/dis-confirm this?IE6 and 7 beta-2 also seem perfect - which piece of 'small text' are you referring to there? The way I am viewing it, IE6 is looking almost identical to FF because of my hacks... ~confused now!~any help or opinions welcome! thanks, J __ 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] Opera, negative margins, positioning and z-indexes problem
Hi all... After much hair-pulling I can't seem to find a fix for this... www.ceridian.co.uk - In the latest version of Opera I have overlapping problems on the images contained inside the blue boxes which are on each of the top-level pages (and the home page). I have tried adding position:relative and appropriate z-indexes to each of the elements, but Opera seems to disregard all of them! The boxes are layed out with negative margins in order to get a slight overlap between the image and the text whilst keeping the elements in the document flow. The only "fix" I have is by arranging those blue boxes and text using position:absolute - but I don't like doing it this way since this removes the elements from the document flow and generally makes the page less dynamic. The site works great in FF and IE (with hacks of course) Has anyone experienced this problem, or am I making a really obvious error? The CSS is pretty hairy, but you can easily get at it with Chris Pederick's developer toolbar extension for Firefox. thanks in advance, 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] 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/
