[css-d] Problems with 100% height div
Hi,
I would like to put a 100% high div on my page, but for some reason I
just can?t get it to work. I use the method described in the ?One True
Layout - Equal Height Columns? [1] with no luck. The markup is dead
simple
div id=container
div id=contents
p
dfsdd
/p
/div
/div
Nothing fancy here and the css is also equally as simple
*
{
margin: 0;
padding: 0;
}
#container
{
background-color: #00f;
width: 796px;
overflow: hidden;
}
#contents
{
background-color: #0f0;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
Using this makrup + css, the div doesn?t expand [2]. However I?ve
found that if I add something AFTER the inner div then it will expand
but there is no overflow clipping taking place [3]?
div id=container
div id=contents
p
dfsdd
/p
/div
TEXT TO MAKE IT EXPAND
/div
This is all being tested in IE6, but it doesn?t work in firefox
either. Any idea on why it?s acting up?
[1] http://www.positioniseverything.
net/articles/onetruelayout/equalheight
[2] http://www.selfinflicted.org/css/full_height.html
[3] http://www.selfinflicted.org/css/full_height_expanded_noclip.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Subject: Re: ie6 not displaying site at all, Why? (Ingo Chao)
Thanks for that zoe. Really appreciate it. As I said, this is my first real CSS site and I'm having some major problems with the ie thang. I've managed to sort out most of the positioning problems, and I've set the position to relative on the box areas as suggested and this has worked nicely. My only real problem now is what to do about the pngs. I might just use jpgs in ie but this makes the site look a little less professional and rather boxy. Thanks. Simon __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Container Div Element Drop Shadow Effect
Can (was) CSS used to give this page's containing element the drop shadow appearance? http://www.clubcorp.com/clubs.aspx Thanks __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Container Div Element Drop Shadow Effect
TMH Design wrote: Can (was) CSS used to give this page's containing element the drop shadow appearance? http://www.clubcorp.com/clubs.aspx Left and right shadow are one image: http://www.clubcorp.com/images/shadowBg.png It's set through the home.css stylesheet. -- Els http://locusmeus.com/ http://locusoptimus.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Container Div Element Drop Shadow Effect
TMH Design wrote: Can (was) CSS used to give this page's containing element the drop shadow appearance? http://www.clubcorp.com/clubs.aspx The example page uses images for the drop shadow(disable images in your browser). A drop shadow can be done with CSS. This is /one/ method: http://www.cssplay.co.uk/menu/shadow.html. Regards, ~davidLaakso __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE5/Mac
Hi all. I have completed the redesign of www.web-buddha.co.uk. I have used browsercam (for those who don't know, sign up for a 24-hour trial - you can use it to view screenshots of your pages in a multitide of browsers). The site seems stable in all browsers on a variety of platforms apart from IE5.2/Mac. I know it's a minority browser but the page either does not load ot the layout is screwed. Anyone out there who uses this browser and/or has some initimacy with its bugs/quirks could you advise. If it is trivial I will use a band pass filter to send the amended css to that browser. -- http://www.web-buddha.co.uk dynamic web programming from Reigate, Surrey UK (php, mysql, xhtml, css) look out for project karma, our new venture, coming soon! __ 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] Container Div Element Drop Shadow Effect
Yes, CSS was used, here is the rule that controls it:
div#wrapper {
position: relative;
margin-right: auto;
margin-left: auto;
text-align: left;
width: 754px;
padding: 0 8px;
background-image: url(../images/shadowBg.png);
background-repeat: repeat-y;
}
The drop shadow was achieved with the image shadowBG.png. This image is
770px wide and 5px tall. It is then repeated down the y-axis so that the
image grows with with whatever the size of this wrapper is.
Then the shadow at the bottom is done much the same way through this rule:
div#footerWrapper {
margin: 0 auto;
padding-top: 3px;
text-align: center;
background-image: url(../images/footerBg.png);
background-repeat: no-repeat;
width: 770px;
height: 32px;
color: white;
clear: both;
}
Where the background image footerBG.png contains the shadows.
TMH Design wrote:
Can (was) CSS used to give this page's containing element the drop shadow
appearance?
http://www.clubcorp.com/clubs.aspx
Thanks
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
Joe Huggins MSW, MSCIS
University of Colorado Health Sciences Center
Clinical Science Program
(W) 303.399.8020 ext 3096
(C) 303.903.8352
__
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] IE5/Mac
It stops loading at 15kb of a 72kb image named css.jpg It actually locks the program on my Mac. The image may be corrupt. On Jun 8, 2006, at 6:47 AM, Dave Goodchild wrote: Hi all. I have completed the redesign of www.web-buddha.co.uk. I have used browsercam (for those who don't know, sign up for a 24-hour trial - you can use it to view screenshots of your pages in a multitide of browsers). The site seems stable in all browsers on a variety of platforms apart from IE5.2/Mac. I know it's a minority browser but the page either does not load ot the layout is screwed. Anyone out there who uses this browser and/or has some initimacy with its bugs/quirks could you advise. If it is trivial I will use a band pass filter to send the amended css to that browser. -- http://www.web-buddha.co.uk dynamic web programming from Reigate, Surrey UK (php, mysql, xhtml, css) look out for project karma, our new venture, coming soon! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Printable Pages
xtiandc wrote: Yup...that was it. Changed to media: all and it did the trick. Duh. Thanks! Christian. Tom Livingston [EMAIL PROTECTED] wrote: - Hide quoted text - On 6/5/06, xtiandc wrote: Is there a way to control font size/layout on printable pages? The printer is adhering to my (very) basic layout, but seems to be ignoring my font declarations. Is there a simple way to control this? Without seeing your page, are you specifying media:screen, media:all, media:screen print? -- Tom Livingston | Senior Multimedia Artist | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with a:hover
Thierry Koblentz wrote: Zoe M. Gillenwater wrote: don't have this problem because I just apply ids directly to the headings and target jump links to these ids (works pretty much everywhere except NN4). The jump part may work but this technique may break tabbing navigation in IE: http://juicystudio.com/article/ie-keyboard-navigation.php Ah, didn't know about that. Man, I hate IE. :-) Thanks, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with a:hover
David Hucklesby wrote: On Wed, 07 Jun 2006 07:38:38 -0400, Zoe M. Gillenwater wrote: I usually set a base text color for a (with no pseudo classes on it) that affects all states of all links. Then I override this color for :visited and :hover. I usually don't set anything for :active or :focus. I like this. Nice and simple - thanks, Zoe. You're welcome. I like simple. By the way, even if you do use a elements for anchors on the page, you don't have to wrap them around anything, so you don't have to risk heading text turning the color of links if you apply styles directly to the a element. But you may want to make some style change on focus in those situations that the focus lines do not show up well when tabbing thru the links. Although IE does not recognize :focus, it seems to apply :active as if it were :focus, so I would apply the same styles to both. (:active and :focus). Right, which is why I said usually don't. :-) That's a good example of a time to use :focus. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 3 column fluid, header and footer - the best layout
Hi All, I'm currently re-designing my Agriculture site (http://www.ukagriculture.com) and wanted to know what is regarded as the best fluid 3 column, header and footer layout. I seem to be in-undated with choices and can't work out which is the best option. My dev pages are here http://www.tboult.co.uk/dev/ag/ I seem to have issues with my current choice regarding the header not being consitent in IE and Firefox. This impacts the menu (DHTML menu builder) on the countryside page linked from the index page (the only link currently working). I have left a 1px border on the top div to see the difference. Any suggestions would be fantastic. Cheers Trevor http://www.tboult.co.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Problem with CSS Popup Menu jumping in I.E.
Thank you all for wonderful tips! Since signing up with this list I have learned more about CSS than in the last 6 months on my own! I am working on a new site for the city and almost have all problems tweaked, except this little doozy: sample page: http://www.ci.killeen.tx.us/menutest.asp The top right corner features a Quick Menu. When I mouseover in Firefox, Opera, and Netscape, it works like a charm. In I.E. the mouseover causes the lines to skip/move - I don't know how to describe it. The entire menu with associated styles is in an SSI file, not part of the page code. When I embed the code in the page, it has the same problem. Any comments/tips would be much appreciated. Liz Rainey Web Technology Specialist City of Killeen www.ci.killeen.tx.us __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Safari problem with border
Finishing up a template for a client, and I am new to tableless design.
There is a small problem with Safari rendering a grey line. This problems
doesnt exist in FF or other browsers. Where the issue is here.
http://www.modulestreams.com/index2.html
HTML:
div id=footer
div id=blahpnbsp;/p/div
pCopyright 2006 Elauwit. All Rights Reserved. Site design by
[whitepenny]/p
/div
CSS:
#blah
{
clear: left;
float: left;
if I change the width to 17.45em Safari loves it, but FF and Opera hates it.
width: 17.54em; /*to round off nicely on safari */
I'm out of ideas and cant seem to find anything on google that is similar,
anyone with a fresh set of eyes see something.
border-right: 1px #ccc solid;
}
#footer
{
clear: both;
}
#footer p
{
font-family: 'Myriad Roman', 'Myriad', sans-serif;
font-size: 10px;
text-align: right;
padding-top: 91px;
margin: 0;
font-size: 65%;
color: #cc;
background: transparent;
padding-right: 9.5em;
padding-bottom: 2em;
clear: right;
}
Please be nice I am a newbie and would like to keep my eyebrows and eye
lashes.
__
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] z-index question
Christian Coyly Commented: Sure thing, Robert. Here is a link: http://demo.wfp.com/v1a_prop.asp?id=19121 Please note that this very much a work in progress. The issue at hand: the contents of the fly out menu are visible on hover, the links in the main content are to the left are totally inoperable. This is because the menu occupies a space covering. My guess is I need to go back to the drawing board concerning the placement of the menu. Any feedback is appreciated. Thank you! Christian, I'm using FF v/1.5.0.4, and I get no fly outs at all. Also, there are only 2 1/4 pictures on the right. The third picture never fully loads. Dave __ 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 bug I've never encountered. please help!
Yes, I found that by changing the top of those blocks to a div as opposed to an h2 and basically position:relative'ing that and its parent divs, it seems to have fixed the issue.. However, I'm not seeing horizontal shrinking on page load in IE6 or IE7 like you described... Thanks for the reply, John Ingo Chao wrote: John Haas wrote: The site: http://qatotonetwork.newmbc.com The issue: All of the top parts of the sidebar blocks (which are actually h2 tags) are shifting leftwards about 100 pixels upon page load. It at first renders correctly, then quickly shifts to the left. To me, it looks like the entire page shrinks horizontally while page load and switching from one page to the other (IE6 standalone next to IE7) Have you fixed the initial h2 shift? Ingo __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari problem with border
http://www.modulestreams.com/6261352.jpg
http://www.modulestreams.com/6261349.jpg
are two examples.
On 6/8/06, Stephen Prater [EMAIL PROTECTED] wrote:
I'm not seeing the problem on Safari 1.3.2
On Thu, 8 Jun 2006 12:09:34 -0400, Dallas Cahker
[EMAIL PROTECTED] wrote:
Finishing up a template for a client, and I am new to tableless design.
There is a small problem with Safari rendering a grey line. This
problems
doesnt exist in FF or other browsers. Where the issue is here.
http://www.modulestreams.com/index2.html
HTML:
div id=footer
div id=blahp/p/div
pCopyright 2006 Elauwit. All Rights Reserved. Site design by
[whitepenny]/p
/div
CSS:
#blah
{
clear: left;
float: left;
if I change the width to 17.45em Safari loves it, but FF and Opera hates
it.
width: 17.54em; /*to round off nicely on safari */
I'm out of ideas and cant seem to find anything on google that is
similar,
anyone with a fresh set of eyes see something.
border-right: 1px #ccc solid;
}
#footer
{
clear: both;
}
#footer p
{
font-family: 'Myriad Roman', 'Myriad', sans-serif;
font-size: 10px;
text-align: right;
padding-top: 91px;
margin: 0;
font-size: 65%;
color: #cc;
background: transparent;
padding-right: 9.5em;
padding-bottom: 2em;
clear: right;
}
Please be nice I am a newbie and would like to keep my eyebrows and eye
lashes.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE bug I've never encountered. please help!
Ingo Chao wrote: The site: http://qatotonetwork.newmbc.com To me, it looks like the entire page shrinks horizontally while page load and switching from one page to the other (IE6 standalone next to IE7) John Haas wrote: However, I'm not seeing horizontal shrinking on page load in IE6 or IE7 like you described... I just put this IE7 thing into the waste and rebooted with a IE6 XP SP2. The page takes a breath while loading. I think it's a max width effect. Not a problem, though. Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari problem with border
correct border-right: 1px #ccc solid; adjusting the width in #blah (FF/Opera Win/Mac: width: 17.54em;) and (SF/Mac: width: 17.49em;) works. But I have to do one or the other. On 6/8/06, Chris Williams [EMAIL PROTECTED] wrote: border-right? Not just border? Or also a border-left? -Original Message- From: Dallas Cahker Subject: [css-d] Safari problem with border border-right: 1px #ccc solid; __ 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] 3 column fluid, header and footer - the best layout
David Laakso wrote: Trevor Boult wrote: I'm currently re-designing my Agriculture site (http://www.ukagriculture.com) and wanted to know what is regarded as the best fluid 3 column, header and footer layout. My dev pages are here http://www.tboult.co.uk/dev/ag/ I seem to have issues with my current choice regarding the header not being consitent in IE and Firefox. This impacts the menu (DHTML menu builder) on the countryside page linked from the index page (the only link currently working). I have left a 1px border on the top div to see the difference. Trevor http://www.tboult.co.uk Best is a matter of opinion. Nothing wrong with what you've got-- but maybe overly complex, with too many hacks? I find the 2 3 col layouts on this pagehttp://www.alistapart.com/articles/negativemargins/ work well for me cross-browser. And with care no hacking(or only minor hacking) is required. Part of the problem with header, regardless of the layout, is the way it is organized. /Think simple./ For the time, being, try stacking stuff, instead of running it side by side. The whole page, including the header, should hold a 200% zoom without breaking or overlap in a compliant browser. div id=header h1UK Agriculture/h1 h2Farming the Countryside - whats going on and why?/h2 div id = horiznavhorizontal navigation bar/div searchsearch thing/search /div!--/header-- Your left column might be wider, and your right column narrower than they are now. Is the stuff in the left column a list? Does there need to be the big space between images and text in the center column? Use headings(h1-h6) with ptext/p. No br / tags are usually needed. Avoid horizontal padding on containers that have width specified. Tidy Onlinehttp://infohound.net/tidy/, and the w3c CSS and markup validators are your best friends. Others may have better ideas, thoughts, and simpler method to resolve your question. Regards, ~davidLaakso __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Updated CSS Filter/Hack List
Tom wrote: Does Safari 2.0.3x act differently than the latest one listed? Hi Tom, I can confirm that the filters listed do perform the same in Safari 2.0.3 as might be expected. I have updated the list at www.digbyswift.com/dithered with this information. Thanks again for the request. Kieron McIntyre www.digbyswift.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE layout - losing margin on a two column layout???
Ok, after trial and error, I narrowed it down to this code snippet that's
causing the problem. If I comment the img tag out of the XHTML, the problem goes
away:
XHTML:
img src=Falturro.jpg width=118 height=177 alt=Horse charging
class=imgright /
Corresponding CSS:
img.imgright {
display: block;
float: right;
clear: left;
margin: 0 0 10px 20px; padding: 0;
}
Does that narrow down to a more specific IE issue??
Thanks!
Dave
Dave Re wrote:
Hi,
I'm a rank amateur at CSS, so please bear with me :) I'm working on
converting my existing web page to (hopefully) a pure CSS layout. I've run
into
a sticky issue with IE. Here are the pertinent links:
page: http://www.daverephoto.com/CSSTest/index.html
CSS: http://www.daverephoto.com/CSSTest/drpmain.css
Currently, none of the hyperlinks really work, etc - this is a mockup for
layout testing purposes. Ok, on to the problem.
In IE6, if I resize the window too large, everything inside
div#maincontent
loses it's margin - that is, the border of the div is suddenly on the left
side of the browser window, instead of offset to the right, clearing
div#leftnav. If I resize the browser window smaller, the proper layout
appears.
I have no idea what this does on IE5.x (Win or Mac), at this point. IE6
is
painful enough! :)
The background of div#maincontent will eventually be black, but is
different now for visibility of the problem (it's easy to lose that 1px border
on the left side of the window...).
Being new to CSS, I'm not intuiting what it is that I'm doing that's
aggravating IE, yet. And, I'm having problems finding examples that give me a
clue. It's hard enough trying to pick out how to do this in the first place,
from the myriad of examples and tips/tricks/hacks/etc that are out there...
Any help would be extremely appreciated :D
Thanks!
Dave
--
Dave Re Photography
19104 Ventana Ct, Pflugerville, TX 78660
(c) 512.771.2431 -- (h) 512.251.3815
http://www.daverephoto.com -- [EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Does a hidden element load?
Does an element hidden with css load? Yes. That may be a perhaps. If hiding means visibility: hidden I believe you are correct. But if Christy means display: none then I do know some browsers do not download the image. I don't recall which browsers, though. Sorry. If element refers to an element in (X)HTML, it will indeed load and you'll see it in the rendered source, even if its display is set to none. CSS doesn't command the existence of an element, merely its presentation. But it's an interesting question of whether background images in CSS are downloaded when the rule also includes a display:none property. I would assume yes, but it would depend on browser implementation and the order in which the properties are rendered. It might be the case that if display:none comes before background-image, some browsers wouldn't request the image file, but I would be surprised and annoyed by any desktop browser that behaved this way. It would mean display:none is being interpreted as stop reading at this point and continue to the next rule which is just plain wrong. -- Craig, www.focalcurve.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Does a hidden element load?
I'm quite sure that FF does not load elements that are set to display:none; I played around with a css-image-preloader some time ago made that experience. And I believe it to be a smart thing to do of FF, because it safes bandwidth. Craig Cook schrieb: Does an element hidden with css load? Yes. That may be a perhaps. If hiding means visibility: hidden I believe you are correct. But if Christy means display: none then I do know some browsers do not download the image. I don't recall which browsers, though. Sorry. If element refers to an element in (X)HTML, it will indeed load and you'll see it in the rendered source, even if its display is set to none. CSS doesn't command the existence of an element, merely its presentation. But it's an interesting question of whether background images in CSS are downloaded when the rule also includes a display:none property. I would assume yes, but it would depend on browser implementation and the order in which the properties are rendered. It might be the case that if display:none comes before background-image, some browsers wouldn't request the image file, but I would be surprised and annoyed by any desktop browser that behaved this way. It would mean display:none is being interpreted as stop reading at this point and continue to the next rule which is just plain wrong. __ 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 layout - losing margin on a two column layout???
In fact, it's specifically floating the image that causes the problem. If I
comment out the float, the margin of the containing div stays in the right place
(of course, the image isn't in the right spot, but...)
Anyone have a clue for me?? I obviously can't seem to find one :)
Thanks!
Dave
Dave Re wrote:
Ok, after trial and error, I narrowed it down to this code snippet that's
causing the problem. If I comment the img tag out of the XHTML, the problem
goes
away:
XHTML:
img src=Falturro.jpg width=118 height=177 alt=Horse charging
class=imgright /
Corresponding CSS:
img.imgright {
display: block;
float: right;
clear: left;
margin: 0 0 10px 20px; padding: 0;
}
Does that narrow down to a more specific IE issue??
Thanks!
Dave
Dave Re wrote:
Hi,
I'm a rank amateur at CSS, so please bear with me :) I'm working on
converting my existing web page to (hopefully) a pure CSS layout. I've run
into
a sticky issue with IE. Here are the pertinent links:
page: http://www.daverephoto.com/CSSTest/index.html
CSS: http://www.daverephoto.com/CSSTest/drpmain.css
Currently, none of the hyperlinks really work, etc - this is a mockup
for
layout testing purposes. Ok, on to the problem.
In IE6, if I resize the window too large, everything inside
div#maincontent
loses it's margin - that is, the border of the div is suddenly on the left
side of the browser window, instead of offset to the right, clearing
div#leftnav. If I resize the browser window smaller, the proper layout
appears.
I have no idea what this does on IE5.x (Win or Mac), at this point. IE6
is
painful enough! :)
The background of div#maincontent will eventually be black, but is
different now for visibility of the problem (it's easy to lose that 1px
border
on the left side of the window...).
Being new to CSS, I'm not intuiting what it is that I'm doing that's
aggravating IE, yet. And, I'm having problems finding examples that give me a
clue. It's hard enough trying to pick out how to do this in the first place,
from the myriad of examples and tips/tricks/hacks/etc that are out there...
Any help would be extremely appreciated :D
Thanks!
Dave
--
Dave Re Photography
19104 Ventana Ct, Pflugerville, TX 78660
(c) 512.771.2431 -- (h) 512.251.3815
http://www.daverephoto.com -- [EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] footerStickAlt method not working on my site
Please see http://dawkins.ctat.cs.cmu.edu/ My goal is the same as footerStickAlt [1]. I can't get this footer to stick to the bottom of the page in any browser. My guess is that this has something to do with a series of background images that are generally not being computed as part of 'height'. Or perhaps the use of absolute positioning. I'm really at a loss. Sorry there is so much to look at on this page. It's a local copy of a live site. Thanks, Brett [1] http://www.themaninblue.com/writing/perspective/2005/08/29/#content __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Class not activating color aspects
Can someone help me with this one:
ul id=navlist
lia href=/index.wsHome/a/li |
lia href=/who/index.wsWho are we?/a/li |
lia href=/why/index.wsWhy Us?/a/li |
lia href=/approach/index.wsOur Approach/a/li |
lia href=/clients/index.ws class='selected'Clients/a/li |
lia href=/talk/index.wsLets Talk/a/li
/ul
a.selected {
color: red;
font-weight: bold;
}
I get the bold, but not the red
--
-
Scott HanedaTel: 415.898.2602
http://www.newgeo.com Novato, CA U.S.A.
__
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] Class not activating color aspects
Scott Haneda wrote:
Can someone help me with this one:
ul id=navlist
lia href=/index.wsHome/a/li |
lia href=/who/index.wsWho are we?/a/li |
lia href=/why/index.wsWhy Us?/a/li |
lia href=/approach/index.wsOur Approach/a/li |
lia href=/clients/index.ws
class='selected'Clients/a/li | lia
href=/talk/index.wsLets Talk/a/li /ul
a.selected {
color: red;
font-weight: bold;
}
I get the bold, but not the red
Since you're not giving the actual context of the snippet, I can
only guess:
You probably have set a colour for ul#navlist a, and to override
it with just a class, you'd have to add the parent's selector
too. IOW, the following will probably work:
#navlist a.selected {
color: red;
font-weight: bold;
}
If not, provide a url so we can look at the rest of the code.
--
Els
http://locusmeus.com/
http://locusoptimus.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Class not activating color aspects
Since you're not giving the actual context of the snippet, I can
only guess:
You probably have set a colour for ul#navlist a, and to override
it with just a class, you'd have to add the parent's selector
too. IOW, the following will probably work:
#navlist a.selected {
color: red;
font-weight: bold;
}
If not, provide a url so we can look at the rest of the code.
I fixed the | as per the other email, tried your suggestion, did not work:
http://cbi.newgeo.com/why/index.ws
http://cbi.newgeo.com/css/main.css
Thanks for the help.
--
-
Scott HanedaTel: 415.898.2602
http://www.newgeo.com Novato, CA U.S.A.
__
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] Class not activating color aspects
On Jun 8, 2006, at 2:37 PM, Scott Haneda wrote:
Since you're not giving the actual context of the snippet, I can
only guess:
You probably have set a colour for ul#navlist a, and to override
it with just a class, you'd have to add the parent's selector
too. IOW, the following will probably work:
#navlist a.selected {
color: red;
font-weight: bold;
}
If not, provide a url so we can look at the rest of the code.
I fixed the | as per the other email, tried your suggestion, did
not work:
http://cbi.newgeo.com/why/index.ws
http://cbi.newgeo.com/css/main.css
You have this in your CSS file:
#navlist a:link, #navlist a:visited {
color: #000;
text-decoration: none;
}
#navlist a:link has the same specificity as #navlist a.selected. The
second style listed will win, so the link is black for the .selected
link. Try reversing the order of the styles in your style sheet:
#navlist a:link, #navlist a:visited {
color: #000;
text-decoration: none;
}
#navlist a.selected {
color: red;
border: 1px solid red;
}
--dave mcfarland
__
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] Class not activating color aspects
Affrternoon Scott
You wrote
Can someone help me with this one:
ul id=navlist
lia href=/index.wsHome/a/li |
lia href=/who/index.wsWho are we?/a/li |
lia href=/why/index.wsWhy Us?/a/li |
lia href=/approach/index.wsOur Approach/a/li |
lia href=/clients/index.ws class='selected'Clients/a/li |
lia href=/talk/index.wsLets Talk/a/li
/ul
a.selected {
color: red;
font-weight: bold;
}
I get the bold, but not the red
--
If all you want is bold red text for the link make these changes
in the CSS;
.selected a{ -- reverse the .selected and the A
color: red;
font-weight: bold;
}
And in the html;
ul id=navlist
lia href=/index.wsHome/a/li |
lia href=/who/index.wsWho are we?/a/li |
lia href=/why/index.wsWhy Us?/a/li |
lia href=/approach/index.wsOur Approach/a/li |
li class=selecteda href=/clients/index.ws Clients/a/li | ---
move the selector from the anchor to the * li* and use double quotes not
single..
lia href=/talk/index.wsLets Talk/a/li
/ul
Tested locally in FF 1.5.0.4 and IE 6.0 win xp pro sp2...
hth
Jim Nannery
owner - www.backporchgames.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Class not activating color aspects
li class=selecteda href=/clients/index.ws Clients/a/li | --- move the selector from the anchor to the * li* and use double quotes not single.. Is there any solid ref on use of ' over in html and css? Thanks for the help with the other stuff, got it working now. -- - Scott HanedaTel: 415.898.2602 http://www.newgeo.com Novato, CA U.S.A. __ 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 layout - losing margin on a two column layout???
Gunlaug Sørtun wrote: br style=clear: both; font-size: 1px; line-height: 0; height: 0; / ...and even IE will clear properly and stop adding width to the container. Georg, You are definitely the man - that fixes it, thanks! It does add a small amount of space into the document, pushing the text down some. Any way to correct that at all?? Damn IE anyway... :D Give that clearing br / a proper class for those styles, and don't bother trying to use another element for that clearing. By this, do you mean use this br / tag workaround instead of using clear: left; or clear: right; in my img styles? -- Dave Re Photography 19104 Ventana Ct, Pflugerville, TX 78660 (c) 512.771.2431 -- (h) 512.251.3815 http://www.daverephoto.com -- [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE layout - losing margin on a two column layout???
Dave Re wrote: It does add a small amount of space into the document, pushing the text down some. Any way to correct that at all?? You can try to pull up the image and paragraph below the clearing by a few pixels - using negative margin and/or just adjusting the styles you've got. Damn IE anyway... :D Oh, it's such a nice bughouse... err... browser. Wouldn't be many challenges left in web design without it :-) Give that clearing br / a proper class for those styles, and don't bother trying to use another element for that clearing. By this, do you mean use this br / tag workaround instead of using clear: left; or clear: right; in my img styles? Correct. And move those inline-styles I used, to your stylesheet. There are many cases when nothing but a styled br / element will make an impression on IE/win, for reasons found in its buggy history, I guess. That's /one/ reason why I still use that br-element for clearing a lot, even though it may make sense to use other solutions. IE simply doesn't react sensibly, and I'm tired of arguing with its buggy engine. Now, is there a chance IE-users could be allowed to resize that text too? :-) Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Jumping DIV in IE
Hi list! I'm having a strange problem with a jumping, floated/positioned div in IE 6 (and possibly lower). On the page: http://clarkson.edu/projects/nanobird/3.4.php (CSS: http://clarkson.edu/projects/nanobird/style.css and http://clarkson.edu/projects/nanobird/style_ie55.css) the Section Progress box in the upper right-hand side (id=nav-progress-container-a) doesn't like to play nicely like in Safari and Firefox. When I just use the normal style.css styles, IE6 places the nav-progress-container-a div off the right side of the page, even with the top of the navbar instead of placing it directly underneath. I found a fix that I thought was working by positioning it absolutely with right: 0 (done in the style_ie55.css sheet). However, then I noticed that the box is initially drawn covering the search bar (the bottom half of the navbar) and only when the page is resized or one of the links are rolled over does it jump down to its proper home. I thought it might be a hasLayout issue so I added zoom: 1; to everything I could think of, but that didn't seem to do anything. The div already has layout (seen through the IE DOM Toolbar). Can anyone help me with this, or suggest a better way of getting the box to stay just below the navbar? Thanks! --Peter Bird-- __ 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/
