[css-d] IE7 targeting hacks working in Opera
Hi all How crazy the world of hacking CSS is. While working on part of my site on pages that have the xml prolog preceding the doctype, I was hacking for IE7 and noticed that Opera was also being targeted. After stripping my stylesheet down to a few lines, I then removed the xml prolog from the page and found that Opera was showing as expected and not being targeted anymore. Now having done some test [1], I find that there are IE7 only targeting hacks, Opera only targeting hacks and targeting hacks for both browsers when using the xml prolog. *+html - target IE 7 and Opera 9.10 and 9.24 *~html - target IE 7 and Opera 9.10 and 9.24 *:first-child+html - target IE 7 html:first-child - target Opera 9.10 and 9.24 *+html:first-child - target Opera 9.10 and 9.24 I will be waiting to see what Georg has to say about this dilemma... [1] http://css-class.com/test/ie7hacktargetingopera.htm Kind Regards, Alan http://css-class.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ADMIN - OFF TOPIC -Same old Hat (new)
David Laakso wrote: Since your question has nothing to do with CSS, a nothing to do with CSS method for achieving a splash page (if you decide to go that sometimes annoying route) is to use a timed meta attribute in the head of the document. As David said, we're OFF TOPIC. Let's stop now, or move to another list. For suggestions, see: http://css-discuss.incutio.com/?page=OffTopic -- Bob Easton Accessibility Matters: http://access-matters.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 targeting hacks working in Opera
On Oct 22, 2007, at 6:27 PM, Alan Gresley wrote: How crazy the world of hacking CSS is. While working on part of my site on pages that have the xml prolog preceding the doctype, I was hacking for IE7 and noticed that Opera was also being targeted. After stripping my stylesheet down to a few lines, I then removed the xml prolog from the page and found that Opera was showing as expected and not being targeted anymore. Now having done some test [1], I find that there are IE7 only targeting hacks, Opera only targeting hacks and targeting hacks for both browsers when using the xml prolog. *+html - target IE 7 and Opera 9.10 and 9.24 *~html - target IE 7 and Opera 9.10 and 9.24 *:first-child+html - target IE 7 html:first-child - target Opera 9.10 and 9.24 *+html:first-child - target Opera 9.10 and 9.24 Yeah, a while ago, I had noticed that too... :-( Consider it a bug. Opera 9 alpha OS X: *~html - target IE 7 and Opera 9.10 and 9.24 fails (red background) all others work as expected (greenish background, specific style ignored). Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE Issue Causing me problems
I run a members only forum and I have created an online chat based on
the Ajax Chat code provided by blueimp.net. This is mostly javascript
writing into some empty containers on a web page. It is all working
perfectly in firefox, but in internet explorer v6 I am having problems.
In essence, the main area for the chat is a absolute positioned div with
the subcomponents (the chat message list, the online members list etc)
as absolute positioned divs within that surrounding div.
In firefox I can make this overall area position itself under the header
and fill the rest of the browser window with the following css
#loginContent {
position:absolute;
top:140px;
left:0px;
bottom:0px;
width:100%;
min-height:300px;
}
In IE6 the size of this div appears to be one line. How can I make it
fill the rest of the window?
Similarly, the size of the internal boxes
#chatList {
position:absolute;
left:20px;
right:230px;
top:50px;
bottom:125px;
overflow:auto;
}
Gives a fixed size box in firefox, but in IE6 it only has the size of
the content and so initially starts small and then grows as more and
more messages come in. So how can I contain that box to the size
relative to its surrounding div?
--
Alan Chandler
http://www.chandlerfamily.org.uk
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 targeting hacks working in Opera
On Oct 22, 2007, at 8:11 PM, I wrote: Opera 9 alpha OS X: s/Opera 9/Opera 9.5 alpha (ahem) Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ADMIN - OFF TOPIC - Newbie
david wrote: Phil Tobias wrote: On Oct 20, 2007, at 11:39 PM, [EMAIL PROTECTED] wrote: is Dreamweaver acceptable or am I better off (as a beginner) going down a different route ?... We have strayed far from a CSS specific question. Other places might be more appropriate for discussing coding techniques. See: http://css-discuss.incutio.com/?page=OffTopic -- Bob Easton Accessibility Matters: http://access-matters.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 targeting hacks working in Opera
How many years have we been waiting for a clean and consistent cross-browser implementation of CSS2? How many? And we are now expected to be optimistic about CSS3! The industry is certainly not spoiling or serving web site designers! Bruce Von: Alan Gresley [EMAIL PROTECTED] Betreff: [css-d] IE7 targeting hacks working in Opera Hi all How crazy the world of hacking CSS is. While working on part of my site on pages that have the xml prolog preceding the doctype, I was hacking for IE7 and noticed that Opera was also being targeted. After stripping my stylesheet down to a few lines, I then removed the xml prolog from the page and found that Opera was showing as expected and not being targeted anymore. Now having done some test [1], I find that there are IE7 only targeting hacks, Opera only targeting hacks and targeting hacks for both browsers when using the xml prolog. *+html - target IE 7 and Opera 9.10 and 9.24 *~html - target IE 7 and Opera 9.10 and 9.24 *:first-child+html - target IE 7 html:first-child - target Opera 9.10 and 9.24 *+html:first-child - target Opera 9.10 and 9.24 I will be waiting to see what Georg has to say about this dilemma... [1] http://css-class.com/test/ie7hacktargetingopera.htm Kind Regards, Alan __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 targeting hacks working in Opera
Alan Gresley wrote: [...] Now having done some test [1], I find that there are IE7 only targeting hacks, Opera only targeting hacks and targeting hacks for both browsers when using the xml prolog. *+html - target IE 7 and Opera 9.10 and 9.24 *~html - target IE 7 and Opera 9.10 and 9.24 *:first-child+html - target IE 7 html:first-child - target Opera 9.10 and 9.24 *+html:first-child - target Opera 9.10 and 9.24 I will be waiting to see what Georg has to say about this dilemma... I have known about the potential for targeting Opera with hacks meant for IE7, for a while, but haven't seen it as a dilemma. My rather old targeting stylesheet[2] contains only one version for IE7, and that's the one that your test shows _only_ to target IE7 - with and without the xml declaration. Guess I've been lucky :-) (I have actually tested that hack continuously, but never changed it.) Most hacks are unsafe, and using hacks to target new browser versions are not recommended. Great care has to go into choosing hacks for old and obsolete versions too, so we don't end up targeting new versions. It's a pity we have to use any hacks, but with the sad state especially IE7 is in it is nearly unavoidable. I personally only use 'Conditional Comments' for adding HTML elements that IE/win can't do without. Using 'CC' for stylesheets in not for me. Consequently: the only reliable hack I know about, and use regularly, for feeding IE/win extra styles, is the '@import hack'[3]. The resulting stylesheet will only be seen by browsers based on the Trident engine, so no chance those styles will end up in good browsers. Separating IE versions is easy once we're at that level, and I can't imagine that the '@import hack' will ever backfire. It will hopefully die one day though, so we can use @import properly. regards Georg [1] http://css-class.com/test/ie7hacktargetingopera.htm [2]http://www.gunlaug.no/contents/styles/target-browser.css [3]http://www.gunlaug.no/contents/wd_additions_12.html -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS with flash
Hi all Dont shout if this is not a CSS problem but a flash one as i'm a little unsure. I have a flash banner that is L shaped and i have set the background to transparent using wmode. The Div is have containing the text nicely nestles in the bend of the L on IE7 and firefox but IE6 treats the flash as a block element and buts the text div out, can anyone suggest something? example http://www.design-portfolio.co.uk/helius/about/ thanks in advance -- Regards Terry O'Leary Senior Web Developer @ Design Portfolio Marketing Services ~ Online Communities - www.unofficialfan.com ~Online dating community ? www.d8-m8.com ~ Widen your music www.hayseeddixies.com :: www.lil-chris.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Newbie
On Oct 22, 2007, at 5:11 AM, [EMAIL PROTECTED] wrote: Dreamweaver, like other GUI web development environments, lies to you about how your page looks - visitors don't browse the web with Dreamweaver. Also, you will eventually find yourself in a situation where there's a problem in your site that you can't fix in the GUI mode, so you switch to code view ... at which point, you need to know CSS and HTML just as well as if you never used a GUI environment. So I'd say - forget the GUI development environment and just work with a good code development environment from the first! Some people prefer that approach. However many others find it more efficient to be able to effortlessly switch between visual and code views. Of course, you need to preview your work in a variety of browsers, not just in your authoring tool. If you really want to use a GUI tool for a mockup, use your preferred presentation software package. They all let you set up links, so you can at least take clients through the flow of the site. The problem with this is that presentation software packages are not for graphics. If the clients like what they see in the presentation, you'll eventually have to go back and create the graphics - all over again. If you start by creating the graphics in Photoshop, you'll be much closer to having graphics you can use. By the way, I often use the layer comps feature in Photoshop to take clients through the flow of the site (as you would do by creating links in PowerPoint or whatever). No, grab one of the layouts from Layout Gala. Or grab the layout from a site you like. That's a fine suggestion. Experimenting with different layouts is a good way to learn. Note, however, that the layouts provided with the current Dreamweaver frequently include useful comments explaining how and why things work the way they do. Not all layouts you grab off the Web offer that additional learning experience. Now that the original poster has been presented with some differences of opinion, he can explore them and see which fit his own preferred working style. To each, their own. ...pt -- Business/Communications start at http://www.PhilipTobias.com. Grow your business using my technical and marketing communications - Effective writing, graphic design, multimedia, photos, and Web sites. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS with flash
Terry O'Leary wrote: Hi all Dont shout if this is not a CSS problem but a flash one as i'm a little unsure. I have a flash banner that is L shaped and i have set the background to transparent using wmode. The Div is have containing the text nicely nestles in the bend of the L on IE7 and firefox but IE6 treats the flash as a block element and buts the text div out, can anyone suggest something? example http://www.design-portfolio.co.uk/helius/about/ thanks in advance You could position the object absolutely in IE6 only. Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS with flash
Terry O'Leary a écrit : Hi all Dont shout if this is not a CSS problem but a flash one as i'm a little unsure. I have a flash banner that is L shaped and i have set the background to transparent using wmode. The Div is have containing the text nicely nestles in the bend of the L on IE7 and firefox but IE6 treats the flash as a block element and buts the text div out, can anyone suggest something? example http://www.design-portfolio.co.uk/helius/about/ thanks in advance Not a solution, but an idea maybe. Why don't you made two Flash ? One of 600x 200 and one of 207x200 px ? Cordially Luis __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Issue Causing me problems
Alan Chandler wrote:
...
In firefox I can make this overall area position itself under the header
and fill the rest of the browser window with the following css
#loginContent {
position:absolute;
top:140px;
left:0px;
bottom:0px;
width:100%;
min-height:300px;
}
In IE6 the size of this div appears to be one line. How can I make it
fill the rest of the window?
Similarly, the size of the internal boxes
#chatList {
position:absolute;
left:20px;
right:230px;
top:50px;
bottom:125px;
overflow:auto;
}
Gives a fixed size box in firefox, but in IE6 it only has the size of
the content and so initially starts small and then grows as more and
more messages come in. So how can I contain that box to the size
relative to its surrounding div?
You can't span an absolutely positioned element with opposite offsets in
IE. Any solution would have to set it with top/left only, so you'll need
a height and a width. Min-height is not supported in IE6, therefore, the
first one collapses to one line by 100% width. The second one
shrinks-to-fit its content without width and height. A dilemma is that
you cannot tell a browser to do the math of 100%height minus 20px minus
125px. Your absolute positioning attempt needs a general rethinking
because of this dilemma.
Ingo
--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Image Placement in CSS
Hello, I'm working on a design that's visually rich and uses a few background images as well as .png files for transparency. I don't want to have to place all the images as backgrounds in order to be able to place the images exactly where I want on the page. Is there a way to declare the placement of an image, without resorting to empty divs with background images or using a good number of nested divs? TIA, Elli __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Wrapper is not wrapping...footer is at the top
Hi group. I need more help! This project is quickly becoming the bain of my existence! I don't know why, but the wrapper, is not acting like a wrapper. Inside dreamweaver, when I click on the wrapper div, it's just a couple pixels high and everything else if falling outside of it. Because of this, I can't get the footer on the bottom. It's sitting where it's supposed to sit...under the wrapper. The problem is that the wrapper is at the top of the browser. I'm looking at my own code from other projects and am doing the same thing...it's just not working out this time. Could someone take a look at my code (I've updated it on my server) and see what is going on? Maybe I'm just missing something. http://www.5pts-interactive.com/sarantopoulos/index.asp TIA, Jeralyn Merideth __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Issue Causing me problems
On Monday 22 Oct 2007, Ingo Chao wrote:
Alan Chandler wrote:
...
In firefox I can make this overall area position itself under the
header and fill the rest of the browser window with the following
css
#loginContent {
position:absolute;
top:140px;
left:0px;
bottom:0px;
width:100%;
min-height:300px;
}
In IE6 the size of this div appears to be one line. How can I make
it fill the rest of the window?
Similarly, the size of the internal boxes
#chatList {
position:absolute;
left:20px;
right:230px;
top:50px;
bottom:125px;
overflow:auto;
}
Gives a fixed size box in firefox, but in IE6 it only has the size
of the content and so initially starts small and then grows as more
and more messages come in. So how can I contain that box to the
size relative to its surrounding div?
You can't span an absolutely positioned element with opposite offsets
in IE. Any solution would have to set it with top/left only, so
you'll need a height and a width. Min-height is not supported in IE6,
therefore, the first one collapses to one line by 100% width. The
second one shrinks-to-fit its content without width and height. A
dilemma is that you cannot tell a browser to do the math of
100%height minus 20px minus 125px. Your absolute positioning attempt
needs a general rethinking because of this dilemma.
Ingo
I actually discovered a solution using an expression
I create an additional stylesheet for ie 5 and 6
with
#loginContent {
height:expression(document.body.clientHeight-140);
}
#chatList {
height:expression(document.body.clientHeight-315);
width:expression(document.body.clientWidth-250);
}
Works great
--
Alan Chandler
http://www.chandlerfamily.org.uk
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wrapper is not wrapping...footer is at the top
Jeralyn Merideth wrote: I'm looking at my own code from other projects and am doing the same thing...it's just not working out this time. Could someone take a look at my code (I've updated it on my server) and see what is going on? Maybe I'm just missing something. http://www.5pts-interactive.com/sarantopoulos/index.asp TIA, Jeralyn Merideth This, in all likelihood, will not resolve the issues, but it may help get you on track-- it is all that absolute positioning, and in some places restrictive height, that may cause some of the problems. Try a test page putting a border: 1px solid fuchsia; on both the #wrapper and #footer. And start deleting the absolute positioning and heights until the wrapper opens and the footer is below it. The entire layout could be handled easily with floats. You'll want a XHTML 1.0 Strict doctype rather than what you have. Others on the list may provide you with a simple fix. Good luck and hang in there... Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wrapper is not wrapping...footer is at the top
Jeralyn Merideth wrote: Hi group. I need more help! This project is quickly becoming the bain of my existence! I don't know why, but the wrapper, is not acting like a wrapper. Inside dreamweaver, when I click on the wrapper div, it's just a couple pixels high and everything else if falling outside of it. Because of this, I can't get the footer on the bottom. It's sitting where it's supposed to sit...under the wrapper. The problem is that the wrapper is at the top of the browser. ... http://www.5pts-interactive.com/sarantopoulos/index.asp #wrapper cannot contain #navbar, #masthead, #content with a clearfix, since these are not floats, but absolutely positioned elements, taken out of any flow. Instead, #wrapper collapses, and #footer follows. There is probably a javascript solution [1], as many believe in absolute layouts. Ingo [1] http://www.shauninman.com/archive/2006/05/22/clearance_position_inline_absolute -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wrapper is not wrapping...footer is at the top
Jeralyn Merideth wrote:
http://www.5pts-interactive.com/sarantopoulos/index.asp
David and Ingo have pointed to the absolute positioning as the problem,
so why not get rid of that A:P and give the 'clearfix' a chance.
Adding / correcting to...
#wrapper {margin-top: 63px; position: relative;}
#navbar {top: -63px;}
#masthead {position: relative; top: 0;}
#content {position: relative; top: 0;}
...makes it all line up fine at my end, but I've only checked in Opera,
Firefox, IE6 and IE7.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] forced to set width and related problems-repost
Good evening list, Somehow i'm forced to set a width on my contentwrapper: setting no width or a width of 100% cuts off the #contentright and the background image i had on my header when resizing to smaller screen resolution. I'm wondering if this is normal behaviour? The way i used widths now gives me a layout that causes a horizontal scrollbar in e.g. 1280X768 and below, but i guess that's something i have to life with. The reason i used the widths on#wrapper and #contentwrapper was the fact that without max and min width on the body, the #contentright dropped underneath the #contentleft which i don't understand: #contentright isn't floated or am i missing something here? And i would like to avoid min and max width on the body so as not to mess with IE expressions. Besides that i seem to have an accessibility problem in Firefox and Mozilla: decreasing the text size makes the #masthead h1 drop below the #masthead. Other problems i ran into and “solved” are commented in the css. http://www.dzinelabs.com/sandbox/madcow/madcowbody.html Css embedded Seems i caught the mad cow disease lol -- Best regards, Luc Powered by The Bat! version 3.99.24 with Windows XP (build 2600), version 5.1 Service Pack 2 and using the best browser: Opera. A friend is one who believes in you when you have ceased to believe in yourself. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ Before digital, there was mechanical. View and purchase fascinating mechanical antique pocket watches and vintage wrist watches. Visit Bogoff Antiques today. http://lavabit.com/apps/director?ad=3 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 3 pixel difference between IE and Firefox
Hi, I am not sure why, but when I work with the placement of graphics using relative or even absolute positioning, it seems to me that there is a 3 pixel height difference between IE and Firefox. I have even measured it with jruler, and Firefox seems to be out (heigher) with 3px. How can I fix it, and what causes it? Thanks Rickus __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Slider misplaced in IE
Hi all,
I am working on this page: http://www.fileflow.com/cart-debug.php
When I set a 12 px left-margin on the slider, it looks right in all
browsers except IE, where the slider is misplaced 6 px to the right.
If I set the left margin to 0, it looks right in IE, but in all other
browsers the slider is misplaced 12 px to the left. Help would be
greatly appreciated, I seem to be stuck.
XHTML:
div id=products
div class=product
?php $id = $products[0]['product_id']; ?
span class=boxheader?php echo $products[0]['product_name'] ?
/span
div class=box id=product_?php echo $id; ?
img src=images/products/fastsend_small.gif alt=FastSend /
br /
div class=price_holder
Price: span class=price id=price_?php echo $id; ??
php echo 0+($products[0]['price']+$products[7]['price']); ?/span
euro;
/div
div class=quantity
Quantity:
span class=display_holder id=display_holder_?php echo
$id; ?
span class=value_display id=qty_?php echo $id; ? 1/
span /spanbr /
/div
select class=level id=level_?php echo $id; ?
onchange=changePrice(?php echo $id; ?)
option value=0 No support/option
option value=2 selected=selectedWith support/option
/select
/div
div class=horizontal_track id=horizontal_track_?php echo
$id; ?
div class=horizontal_slit id=horizontal_slit_?php echo
$id; ? nbsp;/div
div class=horizontal_slider id=slider_?php echo $id; ?
style=left: 0px; onmousedown=slide(event, 'horizontal', 95, 1, 10,
10, 0, 'qty_?php echo $id; ?');nbsp;/div
/div
/div
/div
CSS:
html, body {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background: #CAD4D9 url(../images/background.jpg) repeat-x fixed top;
width: 100%;
height: 100%;
text-align: center;
font-family:Times New Roman, Georgia, Times, serif;
font-sixe: 12px;
}
#products {
border: dashed gray 1px;
height: 245px;
width: 680px;
margin: 0 auto;
padding:5px;
}
.product {
float: left;
margin:5px;
padding: 10px 4px 4px 4px;
text-align: center;
}
.box {
background-position: center;
background-repeat: no-repeat;
width: 145px;
height: 148px;
}
.price_holder {
text-align: center;
}
.price {
border: 0;
padding: 0;
}
.quantity {
text-align: center;
}
.level {
width: 121px;
}
/* Slider */
*.horizontal_track {
background-color: #ededed;
width: 115px;
/*margin-left: 12px;*/
line-height: 0px;
font-size: 0px;
text-align: left;
padding: 2px;
border: 1px solid;
border-color: #ddd #999 #999 #ddd;
}
*.horizontal_slider {
background-color: #a6a6a6;
width: 16px;
height: 8px;
position: relative;
z-index: 2;
line-height: 0;
margin: 0;
border: 2px solid;
border-color: #b3b3b3 #666 #666 #b3b3b3;
}
*.horizontal_slit {
background-color: #808080;
width: 105px;
height: 2px;
margin: 4px 4px 2px 4px;
line-height: 0;
position: absolute;
z-index: 1;
border: 1px solid;
border-color: #ccc #fff #fff #ccc;
}
*.display_holder {
width: 15px;
height: 15px;
text-align: center;
background-color: transparent;
padding: 0;
border: 0;
}
.value_display {
width: 15px;
margin-right: 0px;
margin-left: 0px;
text-align: center;
font-weight: normal;
border: 0;
padding: 0;
}
/* Shopping cart */
#cart {
border: dashed gray 1px;
height: 230px;
width: 680px;
padding: 5px;
margin: 0 auto;
text-align: left;
position: relative;
}
Thanks in advance,
Erik
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] sliver of body background appearing between 2 cells of a table
Hi, I'm getting a sliver of body background appearing between 2 cells of a table where cellpadding=0 and cellspacing=0. It only occurs in Internet Explorer (version 6.0). Firefox is fine. Any ideas? Here are links to the site and the stylesheet: http://staging.hr.hms.harvard.edu/ http://staging.hr.hms.harvard.edu/style.css I know this is not designed from the ground up using css, but there's enough css in here that it made me think this might be a good list to get started. If there are other lists I should consult, please refer me. KJ Johnson HR Coordinator Harvard Medical School Gordon Hall 25 Shattuck St. Boston, MA 02115 Phone: 617-432-1491 Fax: 617-432-3079 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Table layout vs. Container layout?
Hi everyone, I'm building a site that is testing the limits of my knowledge as far as table layout and div usage. You can see it at campusvoices.org. The problem is - if you haven't already noticed - the main content portion expands beyond the menu and header's width, and as a result, looks terrible. It wasn't doing this a few days ago, when there was no content, but now that content has been added (dynamically, it draws from a DB) everything has been bumped some pixels out. I've double checked my calculations on the table cells, and they should all be equal (850 for the center column). I've tried modifying table width on the inside, and this has helped some, but the problem still remains, even when I remove the content. I am not sure what is going on, and I need to launch this site soon. Perhaps the strangest part of the problem is that in FF, the right side hangs over but not the left, yet in IE7, both sides pudge out a bit. I'm totally at a loss after at least 45 minutes of tinkering and trying to figure it out. My questions are A: what's going on with this site and B: what's the best way to layout a site like this? I thought that nesting some tables would be appropriate, but apparently they like to define their own rules of behavior. Is there a good article anyone could point me to on this subject? Thanks, in advance. -- Jess Jacobs [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image forcing div down (+ text question)
Also, while I have your attention, on the right hand side of http://www.ratking.co.uk/bensons/testimonials.htm there is a huge gap between the line Business Cards and the text below, again I have tried lots of things but can't manage to solve this problem. Hi Kevin, Regarding the text: I didn't look at your style sheet but I'd remove the br you have after the h5 tag ['Business Cards'] and see if that decreases the space enough for you. Beyond that, I believe the text that follows is a p rather than a header. So, in the interest of semantics, why not code it as a paragraph, assign an id or class if necessary, and style that to play with the space between it and the h5 as need be. Hth Bill Scheider __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image forcing div down (+ text question)
Kevin Stevens wrote:
Also, while I have your attention, on the right hand side of
http://www.ratking.co.uk/bensons/testimonials.htm there is a huge gap
between the line Business Cards and the text below, again I have tried
lots of things but can't manage to solve this problem.
Try h5 {margin-bottom : 0;} ?
You may have better luck with vertical spacing of lists and such by not
using line-height to space them vertically. Depending on the particular
circumstance and situation at hand, a top and/or bottom margin or
padding will suffice.
Best,
~dL
PS line-height, when used, /usually/ does not carry a unit of measure
and is set as a raw number, for example: line-height: 1.2;
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wrapper is not wrapping...footer is at the top
Thanks to everyone who answered. I took the absolute positioning correction advice and worked it out. I kept working on it and so anyone who answered this later may not have seen the correct code :-) Anyway, all is lined out and looking good in FF and IE7...I don't have 6. could someone do a site check for me? http://www.5pts-interactive.com/sarantopoulos/index.asp Thanks, Jeralyn Merideth - Owner Designs by Jeralyn A Division of 5 Points Interactive Creative Design Solutions for Web and Print [EMAIL PROTECTED] [EMAIL PROTECTED] Ida Goldina - Natural Skin Care [EMAIL PROTECTED] - Original Message From: David Laakso [EMAIL PROTECTED] To: Jeralyn Merideth [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Sent: Monday, October 22, 2007 3:28:08 PM Subject: Re: [css-d] Wrapper is not wrapping...footer is at the top Jeralyn Merideth wrote: I'm looking at my own code from other projects and am doing the same thing...it's just not working out this time. Could someone take a look at my code (I've updated it on my server) and see what is going on? Maybe I'm just missing something. http://www.5pts-interactive.com/sarantopoulos/index.asp TIA, Jeralyn Merideth This, in all likelihood, will not resolve the issues, but it may help get you on track-- it is all that absolute positioning, and in some places restrictive height, that may cause some of the problems. Try a test page putting a border: 1px solid fuchsia; on both the #wrapper and #footer. And start deleting the absolute positioning and heights until the wrapper opens and the footer is below it. The entire layout could be handled easily with floats. You'll want a XHTML 1.0 Strict doctype rather than what you have. Others on the list may provide you with a simple fix. Good luck and hang in there... Best, ~dL -- http://chelseacreekstudio.com/ __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Help
Hello, I having a problem to print any of the following website pages. http://www.cpslimo.ca/ Actually the problem occurred only with Internet Explorer. I've been able to print using Firefox and opera. I'm pretty sure it has something to do with one of the CSS container. but wasn't able to find out. Regards, Philippe __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wrapper is not wrapping...footer is at the top
Jeralyn Merideth wrote:
Thanks to everyone who answered. I took the absolute positioning
correction advice and worked it out. I kept working on it and so
anyone who answered this later may not have seen the correct code :-)
Anyway, all is lined out and looking good in FF and IE7...I don't have
6. could someone do a site check for me?
http://www.5pts-interactive.com/sarantopoulos/index.asp
Thanks,
Jeralyn Merideth - Owner
Personally, I think the advice Georg Sortun offered could have been your
best bet.
Nevertheless, you may want to set a min-height (in em?), and height
(same value as min-height for IE6.0 (in em?) to account for font-scaling
in compliant
browsers, and even IE7.0 and IE6.0, for the navigation in #topmast.
And perhaps something like p.last {margin-bottom: 2em} p
class=last.../p for the last paragraph of the primary content text
so it has a little lead under it.
The text image (transparent png?) is not supported by IE6 and down. I
know little about such matters and can only suggest, Google-- subject
line: iepngfix.
Best,
~dL
PS And remember, not to forget, you'll want to use doctype XHTML 1.0
Strict rather than what you have. Someone more technically oriented than
me may explain why...
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wrapper is not wrapping...footer is at the top
Jeralyn Merideth wrote: Thanks to everyone who answered. I took the absolute positioning correction advice and worked it out. I kept working on it and so anyone who answered this later may not have seen the correct code :-) Anyway, all is lined out and looking good in FF and IE7...I don't have 6. could someone do a site check for me? http://www.5pts-interactive.com/sarantopoulos/index.asp Everything looks OK... except for the PNG you're using (since IE 6 doesn't support PNG's), which appear with a white background. It's a little weak against font-resizing, though. Rafael. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Popup not working in IE
Appears to work in IE7. Don - Original Message - From: [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Monday, October 22, 2007 6:32 PM Subject: [css-d] CSS Popup not working in IE I'm doing yet another do-it-yourself-Flickr-slideshow app for my site, based on code from lots of other sources. One feature I added was to have notes for each picture, in a simple text file (as opposed to on Flickr), where they can be tailored by set, not just picture. Anyhoo, these notes are displayed when the user rolls over the thumbnail image. At least they are in Firefox, but NOT in IE.? I stripped down the program so there's only one thumbnail being shown.? (I left the full code for a thumbnail in there, commented, just for reference, but I've already stripped down the running example. (It's based on Eric Meyer's pure-CSS popups.) Here's the URL: http://cpuworks.com/testing/test.html The styles are in that file, along with a little Javascript. If anyone can take a gander and see what's going wrong, I'd love it. I'm on a Mac, so the IE testing is problematic at best.? I thought it might have to do with IE using the ALT tag wrong, but no joy there so far. --- Mark Wilson, Computer Programming Unlimited Web: http://www.cpuworks.com/ Email: [EMAIL PROTECTED] or [EMAIL PROTECTED] Our motto: Getting the Job Done Email and AIM finally together. You've gotta check out free AOL Mail! - http://mail.aol.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- No virus found in this incoming message. Checked by AVG Free Edition. Version: 7.5.488 / Virus Database: 269.15.6/1086 - Release Date: 10/22/2007 7:57 PM __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Popup not working in IE
Weird. Doesn't work in IE5 (Win2K) here, and I think it's IE7 (WinXP) at work that, er, doesn't. (Work, that is.)? If I have to use somebody's package to get it to work, OK, but that'd (a) be a pain and (b) mean more files needed; I was hoping this would end up pretty close to a one-file solution. Grrr. --- Mark Wilson, Computer Programming Unlimited Web: http://www.cpuworks.com/ Email: [EMAIL PROTECTED] or [EMAIL PROTECTED] Our motto: Getting the Job Done -Original Message- From: Don Miller [EMAIL PROTECTED] To: css-d@lists.css-discuss.org; [EMAIL PROTECTED] Sent: Mon, 22 Oct 2007 9:39 pm Subject: Re: [css-d] CSS Popup not working in IE Appears to work in IE7.? ? Don? ? - Original Message - From: [EMAIL PROTECTED]? To: css-d@lists.css-discuss.org? Sent: Monday, October 22, 2007 6:32 PM? Subject: [css-d] CSS Popup not working in IE? ? ? I'm doing yet another do-it-yourself-Flickr-slideshow app for my site, based on code from lots of other sources.? One feature I added was to have notes for each picture, in a simple text file (as opposed to on Flickr), where they can be tailored by set, not just picture. Anyhoo, these notes are displayed when the user rolls over the thumbnail image. At least they are in Firefox, but NOT in IE.? I stripped down the program so there's only one thumbnail being shown.? (I left the full code for a thumbnail in there, commented, just for reference, but I've already stripped down the running example. (It's based on Eric Meyer's pure-CSS popups.)? ? Here's the URL: http://cpuworks.com/testing/test.html? ? The styles are in that file, along with a little Javascript.? ? If anyone can take a gander and see what's going wrong, I'd love it. I'm on a Mac, so the IE testing is problematic at best.? I thought it might have to do with IE using the ALT tag wrong, but no joy there so far.? ? ? ? ? ? ---? Mark Wilson, Computer Programming Unlimited? Web: http://www.cpuworks.com/? Email: [EMAIL PROTECTED] or [EMAIL PROTECTED] Our motto: Getting the Job Done? ? ? Email and AIM finally together. You've gotta check out free AOL Mail! - http://mail.aol.com? __? css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d? List wiki/FAQ -- http://css-discuss.incutio.com/? List policies -- http://css-discuss.org/policies.html? Supported by evolt.org -- http://www.evolt.org/help_support_evolt/? ? ? ? -- No virus found in this incoming message.? Checked by AVG Free Edition.? Version: 7.5.488 / Virus Database: 269.15.6/1086 - Release Date: 10/22/2007 7:57 PM? ? ? Email and AIM finally together. You've gotta check out free AOL Mail! - http://mail.aol.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 3 pixel difference between IE and Firefox
try either display: block or vertical-align: middle on the image __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Absolute positioning/Div Overflow/Inline Frame
I'm wondered if you could help me figure out how to accomplish my goal. I need to put content from a CMS system into the areas of the website links below. They should be some type of inline frames or CSS overflow, but I'm quite sure how to implement them here. Since the background is fixed, should I use absolute positioning for all the links and how would I achieve proper placement on the pages which differ in shape? Take a look and let me know what you think. Here are the links below: http://ferg.isa-geek.com/chithetasigma/home.asp http://ferg.isa-geek.com/chithetasigma/legal.asp http://ferg.isa-geek.com/chithetasigma/history.asp http://ferg.isa-geek.com/chithetasigma/philathropy.asp http://ferg.isa-geek.com/chithetasigma/sponsors.asp Thank you for your time and assistance! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Named Anchors and Fixed Headers?
Sarah Heinemann wrote:
Thank you! That's working wonderfully so far, I'll have to find more
browsers to test it in. I assume that if I end up wanting text links
within the p tag inside the content DIV then I just need to make a
class 'unstyle' the margins? Something like:
p.fixlink margin-top: 0px; padding-top: 0px;}
Not quite as you have written it, as that'll affect the paragraph, not
the link.
Unstyling the link, like so...
p.fixlink a {margin-top: 0px; padding-top: 0px; width: auto; display:
inline;}
...will work in all browsers.
A better solution might be to set a class on the relevant anchors that
_need_ that top-offset, so you don't have to worry about unstyling
other links.
Such a rule might look like...
#content p a.offset {margin-top: -100px; padding-top: 100px; width: 1px;
.display: block;}
...with class=offset on target anchors.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Popup not working in IE
On Behalf Of [EMAIL PROTECTED]
Weird. Doesn't work in IE5 (Win2K) here, and I think it's IE7 (WinXP) at
work that, er, doesn't. (Work, that is.)?
If I have to use somebody's package to get it to work, OK, but that'd (a)
be a pain and (b) mean more files needed;
I was hoping this would end up pretty close to a one-file solution. Grrr.
a.hasNotes:hover span {...} is not enough, for IE you need to add a a:hover
{...} rule
for example a:hover {border:1px solid #fff} or a:hover {background:50% 50%}
--
Regards,
Thierry | http://www.TJKDesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wrapper is not wrapping...footer is at the top
On Mon, 22 Oct 2007 17:55:45 -0700 (PDT), Jeralyn Merideth wrote: Thanks to everyone who answered. I took the absolute positioning correction advice and worked it out. I kept working on it and so anyone who answered this later may not have seen the correct code :-) Anyway, all is lined out and looking good in FF and IE7...I don't have 6. could someone do a site check for me? http://www.5pts-interactive.com/sarantopoulos/index.asp Rafael mentioned the IE6 PNG problem, and David suggested the use of the PNGFIX HTC file[1]. Another suggestion, if you are okay losing the reflection effect in IE6 and below, is to use an 8-bit PNG[2]. I just tried this out on your page, and I think it looks okay. The PNG-8 file is under 8k, cf. 21k for the 24-bit version. Another small issue - the links at the top of the page seem to push the #logo block down when text size is increased, putting it out of line with the banner.jpg you use as BODY background. Not too badly though. [1] http://www.twinhelix.com/css/iepngfix/ [2] http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/ Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 3 pixel difference between IE and Firefox
Rickus wrote: Hi, I am not sure why, but when I work with the placement of graphics using relative or even absolute positioning, it seems to me that there is a 3 pixel height difference between IE and Firefox. Kenny Graham replied: try either display: block or vertical-align: middle on the image Umm. Shouldn't that be 'vertical-align: bottom;' Kenny? Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
