Re: [css-d] Table extending past window, DIV does not
Will Budreau wrote: Updated version posted at a better URL - any suggestions why this otherwise ideal fix doesn't work in IE7? http://web.mac.com/binain/example/tablewiderthandiv.html I have no IE7 to test in, but your styling is incomplete. 1: IE 6 7 doesn't understand 'display: table;'. That property is for the good browsers, like Firefox, Opera, Safari etc. 2: IE7 may need the property you left out: 'zoom: 1;', in order to gain 'Layout'[1] and expand properly. regards Georg [1]http://www.satzansatz.de/cssd/onhavinglayout.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] Div show/hide
Seen the rant. I agree that links to content should be, at their core, plain links that would, absent JavaScript, take you to a new page with the content, said behavior then available to be modified by JavaScript to do something else, preferably without making the core behavior inaccessible even in JavaScript-enabled contexts. If I were writing the page, I would go further along the principles of non-intrusive JavaScript and not use the onclick attribute in HTML, either, but instead assign the link an ID and then have initialization code in an external script file set its onclick property. But not everyone is me, and not all web authors are as reluctant to mix code in with their markup, and the javascript: protocol is a handy way to get behavior instead of content out of a link. Contrary to the youngpup rant, even if I had absolute power over all web authors I would not ban javascript:. I would suggest that it be used only for the more purely behavioral functions - things that look like buttons or widgets and not normal hyperlinks, which only do things within the page rather than opening up a different page (even in a popup/tooltip), etc. __ 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] IE6 and position relative
If I remove position relative from the wrapper, everything goes back into place. It's really odd and only happens in IE6. I discovered it while working with YUI. It's being used in a CMS that generates the form. YUI creates a resizable text area that, unless positioned absolutely, is positioned relatively. Diona On Dec 11, 2006, at 4:33 PM, Rob O'Rourke wrote: Diona Kidd wrote: Hi all, I noticed an issue today with IE6. I have an example created at http://www.studio12a.com/test.html. The situation is as follows. I have a wrapper div around all content with position: relative. Inside of this, exists a form wrapped in a table. The form contains a text area with a div wrapped around the textarea. This div has position: relative associated with it. In this current setup, the textarea flows out of the expected position in IE6 only. However, if I add position: relative to the table, everything is as expected. I'd like to understand why this is occurring. Is a different DOM implementation or table spec implemented in IE6 that was corrected in IE7 (and doesn't exist in other browsers)? It's as if IE6 ignores the table as a container element. Any thoughts? Diona --- www.studio12a.com Thats an interesting one! I don't have an answer I'm afraid but out of curiosity what happens when you remove position: relative; from the outer divs? I find that too much position relative can be a bad thing =] Rob __ 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] Site Check - www.nsbhs.nsw.edu.au
[EMAIL PROTECTED] wrote: Hi all, I've just finished this website, I suggest putting the site link in the email body, some mail clients may not readily allow copying and pasting from the subject line! http://www.nsbhs.nsw.edu.au and to the best of my knowledge everything is XHTML and CSS valid. Valid, yes, but why are there so many empty spans in there? I'd suggest turning of the full justification on the text in your column. You don't have enough words, the column is too narrow, browsers generally don't microspace, AND computer screens don't really have enough resolution to do full-justified text properly. I've tried to make the site as accessible as I can, but I'm requesting a site check just in case I've missed anything. Looks quite accessible to me in Fangs, so I'd guess your JAWS visitors will be happy. -- David [EMAIL PROTECTED] authenticity, honesty, community __ 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] Mysterious invisible object obscures text in IE6
Gunlaug Sørtun wrote:
Barney Carroll wrote:
http://sandbox.test.textmatters.com/bssh.html
My client has been uploading content (such as this) and emailed me to
point out a bizarre problem whereby a link he had made wasn't
clickable in IE6. I thought 'Hahaha - silly little IE' (all other
browsers are fine) but it's actually a serious problem.
Adding...
#content { position: relative;}
...works well in IE6 at my end, so it's probably a stacking-problem.
Thank you so much. The problem is integral document flow and I go
looking at a specific area with a microscope!
Thanks also to David - this method deals with the root of the problem in
a cleaner way.
Cheers,
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] IE float problem
Hi everybody, I wonder if someone could take a peek at the following url and tell me why my left floated menu is pushing content below it (as if it had 'clear' applied to it) in the content area to the right, only in IE. http://www.medicineshoppesarnia.com/question_answer_corner/ Thanks alot. !! __ 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] Suckerfish IE7 non-stick problem
I have a suckerfish IE7 non-stick problem. One of my clients likes an inside suckerfish menu style, where the submenu is displayed within the parent menu. Here's how it looks in FF2: http://datagnostics.com/test/IE7test.html Of course, it needs JS to work in IE7. But it also needs to have an item of defined height after the list to display properly in IE; otherwise, the submenu collapses as soon as you mouse away from the parent item, and you can't actually click the links, as happens here: http://datagnostics.com/test/IE7testNo.html IE7 no longer needs the JS (yay), but I can't seem to keep the submenus from collapsing in IE7. Most of the discussion I've googled seems to be about IE7 displaying submenus for too long, but I have the opposite problem: I need the submenu to display long enough. What should I do, and how should I do it? Mary Ellen Doctor Science, MA __ 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 show/hide
I'm using the following to show/hide a div when I click on a hyperlink:
function ShowHideLayer(divID) {
var box = document.getElementById(divID);
if(box.style.display == none || box.style.display==) {
box.style.display = block;
}
else {
box.style.display = none;
}
}
The div/link in question is here: http://www.redcanoecu.com/rates.asp
and right after the Rates table you'll see a link called Truth In
Savings. What I want is for the hidden div to smoothly appear below
the link when clicked but it refreshes the page instead and starts back
at the top of the document. Anyone know how I can enhance this thing to
make it smoothly expand and collapse?
Russ
__
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 show/hide
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Mark J. Reed Sent: Monday, December 11, 2006 8:57 PM To: Andy Pemberton Cc: Russ Peters; css-d@lists.css-discuss.org Subject: Re: [css-d] Div show/hide Seen the rant. I agree that links to content should be, at their core, plain links that would, absent JavaScript, take you to a new page with the content, said behavior then available to be modified by JavaScript to do something else, preferably without making the core behavior inaccessible even in JavaScript-enabled contexts. If I were writing the page, I would go further along the principles of non-intrusive JavaScript and not use the onclick attribute in HTML, either, but instead assign the link an ID and then have initialization code in an external script file set its onclick property. [snip] Thank you all for responding..yes, now it's obvious this is more of a JavaScript question versus a CSS question. I was focused on the display:none/display:block functionality and not the real problem which was the javascript. It's a great point that for usability I need to give the user access to that information if they have scripting disabled. I'm going to try and either incorporate a link into the url with the onClick attribute or modify the script. If helpful I'll post my shot at fixing this unless this should move over to the javascript list. Russ __ 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] IE6 and position relative
Diona Kidd wrote: If I remove position relative from the wrapper, everything goes back into place. It's really odd and only happens in IE6. I discovered it while working with YUI. It's being used in a CMS that generates the form. YUI creates a resizable text area that, unless positioned absolutely, is positioned relatively. Diona Bizarre, isn't it? Having said that I still have some fundamental questions concerning the relationships between objects with different positioning, sadly all the time I have is in practice, not in theory! I end up learning fixes but not the logic behind them... (What's YUI?) 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] Can I disable the style sheet just for the menu?
For a long time now I've wanted to learn how to create drop down menus. I tried many CSS based methods but never got them working, so last Friday I decided to give the Sothink dhtml menu tool a try. Using the tool as an ad in to Frontpage, I created an include page at http://www.ncmhcso.org/includepages/include.htm. I created a DWT using the above include page, and then the final product is at a test page http://www.ncmhcso.org/test-inner.htm. Take a look at this and you will see that the menu is much more expansive than the include page. I think what's happening is that it's being governed by the style sheet. I'd prefer to control the menu using the tool, and I'm fearful of making major changes to the style sheet. Is there a quick and easy way to disable the style sheet just for the menu? Tom Rogers Tom Rogers Web Design __ 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 Check - www.nsbhs.nsw.edu.au
I've just finished this website, and to the best of my knowledge everything is XHTML and CSS valid. Your menu button for ENROLLMENTS has a typo. __ 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/ _ Get the latest Windows Live Messenger 8.1 Beta version. Join now. http://ideas.live.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] Identical IE browsers displaying differently
I'm not even sure how to troubleshoot this but I have a departmental web site displaying differently on identical versions of IE6. On my machine, it looks fine; on the department head's machine, all the main content is shoved to the bottom of the page so that it clears the left hand menu. I'm pretty sure both machines are running XP Pro with Service pack 2 installed. I'd almost be willing to brush it off as his machine not being properly configured but there are at least 2 other machines in the same building showing the same issue. The site is http://www.shs.uiuc.edu and the relevant CSS http://www.shs.uiuc.edu/css/base.css and fonts.css. I think the problem first appeared after I added the background image to the h1 tag but I have 3 other sites similarly constructed that don't have this problem (www.ahs.uiuc.edu, www.kch.uiuc.edu, and www.rst.uiuc.edu). Any help will be greatly appreciated. -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] Using an Image in a H1 tag
Hi
I am trying to use the following css to replace the h1 text with the
logo.gif graphic, however the text 'Restaurant' is still appearing on top of
the
logo.gif graphic?
What do I need to add to my css to get rid of this ?
#header h1{
height: 142px;
width: 292px;
float: left;
background-image: url(logo.gif);
background-repeat: no-repeat;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
padding: 0px;
}
div id=header
h1a href=index.php
title=Restaurant/aspan/spanRestaurant/a/h1
/div
__
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 menu drops behind content div -- how to fix?
At 03:07 PM 12/12/2006, you wrote:
I'm using a CSS P7 menu on this draft page and it is dropping down
behind the content div.
Peg
ambientglow.com
__
Hi Peggy,
Try changing this in your main.css:
#nav {
z-index: 16;
Tested it and it worked.
Regards
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] cross-browser font-size solution
Hi all.
This is my first post in this mailing list.
I'm looking for solution to set same font-size in as more as possible
browsers. There are 3 i use for testing on my comp: IE6, Opera9,
FF2.0.
And i use ALA markup:
-
body, body div, body p, body th,
body td, body li, body dd{
/* more specific to override imported rule */
font-size:x-small;
/* false value for WinIE4/5 */
voice-family: \}\;
/* trick WinIE4/5 into thinking rule is over */
voice-family: inherit;
/* recover from trick */
font-size:small
/* intended value for better browsers */
}
htmlbody, htmlbody div, htmlbody p,
htmlbody th, htmlbody td,
htmlbody li, htmlbody dd{
font-size:small
/* be nice to Opera */
}
html { font-size:100%; font-size: 62.5%; font-size:101%} /* for IE */
htmlbody { font-size: 100%; } /* ignored by IE */
-
then i set all element with same size:
* {font-size:100%}
and set font-size's for necessary elements
like h1, h2, h3, li, p
is there better way to do it?
__
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] IE6 div problem
I'm having trouble finding the reason that IE6 displays this page differently than Firefox 1.5. Firefox displays it as I intended, with both divs side by side; however in IE6, the div #right-side-content appears BELOW the #left-side-content div. http://www.tusculum.edu/azindex.html Here are the stylesheets: http://www.tusculum.edu/css/new/openbox.css http://www.tusculum.edu/css/new/openlayout.css The page does validate, so I am not sure what I need to do to fix this. Thanks -- Travis Crabtree Webmaster Tusculum College phone: 423.636.7300 ext. 5132 fax: 423.636.7492 email: [EMAIL PROTECTED] __ 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] Site Check and suggestions
Hi all, I need some suggestions for this page I designed: http://adriaticamalagoli.it/cerco 1) Do you think I implemented the form correctly? I used a lot of css and the end result is a table. Maybe I could use a table there? 2) What do you think of the overall design? __ 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] Mysterious invisible object obscures text in IE6
~davidLaakso wrote:
Barney Carroll wrote:
http://sandbox.test.textmatters.com/bssh.html
[...a bizarre problem whereby a link he had made wasn't clickable in
IE6...]
a { position: relative; add
text-decoration: underline;
color: #3996ce;
}
Regards,
~dL
Instead of above, adding this selector might be better:
p a {
position: relative;
}
~d
--
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] Problem with IE6 divs
TCrabtree wrote:
I'm having trouble finding the reason that IE6 displays this page
differently than Firefox 1.5. Firefox displays it as I intended, with
both divs side by side; however in IE6, the div #right-side-content
appears BELOW the #left-side-content div.
http://www.tusculum.edu/azindex.html
Those nested unordered lists are full width and with a margin. IE6
expands columns to make space for the extra width, while better browsers
respect given column-width.
Simplest solution is of course to make IE6 imitate the better browsers,
by adding...
#left-side-content, #right-side-content {overflow-x: hidden;}
...which will prevent horizontal expansion in IE6, but you should do
something about the width of those lists too.
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] IE6 and position relative
Diona Kidd wrote:
If I remove position relative from the wrapper, everything goes back
into place. It's really odd and only happens in IE6. I discovered it
while working with YUI. It's being used in a CMS that generates the
form. YUI creates a resizable text area that, unless positioned
absolutely, is positioned relatively.
I noticed an issue today with IE6. I have an example created at
http://www.studio12a.com/test.html.
If I understand your case correctly, then it goes something like the
following.
- IE6 often needs the combination of 'position: relative' _and_
'Layout'[1] on a container. Otherwise it may lose track of where to
position wrapped elements.
- The wrapper-div needs a 'hasLayout' trigger in your case.
- A table triggers 'Layout' by default, so no additional 'hasLayout'
trigger is needed.
Solution - add...
#wrapper {zoom: 1;}
...and make IE6 behave.
IE7 is given fixes for a few of the 'Layout' and 'positioning' related
bugs we know from IE6, but not for 'Layout' itself.
Now, I'm not sure why you needed that 'position: relative' at all, but
that's another matter. Plenty of IE-bugs related to that property though.
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.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/
[css-d] IE prints gray instead of white against black background image
Could some kind soul please tell me why IE prints gray instead of white against black background image. It seems to print okay on other browsers. Test URL - http://uk-web-pros.co.uk/test/index.html Many thanks! Mike A. __ 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] Site check [THANKS FOR ALL FEEDBACK!]
Thanks everyone for giving feedback! A. __ 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 an Image in a H1 tag
Ahhh .
You might wanna fix this in your markup:
div id=header
h1a href=index.php title=RestaurantRestaurant/a/h1
/div
I removed the span tags an a /a
// Sebastian
www.dammark.net
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Sent: 12. december 2006 23:42
To: Sebastian Dammark
Subject: Re: [css-d] Using an Image in a H1 tag
Thanks, tried what you suggested but the text is still showing on top of the
graphic?
---
Hi
Try adding this selector
#header h1 a {
display: none;
}
Hi
I am trying to use the following css to replace the h1 text with the logo.gif
graphic, however the text 'Restaurant' is still appearing on top of the
logo.gif graphic?
What do I need to add to my css to get rid of this ?
#header h1{
height: 142px;
width: 292px;
float: left;
background-image: url(logo.gif);
background-repeat: no-repeat;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
padding: 0px;
}
div id=header
h1a href=index.php title=Restaurant/aspan/spanRestaurant/a/h1
/div
__
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] Table extending past window, DIV does not
Philippe Wittenbergh wrote:
http://web.mac.com/binain/example/tablewiderthandiv.html
2: IE7 may need the property you left out: 'zoom: 1;', in order to
gain 'Layout'[1] and expand properly.
Eh ? No. 'haslayout' does a couple of stupid things, but not that
one.
Pity, since it might actually be useful with such a stupidity in cases
like this. I'll make a note of it.
IE 7 handles 'width' and 'width:auto' reasonably correctly, and
doesn't expand the element to accommodate the table
Using 'float:left' width *no width* declared does the trick for IE 7.
Looks like the resulting style should be...
.content {
border: solid 1px #BCCF78;
background-color: #FF;
display: table;
float: left;
}
...then, so we don't leave any major browser behind.
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] IE 7 Survey- what seems the major thing needs fixing in your CSS?
I haven't upgraded any of my testing machines to IE 7 yet, but I got an eye opener over the weekend at a friend's house. First time I've seen IE 7, and half the sites we surfed using CSS layouts were BROKE. Seems I better upgrade and quick to start previewing! So, just a quick survey - 1. Out of all your existing sites, what seems most broke that you've having to go back in and fix? 2. Is anybody finding that they need to feed completely different CSS to IE 6 than IE 7 to get things to work in both? For example - one of my older sites: http://www.columbiacityjazz.com/ Testing and pretty much working in everything until I saw it in IE 7 over the weekend... __ 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] IE6 and position relative
Diona Kidd wrote:
Hi all,
I noticed an issue today with IE6. I have an example created at
http://www.studio12a.com/test.html.
The situation is as follows. I have a wrapper div around all content
with position: relative. Inside of this, exists a form wrapped in a
table. The form contains a text area with a div wrapped around the
textarea. This div has position: relative associated with it. In this
current setup, the textarea flows out of the expected position in IE6
only. However, if I add position: relative to the table, everything
is as expected.
I'd like to understand why this is occurring. Is a different DOM
implementation or table spec implemented in IE6 that was corrected in
IE7 (and doesn't exist in other browsers)? It's as if IE6 ignores the
table as a container element.
Any thoughts?
Diona
---
www.studio12a.com
I have recently been working on similar problems.
Seems that it has to do with elements having layout
Google hasLayout and you will find some good information about it.
This is also known as the Holly Hack
To solve this problem directly, you need to give layout to an ancestor of
the item that you are having trouble with.
A simple way to give an element layout is to give it some height.
I usually set the height property to 1% or 1px. The element will expand to
hold its contents in ie6.
You will probably need to hide this from other browsers, so I usually do
something like * html .class {height:1%}
So if you add this rule
* html #wrapper{
height:1%;
}
After the #wrapper rule, all should be fine
-sorry if this double posts
__
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 show/hide
On 12/11/06, Andy Pemberton [EMAIL PROTECTED] wrote:
Russ:
Though this is more of a javascript/html dom question, I'll answer anyway.
You must return false in the 'onclick' method of the link you're using to
fire this javascript event. This will prevent the browser from following the
href attribute.
So your markup should look like:
a href=# onclick=ShowHideLayer('TISdata'); return false; Truth
In Savings Disclosure/a
I'd also argue, however, that you should include the URL of a page that has
this dynamic content in place. This will enable browsers without javascript
or that have javascript disabled to view the content.
Good point. You can safely combine them...
a href=url-for-non-javascript-browsers
onclick=functionForJavascriptBrowsers(); return falseClick here/a
In some cases, the page is a total loss to non-javascript browsing,
which is best handled by directing those users to another page
entirely in the first place. If that's the case, you can assume
javascript for the page in question and simplify the above to this:
a href=javascript:functionForJavascriptBrowsers()Click here/a
No onclick handler or false return value needed - the javascript: uri
method causes the function to be invoked when the link is clicked,
with no other action taken.
Hope this helps,
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/
--
Mark J. Reed [EMAIL PROTECTED]
__
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 an Image in a H1 tag
Hi Ian What do I need to add to my css to get rid of this ? div id=header h1a href=index.php title=Restaurant/aspan/spanRestaurant/a/h1 /div Remove the word Restaurant after the /span and before the /a. -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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] alternating coloured rows in dynamic website
Have site with alternating colours in dynamic website using php. Want to change the code to css. code as follows: $bg = ($bg=='#ee' ? '#F9FBF9' : '#ee'); // Switch the background color. tr bgcolor=$bg I know it is a table, but it for tabulating results. It is one of pages in Zen Cart which I am designing to my own design. So how do I change the above to something more style friendly? Cheers Ian **IMPORTANT* *** This e-mail contains information which is confidential and may also be privileged. It is for the exclusive use of the intended recipient(s). If you are not the intended recipient(s) please note that any form of, distribution, copying or use of this e-mail or the information in it is strictly prohibited and may be unlawful. If you have received this in error please inform us at the above address then delete the e-mail and destroy any copies of it. Thank you. -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.432 / Virus Database: 268.15.16/582 - Release Date: 11/12/2006 16:32 __ 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] alternating coloured rows in dynamic website
Have site with alternating colours in dynamic website using php. Want to
change the
code to css.
code as follows:
$bg = ($bg=='#ee' ? '#F9FBF9' : '#ee'); // Switch the background
color.
tr bgcolor=$bg
I know it is a table, but it for tabulating results. It is one of pages in
Zen Cart
which I am designing to my own design.
So how do I change the above to something more style friendly?
Cheers
Ian
How about setting a different class for the odd and even rows?
tr class=odd_row
or
tr class=even_row
Then the CSS:
tr.odd_row {
background-color: #ee;
}
tr.even_row {
background-color: #f9fbf9
}
- Matt
__
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] IE6 and position relative
Diona Kidd wrote: If I remove position relative from the wrapper, everything goes back into place. It's really odd and only happens in IE6. I discovered it while working with YUI. It's being used in a CMS that generates the form. YUI creates a resizable text area that, unless positioned absolutely, is positioned relatively. Diona On Dec 11, 2006, at 4:33 PM, Rob O'Rourke wrote: Hi Diona, I've got a hunch that it's something to do with the time it takes to render the page, so it spits out the html and perhaps positions the textarea before it applies the rest of the css dimensions i.e. the height of the content before the form in your demo. It's the only explanation i can come up with anyway but knowing IE6 seems the most likely to me. Someone correct me if i'm wrong. Rob O __ 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 Check - www.nsbhs.nsw.edu.au
Using Safari Version 2.0.4 (419.3) on my Mac, the only problem I see is the Access the Intranet at home box on the index page. The header wraps and actually the word home obscures Username. Otherwise, it looks good. Nice and clean. -- Bill Napier http://www.billnapierdesign.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] Padding missing in IE6 quirks mode
If you view http://www.yammr.com/padding.html in IE, you will see that the image has no padding. Is there a workaround for this? Unfortunately due to some DOM bugs I can't get figured out I can't use a strict doctype for IE. I can easily put a div around the image, but wondered if anyone had the skinny on this. Here is a strict version: http://www.yammr.com/padding-strict.html Thanks Pete __ 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] Page divs cause background overflow
This must be a descriptive post as FTP problems prevent me from posting a live
site to check.
I have a web page with a 1280x1024 background picture set to repeat. If a
user's screen is smaller, they won't see a difference and if larger, they'll
only see repeating around the edges.
When the central content area holds a menu list with only text entries, even
though the window is scrolled to view the entire page, the background remains
in place. Note that the menu has not extended past the boundaries of the
background picture.
If pictures are added to the menu rows, causing the central content area to
extend past the background boundaries and hence cause background repeats, the
background picture shifts downward, with a section of the upper picture at
the top then the entire background then a portion of the lower picture. Very
choppy and ugly.
The following css definitions modify the page:
img.displayed
{ display: block;
margin-left: auto;
margin-right: auto }
body
{ background-image: url('yoni-modded.jpg');
background-repeat: repeat;
background-position: center center;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0; }
#header
{ padding-left: 2%;
padding-right: 2%;
position: float; }
#contentarea
{ clear: both;
padding-left: 5%;
padding-right: 5%; }
The menu is located within the contentarea, so my first thought is that my div
are defined wrongly. Why would a background picture overflow by the
contentarea cause such a problem?
If anyone can make a picture out of my words and recommend any changes, I am
indebted.
Thanks, Bob
__
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] alternating coloured rows in dynamic website
Ian Young wrote:
Have site with alternating colours in dynamic website using php. Want to
change the code to css.
code as follows:
$bg = ($bg=='#ee' ? '#F9FBF9' : '#ee'); // Switch the background
color.
tr bgcolor=$bg
I know it is a table, but it for tabulating results. It is one of pages in
Zen Cart which I am designing to my own design.
So how do I change the above to something more style friendly?
I'd do it something like this:
$rowClass = ($rowClass=='odd' ? 'even' : 'odd');
tr class=$rowClass
Untested, YMMV, etc.
Then you can alter the background colors in the stylesheet and make
other changes as well if you decide you want them later.
So,
tr.odd {background-color: #eee}
tr.even {background-color: #F9FBF9]
--
Steve Clason
Boulder, Colorado, USA
(303) 818-8590
__
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 show/hide
Ah, that method will work, Mark - but I would argue against using the javascript pseudo-protocol for a production site. The reason has to do with usability. Often times, embedding the javascript pseudo protocol in a link will prevent users from being able to right click and open the link in a new window. This feature is used quite heavily on the web and it's definitely something users do regularly on the web. For further information, and a rant on the subject - please read this: http://boring.youngpup.net/2003/popups 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/
Re: [css-d] alternating coloured rows in dynamic website
Have site with alternating colours in dynamic website using php. Want to
change the code to css.
code as follows:
$bg = ($bg=='#ee' ? '#F9FBF9' : '#ee'); // Switch the background
color.
tr bgcolor=$bg
I know it is a table, but it for tabulating results. It is one of pages in
Zen Cart which I am designing to my own design.
So how do I change the above to something more style friendly?
Cheers
Ian
How about setting a different class for the odd and even rows?
tr class=odd_row
or
tr class=even_row
Then the CSS:
tr.odd_row {
background-color: #ee;
}
tr.even_row {
background-color: #f9fbf9
}
- Matt
__
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] Mysterious invisible object obscures text in IE6
Barney Carroll wrote:
http://sandbox.test.textmatters.com/bssh.html
My client has been uploading content (such as this) and emailed me to
point out a bizarre problem whereby a link he had made wasn't
clickable in IE6. I thought 'Hahaha - silly little IE' (all other
browsers are fine) but it's actually a serious problem.
Adding...
#content { position: relative;}
...works well in IE6 at my end, so it's probably a stacking-problem.
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] alternating coloured rows in dynamic website
Generally, I like to add a style rule for regular TRs and then a class for
either TR.odd or TR.even (whichever you'd like).
tr{
background-color: #eee;
}
tr.odd{
background-color: #ccc;
}
This way, you only need to print out the 'class=odd' on the odd rows,
which makes your pages smaller and perhaps less complicated.
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/
Re: [css-d] Table extending past window, DIV does not
On Dec 12, 2006, at 10:31 PM, Gunlaug Sørtun wrote:
IE 7 handles 'width' and 'width:auto' reasonably correctly, and
doesn't expand the element to accommodate the table
Using 'float:left' width *no width* declared does the trick for IE 7.
Looks like the resulting style should be...
.content {
border: solid 1px #BCCF78;
background-color: #FF;
display: table;
float: left;
}
...then, so we don't leave any major browser behind.
Actually, the float trick works in all modern browsers here.
And , when you think of it, it is kind of logical: (when) the floated
block has no width specified, and expands to fit the content, the
same way as it would shrink to fit if the table (or other contents)
were very small.
Of course, one has to take the particular characteristics of floats:
they are removed from the flow. As such, using float may have adverse
effects on the layout.
(personally, I'd prefer display:table anyway, keeping the float trick
for IE7 only)
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] Sliding doors with button type=submit tag
Hi,
I'm trying to apply the sliding doors technique to the
button type=submit tag, with only 1 image.
It nearly works, the only problem remaining is that we can see the
underlying image through the image which is above, as the background of
the image is transparent.
I want the image background to be transparent, as the background color
of the element containing the button can be different throughout the site.
Does anyone know how not to see the underlying image through the image
on top?
Here is the code, and the image is attached.
Thanks in advance.
html
head
link rel=stylesheet type=text/css media=screen title=neuf
href=/styles/test.css /
/head
body
br /
br /
form
span class=button_submitbutton type=submit name=submitsubmit
1a/button/span
nbsp;
span class=button_submitbutton type=submit name=submitsubmit
1b/button/span
/form
/body
/html
* {
padding: 0;
margin: 0;
background-color: #ccc;
}
.button_submit {
display: -moz-inline-box;
display: inline-block;
background: transparent url(/images/button_submit.png) no-repeat left
top;
height: 28px;
padding-left: 9px;
}
.button_submit button {
background: transparent url(/images/button_submit.png) no-repeat right
top;
overflow: visible;
border: 0;
height: 28px;
padding: 6px 16px 6px 6px;
font-weight: bold;
color: #296194;
cursor: pointer;
}
.button_submit button:hover {
color: #fff;
}
__
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] Opera - continuing woes
Hi everyone, I sent this through yesterday and this morning and it didn't arrive so here's hoping this time. Now have an additional Opera problem: First problem: The footer div with an image doesn't show in Opera, have tried everything to no avail. Second: The page is a shopping cart and each product is within a div with a class attribute which in turn is inside a content div (named ufwus). The second product shows outside of the ufwus div and without the fonts etc. Here's the page http://www.seco.com.au/cart.html and the CSS http://www.seco.com.au/styles/hygiene.css I had a heap of problems with IE and now after a lot of messing about that seems to be in order, Firefox is fine but Opera 9.02 is a problem (just downloaded the 9.02 after it not working in 8.0). Can anyone shed some light on this? Getting desperate now and the programmer is waiting on me finishing the CSS before he PHPs the cart Many thanks Vicki I'd put my money on the Sun and solar energy. What a source of power! I hope we don't have to wait until oil and coal run out before we tackle that. -Thomas Edison \(.)^(.)/ --0-- Keenstreet Communications http://www.keenstreet.com.au __ 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] Padding missing in IE6 quirks mode
Pete Lasko wrote:
If you view http://www.yammr.com/padding.html in IE, you will see
that the image has no padding. Is there a workaround for this?
Unfortunately due to some DOM bugs I can't get figured out I can't
use a strict doctype for IE. I can easily put a div around the image,
but wondered if anyone had the skinny on this. Here is a strict
version: http://www.yammr.com/padding-strict.html
Thanks
Pete
I asked the same thing several weeks ago. This works in /most/ but not
necessarily all situations in quirks:
Add these rule sets to your css and open and close the img with span in
the markup.
* html span {border: 1px solid #FF0068;}
* html img {border: 10px solid #000;}
spanimg src=http://www.yammr.com/images/logo.gif; alt= //span
Best,
~dL
PS AFAIK it can't be done without the span.
--
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] Padding missing in IE6 quirks mode
From: Pete Lasko [EMAIL PROTECTED] If you view http://www.yammr.com/padding.html in IE, you will see that the image has no padding. Is there a workaround for this? Unfortunately due to some DOM bugs I can't get figured out I can't use a strict doctype for IE. I can easily put a div around the image, but wondered if anyone had the skinny on this. Here is a strict version: http://www.yammr.com/padding-strict.html Are you saying you can't use a /complete/ doctype, or are you saying you can't use an XHTML doctype? Because the strict one you've shown is actually a transitional doctype for XHTML. If you mean that you cannot use XHTML, then why not use a complete HTML doctype instead. Is it the system identifier (the address part) that is causing the problem? If so, then your best bet is to go with David's suggestion. If it's a difference between being able to use XHTML versus good old HTML, then if you're able to use a complete HTML doctype, IE6 will fall in line with the padding. http://www.communitymx.com/content/article.cfm?cid=E2F258C46D285FEE ~holly __ 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] hover state, background-image discrepancy
Mark Kamian wrote: Hi, I'm having a heck of a time determining why when hovering over the non-active nav-menu buttons, the background image is displaying slightly different shades. It's the same image, so perhaps it's something else I'm not seeing... http://www.idxsolutions.com/default3.asp http://www.idxsolutions.com/css/idxsol2.css Any ideas to set me straight on this? TIA! Hi Mark, It is the moiré effect in the hover image (nav-hov.gif), depending on the the horizontal position of the list items. This is caused by the transparent dotted pixels in the hover img, which are enabling the background behind to peep through. But that bg-img (nav-bg.gif) is also a dotted img. If you change margins/paddings of the menu items, or change the browser font-size, the horizontal position of the hover-img related to the background is shifting 1 or more px. The combination can be a hit, can be no hit, by accident. Then the different shades of the hovers are changing places. :-) When enlarged 5 times, you can see this: * http://home.tiscali.nl/developerscorner/css-discuss/images/moire-effect.gif *%20%20http://home.tiscali.nl/developerscorner/css-discuss/images/moire-effect.gif What you can do, is just fill the transparent dots in the hover-img with a solid color. Success and greetings, francky PS: Don't underestimate a screenshot for analyzing strange webpages http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-idx-5x.png: enlarge in a paint program to see what is really happening. ;-) __ 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] IE6 and position relative
Date: Mon, 11 Dec 2006 21:33:43 +
From: Rob O'Rourke [EMAIL PROTECTED]
Subject: Re: [css-d] IE6 and position relative
To: css-d@lists.css-discuss.org
Message-ID: [EMAIL PROTECTED]
Content-Type: text/plain; charset=UTF-8; format=flowed
Diona Kidd wrote:
Hi all,
I noticed an issue today with IE6. I have an example created at
http://www.studio12a.com/test.html.
The situation is as follows. I have a wrapper div around all content
with position: relative. Inside of this, exists a form wrapped in a
table. The form contains a text area with a div wrapped around the
textarea. This div has position: relative associated with it. In this
current setup, the textarea flows out of the expected position in IE6
only. However, if I add position: relative to the table, everything
is as expected.
I'd like to understand why this is occurring. Is a different DOM
implementation or table spec implemented in IE6 that was corrected in
IE7 (and doesn't exist in other browsers)? It's as if IE6 ignores the
table as a container element.
Any thoughts?
Diona
---
www.studio12a.com
I have recently been working on similar problems.
Seems that it has to do with elements having layout
Google hasLayout and you will find some good information about it.
This is also known as the Holly Hack
To solve this problem directly, you need to give layout to an ancestor of
the item that you are having trouble with.
A simple way to give an element layout is to give it some height.
I usually set the height property to 1% or 1px. The element will expand to
hold its contents in ie6.
You will probably need to hide this from other browsers, so I usually do
something like * html .class {height:1%}
So if you add this rule
* html #wrapper{
height:1%;
}
After the #wrapper rule, all should be fine
__
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] Serving extra stylesheet info
Shelly wrote:
[...]
Can someone verify for me that, if I use a browser sniffer, it won't
completely override the main stylesheet?
[...]
Indeed, ifaik no worry needed. A browser sniffer is just a sniffing
tool, and doing nothing if it is not asked. Mostly the output is some
variable, like: sniffedBrowser.
Code is more or less:
!-- // javascript
var sniffedBrowser;
if (... lot of things ...) { sniffedBrowser = IE5.5 };
if (... lot of things ...) { sniffedBrowser = IE6 };
if (... lot of things ...) { sniffedBrowser = FF };
if (... lot of things ...) { sniffedBrowser = MisbehavingBrowser1.1 };
if (... lot of things ...) { sniffedBrowser = MisbehavingBrowser3.7 };
// end of sniffing
--
The interesting part (giving the commands what to do with css) is
totally up to you! - If you add...:
if (sniffedBrowser == MisbehavingBrowser1.1){
document.write('link rel=stylesheet type=text/css
href=sheets/misser1.css')
};
if (... and so on ...
... then you can put everything you want in the special stylesheet for
that browser.
If the sniffer-script with links to special extra sheets is placed
*after* the link to the mainstyles.css, only the added or changed styles
(for that browser) are overruling the main styles, the rest is staying
as it was. [1]
Just like adding an extra stylesheet as ie-hacks.css (also on the end)
with a cond.comment: doesn't affect things which aren't touched. Cascade
rules! :-)
Success and greetings,
francky
[1]
Only danger is the other way: if the script is placed before the
mainstyles.css, the mainstyles can overrule the corrections.
__
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 an Image in a H1 tag
[EMAIL PROTECTED] wrote:
Hi
I am trying to use the following css to replace the h1 text with the
logo.gif graphic, however the text 'Restaurant' is still appearing on top of
the
logo.gif graphic?
What do I need to add to my css to get rid of this ?
#header h1{
height: 142px;
width: 292px;
float: left;
background-image: url(logo.gif);
background-repeat: no-repeat;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
padding: 0px;
}
div id=header
h1a href=index.php
title=Restaurant/aspan/spanRestaurant/a/h1
/div
__
Hi Ian,
Try Restaurant inside the span/span, delete the second /a, and
add a style:
#header span { margin-left: -px; }
Then text readers and search engine bots can read the h1 text, while the
screen is only showing the logo.
Greetings,
francky
Btw, maybe you can give a more specific h1 text, like Spanish
restaurant in ..., if that are keywords for the company to attract
Googlin' visitors. - With only restaurant searched, Googler is giving
368.000.000 results, all over the world; though Spanish restaurant in
London hits still 2.800.000. - I guess your restaurant isn't easy to
find... ;-)
__
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] Borders + IE positioning + question
1a. There's something crazy (or at least unexplainable by me) going on with the borders set on the h3 . I think it has something to do with the inherited width, but I'm not sure, and I wouldn't know how to go about fixing it if that is the problem. Each h3 border gets pulled further to the left by the negative margin I've set, but the setting for the negative margin does not change. I hope that makes sense. 1b.I think I have the selectors wrong for the list under Heading 3, but I have tried every combination I can think of. I want the bullet to change from a disc to a circle on :hover. Plus, in IE, each li is repositioned when it's hovered for the first time... ?! The same repositioning happens with the navigation list, except it is the border on div#main that is repositioned when you :hover over the nav list. See the code here: http://www.accellart.com/test/crazy_borders.htm 2. I know IE handles positioning different, but I still can't get this little back box to stay fixed on the page in IE. In FF, it stays nicely static while scrolling, but in IE, it scrolls away with the page. See the code here: http://www.accellart.com/test/ie_pos.htm 3. I feel like my questions are very elementary, and even thought I work on a problem for hours or over several before submitting it, an answer is usually posted within minutes. Does anyone ever get annoyed at stupid questions? (I'm a teacher, and I always tell my students there aren't stupid questions, but I know there are. :) ) In other words, why are you here helping people, and do you really not mind? :) Thank you so much!!! Linden http://www.accellart.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] Site Check - www.nsbhs.nsw.edu.au
David Thanks for the site check. and to the best of my knowledge everything is XHTML and CSS valid. Valid, yes, but why are there so many empty spans in there? Image replacement, mostly. I'd suggest turning of the full justification on the text in your column. You don't have enough words, the column is too narrow, browsers generally don't microspace, AND computer screens don't really have enough resolution to do full-justified text properly. I didn't think it looked too bad for that one paragraph. Perhaps I will left-justify. In fact, the previous person who had worked on the site had every single page justified (and not coded in the style-sheet). What a headache. I've tried to make the site as accessible as I can, but I'm requesting a site check just in case I've missed anything. Looks quite accessible to me in Fangs, so I'd guess your JAWS visitors will be happy. Thanks. Regards Chris __ 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/
