Re: [css-d] Box Model's width property and Safari
On Jan 24, 2007, at 2:56 PM, David Hong wrote:
I was wondering if there was CSS property like: -moz-box-sizing:
border-box; for Safari. I have searched on google and css-d mailing
list but I couldn’t find any solutions to this. Another solution is
to work the other way around which is to make IE7’s box model
behave like Firefox and Safari’s.
...
Then in Firefox and Safari, the content divider’s right border is
slightly (by 2px) right to the ones in the image. On firefox, I can
force border-box so that the width includes the widths of both left
and right borders. However, on Safari I am not able to achieve this.
I am using !doctype html public -//w3c//dtd html 4.01
transitional//en.
If you use a full doctype, then IE 7 (and 6) will be in standards
mode and use the same box-model as other browsers.
If, for whatever reason, you cannot change the doctype, Webkit and
Safari support the CSS 3 syntax for the -moz property you mention
div {
-moz-box-sizing: border-box; /* Gecko based browsers */
box-sizing: border-box; /* CSS 3 draft, Webkit, Safari, IE 5 Mac,
Opera 9, Konqueror ? */
}
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
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] websites contents development..
Hi, i have had web sites at the end. http://www.findtolinsk.com http://www.getyydirectory.com http://www.search2info.net http://www.takeinfo.net I have found a free template form the net and applied on my sites. i want to develop contexts of sites but i do not know how. videos, news, discussion borads and so on. i have open for every suggestions. Thanks. - We won't tell. Get more on shows you hate to love (and love to hate): Yahoo! TV's Guilty Pleasures list. __ 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] right websites content development
sorry i made a mistake, wrong typing, this is right:( http://www.findtolinks.com http://www.getyydirectory.com http://www.search2info.net http://www.takeinfo.net I have found a free template form the net and applied on my sites. i want to develop contexts of sites but i do not know how. videos, news, discussion borads and so on. i have open for every suggestions. Thanks. - Food fight? Enjoy some healthy debate in the Yahoo! Answers Food Drink QA. __ 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 to Filter Out Explorer 7 and Below
Mark Richards wrote: Barney wrote: IE bug fixes of this nature have no historical precedent. Well, consider that IE7 no longer supports the * html hack. I'd call that a precedent. Mark IE7 is a different browser. If it did support the star hack, we'd be in terrible trouble - Microsoft themselves acknowledge that. The star hack has been kept for IE6. IE7 has to use different hacks. This is really not a problem at all - it is a blessing. david wrote: No, it's not. Because your typical business isn't concerned about the grand scheme of things. They're concerned about their little piece of it. There it IS significant. Yeah, I suppose the grand scheme of thing isn't of concern to anyone really (?). I'm not a businessman, so I can't really carry this on with any authority. However I am always hearing about people having immense difficulty justifying accessibility to business-minded clients, so I'm not so sure the sales people are all that obsessed with appealing to the tiniest of internet minorities. In any case, this is complete idle theory. You shouldn't take me too seriously on this and if you do, it should be off-list. david wrote: I disagree with that. They have every incentive to make things render weird in their browser - so people will look at their market share, say to themselves, Well, they're the big one, don't worry about the minority browsers and go around designing sites that only look good in IE. Then ordinary people using the minority browsers will eventually get tired of sites not working right in their browser - and decide they might was well use IE. I can't see how that's a disagreement. Throughout this thread I've been saying that Microsoft will keep their browsers acting significantly different to the standard so that people will design specifically for them. Ideally it'd be one or the other, but I design for both. Using hacks. Regards, Barney __ 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] right websites content development
The first thing I would do is not to use templates. You are never going to learn anything useful that way. You need to get a decent book http://www.amazon.co.uk/CSS-Anthology-Essential-Tricks-Hacks/dp/0957921888/sr=8-1/qid=1169634670/ref=sr_1_1/203-8491694-5556701?ie=UTF8s=books I like this book it actually answers questions you need to know. It will be hard at the beginning as browsers (IE) can be a bit quirky and you will have to learn and anticipate the quirky behaviour. There's lots to learn and even the CSS gurus don't know everything but after about 6 months you should be well on your way to being well versed in the art of CSS! 'Quick fixes' like modifying a custom templates are a good way of making a 2 day job last a week. Ross - Original Message - From: stopyerdo erdo [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Wednesday, January 24, 2007 8:51 AM Subject: [css-d] right websites content development sorry i made a mistake, wrong typing, this is right:( http://www.findtolinks.com http://www.getyydirectory.com http://www.search2info.net http://www.takeinfo.net I have found a free template form the net and applied on my sites. i want to develop contexts of sites but i do not know how. videos, news, discussion borads and so on. i have open for every suggestions. Thanks. - Food fight? Enjoy some healthy debate in the Yahoo! Answers Food Drink QA. __ 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-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] LI spacing issue revisited
Hi, I posted previously about a spacing issue I was having with a UL. I've posted some sample code online where people can have a look at it and maybe give me some clue as to what is going on. http://www.miselva.com/css/testing_li.html When you look at the example you'll see I've outlined things in red and blue, I'm looking to vertically squash all the li elements as close together as possible. Perviously I've never had a problem with this so it must be something obvious I'm missing. If you look at the example you'll see that there's extra vertical spacing above and below the word 'test' in each li, and there's also spacing between the blue and red outlines, I want to remove this extra spacing so that I have more control over the vertical height of these LIs. Any ideas anyone? This is driving me mad, especially cause I know it has to be something really simple. Cheers. -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.410 / Virus Database: 268.17.8/649 - Release Date: 23/01/2007 __ 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] LI spacing issue revisited
Hi Eoin,
I modified your CSS as follows:
.wrapper li
{
border:1px solid red;
padding:0px;
margin:0px;
}
.wrapper li a
{
display:block;
border:1px solid blue;
text-decoration:none;
color:black;
font-size:.7em;
padding:0;
margin:0;
height:1em;
}
This gets you _pretty_ close. As of the present, it's impossible to get
micro-typography done to any satisfying standard - the dilema is that if
you want real control over metrics you have to make the object a block
level box, but then your text metrics become ambiguous, especially in
their relation to the surrounding box.
As it stands, the modifications I made above get rid of virtually
everything except the line-height. But as you may or may not discover,
ems are pretty entropic!
Regards,
Barney
__
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] Making Div fill remaining vertical space, and scroll within that space
I'm sorry, my what it should look like page got screwed up. The blue div should be fully contained within the outer green container. I appreciate you response, but you used fixed heights to achieve this, and the whole point of my question was that I can't use fixed heights. I suppose this is further evidence that this type of layout can not be achieved with CSS alone. Thanks, Seth Gunlaug Sørtun wrote: Seth Green wrote: Here is the test page http://normalish.com/test_page.html. This page links to another page that shows what the page would look like if I were to accomplish my goals. You should ignore the css on the 2nd page since it breaks the rules I set below. It is onlt there as a visual representation of my end goal. I don't think this is how you want it, but if I am to achieve the visual you're after, it will end up something like this... http://www.gunlaug.no/tos/alien/test_07_2000.html ...where the apparent overflow at the bottom of the green-bordered div is added by me, just to make it look even more like the example you linked to. As you have no real control of container-width, amount of text, font-size and font-family, I have to add 'overflow control' on two fixed-height containers, inside another fixed-height container. The result doesn't look good IMO, but it's as close as you can get with CSS alone. I think it might be closer to what you want _if_ the overflowing part of 'nonScrollDiv' could spill over to 'scrollDiv', so only the latter were to scroll - regardless of whatever variables that affected your construction. You could possibly achieve that with some clever Javascript, but that's beyond me and this list. The normal way of handling cases like this with CSS, is to put all text (and whatever else we got) inside one fixed-height container, and add 'overflow: auto' to that container. Then the spill-over is automatically taken care of, and you get a scrollbar when you need one. Apparently that's not what you want, but here's a basic example anyway... http://www.gunlaug.no/tos/alien/test_07_2002.html regards Georg __ 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] Making Div fill remaining vertical space, and scroll within that space
That sounds pretty messy, even in fruition Seth. You're saying both the portals have a variable amount of content, and the first is to stretch while the second fills the gap and has scroll bars? What is the purpose of these two panes, exactly? And what would you want to happen to the bottom pane if the top one is over one viewport's height? Any kind of min-height intention? I'm trying to create a layout at the moment that's similar to this, except the bottom part is relatively static content and has a fixed height - this is still very contrived without tables. I'm just thinking that maybe a simpler idea for your layout would be more convenient to use and easier to implement - too many variable elements on that scale doesn't sound like good usability. Regards, Barney __ 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] Using CSS for inline formatting
Basically this is close...I probably should explain it a bit better.
Basically I'm looking for the look of tables but without using tables.
So I need everything that should be a column ex - fn, department, role,
note etc. to left align in what would be the cell in the table. Right
now nothing is left-aligning, it's all a bit scattered. Any help would
be appreciated.
Christina
Christina Hope wrote:
I am working on a redesign of a website and this is my first jump into
CSS. I have added some microformats, but I would like to display my
hCards all inline. I am having problems with the display.
Not sure exactly what you are after - spans are inline elements by
default, so display : inline is not required. The padding should still
work though.
I think maybe the main cause of your problem is you are separating
multiple classes with a comma - correct syntax is separating with a
space.
More information on the subject is here
http://css-discuss.incutio.com/?page=MultipleClasses
Hope that helps
Dave #
BTW div s are block level elements - each will appear on a new line,
and vertical spacing between them should be handled with margins...the
br / tag you are currently using would be considered (in this
instance) poor form.
style
.dispemp {
display:inline;
padding-left:10px;
padding-right:50px;
border-right:0px;
}
.dispempl{
display:inline;
padding-right:50px;
border-right:0px;
}
/style
div class=vcard, dispemp
span class=fn, dispemplEmployee Name/span
span class=department, dispempInformation Technology/span
span class=role, dispempWebsite Coordinator/span
span class=note, disemp style=display:none/span
abbr class=tel, dispemp title=+123 456 7890 x7890/abbr
a class=email, dispemp href=mailto:[EMAIL PROTECTED]Email/a
/divbr/
div class=vcard, dispemp
span class=fn, dispempl Employee Name /span
span class=department, dispempSpecialties/span
span class=role, dispempTrader/span
span class=note, disemp(CO, GA, IL, IN, KS, KY, MI, NC, NE, NJ,
NY,
OK, PA, RI, SC, SD, TN, WV, VA, WY)/span
abbr class=tel, dispemp title=+123 456 7890 x7890/abbr
a class=email, dispemp href=mailto:[EMAIL PROTECTED]Email/a
/divbr/
Thanks,
Christina Hope
__
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-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 to Filter Out Explorer 7 and Below
Barney Carroll wrote: The star hack has been kept for IE6. IE7 has to use different hacks. While I agree with the above statement I just take the chance for some remark on IE7 in quirks mode. I wonder if this not has been mentioned before, but I could not find it on the CSS-wiki or elsewhere: The star hack still works for IE7 in quirks mode. Also, the new IE7 hacks only work for IE7 when in strict mode. So, regarding CSS IE7 in quirks mode works pretty much like IE6 in quirks mode. Rainer -- www.rohschnitt.de __ 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 to Filter Out Explorer 7 and Below
Rainer Wagener wrote: The star hack still works for IE7 in quirks mode. Also, the new IE7 hacks only work for IE7 when in strict mode. That's pretty serious. I haven't played with IE7 in quirks mode yet... I wonder how 'useful' this turn of events is considering IE7's rendering capabilities (particularly concerning the box model) in quirks? If it really is pretty much like IE6 in all respects, then we have little (or less, more to the point) to worry about. On the subject, not entirely CSS-related, but does anyone know of any .msi and/or .xpi extension that will discreetly tell you when your browser shifts to quirks mode? Regards, Barney __ 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] extending a button bar across full width
Make the li's float instead of inline.
this way they're block level elements and you can give them width, like 25% or
so.
Thomas
- Original Message
From: francky [EMAIL PROTECTED]
To: css discussion list css-d@lists.css-discuss.org
Sent: Wednesday, January 24, 2007 1:07:27 AM
Subject: Re: [css-d] extending a button bar across full width
martin f krafft wrote:
I would appreciate if someone could give me a clue with the top
navigation buttons on
http://seamus.madduck.net/~madduck/abacons4/ [valid XHTML1.0]
The client wants the bar to extend all the way across the width of
the content, so up until the dotted line. I cannot figure out how to
do that.
Does someone have an idea?
Thanks!
Hi Martin,
Do you mean:
#categories {
font-size: larger;
background: green;
padding: .2em 0;
}
Greetings,
francky
__
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/
__
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.com
__
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 to Filter Out Explorer 7 and Below
Barney Carroll wrote: If it really is pretty much like IE6 in all respects, then we have little (or less, more to the point) to worry about. At least it was good news for me when I found out. I had to adapt a rather complicated site that has to run in quirks mode (IE only) to IE7. And all I had to change was 'lt IE 7' to 'lte IE 7' in the CC. Regards, Rainer -- www.rohschnitt.de __ 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] font-stretch support
Has anyone seen a browser that supports this property? So far I've struck out. Rick Dieringer __ 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] Making Div fill remaining vertical space, and scroll within that space
Seth Green wrote: I'm sorry, my what it should look like page got screwed up. The blue div should be fully contained within the outer green container. I thought so, but that's just a negative margin-bottom that serves no purpose apart from imitating your screwed up example. I appreciate you response, but you used fixed heights to achieve this, and the whole point of my question was that I can't use fixed heights. That's no problem, but then you can't have a fixed height on the 'fixedHeightContainer', in which case you get this... http://www.gunlaug.no/tos/alien/test_07_2004.html ...but I know that's not what you want either. You're right in that CSS can't calculate what space is left at the bottom of a container and occupy exactly that space with an element with auto-scroll. The way you have described it you'll have to calculate the height of 'fixedHeightContainer' and subtract the height of 'nonScrollDiv' and give the resulting height to 'scrollDiv'. Since all elements have 'width: auto' and font-size is unknown and variable at the user end, you need a constantly running calculation. You also need to do something about 'nonScrollDiv', since that one will easily overflow 'fixedHeightContainer' and leave no space for 'scrollDiv'. Just narrow the browser-window and the available height is used up pretty soon. Alter the font-size and the same will happen. None of this is unsolvable, IMO, but I haven't seen a working web solution based on CSS - or anything else for that matter. Even Javascript will probably mean a somewhat complex and conditional solution. Conditional redistribution of content from 'nonScrollDiv' to 'scrollDiv' is probably the best solution, but CSS can't do that for you - at least not in the existing versions. Would be nice though :-) Good luck. regards Georg -- http://www.gunlaug.no __ 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] font-stretch support
To be honest, browser typographical abilities are very primitive. If anybody was even close to implementing font-stretch, it'd be Safari. IE and Mozilla have a long way to go before they can even start considering this. Font-stretch is a pretty bad term considering the spec'd ability simply looks for existing font variants. Regards, Barney __ 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 to Filter Out Explorer 7 and Below
Barney Carroll wrote: Presumably if you had used the star hack, no changes would have been necessary (not a suggestion, geuine question!)? Exactly. In fact I used the star hack a lot and had only expressions and other invalid statements in my ie.css. When I was about to migrate all those star hacks to ie.css I realized that IE7 was misbehaving even more. After a short confusion I put everything back in place and feeded IE7 with all the invalid stuff it required so badly. Voila, just like daddy ;-) Regards, Rainer -- www.rohschnitt.de __ 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] Web-safe, web-smart, and unsafe colours
tedd wrote: Limiting colors these days is pointless. I would suggest that the Government of Canada spend it's time and resources on things that matter? After all, the Government of Canada did waste it's time enforcing web-safe colors which were anything but web-safe. Now, they want to enforce web-smart? Just one waste of time following another, IMO. I understand why governments do this sort of thing, as pointless as it might seem to designers. The Gov of Canada is looking at the reality of the kind of content their sites provide and the capabilities of the equipment they provide for use by their employees and the general public in offices, and places like libraries and not-for-profit community agencies throughout the country. To say that many of these locations haven't updated their equipment in what seems like eons to folks who have recent systems in their own homes, is an understatement. Vicki __ 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 Height
I have been asked to redesign a site where they want the size of each page to remain a fixed size of 1000x750px. Assigning a width is no problem, but is there a way to assign an absolute height regardless of the amount of information within? Of course, I can do this with a single-celled table by assigning the cell a height, but is there a way to do this without using a table? Cheers - george - Eclectic Mix: http://EclecticMix.com One Minute How-To: http://OneMinuteHowTo.com DRiP Investing: http://DRiPInvesting.org - Blog: http://feeds.feedburner.com/PrudentInvestor Handmade Photographic Images: http://www.GLSmyth.com - Blog: http://feeds.feedburner.com/GLSmyth __ 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] IE7 quirk = IE6 quirk [was:How to Filter Out Explorer 7 and Below]
I wrote: The star hack still works for IE7 in quirks mode. Also, the new IE7 hacks only work for IE7 when in strict mode. So, regarding CSS IE7 in quirks mode works pretty much like IE6 in quirks mode. This ist not just about hacks. It reads: All the new CSS features in IE7 like max-width etc. don't work when in quirks mode. It's really just like IE6 in quirks mode. Regards, Rainer __ 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 Height
George L Smyth schreef: I have been asked to redesign a site where they want the size of each page to remain a fixed size of 1000x750px. Assigning a width is no problem, but is there a way to assign an absolute height regardless of the amount of information within? You can always use a DIV and set its width and height. If you want an internal scroll, you'll also have to set overflow. HTH, Rick. __ 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 to Filter Out Explorer 7 and Below
Presumably if you had used the star hack, no changes would have been necessary (not a suggestion, geuine question!)? [...] After a short confusion I put everything back in place and feeded IE7 with all the invalid stuff it required so badly. Voila, just like daddy ;-) For completeness: Running IE 7 in “quirks mode” is always an *option* - especially when we want a 'quick fix' for an old site... http://www.satzansatz.de/cssd/quirksmode.html (No, I don't follow that route very often :-) ) regards Georg -- http://www.gunlaug.no __ 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 to Filter Out Explorer 7 and Below
Gunlaug Sørtun wrote: (No, I don't follow that route very often :-) ) Why ever not? Hehehehe. Regards, Barney __ 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] css revamping troubles
http://blog.kim.thewei.com/ I'm revamping the css for this blog and am having a few troubles. 1I was able to use Phillipe's guidance to eliminate my transmogrifying nav buttons on the homepage which parents this blog [thewei.com]. But I can't use the same information he supplied to get rid of the link border for the add to technorati favorites img in this sidebar. I've tried every way I can think of, but the bottom-border on mouseover persists in Firefox. 2I want my header and description to be overlaid on the image. I've made several attempts to get rid of the background but it won't go away. 3 The php header code calls up a kubrickbg.jpg which places a gray border to the right and left of the #page area [the content area, basically]. The border has disappeared. Where did it go? -- Kim Brooks Wei 1.201.475.1854 __ 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 to Filter Out Explorer 7 and Below
(No, I don't follow that route very often :-) ) Why ever not? Hehehehe. Sorry... I can't come up with a good reason :-) I /may/ find a few once I have gotten around to dissect IE7 completely. I haven't even downloaded IE7 yet, so in the mean time I'll give it a chance ;-) To keep it on track for this thread: IE7 has the same bug as earlier versions when it comes to '@import with media attribute', so it is easy to correct IE/win without disturbing other browsers - regardless of mode... http://www.gunlaug.no/contents/wd_additions_12.html ...and it even works both ways since we can have 2 stylesheets under one @import, which makes it an almost perfect filter for IE7 and below vs. the other browsers. regards Georg -- http://www.gunlaug.no __ 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 to Filter Out Explorer 7 and Below
Gunlaug Sørtun wrote: I /may/ find a few once I have gotten around to dissect IE7 completely. I haven't even downloaded IE7 yet, so in the mean time I'll give it a chance ;-) What, so this is all just idle theory?! :) ...and it even works both ways since we can have 2 stylesheets under one @import, which makes it an almost perfect filter for IE7 and below vs. the other browsers. I don't understand this... 2 stylesheets from the same import? How? And how do you use this to differentiate? Regards, Barney __ 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] Border overlapping image
I have an image that hangs out the bottom of its containment box. No big deal in Firefox, Safari, etc. However, when in full screen width, IE allows the top-border on the head tag below the image to cut across it. Is there a snippet of code I can add to the CSS that will force IE to allow the image to float over top of the border like it does in Firefox? Here's the page - http://www.ahs.uiuc.edu. TIA, -Tim -- * Tim Offenstein - Web Specialist - CITES - AHS - 244-2700 * A cheerful heart is a good medicine Proverbs 17:22 NRSV __ 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] Styling a gallery of thumbnails with captions
My apologies for cross-posting I'd appreciate any comment that would help me improve this article: http://www.tjkdesign.com/articles/how_to_style_thumbnail_and_caption.asp Demo: http://www.tjkdesign.com/articles/thumbnail_and_caption/gallery_of_thumbnails.asp --- Regards, Thierry | www.TJKDesign.com __ 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 to Filter Out Explorer 7 and Below
I /may/ find a few once I have gotten around to dissect IE7 completely. I haven't even downloaded IE7 yet, so in the mean time I'll give it a chance ;-) What, so this is all just idle theory?! :) Not exactly ;-) You know, I keep track of as many buggy cases where IE7 is involved - that ends up on lists like this, as I possibly can without using a database. IE7 uses the same engine as its predecessors - with most bugs intact although many /appear/ to be corrected, so it isn't too hard to understand what goes on when an IE7 bug appears. Friends across the web provide me with hints and screenshots, so I know whether it is I or IE7 that is most buggy. ...and it even works both ways since we can have 2 stylesheets under one @import, which makes it an almost perfect filter for IE7 and below vs. the other browsers. I don't understand this... 2 stylesheets from the same import? How? And how do you use this to differentiate? I provided a link, didn't I? (is my Norwenglish _that_ hard to understand :-) ) Ok, so I have the following in my main stylesheet... @import url(ag2c_con.css) screen; Now, go look for the stylesheet... http://www.gunlaug.no/contents/styles/ag2c_con.css ...which is what the good browsers are looking for, and there isn't much there for them at the moment. Next: compare the proper stylesheet to the following... http://www.gunlaug.no/contents/styles/url(ag2c_con.css)%20screen ...which is what IE/win is looking for, and actually gets. A bit more there... So, IE/win provides me with a way to differentiate. - I can add whatever I want to the first stylesheet, and IE/win won't see any of it. Perfect separation. - I can add whatever I want to the second stylesheet, and only Trident based browsers (that's IE/win and a few others) will ever see it. Again, perfect separation. Yes, I know this method is ugly, but it all makes perfect sense now, doesn't it? :-) regards Georg -- http://www.gunlaug.no __ 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] font-stretch support
At 8:51 AM -0500 1/24/07, Rick Dieringer wrote: Has anyone seen a browser that supports this property? So far I've struck out. Same here. A perusal of the property table in CSS2.1 (http://www.w3.org/TR/CSS21/propidx.html) shows that 'font-stretch' wasn't included, which indicates that there were fewer than two interoperable implementations at the time CSS2.1 was written. (Not that CSS2.1 is completely and totally finished from a process standpoint, but it's pretty well done.) Generally speaking, I use the rule of thumb that any property or feature that is in CSS2 but isn't in CSS2.1 can be fairly safely ignored, since it will have little or no support from browsers. -- Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone CSS is much too interesting and elegant to be not taken seriously. -- Martina Kosloff (http://mako4css.com/) __ 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] Border overlapping image
Tim Offenstein wrote:
[...] Is there a snippet of code I can add to the CSS that will
force IE to allow the image to float over top of the border like it
does in Firefox?
http://www.ahs.uiuc.edu.
The addition of...
.imgLT {position: relative;}
...should fix IE's faulty stacking.
regards
Georg
--
http://www.gunlaug.no
__
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 to Filter Out Explorer 7 and Below
Gunlaug Sørtun wrote: - I can add whatever I want to the second stylesheet, and only Trident based browsers (that's IE/win and a few others) will ever see it. Again, perfect separation. I didn't realise this (that there /was/ a second stylesheet there)... That's very astute - but the article didn't make it very clear that there was anything there... Yes, I know this method is ugly, but it all makes perfect sense now, doesn't it? :-) IE /is/ ugly. We're all make-up artists as far as I'm concerned. Regards, Barney __ 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 to Filter Out Explorer 7 and Below
Gunlaug Sørtun wrote: Ok, so I have the following in my main stylesheet... @import url(ag2c_con.css) screen; Now, go look for the stylesheet... http://www.gunlaug.no/contents/styles/ag2c_con.css ...which is what the good browsers are looking for, and there isn't much there for them at the moment. Next: compare the proper stylesheet to the following... http://www.gunlaug.no/contents/styles/url(ag2c_con.css)%20screen ...which is what IE/win is looking for, and actually gets. A bit more there... Am I glad I visited this list today? This is great stuff, thanks for sharing. --- Regards, Thierry | www.TJKDesign.com __ 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] Styling a gallery of thumbnails with captions
Thierry Koblentz wrote: I'd appreciate any comment that would help me improve this article: http://www.tjkdesign.com/articles/how_to_style_thumbnail_and_caption.asp Demo: http://www.tjkdesign.com/articles/thumbnail_and_caption/gallery_of_thumbnails.asp Thierry | www.TJKDesign.com Nice job, Thierry. Worked well for me. You may want to accommodate padding the thumbs for ie/6 and 5.5. I took the liberty of plunking your caption/gallery in a real situation layout-- link to same off-list, if you want to take it for a spin. Best, ~dL -- http://chelseacreekstudio.com/ __ 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 to Filter Out Explorer 7 and Below
Subject: Re: [css-d] How to Filter Out Explorer 7 and Below Gunlaug Sørtun wrote: - I can add whatever I want to the second stylesheet, and only Trident based browsers (that's IE/win and a few others) will ever see it. Again, perfect separation. I didn't realise this (that there /was/ a second stylesheet there)... That's very astute - but the article didn't make it very clear that there was anything there... Yes, I know this method is ugly, but it all makes perfect sense now, doesn't it? :-) IE /is/ ugly. We're all make-up artists as far as I'm concerned. Don't you think we get too hung up about IE6? Sure it is anything but perfect - hell no browser is! Our job is to make things that work across the board. So let's concentrate on what we can affect. IE6 is here for some while to come like it or not - or at least until IE7 confines it to history. Ian J Young Director IY e-Solutions IYES Ltd 39 Palmerston Place Edinburgh EH12 5AU Tel:+44 131 527 6070 Registered in Scotland no:208707. VAT no 804 5776 20 -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.432 / Virus Database: 268.17.8/649 - Release Date: 23/01/2007 20:40 __ 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 to Filter Out Explorer 7 and Below
Barney Carroll wrote: IE /is/ ugly. We're all make-up artists as far as I'm concerned. I agree. Some use soft make-up brushes and conditional comments... ...I prefer to whack the buggers with their own bugs, and smash what's left with a huge CSS sledgehammer[1]. Doesn't matter all that much (to me) how we achieve it, but the result should at least be somewhat acceptable to visitors. regards Georg [1]http://www.gunlaug.no/contents/wd_1_02.html -- http://www.gunlaug.no __ 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 Height
Rick - Thanks, not sure what I was thinking. When I tried that the height collapsed, but I must have misspelled something. Cheers - george --- Rick den Haan [EMAIL PROTECTED] wrote: George L Smyth schreef: I have been asked to redesign a site where they want the size of each page to remain a fixed size of 1000x750px. Assigning a width is no problem, but is there a way to assign an absolute height regardless of the amount of information within? You can always use a DIV and set its width and height. If you want an internal scroll, you'll also have to set overflow. HTH, Rick. - Eclectic Mix: http://EclecticMix.com One Minute How-To: http://OneMinuteHowTo.com DRiP Investing: http://DRiPInvesting.org - Blog: http://feeds.feedburner.com/PrudentInvestor Handmade Photographic Images: http://www.GLSmyth.com - Blog: http://feeds.feedburner.com/GLSmyth __ 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] Styling a gallery of thumbnails with captions
~davidLaakso wrote: Thierry Koblentz wrote: I'd appreciate any comment that would help me improve this article: http://www.tjkdesign.com/articles/how_to_style_thumbnail_and_caption.asp Demo: http://www.tjkdesign.com/articles/thumbnail_and_caption/gallery_of_thumbnails.asp Thierry | www.TJKDesign.com Nice job, Thierry. Worked well for me. Thanks David.. You may want to accommodate padding the thumbs for ie/6 and 5.5. I've checked in these and didn't notice anything different. What do you mean by padding the thumbs exactly? I took the liberty of plunking your caption/gallery in a real situation layout-- link to same off-list, if you want to take it for a spin. Thanks for doing that; it seems to be working fine. I must say that I've been using this method for a while and never had a problem. --- Regards, Thierry | www.TJKDesign.com __ 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] Styling a gallery of thumbnails with captions
Thierry Koblentz wrote: ~davidLaakso wrote: Thierry Koblentz wrote: I'd appreciate any comment that would help me improve this article: http://www.tjkdesign.com/articles/how_to_style_thumbnail_and_caption.asp Demo: http://www.tjkdesign.com/articles/thumbnail_and_caption/gallery_of_thumbnails.asp Thierry | www.TJKDesign.com Nice job, Thierry. Worked well for me. Thanks David.. You may want to accommodate padding the thumbs for ie/6 and 5.5. I've checked in these and didn't notice anything different. What do you mean by padding the thumbs exactly? Sorry. I did not clarify that your file is fine in ie/6 and down. My file (a real situation layout with your caption/gallery in it) is running ie (less than version 7) in quirks. I took the liberty of plunking your caption/gallery in a real situation layout-- link to same off-list, if you want to take it for a spin. Thanks for doing that; it seems to be working fine. I must say that I've been using this method for a while and never had a problem. --- Regards, Thierry | www.TJKDesign.com __ 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/ -- http://chelseacreekstudio.com/ __ 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] css height problem
hello, i am new to web design and trying to perfect the trick of getting the page to display the full height of the browser. i have been 90% successful thanks to this forum. in http://www.infinitywebdesign.org/ronnie/csstest1.html the border is cut off if you open the page in ie6 or 7 but only if you dont have the browser opened at maximum height. if you open the page in a minimized browser and scroll down the css styled borders are cut off. in http://www.infinitywebdesign.org/ronnie/csstest2.html the height is stretched out past the bottom of the browser even when there is no content there. if i have the browser opened to max size, it shouldnt show the scrollbar indicating there is more content when there isnt. thanks for any assistance -- Phillip Vaughan Infinity Web Design www.infinitywebdesign.org (760) 861-2681 __ 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] Div Overhang resolved
Thanks to Georg and James Shannon for helping with my Div overhang problem. I re-engineering the site to mitigate against the absolutely positioned elements that were causing the problems. Thanks again. ATB, John. __ 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 to Filter Out Explorer 7 and Below
Thierry Koblentz wrote: Next: compare the proper stylesheet to the following... http://www.gunlaug.no/contents/styles/url(ag2c_con.css)%20screen ...which is what IE/win is looking for, and actually gets. A bit more there... Am I glad I visited this list today? This is great stuff, thanks for sharing. It was too good to be true I guess... It works with a file name, but not with a path (with /) so it is not something that could really be used in real life. Or am I missing something? --- Regards, Thierry | www.TJKDesign.com __ 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] Box Model's width property and Safari
Thanks for the prompt reply Philippe,
However, it doesn't look like box-sizing property is being recognised by the
Safari browser. I am using version 2.0.4.
And, yes unfortunately, I cannot change the doctype.
Do you have any other suggestions?
Kind regards,
David G. Hong
-Original Message-
From: Philippe Wittenbergh [mailto:[EMAIL PROTECTED]
Sent: Wednesday, January 24, 2007 7:40 PM
To: CSS-D
Subject: Re: [css-d] Box Model's width property and Safari
On Jan 24, 2007, at 2:56 PM, David Hong wrote:
I was wondering if there was CSS property like: -moz-box-sizing:
border-box; for Safari. I have searched on google and css-d mailing
list but I couldn’t find any solutions to this. Another solution is
to work the other way around which is to make IE7’s box model
behave like Firefox and Safari’s.
...
Then in Firefox and Safari, the content divider’s right border is
slightly (by 2px) right to the ones in the image. On firefox, I can
force border-box so that the width includes the widths of both left
and right borders. However, on Safari I am not able to achieve this.
I am using !doctype html public -//w3c//dtd html 4.01
transitional//en.
If you use a full doctype, then IE 7 (and 6) will be in standards
mode and use the same box-model as other browsers.
If, for whatever reason, you cannot change the doctype, Webkit and
Safari support the CSS 3 syntax for the -moz property you mention
div {
-moz-box-sizing: border-box; /* Gecko based browsers */
box-sizing: border-box; /* CSS 3 draft, Webkit, Safari, IE 5 Mac,
Opera 9, Konqueror ? */
}
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
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] Is this a semantic use of the definition list?
Garth Jantzen wrote: I'm looking for a way to create a 'teaser box' you might call it, which would contain an image say, 80 x 80 floated to the left with a description floated to the right, both of which are wrapped in a box. The box is a link to my portfolio page. I want the background color to change on a mouseover. I currently have it set up as a definition list with a heading as dt image as dd, and the description as a dd. But because I want the whole box to be a link, is it semantic to wrap each 'teaser box' in an anchor tag? I want to use the a as a block element so IE users can see the hover. I would rather not use javascript to change the style. any thoughts on the semantics of my definition list? Why not simply use an UL with each LI containing an anchor? Use the background of that element to display your image and the necessary padding to make sure your text doesn't overlap the image. Note that you won't be able to use block level elements in there, nor links. That way you get the mouseover effect on the whole box and do not have to deal with floats. Unless you consider the image is not purely decorative and should be part of the content. --- Regards, Thierry | www.TJKDesign.com __ 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] Is this a semantic use of the definition list?
At 1/24/2007 01:31 PM, Garth Jantzen wrote: I'm looking for a way to create a 'teaser box' you might call it, which would contain an image say, 80 x 80 floated to the left with a description floated to the right, both of which are wrapped in a box. The box is a link to my portfolio page. I want the background color to change on a mouseover. I currently have it set up as a definition list with a heading as dt image as dd, and the description as a dd. But because I want the whole box to be a link, is it semantic to wrap each 'teaser box' in an anchor tag? I want to use the a as a block element so IE users can see the hover. I would rather not use javascript to change the style. any thoughts on the semantics of my definition list? The first answer is No -- you can't wrap a DT/DD pair in an anchor. Try it and validate it to see. You can also consult the documentation: HTML 4.01 Specification 10 Lists 10.3 Definition lists: the DL, DT, and DD elements http://www.w3.org/TR/html4/struct/lists.html#h-10.3 My guess is that what you're looking at is an unordered list in which the LI is the container for your item data structure. If you want to enclose everything inside the list item in an anchor you can only use inline elements such as spans and images: 12.2 The A element http://www.w3.org/TR/html4/struct/links.html#h-12.2 therefore: ul li a href=xxx img src=xxx alt=xxx / spanDescription/span /a /li ... /ul Then use CSS to format these elements to your heart's content. Personally I don't quite understand why it's kosher to style an inline element as a block when it's in a markup context that only allows inline elements, but those more knowledgeable than myself have said it's OK. Regards, Paul __ Juniper Webcraft Ltd. http://juniperwebcraft.com __ 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] How to prevent the image from repeating in IE6
Hi all
Re: the right hand side column heading (Industry in Focus)
http://flx.uat.edna.edu.au/flx/go/home/news/flexenews?matrix=11696169414
03
I've got a problem with the background image being repeated to the left.
The image consists of a background image (class = flexOrangeHeading) and
a hardcoded image (http://flx.uat.edna.edu.au/imgs/left-orange.gif). The
same code is used in the left column but looks fine, so it must be
someting to do with the page layout...
This is the css for the two columns:
#secondary_dual-tmp .secondary2col {
margin:0;
padding:0;
width: 100%;
clear: left;
}
#secondary_dual-tmp .left_col {
margin: 0;
padding: 0;
width: 49%;
float:left;
clear: all;
}
#secondary_dual-tmp .right_col {
padding: 0;
margin-left:51%;
_margin-left:50%;
clear: right;
border: 1px solid red;
}
And this is the image css:
.flexOrangeHeading {
background: url(/imgs/bkgrnd-orange.gif) no-repeat center
right;
font-family:Arial, Helvetica, sans-serif;
color:#FF;
font-weight:bold;
font-size:22px;
line-height: 46px;
display: block;
}
.flexOrangeHeading img {
vertical-align: middle;
}
How do I make sure that the background image doesnt get repeated to the
left, by still keeping the two columns?
Regards
Bojana
__
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 to Filter Out Explorer 7 and Below
~davidLaakso wrote: It was too good to be true I guess... It works with a file name, but not with a path (with /) so it is not something that could really be used in real life. Or am I missing something? I may be missing something, too-- but my site http://www.chelseacreekstudio.com/ , and all my pages linked from it in the left column, use the method Georg describes. It works extremely well. Granted it took me awhile to get my head wrapped around the concept :-) . Thanks David for making me look at this again. I was not using it *inside* the styleheet but in the document, that's why path was an issue. --- Regards, Thierry | www.TJKDesign.com __ 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] Relative Positioning within Non-Absolutely Positioned DIV
How do I get an element (copyright statement in this instance) to always be positioned in the lower right hand corner of a DIV that is not absolutely positioned? In this instance my DIV starts right at the top of the page and the margin-left and margin-right are set to 'auto.' Check Out the new free AIM(R) Mail -- 2 GB of storage and industry-leading spam and email virus protection. __ 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] Ahhh! Why can't I find you? Degrading Popup (CSS only?)
On 1/23/07, Andy Harrison [EMAIL PROTECTED] wrote:
There is another way to do it, but IE doesn't support the popup (since IE
only works with :hover on anchors/hyperlinks - maybe IE 7 works; I don't
know), so only the hyperlink would work. It would be something like this:
div class=popdiv class=popuppopup content/diva
href=...?/a/div
.pop {
position:relative;
background-image:url(q.gif);
height:17px;
width:16px;
}
.pop .popup {
display:none;
}
.pop:hover .popup {
display:block;
position:absolute;
top:15px;
left:15px;
background-color:white;
border:1px solid black;
}
Andy :-)
__
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/
If you have knowledge of JavaScript and .htc files, you can assign functions
to onMouseOver and onMouseOut events that will act the same as a normal
browsers :hover css attributes. This is a built in funcitonality for IE to
overcome their hover pseudo-class shortcoming. I'd give further help, but
seeing as this is a css mailing list it's not appropriae to discuss
JavaScript here, but a quick google search will yield many results.
__
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 to prevent the image from repeating in IE6
Ok. I kid of fixed it by adding float: left to .flexOrangeHeading img
The only problem now is that the hardcoded image and the background
image do not align perfectly. They are like a pixel off. And
margin-bottom doesn't want to do the trick L
How do I align them?
http://flx.uat.edna.edu.au/flx/go/home/news/flexenews
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Bojana Lalic
Sent: Thursday, January 25, 2007 8:59 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] How to prevent the image from repeating in IE6
Hi all
Re: the right hand side column heading (Industry in Focus)
http://flx.uat.edna.edu.au/flx/go/home/news/flexenews?matrix=11696169414
03
I've got a problem with the background image being repeated to the left.
The image consists of a background image (class = flexOrangeHeading) and
a hardcoded image (http://flx.uat.edna.edu.au/imgs/left-orange.gif). The
same code is used in the left column but looks fine, so it must be
someting to do with the page layout...
This is the css for the two columns:
#secondary_dual-tmp .secondary2col {
margin:0;
padding:0;
width: 100%;
clear: left;
}
#secondary_dual-tmp .left_col {
margin: 0;
padding: 0;
width: 49%;
float:left;
clear: all;
}
#secondary_dual-tmp .right_col {
padding: 0;
margin-left:51%;
_margin-left:50%;
clear: right;
border: 1px solid red;
}
And this is the image css:
.flexOrangeHeading {
background: url(/imgs/bkgrnd-orange.gif) no-repeat center
right;
font-family:Arial, Helvetica, sans-serif;
color:#FF;
font-weight:bold;
font-size:22px;
line-height: 46px;
display: block;
}
.flexOrangeHeading img {
vertical-align: middle;
}
How do I make sure that the background image doesnt get repeated to the
left, by still keeping the two columns?
Regards
Bojana
__
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-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] Outlook Web Access hates background images?
Hello, I'm using Microsoft Outlook Web Access to communicate with one of my clients. My role with them includes building out HTML files that are converted to OFT and then sent as company-wide newsletters and invitations. Much to my dismay, when someone sends me an attached HTML file to work with, OWA strips the url(path/to/image.gif) information out of the inline styles and internal style sheet rules. Not only does it do this with attached HTML files, if the HTML file is renamed with another extension (or if the extension is removed all together), the information is still stripped. Now, when someone needs to send me an HTML file containing CSS background images, they either have to ZIP it, or send it to a non-OWA address. Has anyone else had this experience and know of a way to work around it? I'd be happy to demonstrate this by sending emails with the same attachment to anyone interested; one through OWA and one through Outlook 2003. Thanks for any information, Troy __ 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] css height problem
On 1/24/07, phillip vaughan [EMAIL PROTECTED] wrote:
hello,
i am new to web design and trying to perfect the trick of getting
the page to display the full height of the browser. i have been 90%
successful thanks to this forum.
in http://www.infinitywebdesign.org/ronnie/csstest1.html the border
is cut off if you open the page in ie6 or 7 but only if you dont have
the browser opened at maximum height. if you open the page in a
minimized browser and scroll down the css styled borders are cut off.
in http://www.infinitywebdesign.org/ronnie/csstest2.html the height is
stretched out past the bottom of the browser even when there is no
content there. if i have the browser opened to max size, it shouldnt
show the scrollbar indicating there is more content when there isnt.
thanks for any assistance
--
Phillip Vaughan
Infinity Web Design
www.infinitywebdesign.org
(760) 861-2681
__
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/
First off, you might want to look over your css body attribute styles. You
have an extra semi-colon mixed in there that could potentially mess up some
stuff, or at least make it look unprofessional.
Secondly, I have encountered this problem myself. It seems to be a case of
the browsers not taking the top and bottom border width's into account when
calculating the body height, and then adding them on after adjusting the div
height, creating heights that are actually over 100% in size. I've figured
out a work around for the problem, but it is a bit messy. I've searched
endlessly for other solutions but have yet to find one, but hopefully there
is one out there. In the meantime however I'll let you in on my method of
fixing the problem.
Since adding a top and bottom border to the div just over size it, what you
can do instead to simulate the border is to add in div's within the main
div. Basically you just make them have 100% width and then the height that
you would like the border width to be. relatively position then to the top
and bottom, and set the appropriate background-color that you would like.
The only downfall to this fix is that it only supports solid colored borders
unless you create custom background-images for the div to blend in with
other styles of borders.
An example of this in CSS code is as follows:
div #topborder { width: 100%; height: 2px; background-color: red;
position:relative; top: 0; }
div #main { height: 100%; border: 2px solid red; border-top: 0px;
border-bottom: 0px; }
div #bottomborder { width: 100%; height: 2px; background-color: red;
position:relative; bottom: 0; }
Then just use the following HTML to implement it:
div id=main
div id=topborder/div
Content here
div id=bottomborder/div
/div
Of course make sure you set left and right padding to 0 as well to avoid any
space between the border divs and the main div.
So like I said, it's a pretty messy solution when you'd think it would work
fine in the first place, but it's all I have to offer right now. Hope that
helps a bit.
Mattu
__
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 to prevent the image from repeating in IE6 - FIXED
All I had to do was change the line-height ;)
-Original Message-
From: Bojana Lalic
Sent: Thursday, January 25, 2007 10:43 AM
To: Bojana Lalic; 'css-d@lists.css-discuss.org'
Subject: RE: [css-d] How to prevent the image from repeating in IE6
Ok. I kid of fixed it by adding float: left to .flexOrangeHeading img
The only problem now is that the hardcoded image and the background
image do not align perfectly. They are like a pixel off. And
margin-bottom doesn't want to do the trick L
How do I align them?
http://flx.uat.edna.edu.au/flx/go/home/news/flexenews
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Bojana Lalic
Sent: Thursday, January 25, 2007 8:59 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] How to prevent the image from repeating in IE6
Hi all
Re: the right hand side column heading (Industry in Focus)
http://flx.uat.edna.edu.au/flx/go/home/news/flexenews?matrix=11696169414
03
I've got a problem with the background image being repeated to the left.
The image consists of a background image (class = flexOrangeHeading) and
a hardcoded image (http://flx.uat.edna.edu.au/imgs/left-orange.gif). The
same code is used in the left column but looks fine, so it must be
someting to do with the page layout...
This is the css for the two columns:
#secondary_dual-tmp .secondary2col {
margin:0;
padding:0;
width: 100%;
clear: left;
}
#secondary_dual-tmp .left_col {
margin: 0;
padding: 0;
width: 49%;
float:left;
clear: all;
}
#secondary_dual-tmp .right_col {
padding: 0;
margin-left:51%;
_margin-left:50%;
clear: right;
border: 1px solid red;
}
And this is the image css:
.flexOrangeHeading {
background: url(/imgs/bkgrnd-orange.gif) no-repeat center
right;
font-family:Arial, Helvetica, sans-serif;
color:#FF;
font-weight:bold;
font-size:22px;
line-height: 46px;
display: block;
}
.flexOrangeHeading img {
vertical-align: middle;
}
How do I make sure that the background image doesnt get repeated to the
left, by still keeping the two columns?
Regards
Bojana
__
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-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] Relative Positioning within Non-Absolutely Positioned DIV
On 1/24/07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
How do I get an element (copyright statement in this instance) to always
be positioned in the lower right hand corner of a DIV that is not absolutely
positioned? In this instance my DIV starts right at the top of the page and
the margin-left and margin-right are set to 'auto.'
Check Out the new free AIM(R) Mail -- 2 GB of storage and industry-leading
spam and email virus protection.
__
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/
To relatively position an element within a div, simply assign it the
position: relative style, then adjust it's distances with respect to the
sides. So if you wanted something to be on the very bottom right, you would
give it bottom: 0 and right: 0 styles, meaning that it's bottom border is
0px away from it's parent's bottom border element and 0px away from the
right border. I'm not 100% sure as I haven't implemented this exactly
myself, but you may also have to float the element as well.
Although honestly, there are much easier methods of doing this. One such way
would be to simply add the following code to the bottom of the div:
p class=copyrightCopyright Statement/p
then simply assign the following css style:
p .copyright { align: right; }
That's a much easier and more reliable way of position something on the
bottom right of a div. If you can, I'd go with that method instead.
__
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] Fixed Width/Fluid Width 100% span
Hello all, I'm running into some problems with a fixed width/fluid width 100% span. http://www.matthickerson.com/dev/spantest.html Styles are inline in source This is the closest I've come and it's fairly consistent in Firefox and IE6, however the right side doesn't quite flow the entire width. It uses absolute positioning on the left fixed width div, with relative positioning of the right fluid width div. Floats didn't seem to cut it, Firefox would only render the right side fluid width based on the content within, it didn't naturally span the rest of the screen width. Also, the right fluid div is using a width:77%, a 100% throws it off the screen. What I'm wondering is has anyone done this type of layout before and can I get my right side fluid width to span 100%? Right now, it's a tad short and I'd like it span the entire width of that red background wrapper. Thank you. _ Invite your Hotmail contacts to join your friends list with Windows Live Spaces http://clk.atdmt.com/MSN/go/msnnkwsp007001msn/direct/01/?href=http://spaces.live.com/spacesapi.aspx?wx_action=createwx_url=/friends.aspxmkt=en-us __ 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] 100% DIV height in Firefox 2.0
Matt Fielding wrote: The problem I am having is that my div container in Firefox 2.0 is not spanning the length of the window by default when using height: 100% on the container itself, and all parent containers. http://mattu.isa-geek.com On Fri, 19 Jan 2007 08:42:27 +0100, Georg Sørtun replied: I don't know how IE7 will react, since the 'auto-expansion' bug is fixed (they say) in that version, but IE7 doesn't support the CSS2/2.1 property 'display: table'. Here's the test-version... http://www.gunlaug.no/tos/alien/test_07_1850.html ...so maybe someone will inform me..? Belated response, but - yes - IE 7 displays the same as FF, IE 6, and Opera 9. Cordially, David -- www.hucklesby.com __ 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] Fixed Width/Fluid Width 100% span
Hello all, I'm running into some problems with a fixed width/fluid width 100% span. http://www.matthickerson.com/dev/spantest.html Styles are inline in source This is the closest I've come and it's fairly consistent in Firefox and IE6, however the right side doesn't quite flow the entire width. It uses absolute positioning on the left fixed width div, with relative positioning of the right fluid width div. Floats didn't seem to cut it, Firefox would only render the right side fluid width based on the content within, it didn't naturally span the rest of the screen width. Also, the right fluid div is using a width:77%, a 100% throws it off the screen. What I'm wondering is has anyone done this type of layout before and can I get my right side fluid width to span 100%? Right now, it's a tad short and I'd like it span the entire width of that red background wrapper. Thank you. _ Invite your Hotmail contacts to join your friends list with Windows Live Spaces http://clk.atdmt.com/MSN/go/msnnkwsp007001msn/direct/01/?href=http://spaces.live.com/spacesapi.aspx?wx_action=createwx_url=/friends.aspxmkt=en-us __ 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/ Here is your solution: http://mattu.isa-geek.com/test.html The only thing is that you will want to make the height auto, or a larger height if you plan to add content to the div's, otherwise they stay exactly as you see them, and the content just overflows past the borders. __ 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] Site 2 - check please!!
Hi List, I am seeking help with the following site: http://www.mathertownsend.com.au/ http://www.mathertownsend.com.au/mt.css Site renders OK in FF 1.5 and Opera 9.01 My problem is when rendering the About us and News pages, in IE 6.0.2 ... I seem to have a height issues and the The bottom navigation is not fully visible. Thanks in advance, Ken. __ 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/ I'm afraid I don't have anything prior to IE7 installed, but upon quick inspection I did notice one thing I'll point out quickly. All pages aside from your home page are missing the bookmark link and site updated text in the footer. I suggest you either remove them or add them on all pages to make it look more professional. __ 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] 100% DIV height in Firefox 2.0
David Hucklesby wrote: Belated response, but - yes - IE 7 displays the same as FF, IE 6, and Opera 9. Thank you. For completeness: my demo-page has been changed - see dates in page... http://www.gunlaug.no/tos/alien/test_07_1850.html There's no 'display: table' to throw off IE7 anymore, and the height relies on 'min-height' support across browser-land, with a hack for IE6 and older IE/win versions. The reason for this change was not that IE7 made problems by its lack of support for 'display: table', but that Gecko messed up absolute positioning of elements relative to an element with CSS table properties declared on it. That made the original solution useless, IMO. I could easily fix IE7, but Firefox etc. didn't react well to any fixes. regards Georg -- http://www.gunlaug.no __ 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] DIV resizing problem with :hover, and also a DIV layout question.
First off, if you visit http://mattu.isa-geek.com/index2.php you will see a layout I am currently testing and coding. So far I have two problems I'd like to get some input on. 1) using :hover on anchor elements with display:block styles, being the most compatible method, causes a few problems with my liquid left navbar. Mainly every time you hover over one of the anchors, it causes the div to resize and make a mess of anything below it, including the footer div. I was wondering if there is any way to remedy this problem aside from using a fixed height div for each of the anchors. I'd like to, if possible keep the entire navbar contents in one div container for ease of coding, but cannot have the container resizing on hover. i have tried to replace the anchors with list elements, which also does not work. i get the exact same results. 2) i would like to get my content div (right floated div in center) to be x pixels away from the navbar div, without assigning a fixed width for the navbar. is there any way to get the content div to do this while the navbar is still a floated container? i realize it could be done if i absolutely or relatively positioned the navbar, but i could like to avoid this so that the header div can remain a liquid height as well. I may just cave in and assign a height for the header then position the navbar otherwise if that is the only solution, but even then i want the navbar to have a liquid width incase i decide to use em settings for the fonts and they appear larger in some browsers. any help would be appreciated. thank you for your time in helping in advanced, hope to uncover some more css mysteries durign this discussion, as i have already learned many things via this mailing list already, and have hopefully helped others as well. Mattu __ 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] UL and LI Borders question
Fred Janon wrote: I have a UL with some LIs. I want a 1px border around all the LIs with no 2px border between the LIs. I have been fiddling around with the UL and LIs borders but I can't find a simple solution to it. My best solution so far is to have no border on the UL and the top, left, right borders for all the LIs except the last one which has all 4 borders to get the bottom border. Anyone with a very ConciSe Solution? -1px top margin on each li? Just a guess. D# __ 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] UL and LI Borders question
Fred Janon wrote: I have a UL with some LIs. I want a 1px border around all the LIs with no 2px border between the LIs. You can declare a 1px border on all sides of all LIs, and then pull the LIs up by a top or bottom margin of -1px (negative margin). That will make it appear to be only a single - 1px wide - border between them. regards Georg -- http://www.gunlaug.no __ 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] New With Problems
Hi I'm new here... Due to having big brothers and boyfriends and other people who know far more about computers than I, I have generally managed to do quite nicely completely avoiding having to know anything more than absolutely necessary about computers. My definition of the just tolerable bare minimum was enough to get me a part time job during university as on-campus tech support but I really don't know much about computers. :) While trying to decide whether or not to enroll for a fourth term of advanced accelerated immersion Chinese at the local university a local travel agency offered me a job rewriting their English language website. http://www.668tour.com/en/index.asp It was originally written by a German employee with code help from the man who wrote the Chinese website http://www.anandatour.com.cn/china/index.asp Scary, isn't it? He can't understand how I'm able to do any coding at all using Notepad or why I don't want a 'good' program like Dreamweaver on my computer. While rewriting the content to actually reflect the rules of the English language and putting up more photos I began cleaning the HTML, removing large blocks of redundant code, adding escape tags, running it through Mozilla's Error Console and stuff like that but was still working mostly within the tables format I'd been given. Then, about two weeks ago I discovered CSS... The last time I wrote a website was before I moved to China. I'd never used CSS before but ooh, fun, pretty, makes things smaller, and makes them work more logically than tables. I've now got some of my beta uploaded to the web and can finally look at it in Internet Explorer and I'm finding all sorts of finicky problems, as well as one or two problems I haven't been able to solve in Mozilla. I'd prefer having two or three tests written up to stick on the web to look at but the person in charge of the server refuses to so much as tell me the name of it, let alone give me the right to logon and upload things. Explaining that I was doing a beta-test and did _not_ want him to remove the former website to put these pages up was great fun. Why would I need to do something like that? (Lest I fall into the trap of only saying bad things about my coworker's skill with computers, he's astonishingly good at getting the printer unjammed... and has managed to convince the people in charge that you should shut the computers down instead of pulling the plug when you want to turn them off...) http://www.anandatour.com.cn/test/index.html Looks great in Mozilla. Text can be scaled up/down with no problems. For some reason, however, IE refuses to align my 3 columns correctly. I keep getting 2 columns + 1. I thought the problem was that div id=main has margins of 4% and it isn't accepting that these divs are inside that div so is adding the percents together. But, when I get rid of main altogether and change the column widths in the CSS so that it definitely adds up to 100% it still won't line up right. Beginning to feel a bit stymied by this. Have managed to find and remove some junk code I missed on the last few cleanups but I still can't make it line up right. http://www.anandatour.com.cn/test/beachinfo.html My nemesis. Looks great in Mozilla. Internet Explorer insists on having the table start right under the end of the paragraph introducing people to the beaches. I had kept tables here in the first place because it was the only way I could figure out how to have Sanya start underneath the picture of the woman on the beach. http://www.anandatour.com.cn/test/hotel-hk.html http://www.anandatour.com.cn/test/hk-xld.html have a different problem where I went and forgot to notice that a div class and div style didn't need to be marked seperately. That's been fixed. But the reason I had to use so many different divs was because it was the only way I could get one hotel's header to start below the end of the last hotel's photo instead of starting below the end of the last hotel's text (which sometimes is shorter than the photo). This is basically the same problem I'm having in beachinfo (always on IE, only on Mozilla if I try to get rid of the table). http://www.anandatour.com.cn/test/hotel.html Hey, this one actually works in both browsers! Yay! And it looks cool too. __ 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] DIV resizing problem with :hover, and also a DIV layout question.
Matt Fielding wrote:
http://mattu.isa-geek.com/index2.php
1)
You can solve the resizing problem by adding a padding to those links -
same size and the borders, and remove it on :hover.
2)
The simplest solution is to not float it. Instead, keep it in normal
flow and adjust with margins, like so...
div #content
{
background-color: yellow;
margin: 0 0 0 100px;
}
...and let the browsers take care of the rest.
regards
Georg
--
http://www.gunlaug.no
__
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/
Thank you both for the border suggestion. You have to love when a simple
solution smacks you right in the face :-D That will work beautifully.
As for the navbar and content div's, basically to clarify what I'm looking
for, I want the navbar to essentially be on the left of the content div as
it is now, but I'm looking for a way to position the content div a fixed
amount of space from the navbar div without having to assign the navbar div
any fixed or liquid width. The reason for that is because if I ever add
longer links to the list, I want to have it adjust accordingly without
having to edit any style code.
Georg, your suggestion about using a margin to displace the content div, I
thought, would cause the content div to start below the navbar. I think I
see how it would work though, since the navbar would be floated above it,
the margin should not conflict. I also had another idea however, and was
wondering if it would give me a similar effect, but with even more ease and
dynamic updating.
I was thinking that I could float the navbar div WITHIN the content div,
that way not only would it hover over the content div, but would displace
the content inside the content div as well, as determined by it's width.
This way I don't have to worry about adjusting the margin for the content
div, given the navbar width became to large. Sound right?
__
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/
