Re: [css-d] Trying to override site style sheet with inline CSS?
Keith Purtell wrote: But one item defies all efforts. For some reason, hiss CSS for general text content is set up with a 1cm indent, which looks pretty ugly. I've been tolerating it with paragraphs, but it also kicks in whenever I try to add a list, which is uglier yet (screen capture: http://www.keithpurtell.com/kthings/gaps.jpg). I tried inserting inline CSS of text-indent:0 in both the ol and the lis but it didn't have any effect. What to do to banish this monster? A screen shot for code debugging just isn't going to cut it I'm afraid. Help yourself by helping us and provide a public clickable link or your own simplified test case of the problem, and I am sure someone will find a solution. FWIW, it doesn't sound like it's limited to text elements and I would be inclined to look at any wrapper divs in question and check for margin or padding on those (but I am just guessing, because in this case a picture does NOT tell a thousand words!). HTH -- Mark __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering an entire page in the available window.
On 16 August 2011 10:02, Tim Climis wrote: You're almost there. First, you don't need text-align: center. That's extra. Extra *unless* you plan on supporting earlier versions of IE. -- /*Mark __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] parse error on *html
Philippe wrote: In a decent browser, it won't select anything and nothing though... That hack relies on the fact that the simple little mind of IE 6 7 ‘thinks’ there is an element that wraps around the root element (html). Of course there is none. And Alan responded: This is not correct. For IE6 and earlier, there is an element outside html. [..] This means that IE6- sees this. root-container html ... /html /root-container Perhaps this comes down to interpretation. Putting things in a different light, let's assume that Philippe was talking with regards to the specifications (that's how I took it) and they say that html _IS_ the root. http://www.w3.org/TR/html4/struct/global.html#h-7.3 http://en.wikipedia.org/wiki/HTML_element#Document_structure_elements So it doesn't matter that the IE developers forgot they had implemented some hidden node outside of html, to my mind what Philippe said /was/ still correct. Just an opinion. -- /*Mark __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] text position in unordered list
And, moment of discovery for me...when 10px of padding is added to move the
text over, 10px must be subtracted from the container, to keep it the same
width.
The way it is configured now, right. There have been a few discoveries
since those menus were released (although they are still great
examples and quite workable). #navcontainer doesn't need a width or
anything else and the styles can be deleted (unless there is a
specific need for a width or a margin-right to achieve part of your
layout design so it gives you some flexibility). Move the fixed width
to the LI. Below should be /everything/ you require to make it work:
#navcontainer ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navcontainer li {
width: 166px;
overflow: hidden;/*to make links full width in IE*/
}
#navcontainer a {
display: block;
padding: 3px;
margin: 3px 0;/*added to show how to add vertical space*/
background-color: #036;
border-bottom: 1px solid #eee;
}
#navcontainer a:link, #navlist a:visited {
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover {
background-color: #369;
color: #fff;
}
/*IF supporting IE6 then add the following also*/
* html #navcontainer a {
height: 1%;/*kills whitespace between list items but you can probably
get away with leaving this out*/
}
Now you can alter the padding as you see fit without having to
calculate new widths every time and the width of the link IS the width
of the LI item.
HTH
--
/*Mark
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] parse error on *html
On 29 July 2011 12:21, John j...@coffeeonmars.com wrote:
Just ran the latest version of my page through CSS validator, and it came up
with 1 error:
Parse Error *html .livebar{height:100%; /*For IE6 since overflow:auto does
not trigger hasLayout*/}
I'm pretty sure it should have a space there, as in * html, not *html.
Nothing wrong with * html hacks as long as you understand the
implications, and they are inside a @media block at the END of the
style sheet, although I'm personally with Tom and prefer conditional
comments.
HTH
--
/*Mark
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] getting an image in back of text (z-index)
On 27 July 2011 12:27, John j...@coffeeonmars.com wrote: same beast I've been dealing with..has a chunk of body copy and I'd like to slip an image underneath the copy but above the center column. Not vertically, but in the front-to-back sense of underneath. Link?? Or is it the same link as the previous thread? My body copy is child of my center area. So, if an image is child of the same parent, shouldn't assigning a higher z-index to the copy place it in front of an image? That totally depends on the structure and properties of your html/css. Since you want to slide the image *underneath* it doesn't sound like it needs to be a part of the page flow, so can you not just make this a background image and position it accordingly, which would likely solve most of the problems you mentioned? At any rate, without a link we are operating on pure guesswork. HTH -- /*Mark __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-size value affects position. why?
On 27 July 2011 12:28, John j...@coffeeonmars.com wrote: []... if I vary *just* the font-size, this head will move up or down. why should that be? Examine line-height. http://www.w3.org/TR/CSS1/#the-height-of-lines also, I've seen people use both % and specific px values with font-size. which one is correct? Is it design-specific? Holy war territory and probably not up for a major discussion on this list. Pixels were never a good idea in the dreaded days of IE6 and before, which couldn't scale such units. Generally, if you are concerned about accessibility then it's never a bad idea to use ems throughout with a default font-size:100.01% on the body. Google something like css font size are pixels good or bad? or css font sizing methods and draw your own conclusions. HTH -- /*Mark __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] getting an image in back of text (z-index)
On 27 July 2011 13:37, John j...@coffeeonmars.com wrote: what do you mean by out of the flow of the page? http://www.vision.to/articles/the-difference-between-the-flow-and-positioning-for-web-pages.php Please remember, a little self-help goes a long way and google is your friend :-) Looking at your source there are a number of /relevant/ errors: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.coffeeonmars.com%2Fpage.htmlcharset=%28detect+automatically%29doctype=Inlinegroup=0 I would personally start by correcting those as they are certainly causing issues at my end. Two things that stand out: Paragraphs inside spans are not allowed, and I recommend making the menu an unordered list as what you currently have is a /fudge/. Viewing in IE7/8 is /not/ what I see in FF3 and Opera 9 (Win XP), and IE6 (Win2k) shows only a blank page with a grey background (I know you probably aren't supporting this browser but an empty page indicates a serious issue). I also have to add I see no green whatsoever in /any/ browser, nor do I see the uxlogo100.jpg, but that might just be me. I didn't check any other browsers because what I initially saw was enough to raise a red flag. Honestly John, all things considered, I recommend /starting over/ and to that end if you can take the time to create and upload a graphical representation of what you want the page to look like, someone here (including myself) can probably get you heading in the right direction. HTH -- /*Mark __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fwd: Newbie has big CSS AND cross browser issues
Hi Bobbi, At some recent point in time Godmode wrote: Add the following to your ul styles: width: 800px margin: 0 auto; overflow: hidden; padding: 0; [..] and then proceeded with a pretty good explanation. However, I personally would *not* do this as it is restrictive in nature. Adding a width to your menu when it isn't required can create other problems when the text of your list items changes, or when you wish to add another item for instance. The more flexibility that can be built-in to a page, the better in my opinion. There are several ways to skin a cat, but one approach that I've always found delivers good results was actually posted here a few days ago in another thread: http://www.projectseven.com/csslab/lists/inline-block/horizontal/ Note the menu itself has no fixed width so can expand as you add items or text. I've just taken a look at David's working example and his method uses width:99% which is effectively the same thing and allows the list to take up as much room as it needs (safety first to prevent rounding errors in some silly OLD browsers is probably the reason 99% is used but I'm just guessing). You said you wanted it to be left-aligned, so remove text-align:center from both the div.navbar and anchor styles. Incidentally, I think it looks nicer centered, but that's not what you asked for :) Unless I'm mistaken I believe she only wants the text in the container below left aligned (but the container itself centered on the page) and there was no mention of the text in the menu itself. Add line-height:20px to your anchor styles. That will center the text vertically. Indeed, but for the most part I wouldn't encourage using pixels for line-height, and no unit is actually required (there are exceptions of course but they are rare and this isn't one of them). One advantage of not using floats in cases such as this (menus) is there is no need to try and *fudge* a vertical alignment, as simple padding can be used instead. Personally Bobbi, I would encourage you to take a closer look at the source of the Project Seven page - or David's now that I've peeked - because they both achieve everything you want in a clean and efficient fashion (one small e.g. there's no need for those position:relatives you have scattered all over the place). As David always says less is more! HTH -- Mark __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FireFox/CSS Question
I wonder what's the problem? Have I set something wrong in FireFox? Any suggestions? Thanks, tedd Hi Tedd, Coming in late here but what do you see on a new Firefox profile? HTH Mark __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 stretching floated div
Hey Everyone I am finding an IE bug that seems odd. I have a div with two inputs inside of it. the div is floating right and one of the inputs is floating left and the other right to create some space. here's what it looks like div class=float:right input class=float:left / input class=float:right / /div This works fine everywhere but in IE. It stretches the containing div to 100% width. So I have to add a set width to make it play nice. For some cases I am not going to want to add a width. Does anyone know what's causing this? Thanks in advance. - Jeff Hi Jeff, Probably going to need to see more than just that snippet of code. However, one reason IE doesn't shrink-wrap - which is what you are seeing in other browsers - is because of an incomplete or no doctype. So, what's the doctype you are using?? HTH Mark __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 stretching floated div
Hey Marc, Thanks for getting back to me. I can't really send out the page because it's the section to edit your profile on the site I am working on. I don't want to ask anyone to sign up for something. This is the Doctype that is in place though. It looks ok. !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; - Jeff With a k, not a c please! That doctype should be ok. Since you can't send the page (understandable in this case) is there any chance of stripping it down to a test case and posting it elsewhere, or at the least cutting and pasting the entire form (and not just the div from earlier). Mark __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 stretching floated div
Jay Tanna wrote on 18 November 2009 at 12:27 You haven't said which DIV is causing the problem. You have only one div in your snippet so it is difficult to comment. I think that's probably because the OP doesn't really know where the problem lies, hence their post to this list (and that's not meant as a slight on the OP). But yes, we really need more information. See further down. Generally, floated elements are relatively positioned within one another. Ah, no I don't think so, but someone a little more familiar with the specs may help us out here. I can see what you are trying to say, but since relative positioning is a type all unto itself, this is not the best way to describe the behaviour. It is true you can relatively position a float, but this is not the default. http://www.w3.org/TR/CSS2/visuren.html#relative-positioning http://www.w3.org/TR/CSS2/visuren.html#floats And the below explains how floats are positioned. http://www.w3.org/TR/CSS2/visuren.html#float-position Therefore, a non floated DIV will stretch 100% while floated DIV will be positioned relatively and automatically shrink to match the width of the content inside itself. Right, a div in the 'normal flow' will expand to the window width, whereas a float will shrink-wrap to its content (usually!), and not because it has relative positioning. It's the float that causes the shrink-to-fit, and nothing else. Have you got a sample page where we can have a look at to see what is going on. I wrote in my original reply on 18 November 2009 at 09:49 Since you can't send the page (understandable in this case) is there any chance of stripping it down to a test case and posting it elsewhere, or at the least cutting and pasting the entire form (and not just the div from earlier). And Jeff responded to the list with Sorry about that! My boss is Marc with a c. I am going to look into it a little more and if I can't find the solution then I will try to strip the form out. Thanks for helping out with this. So we will just wait and see how he gets on I suppose. Mark __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 stretching floated div
Alan Gresley wrote on 18 November 2009 at 16:45 [..] I have no specific test case for IE7- but is this your bug. http://css-class.com/test/bugs/gecko/1-7~1-9/floats-inline-and-float.ht m Ah ha! Well that does seem to fit with his earlier code snippet, good spotting. BTW, please specify which IE version you have the problems in future. IE6, IE7 and IE8 are very different creatures. IE8 has few known bugs and is vastly different from it predecessors. Alan, it's in the subject line! __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Form Alignment
Dave wrote: File Here: http://www.linkhomes2000.co.uk/main/selling/link_start_sell-property.php can not get text on left to align with fields on right. This is the offending css: [...] Then Dave responded to Tim Hi, Thank you for your reply, you were the only one who did reply, for that if nothing else I'm very grateful! No offense, but if you're ever trying to do what I was don't use this, it's miles out... But once again thank you for trying , as I said no one else even replied... Dave, here's the thing. Based upon your initial request, it is somewhat unclear as to *what* precisely you are trying to achieve and that could be why Tim's response didn't meet your needs. I only see text above each of the form elements and nothing seems terribly well aligned, so aligning text on left with fields on right could come down to an individuals interpretation. So the best bet might be to put up a screenshot of what you want the final result to be, or show us another website that does what you are after, and then I am confident someone from this list will be able to provide you with a solution. Mark __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Hover Effects
Cody Sickler wrote: On the layout I'm currently working on, I've gotten the effect I needed, but it isn't standards compliant (http://cosi.exofire.net the bottom and top navigation bars). I can't figure out a better way to achieve the general effect other than doing what I have done. I'm not sure *exactly* what it is you are trying to achieve but you can start by altering your html so it reads ul lia href=#link text here/a/li lia href=#link text here/a/li /ul as you currently have the link outside the list. Take a look at http://css.maxdesign.com.au/listamatic/ - I suspect there are some good examples of what you are after on that site, in particular the horizontal navigation section should be of interest. HTH Mark __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] sorry - site re-check - haslayout?
MEM wrote: My directory structure is: + rebelatehome + css - home8.css + images - hover.png + js So, if the css is inside css directory, to go to images directory from the css file, we have to, up one level: ../ enter one level /images/ and access the image: hover.png. Hence, the relative path: ../images/hover.png should be correct. Márcio, Your understanding and explanation above is correct, and hence your paths are also correct. I can see all background images, including the hover, although it is very faint and hardly distinguishable from the red background you also have in place. Checked in IE8 and FF3. HTH Mark __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal list menu - removing space between li
David Laakso wrote:
/My opinion requires a shovel./
Take the shovel to the woods. Dig a very deep hole. Bury Verdana in
it.
Forever.
And reset to:
#navcontainer ul li a
{ /*font-family:Verdana;
/* font-size:0.6em;*/
font: 0.9em Helvetica Neue, Arial, sans-serif;
}
Heh, best not make it a shallow grave then!
MEM wrote:
#navcontainer ul li
{
display: inline;
float:left; :: try ::
}
That works, but the the padding-bottom space applied on the ul here:
#navcontainer ul
{
...
padding-bottom:1em;
...
}
disappears.
If, however, I remove it, the image stays also floated.
To correct this, I have added a clear:left; property on the div that
olds
the image.
With respect to this and your request for modifications/improvements, I
would remove the following:
.destaque {
clear:left;
}
And add overflow: hidden to #navcontainer ul. That will give you the
same clearing and you should see the padding you have on the UL come
back.
HTH
Mark
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal list menu - removing space between li
MEM wrote: Thanks. It works and don't mess with padding. It stills feels weird that something like overflow:hidden; (to hide scroll bars), serves as float solver. No? Well, yes. http://www.quirksmode.org/css/clearing.html That might help explain things a little better. HTH Mark __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertical Menu problem
Alan Gresley wrote: The most notable difference occurs with lists - Safari and Gecko based browsers (e.g. Firefox) use padding-left while Internet Exploder uses margin-left to indent, All modern browser have padding-start for list, not padding-left since this default (padding-start) is applied regardless of if the text flows from left to right or right to left. Pedantically, you are correct. but as you are discovering Exploder also has a default top padding. Is this a IE6 whitespace bug you referring to for li? Heh, no. It seems I was a little too cute for my own good. I meant IE has a top padding of zero (the OP already knew Firefox had a top padding), hence the difference. That's why a padding of 0 on the UL seemed to fix the problem, at least at my end. Further reading: [1] http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ Using the Meyer reset or any other reset is the same a knocking down a bridge and then building it back up and can add many extra styles to ones CSS Reset sheets have their limitations, but it seems more of a personal preference than right or wrong to me. To be fair, IE8 can not be referred to as 'exploder' since it now is the best in implementing CSS2.1 correctly. Agreed, and FWIW I consider IE8 to be an excellent browser. adieu Mark __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertical Menu problem
On Behalf Of Yazmin Media
Sent: 5 June 2009 04:38
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Vertical Menu problem
John,
Try these definitions for your CSS:
.verticalMenu {
background-color : #FFD096;
float : left;
margin-left : 6px;
width : 150px;
padding: 0;
}
.left_menu_txt {
padding: 0;
}
ul.left_menu_txt {
list-style: none;
margin: 0;
}
Just to add to this: John, something you will need to understand is that
many styling inconsistencies occur between browsers because these
browsers apply their own styles to HTML elements (hence the now common
use of a reset style sheet[1]). The most notable difference occurs with
lists - Safari and Gecko based browsers (e.g. Firefox) use padding-left
while Internet Exploder uses margin-left to indent, but as you are
discovering Exploder also has a default top padding. As an FYI, for the
sake of efficiency, the last 2 above rules can be merged:
ul.left_menu_txt {
list-style: none;
margin: 0;
padding: 0;
}
HTH
Mark
Further reading:
[1] http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check, particularly on ie6 ?
snak detek+0r wrote: Subject: [css-d] site check, particularly on ie6 ? there are two different layouts, front page http://tinyurl.com/pxgydd and all other pages http://tinyurl.com/msyk76 fingers crossed, thanks! No amount of finger-crossing will solve the 404s on both style sheet links. Mark P.S. My posts have been coming through rather intermittently of late - including the occasional lengthy delay - so if by the time you receive this the question has been answered, you know why! __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to display a line BELOW the div?
Anna G wrote: Thanks David :) But both the image and the first paragraph have be inside the box1 div :( http://www.cwc.co.nz/sandbox/css-demos/anna-no-wrap.html I've repeated div.no-wrap instead of the different box IDs, but that shouldn't matter. Is that close enough? HTH Mark __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to display a line BELOW the div?
Anna Gavrilovic wrote:
Hi all
I've got the following code:
style type=text/css
div.left {
float: left;
}
/style
div class=box-text-port
div style=width: 170px; class=left img src=tn_ScreenShot003.jpg
alt= width=160 border=0 height=182/div
pVestibulum egestas quam in nulla pretium blandit. In ac urna purus,
tempor hendrerit sem. Vestibulum nec ligula dolor, quis egestas elit.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Integer posuere nunc et odio adipiscing non porta lacus
molestie./p
/div
div class=box-files-port
pI would like to display this BELOW the image/p
/div
I would like to display div class=box-files-port below the image. How
would I go about doing this?
Ann
hi Anna,
add
div.box-text-port {
overflow: auto;
}
but that code is pretty inefficient, to say the least.
Mark
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to display a line BELOW the div?
David Laakso wrote: Please see: http://chelseacreekstudio.com/ca/cssd/ana.html Checked in IE 6/7/and 8. And in Opera, Safari, and Firefox. Nice David. That's very similar to a demo done for Karl a few days ago[1] (using slightly different code) Once again proving the point that even in the wacky world of CSS there is always more than one way to skin a cat! Anna, both our examples will cause the paragraph (I used a div called .no-wrap since I had to accommodate a heading as well) to stay indented all the way down past the image if there's enough content. Is that the desired effect? Or do you want the first paragraph to wrap if its length is greater than that of the image? I re-read my earlier response which may have been a little harsh, so my apologies if I appeared rude, as that was not my intent. HTH Mark [1] http://www.cwc.co.nz/sandbox/css-demos/img-with-no-wrap.html __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help Please: Image floats, without the text wrap
Karl,
Your style sheet link gives a 404. Change from href=../css.css to
css.css and that *may* fix the problem, although, based upon what
you are asking your current code set will still fail. Here is how I
normally achieve what I think you are after:
http://www.cwc.co.nz/sandbox/css-demos/img-with-no-wrap.html
HTH
Mark
Caveat: For IE6 compliance, add the following to the bottom of your
style sheet, or in a conditional comment.
* html div.no-wrap {
zoom: 1; /*to give IE6 hasLayout*/
}
I would also give div.no-wrap a bottom padding of 20px (or a number of
your choice) for aesthetic reasons (white space). And that gif was only
for testing purposes, right?
adieu
Mark
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help Please: Image floats, without the text wrap
Owlservice wrote: Hi Mark, Oops, slightly embarrassed about the file level error :) Thanks for you input. Just what I was looking for. Regards, Karl No worries Karl. Embarrassed but not humiliated I hope! adieu Mark __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help Please: Image floats, without the text wrap
Karl Bedingfield wrote: Hi all, I am sure I am doing something very wrong here and wondered if you can assist? I think I have spent too long looking at this. I am trying to have an image float left while heading and content to the right does not text wrap. This is what I have done so far and all that happens is the image just sits above the heading and content. Test HTML: http://www.nuveautek.com/test/ CSS: http://paste-it.net/public/h23dcd6/ Any assistance and humiliation greatly appreciated. :) Karl, Your style sheet link gives a 404. Change from href=../css.css to css.css and that *may* fix the problem, although, based upon what you are asking your current code set will still fail. Here is how I normally achieve what I think you are after: http://www.cwc.co.nz/sandbox/css-demos/img-with-no-wrap.html HTH Mark __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically Centering multiple images in a div.
Oliver Garvey wrote: Hi guys, I'm having a lot of trouble trying to get some images vertically centered in a div. I'm creating a gallery and underneath the main image have a set of thumbnails which can be scrolled to select an image to display. The problem is, no matter what I try I just can't get the images to center vertically. Here's a link to one of the pages: http://garvey.netne.net/beach.html Hi Oliver, I haven't taken the time to implement the necessary changes to get this working, but I'm sure if you take a look at Bruno Fassino's Gallery example[1] you will see it can be done. Incidentally, Bruno has some other interesting layout techniques you may be interested in (just navigate to the home page and go from there). If for some reason you can't get this approach to work, post back and we can take another look. Good luck. HTH Mark [1] http://www.brunildo.org/test/ImgThumbIBL2b.html __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering a floated list....
Matthew Stoneback wrote:
I have a navigation on this page: http://www.eddysound.com/dev/adr/ that I
would like to center. It is a floated list. I cannot seam to get the list
to center within the blue navigation area. What am I doing wrong? I have
been able to do this before but I am currently stumped. Here is the CSS for
the page: http://www.eddysound.com/dev/adr/main.css
Centering a float isn't really possible. The simplest solution to your
problem (that I can see) is to change the list items to inline and
remove the block from the link. The following CSS should get you close
to what you want. Tweak as you see fit.
/* Navigation */
#nav {
/*remove the following two declarations as they only serve to limit
the design
width: 850px;
height: 40px;
*/
margin: 0;
padding: 0;
background: #004084;
border-bottom: 2px solid #444;
}
#nav ul {
/* remove unnecessary width - see above comment
width: 850px; */
list-style: none;
margin: 0 auto;
padding: 0;
text-align: center;/*add to center the menu*/
}
#nav ul li {
display: inline;/*change this from float: left;*/
margin: 0;
padding: 10px 5px 5px; /*alter padding*/
line-height: 1.7;/*add this for vertical spacing*/
}
#nav ul li a {
/* remove float and block
display: block;
float: left; */
margin: 0;
padding: 5px 20px;/*alter padding*/
color: #FFF;
font-size: 21px;
text-decoration: none;
}
Caveat - only tested in Firefox, but there are plenty examples of this
method at Listamatic so it should be fine.
http://css.maxdesign.com.au/listamatic/horizontal16.htm
HTH
Mark
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background images
At 10:10 April 2009 Brian Hazelton wrote When should I use an image and when should i use it as a background image. Since CSS allows designers to seperate content from styling, when should I use the image tag or should I never use the image tag? Hi Brian, Have you done any background reading on this topic?[1] To cut a long story short, the summary version is background images for presentation, img tags for content. In some cases that will be a judgement call, but for the most part it's self explanatory. [1] http://tinyurl.com/cssvimg Mark __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Menu Issue
Cristiano Diniz da Silva wrote at 9 April 2009 07:39 Hi, I got a strange error happing with my menu in Firefox 1.5 / 2. It's hiding behind other div elements even with the z-index set to 100. Does anyone knows what might be happening? With no code or link provided, not a clue. If you post a link, I can assure you someone on this list will come to your aid. Also, if you have time, it might pay to read http://www.catb.org/~esr/faqs/smart-questions.html - although not totally focused on web design, there's some very helpful and relevant material in there. HTH Mark __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [OT] CSS Problem with a tags on IE 6\7
Christopher R wrote: I understand but I have the exact same code on another page and it validates so although reading up is beneficial, there has to be something minor that would remove all errors ! I can only think of one thing to say to that - lobotomy! adieu Mark __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Problem with a tags on IE 6\7
Christopher R wrote: I've run into a problem first off the a links on this page http://www.thecreativesheep.ca/site/indexpage9.html don't work in IE 6 or IE 7 but work in FireFox also on that same page how does one get rid of all the extra space at the bottom of the page ? And on this page http://www.thecreativesheep.ca/site/animationpage2.html I'm trying to figure how to fix those HTML errors ? IE (particularly 6 and before) has stacking issues and using all that absolute and relative positioning is the root cause of this and several other problems on that page. However, you've been told before about this and IIRC, both your tee pee and sheep were in serious danger at the time :-). In itself this simply goes toward validating my final comments. Personally, I would start again using a more robust layout technique. Ian has pointed you in the right direction regarding the flash issue. Take his advice please. On Thu, Apr 2, 2009 at 1:10 PM mx.css...@googlemail.com wrote: No facility to check at the moment but I've noticed whitespaces between HREF= and /location.htm. Might be that? HTML: div class=navigationpanelul lia class=gallery href= /gallery.htmGallery/a/li lia class=animation href= /animation.htmAnimation/a/li lia class=blog href=/blog.htmBlog/a/li /ul/div Then Christopher R responded: I don't have location.htm on my page unless I'm overlooking it I don't have it Surely you jest?? The reference to location.htm was to YOUR locations inside the a tags, which mx made very clear with the html code copied from your page (including the extra spaces). Please tell me you understand this now. I have the same code on another page and it validates fine ?! No. If you have code on one page that validates, presuming you are using the same doctype on both, then by definition it cannot be the same on another, else it *cannot* be failing said validation. I see Michael has just responded to this, however, I will again refer you to Ian's suggestion - SWFobject. In closing, if you are going to continue to post here, the List Admin recently requested in a separate thread we all pay careful attention to trimming our posts, and recommended bottom posting as best practice. Please take his advice on both. David Laakso also had some advice for you which I am more than a little inclined to agree with, and without wishing to appear rude, I will reiterate the crux of it: You might submit your advanced CSS question (s) to: http://csscreator.com/, http://www.sitepoint.com/forums/, or http://bytes.com/. HTH Adieu Mark __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] i thought styling some quote images around text can be quite simple but how wrong!
liketo findoutwhy wrote: to simply add two quote images around some text. seems quite simple at first but turns out all the obvious solutions are not as desirable as a perfect solution: please see http://www.0011.com/css/quote.html basically, Style 1 is just inlining the image, text, and image. Style 2 is using a table. Style 3 is using images as background. None of them actually is perfect... it seems so easy at first... anyone know a way to make it work at all? thanks There seem to be a few options available (admittedly, I had one bookmarked). The last one uses images: http://www.designmeme.com/articles/csscurlyquotes/ http://24ways.org/2005/swooshy-curly-quotes-without-images http://simonwillison.net/2003/May/21/stylingBlockquotes/ And remember, Google is your friend, especially if you do like to emulate that email address. HTH Mark __ 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/
Re: [css-d] i thought styling some quote images around text can be quite simple but how wrong!
liketo findoutwhy wrote:
oh thanks for your answer. hm... is the last webpage above the same
as my Style 1b? the requirement is that the ending quote image is
right next to the ending word, not at the far bottom right corner.
thanks again.
Hello and you are most welcome. I only took a quick look at your code
before hitting my CSS bookmark folder, since this was one of those
things that, like you, I discovered first hand is slightly more
complicated than it first appears (at least to get things working well
cross-browser).
I also apologise for not paying close enough attention to your
requirements (was that originally there? It's late, or rather early here
- as in after 2.30am - so maybe I'm losing my mind but I didn't see that
first time around!).
The last example link I posted uses background images and appears to be
closer to your 2b (but not the same),
Ok, so here is one solution, tested in FF3, Safari, Opera 9, and IE6.
This is win2k I'm logged into right now, and I'll check on IE7 in the
morning by booting to XP if nobody else has offered a better fix. But
I'm pretty sure someone more knowledgeable than myself is likely to have
done so before I wake.
Change the following rule under style 3 to:
.spanRightQuote {
background: url(rightquote.gif) no-repeat right bottom;
padding: 0 0 0 15px; /*only left padding needed as the span location
has moved*/
zoom: 1; /* hasLayout for IE6 */
}
and in your code:
div class=quoteContainer
div class=divLeftQuote2
div class=divLeftQuote
hello world again hello world again hello world again hello world
span class=spanRightQuotenbsp;/span
/div
/div
/div
Obviously that's quite bloated markup! Although I do see at least one of
those divs is for the examples presentational purposes only.
You can if you want use the following to achieve the same result:
div class=quoteContainer
div class=divLeftQuote
hello world again hello world again hello world again hello world
span class=spanRightQuotenbsp;/span
/div
/div
and add the margin from .quoteContainer2Inner rule to .divLeftQuote:
.divLeftQuote {
background: url(leftquote.gif) no-repeat 0px 0px;
padding: 0 0 0 20px;
margin: 10px;
}
Good luck!
HTH
Mark
__
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/
Re: [css-d] i thought styling some quote images around text can be quite simple but how wrong!
liketo findoutwhy wrote: This is the one: From Ben Bacarisse How about: http://www.bsb.me.uk/testing/quotes.html (re-size window to test the wrapping). Groovy... ... however, that method has a problem and I noticed a similar one when tinkering with your examples. Have you seen what happens to the height of the last line when the quote wraps? Shrink the window so you have two lines of text. Then shrink it even further so you have 3 or 4. If the right quote absolutely *has* to sit next to the end of the text (and I really don't know why - is this a management decision or your personal preference?) then I imagine this will be a problem for you - but maybe not. it certainly would be for me. At any rate, it appears to be caused by having your image quotes inline as opposed to using background images, which I personally find to be the preferred option in cases where the image is purely decorative. HTH Mark __ 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/
Re: [css-d] IE position problem
Here's my 2 cents FWIW. Alan, I think we need to go back to your original post to see where some of this confusion stems. Jennifer. Setting padding and margin to 0 in 'body' will globally remove all padding and margins until you change the situation. I will admit that simply quoting this and then elaborating on it *without* including your follow up could be considered somewhat misleading - however - your use of the term *global* in this case is partly responsible for the confusion (I personally wouldn't have used it in such a way since the word has implications, but it does depend on your everyday use with regards to CSS I suppose). Now to your follow up: That is, if you do nothing else to padding or margins, they will never appear. As soon as you define a class or id and change its padding and/or margin, that definition will be obeyed within that class or id. Anything outside those definitions, that is in the body only, will obey the definition for the body. i.e. No padding/no margin. What I believe you should have said, and perhaps probably even meant to include (as I note you have done so in a later post) was the addition of other *elements* (and *not* classes or IDs). Elements being the key word here - since the clear inference from the above is that the addition of any heading or paragraph element, for example, will in fact result in the global margins and paddings being applied (unless said element were to have a class or ID added, since any h1 or h2 or p etc. still fits logically INSIDE your definition, whether you mean it to or not). I believe that is why some of the other posters in this thread have disagreed with you and attempted to clarify. I think that's fair since what you communicated above is quite clearly inaccurate. This is what some might call semantics, but in the coders world semantics are significant. What has happened is that some folks have read their own meaning into what I said, which is that (apart from HTML the BODY is the prime and only global element at the start of a document. No, they read a meaning into what you said based on *what you said* (see above explanation), although it seems clear from your follow up posts you never meant to imply what is, in fact, a logical interpretation of your words. That's not their fault. When any other element is *added* within 'body' the situation *changes*. The text within 'body' will still obey 'body' rules and anything else will set its own rules and take over from 'body' and may or may not inherit attributes from 'body' and may or may not set its own attributes. That's a fundamental fact and is the 'change' from 'body' attributes that I originally spoke of. That's better! Indeed it is a fundamental fact but it is not what you originally said, only what you may have *meant* to say - there's a big difference. I have never mentioned 'inheritance' up until this message, so I don't know where that came from. Surely you jest? It's probably partly related to the flaw in your original post, and that word global - as I said above, it has implications! But more importantly, it was about trying to explain to someone who was still coming to grips with the affect the body tag has on other elements, and why padding and margin don't always inherit. Adieu Mark __ 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/
Re: [css-d] IE 6 Issues
Robbert van Andel wrote: I believe the second issue we are having is related. On some pages with a lot of text, or a bulleted list, there is a 2 or 3 pixel shift after the text passes the same subnav division. Example at www.salemcancercare.org/draft3/aboutus/partner.html Sounds like this: http://www.positioniseverything.net/explorer/threepxtest.html HTH Mark __ 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/
Re: [css-d] How to make one DIV appear at the bottom of another?
Erik Harris wrote: http://www.gunlaug.no/tos/moa_8d.html Interesting. This one doesn't work at all in IE6 (at least not in IE6-Standalone), despite supposedly being a way to make fixed positioning work in IE6. Then Holly Bergevin wrote: Just for the record, in a native installation of IE6, the above example works fine. A bit late on this one, but it works fine in my IE6 Standalone on XP Pro (using multipleIE while running a full install of IE7). FWIW, I've always found you can rely on the information Georg provides to be accurate and well tested. That isn't to say he can't be wrong from time to time, as we are all only human. Mark __ 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/
Re: [css-d] Egg timer flicker in ie6 on hover.
Dermot Ward wrote: Hi, Can anyone please tell me why there is that irritating egg timer flicker on the Categories ul on hover? I think this will help solve your problem: http://evil.che.lu/2006/9/25/no-more-ie6-background-flicker HTH Mark __ 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/
Re: [css-d] Folks Step Right Up...CSS Oddity
Jason Ogle wrote: Hello there folks, I've got a problem that's absolutely driving me batty! If there were CSS freakshows, this would be one. Please hit this link in IE 6 or 7 http://creative.myspace.com/ca/cahub/test.html The very bottom area has tour dates. Why in the HECK is there that extra space at the bottom of the div and inside is miraculous duplicate dates. You can view source, there are no duplicate dates. Please somebody help asap as I must deliver this tomorrow. Also, please reply to my personal email as well as I'm on digest. Thanks!! Hi Jason, Sounds like the duplicate character bug, which you can read more about here: http://www.positioniseverything.net/explorer/dup-characters.html You have comments in your page so I didn't look any further as that is usually the cause. HTH Mark __ 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/
Re: [css-d] horizontal list in ie 6
Ross Hulford wrote:
I have done this and fixed it before but I cannot remember how I did it! At
the moment my list steps in ie 6
Item1
Item2
Item3
The css
#middleMenu li a{
height:20px;
display:block;
float:left;
margin-left:20px;
font-size:11px;
text-decoration:none;
color:#FCEE21;
background-color:#00;
}
Hi Ross,
Try this:
http://www.positioniseverything.net/explorer/creep.html
It's more than likely you can get away with avoiding the trigger, and
changing padding-bottom on the outer div (#middleMenu) to margin-bottom.
However, I'm not entirely sure how that affects your layout.
HTH
Mark
__
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/
Re: [css-d] Div's not lining up in IE (any :P)
Alan Gresley wrote:
Adding padding-top to the #content div will actually accentuate the gap
though this will even things out across browser-land.
Hi Alan,
Well, that is exactly what Georg already said
Georg wrote:
For testing-purposes, adding...
#content {
padding-top: 1px;
}
without zeroing out the margin-top on #spotlight, will make all
browsers contain the margin and push #spotlight down.
...but that wasn't an intended solution. I'm pretty sure that
recommendation was made so Mike could see the full margins in effect and
what exactly is going on.
To achieve the line up in IE like the other browsers it's better to allow for
greater margin
collapse [1].
I am curious - why is that better than the alternatively proposed
zeroing out of the top margin on the offending #spotlight div? To my
mind, zeroing the margin is as clean and simple as it gets, since that
*was* causing the problem in the first instance.
Mark
__
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/
Re: [css-d] Peekaboo perhaps - resolved
From: Bob Meetin - www.dottedi.biz [mailto:[EMAIL PROTECTED] Sent: Wednesday, 12 September 2007 4:53 a.m. To: css-d@lists.css-discuss.org Subject: Re: [css-d] Peekaboo perhaps - resolved Honestly though, I tried reading the peekaboo manuscript and got to the resolution, but seriously for anyone who has problems staying focused (be it time, ADHD or whatever reason), cut to the chase solutions are far more palatable, particularly if you are not tech-guru skilled. Tired... -- Perhaps, but... Give hasLayout to the content div that contains the floats and see how you get on. ...is pretty cut to the chase in my opinion, given the original question only contained a brief description of the problem you were encountering, with no sample code or link provided. Generally, it is difficult to provide such a solution without one of these two things. Mark -- This message has been scanned for viruses and dangerous content by ISPNZ's automated virus detection system, and is believed to be clean. __ 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/
Re: [css-d] Peekaboo perhaps
From: Bob Meetin Sent: Monday, 10 September 2007 4:18 a.m. To: css-d@lists.css-discuss.org Subject: [css-d] Peekaboo perhaps Hi, I can't share a link yet but I think this is the peekaboo bug. Firefox is fine, but with IE I have some text that is invisible unless I do some curious scrolling or excessive resizing of window width. The content area of the troubled page begins with an H1 open/close, then a paragraph open/close. The third item is a series for 4 pictures float left with centered captions. I have done things like containing the the pics in a div and some other oddball things. I can probably get a link later this week. Ideas? Well, since you have an *idea* of the problem at hand, and the symptoms would certainly indicate you are correct, try the standard peekaboo fixes: http://www.positioniseverything.net/explorer/peekaboo.html Give hasLayout to the content div that contains the floats and see how you get on. HTH Mark -- This message has been scanned for viruses and dangerous content by ISPNZ's automated virus detection system, and is believed to be clean. __ 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/
Re: [css-d] 3px IE6 gap
From: Anne E. Shroeder Sent: Friday, 7 September 2007 2:31 p.m. To: css-d@lists.css-discuss.org Subject: [css-d] 3px IE6 gap Got an IE 6 problem -- it's putting a 3px gap between my two divs - left one is floated, right one is set at a left margin to equal the photo plus border. http://www.language-works.com/CSS_Stuff/specialreport.htm Have tried a variety of things to close the gap but nothing works. Any ideas on the hack I need here? Hi Anne http://www.positioniseverything.net/explorer/threepxtest.html http://haslayout.net/css/3px-gap HTH Mark -- This message has been scanned for viruses and dangerous content by ISPNZ's automated virus detection system, and is believed to be clean. __ 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] footer that 'sticks' at the bottom
From: Arian Hojat Sent: Thursday, 19 July 2007 8:04 a.m. To: css-d@lists.css-discuss.org Subject: [css-d] footer that 'sticks' at the bottom Hey all, I was looking at the 'bottom footer' examples here: http://css-discuss.incutio.com/?page=FooterInfo and seems like if content area has alot of text, then the footer is 'pushed down' anyway? even if it is absolutely positioned. I seen a couple webpages where the footer is a neat little thin strip absolutely positioned? at the bottom of viewport, and the content will go behind it, but the content is never hidden since they use some padding i guess and u can use the browser's scrollbars to view the content if its expand over browsers' viewport size, but the footer is always there and never 'pushed out'. Anyway to achieve this? An example of one where it doesnt work the way i expect is below (footer is absolutely positioned so not sure why). thanks, Ari Check the Wiki for references to footers and fixed positioning: http://css-discuss.incutio.com/?page=FooterInfo Also, Georg has some good examples on his site: http://www.gunlaug.no/contents/wd_additions_15.html http://www.gunlaug.no/contents/wd_additions_17.html ... although it's possible this isn't his final say on the matter, it explains things quite well. You will most likely need to actually understand the concepts in order to apply such a solution to your layout. And then there's this: http://www.gunlaug.no/tos/moa_8d.html Good luck! HTH Mark -- This message has been scanned for viruses and dangerous content by ISPNZ's automated virus detection system, and is believed to be clean. __ 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] How do you kill the cell spacing in table with CSS?
Jukka K. Korpela wrote: As far as I can see, on Win IE border-collapse: collapse overrides the _default_ cellspacing. That is, if you set it and do not use the cellspacing attribute in HTML markup, there is no spacing between cells. Oddly enough, it does not override an _explicit_ cellspacing attribute. A quick demo locally reveals you are correct (in IE 5.5/6/7). For some reason I had a recollection that cellspacing was still required for certain browsers, and then I found this in my bookmarks: http://archivist.incutio.com/viewlist/css-discuss/14032 ...which is somewhat antiquated. At least my memory is still working! Sorry for the inaccurate information. Mark __ 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] How do you kill the cell spacing in table with CSS?
Duckworth, Nigel wrote:
I have an example at http://www.omgma.com/
Under the third menu tab in the center of the page
- where it says Program Schedule (Below the What's New)
I have a table.
I tried using border-collapse - but I am still getting
spacing between the cells. What is the CSS to get rid
of the spacing between table cells?
You need to apply the border-collapse to TABLE (not the TD) then you can
apply your borders to TD, something like this:
table#sessions {
padding: 5px !important;
margin: 0 !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
}
table#sessions td { border: 1px solid #092845; }
Indeed, but unfortunately in Win IE border-collapse: collapse does not
override cellspacing. Border-spacing is the cellspacing equivalent in
CSS, but browser support is poor AFAIK. Thus, if you absolutely MUST
have no space between cells, you will also need to add cellspacing=0
in the table tag itself.
HTH
Mark
__
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] images won't align in IE
Christopher Blake wrote:
Please help, I am clueless as to why it isn't working. Also I hate
the fact that if I
try things I do not know whether they have worked - I will
upgrading to intel-mac soon
and run parallels and windows as soon as I have the money!
Since money is an issue (and I hear you on that one) you can use the
following free service to help:
http://browsershots.org/
It's not ideal, but definitely better than nothing. There is also
browsercam.com but it isn't free.
I have heard that things are looking ok in firefox and IE7. However
browser shots tell a different story in IE6.
First 2 pages I looked at:
http://www.3pointdesign.com/websites.html
Your problem is partly due to the fact that you haven't overridden the
default border on links (hence the blue line around each image in IE).
You have set the width of each of the divs
(.web_left,web_middle,web_right) to be exactly the same as the image
width, but with the additional border it allows the text to float up
next to the image, causing the mess in the provided screen shots. I wont
go into detail, but you have a little but of *divitus* going on. Change
all the instances of div class=web_row2 to div class=web_row and
use that as the wrapper around each of your screen shot rows. There's no
need for the additional class and it doesn't change the appearance in FF
or Opera (at least not locally). Next, insert a break before each text
link to force the text onto its own line, and remove the clearing div
just before the end of each .web_row div. It's not required, and this is
also what's causing the right column drop in your second example.
Something like:
div class=web_row
div class=web_lefta href=http://3pointdesign.com/two/; title=3
Point Design (V.1) rel=gb_page_fs[]img
src=/images/web_pics/page2_0_1.png alt=3 Point website - version one /
br /3 Point Design (V. 1)/a/div
div class=web_middlea href=http://www.neilparishmep.org.uk/;
title=Neil parish MEP rel=gb_page_fs[]img
src=/images/web_pics/page2_1_1.png alt=Neil Parish MEP website /
br /Neil parish MEP/a/div
div class=web_righta href=http://www.allsetts.co.uk/;
title=Allsets Farm rel=gb_page_fs[]img
src=/images/web_pics/page2_2_1.png alt=Allsets Farm website /
br /Allsets Farm/a/div
/div
And in your css:
.web_row {
padding-bottom: 15px;/*provides a small gap between each row now that
there is no clearer*/
overflow: auto;
zoom: 1;/*gives IE layout and allows padding-bottom to show inside
floated parent div*/
}
.web_row img {
margin: 0;
padding: 0;
border: 0;/*kill the border around the image screenshots*/
}
Here is a local screen shot of IE6 running on Win2k.
http://www.cwc.co.nz/sandbox/chris-blake/screenshot-ie6-opt.jpg
...and a live link, though I know you can't view it!
http://www.cwc.co.nz/sandbox/chris-blake/websites.html
http://www.3pointdesign.com/stuff/index2_IE6.png
The right hand column has disappeared here too!!
See above.
A description of the png issue in IE and its flaws can be found here:
http://www.satzansatz.de/cssd/tmp/alphatransparency.html
A workable solution:
http://www.howtocreate.co.uk/alpha.html
However, I would say that your use of pngs in this case is, in my
opinion, not an appropriate one (given the file size of these screen
shots and the comparable result in jpg format). Using Fireworks 8 I can
get your 40kb + pngs easily down to less than 15kb (in every case)
without any significant decrease in quality and this would be my
preferred solution.
And finally, don't use underscores in your class and ID names:
http://devedge-temp.mozilla.org/viewsource/2001/css-underscores/
HTH
Mark
__
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] blue border around image links.
Christopher Blake wrote: Hi Pepl, How do I remove the blue border from my image links?? They only appear in IE6. Did you even read my reply to your previous thread ([css-d] images won't align in IE) where I answered this and your question about png transparency, along with a working IE solution for your image alignment issues? Mark __ 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] Absolute Positioning and Fixed Footer Woes in IE
Mark Henderson wrote: [...] So, to reiterate, does anyone know of a way to have a fixed width box horizontally centered but always a fixed distance from the bottom of the viewport, whilst allowing the content to scroll using overflow. I hope that all made sense. Any ideas? then Gunlaug Sørtun wrote: Yes... http://www.gunlaug.no/contents/wd_additions_15.html http://www.gunlaug.no/contents/wd_additions_17.html ...but I don't know if any of the above can be adapted to your case without seeing the case. regards Georg Thanks Georg. My apologies for the delay, but after some time away from this project (and a holiday!) I have finally returned to it and settled on a compromise across browser land, managing to convince the client of this also. I'm still pretty much where I was beforehand, in that IE can't quite do what I want (compare Firefox or Opera to IE on PC to see the difference), but now I'm using your position fixed implementation, as opposed to the tagsoup [1] approach. It just seems cleaner and easier. I'm still not happy with the actual design, but have little choice as this is what I was given and this is what the client wants - period. It handles font-resizing *ok* in good browsers, but at text size larger/largest in IE on PC the footer goes a little haywire in its alignment. This seems due to the #hnav expanding the #footer-inner beyond its specified width, and I can fix this if I float the #hnav list items (they then wrap), but that has another trade-off in that I can no longer horizontally center the navigation. Go figure. However, its not critical and I can live with it, but if there is a fix for this I'd love to know it. Example URI: http://www.hokonuimoonshinefest.co.nz/food.html [1] http://tagsoup.com/cookbook/css/fixed/ Mark __ 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] Absolute Positioning and Fixed Footer Woes in IE
It's been a while...
I have a slightly unusual design request from a client that's giving me
some grief in IE. In the nutshell, effectively what is required is a
fixed footer of fixed height that sits at the bottom of the viewport.
The content will be centered in another fixed width box and will scroll
when it is longer than the height of the box, and the bottom of this box
will sit directly above said footer. Initially I had achieved this to
good effect using position: fixed and the respective IE hacks (no
hardships there), but now I've been asked if they can have the scrollbar
for the main content sitting right next to that box inside the window.
This has given me a slight headache since I can get it working in
Firefox/Netscape/Opera but NOT in IE6. Something like...
html, body {
margin: 0;
padding: 0;
height: 100%;
border: 0;
}
#content {
width: 730px;
position: absolute;
bottom: 260px;
top: 10px;
left: 50%;
margin: 0 auto auto -365px;
text-align: center;
overflow: hidden;
}
/* hide from ie mac \*/
#content {
overflow: auto;
}/*end hide*/
...does the trick for most browsers, but of course IE6 doesn't like the
use of both position top and bottom without a height in this situation,
and using a height wont work (well, I can't make it work).
So, to reiterate, does anyone know of a way to have a fixed width box
horizontally centered but always a fixed distance from the bottom of the
viewport, whilst allowing the content to scroll using overflow. I hope
that all made sense. Any ideas?
TIA
Mark
__
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] IE 7.0 not recognizing Height:100 percent
On the 17th of October Heidi Langeneckert wrote: My design is fairly simple, I just want my content centered in the middle vertically, and stretch 100% from top to bottom. Grüße Heidi This might get you started: http://css-discuss.incutio.com/?page=HundredPercentHeight HTH Mark -- This message has been scanned for viruses and dangerous content by ISPNZ's automated virus detection system, and is believed to be clean. __ 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] I'm lost on this IE glitch, help appreciated
From: Stuart Swan [mailto:[EMAIL PROTECTED] Hi List, I've come across an error in IE, on this page http://www.stuartswan.com/v6/index.php on the part that says 'You are in: Home' it has a background image 400 pixels wide, in Firefox it looks perfect and attaches to both sidebars nicely but in IE it has a bit of padding on either side. Hi Stuart I see your problem hasn't been resolved yet. This should help you out: http://www.positioniseverything.net/explorer/threepxtest.html You have a (left) float on your leftsidebar and a margin on your content div to position it adjacent to the sidebar. This is what triggers the bug. If you add more text to your content div you'll see the text jog in action (or rather, the jog will disappear) once it goes down below the left navigation. The above link has a solution that should implement fine on your current page, but if you have trouble write back and I (or another list member) will help you out. I'm at work right now so I don't have much time to spare I'm afraid. HTH Mark -- This message has been scanned for viruses and dangerous content by ISPNZ's automated virus detection system, and is believed to be clean. __ 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] site testing, now with url!
Andy Mosmiller wrote: It is hard to tell unless you worked on the site, but I am pretty sure that IE 7 is setting the height of the content to exactly 300px as specified in my IE conditional stylesheet (which of course acts as a min-height for current versions.) Have people figured out how to tackle this looming problem yet for when people start using this browser? IE7 only has this problem when you used fixed units (like pixels). Where possible in such scenarios try to use percentages if you absolutely *must* show it a height (although I cannot think of a reason). In this case George has already provided you with the answer (* html hack to hide from IE7). HTH Mark __ 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] site testing, now with url!
I mistakenly wrote In this case George has already provided you with the answer (* html hack to hide from IE7). My apologies for misspelling your name Georg. -- This message has been scanned for viruses and dangerous content by ISPNZ's automated virus detection system, and is believed to be clean. __ 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] Newbie seeking layout examples to study
I would like to know if someone can point me to some sites that have a basic 3 column layout with header and footers where I can study the code? Thank you! I missed the earlier part of this thread, but try the layout gala: http://blog.html.it/layoutgala/ If you want a better explanation and further insight then the following might help: http://alistapart.com/articles/negativemargins http://alistapart.com/articles/holygrail HTH Mark -- This message has been scanned for viruses and dangerous content by ISPNZ's automated virus detection system, and is believed to be clean. __ 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] radio buttons waaaaaaaaaay to big in IE
From: Marcelo Wolfgang [mailto:[EMAIL PROTECTED]
Can anyone help me figure out why IE is acting so weird about
the radio buttons on this page ?
http://work.grillo.tk/gaiolla/checkout_shipping.html
Sure.
From: Micky Hulse [mailto:[EMAIL PROTECTED]
Just quickly looking-over you code, I see this as a potential prob:
html, body, form, fieldset, select, a, input{
padding:0px;
margin:0px;
font:10px Verdana, Arial, Helvetica, sans-serif;
color:#00;
height: 100%;
}
Micky was on the money I can confirm this is the culprit. Modifying
your body rule to the following:
html, body {
padding:0px;
margin:0px;
font:10px Verdana, Arial, Helvetica, sans-serif;
color:#00;
height: 100%;
}
and viewing in Firefox through an ie tab resolves the issue. Like Micky
I didn't take an in-depth look at your code, but is there any particular
reason you are using height:100% on the body? If the answer is no then
remove that also, since, unless you're experimenting with sticky footers
or vertical/horizontal centering, it's generally not required. Also,
10px for a body rule is rather small, and just as a FYI, the following
might prove an interesting read if you have the time.
http://css-discuss.incutio.com/?page=FontSize
HTH
Mark
--
This message has been scanned for viruses and dangerous
content by ISPNZ's automated virus detection system,
and is believed to be clean.
__
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 display problem(s)
Connor Boyack wrote:
However, in IE7b2, the overflow:visible; doesn't get caught for whatever
reason, and it doesn't expand vertically. Anybody know a fix for this?
I'm on digest so ignore me if this has already been answered.
Overflow isn't your problem. There's a new beta version available(1)
which supports min/max width height. You can read more about that and
an interesting review from 456 Berea Street(2). If you choose to
download, then you will need to hide the #content height declaration
from IE7, and your best bet is probably conditional comments.
Incidentally, the reason it is currently failing is due to the fact your
current beta version (or at least betas prior to the March 20 release)
implement height in the same way more standards compliant browsers do.
IE7 will honour a fixed dimension (such as pixels or ems) and will not
expand past this as you've discovered(3). There is however a workaround
- feed it a percentage height and all will be well.
!--[if IE 7]
#content {height: 1%;}
![endif]--
However, personally I would just get the newer release and forget about it.
HTH
Mark
1. http://www.microsoft.com/windows/IE/ie7/default.mspx
2.
http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/
3. http://www.webmasterworld.com/forum83/8361-4-10.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] Vanishing borders (IE Win)
hi Richard I'm on digest so my apologies if this has already been answered. Add line-height: 25px (or similar, but you are using pixels for font-sizing so this was consistent) to #main_nav and things appear to rectify themselves (from memory IE has a habit on certain absolutely positioned elements of failing to expand based on the elements within). Caveat - it appears you aren't designing for IE 5.0 so I didn't try to fix the issues in this browser,.but a good start would be adding height: 0 to #main_nav li in order for it to support margins on inline elements. HTH Mark __ 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/
