Re: [css-d] IE issue!
Sent from my iPhone On Jan 23, 2014, at 1:45 AM, Philippe Wittenbergh e...@l-c-n.com wrote: Le 23 janv. 2014 à 03:34, Ed Pybus e...@slrecords.net a écrit : 've encounter an odd problem with display:inline-block. When I have the website on a USB stick and open it in IE11 it opens as expected, when I transfer it to the server and open it the elements that should be display as inline-block are displaying just as a block. The elements in questions is a list of lis. When you open the page from the server, what document mode is IE in? Open the developer tools (F12), it should say near the top 'standard document mode' or 'backwards compat' or words to that effect. I seem to remember that IE defaulted to back-compat mode (= IE7) for intranets - that used to be the case for IE 8 at least. If that is the case, then display: inline-block only applied to elements whose natural display is inline. Philippe -- Philippe Wittenbergh I had accidentally had an offline conversation (didn't realize we weren't replying all) with Ed and suggested this. Turns out that was the issue. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE issue!
Hiya, I've building a very simple internal website for work. Unfortunately they use IE11. I've encounter an odd problem with display:inline-block. When I have the website on a USB stick and open it in IE11 it opens as expected, when I transfer it to the server and open it the elements that should be display as inline-block are displaying just as a block. The elements in questions is a list of lis. The website isn't online so I can't post a link but i wondered if anyone had any ideas what might be causing this. If it's helpful I can post the code. TIA Ed __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE issue!
On Wed, Jan 22, 2014 at 1:34 PM, Ed Pybus e...@slrecords.net wrote: Hiya, I've building a very simple internal website for work. Unfortunately they use IE11. I would have say, it could be worse... IE7 for example... I'd say your lucky. And I don't like IE. I've encounter an odd problem with display:inline-block. When I have the website on a USB stick and open it in IE11 it opens as expected, when I transfer it to the server and open it the elements that should be display as inline-block are displaying just as a block. The elements in questions is a list of lis. Is it possible there are other styles from somewhere else effecting the pages? Also, to be clear, are you viewing in the same browser in both cases? -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE issue!
Ed, I'm surprised that IE11 would be the source of your problem, the last I read it's the most standards compliant UA in the wild. I've had less problems with it than Mozilla or Chrome UAs. Anyway, could provide a link to the page in question so it can be looked at? Eric Miner On January 22, 2014 at 1:34 PM Ed Pybus e...@slrecords.net wrote: Hiya, I've building a very simple internal website for work. Unfortunately they use IE11. I've encounter an odd problem with display:inline-block. When I have the website on a USB stick and open it in IE11 it opens as expected, when I transfer it to the server and open it the elements that should be display as inline-block are displaying just as a block. The elements in questions is a list of lis. The website isn't online so I can't post a link but i wondered if anyone had any ideas what might be causing this. If it's helpful I can post the code. TIA Ed __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE issue!
Le 23 janv. 2014 à 03:34, Ed Pybus e...@slrecords.net a écrit : 've encounter an odd problem with display:inline-block. When I have the website on a USB stick and open it in IE11 it opens as expected, when I transfer it to the server and open it the elements that should be display as inline-block are displaying just as a block. The elements in questions is a list of lis. When you open the page from the server, what document mode is IE in? Open the developer tools (F12), it should say near the top 'standard document mode' or 'backwards compat' or words to that effect. I seem to remember that IE defaulted to back-compat mode (= IE7) for intranets - that used to be the case for IE 8 at least. If that is the case, then display: inline-block only applied to elements whose natural display is inline. Philippe -- Philippe Wittenbergh http://l-c-n.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE issue with positioning
I am having some issues with IE getting a layout design to work and I would
like to see if anybody can offer any pointers before this drives me nuts.
The issue I am running into is that I have a box which has a fluid width
(90% of the page). Within that box, I am attempting to absolutely place
another box at the very top, but with a 14px margin on both the left and
right side. The following CSS rules work just fine in FireFox
#container {
position: relative;
margin: 0 auto;
width: 80%;
#header {
position: absolute;
top: 0;
left: 14px;
right: 14px;
}
In IE however, the header box is positioned right, but it does not expand
the full width of its container. Instead it has an extra wide margin on the
right side. I think this could probably be fixed with a box model hack, but
I cannot figure out the right combination of rules to make IE behave.
Any ideas would be appreciated.
Thanks
-- Jeff
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE issue with positioning
try the following:
#header {
position: absolute;
top: 0;
margin-left: 14px;
margin-right: 14px;
}
are sure that u need absolute positioning??
regards
Amedeo
On 19/gen/09, at 17:49, Jeff Chastain wrote:
I am having some issues with IE getting a layout design to work and
I would
like to see if anybody can offer any pointers before this drives me
nuts.
The issue I am running into is that I have a box which has a fluid
width
(90% of the page). Within that box, I am attempting to absolutely
place
another box at the very top, but with a 14px margin on both the left
and
right side. The following CSS rules work just fine in FireFox
#container {
position: relative;
margin: 0 auto;
width: 80%;
#header {
position: absolute;
top: 0;
left: 14px;
right: 14px;
}
In IE however, the header box is positioned right, but it does not
expand
the full width of its container. Instead it has an extra wide
margin on the
right side. I think this could probably be fixed with a box model
hack, but
I cannot figure out the right combination of rules to make IE behave.
Any ideas would be appreciated.
Thanks
-- Jeff
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE issue with positioning
Jeff Chastain wrote:
The issue I am running into is that I have a box which has a fluid width
(90% of the page). Within that box, I am attempting to absolutely place
another box at the very top, but with a 14px margin on both the left and
right side. The following CSS rules work just fine in FireFox
#container {
position: relative;
margin: 0 auto;
width: 80%;
#header {
position: absolute;
top: 0;
left: 14px;
right: 14px;
}
In IE however, the header box is positioned right, but it does not expand
the full width of its container. Instead it has an extra wide margin on the
right side. I think this could probably be fixed with a box model hack, but
I cannot figure out the right combination of rules to make IE behave.
Absolute positioning causes browsers to shrink-wrap the box, meaning
that a block-level box which once spanned the width of its parent is now
only as wide as its content. You work around this in FF and other
compliant browsers with your left/right settings. IE only honors one or
the other, though I think IE7 now allows you to set both.
Setting both the left and the right property causes the left of the box
to be absolutely positioned at value 'n' of the left property, and the
right of the box to appear at value 'n' of the right property. This
changes the default shrink wrapping for most browsers, making it more
block-like.
For IE, you have a few choices. Without a URL for reference, my guess is
that you might simply try removing the absolute positioning. If that's
not an option, you might also try setting the padding of #container to
something like padding:0 14px which would technically make your
#container box 28px wider than 80% of its parent.
HTH,
Bill
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.com
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE issue with positioning
Jeff Chastain wrote: I am having some issues with IE getting a layout design to work and I would like to see if anybody can offer any pointers before this drives me nuts. The issue I am running into is that I have a box which has a fluid width (90% of the page). Within that box, I am attempting to absolutely place another box at the very top, but with a 14px margin on both the left and right side. The following CSS rules work just fine in FireFox -- Jeff No absolute positioning is needed, and is best avoided in positioning the base foundation structure of a page. Absolute positioning, if needed at all, is usually reserved for positioning small elements within a foundation, or float based, structure. So maybe just make like a big box, and sort of gently place smaller boxes in it. Something like this [1] will work in compliant browsers and even IE/6 and IE/7. [1] http://www.chelseacreekstudio.com/ca/cssd/test-90.html -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[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] 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/
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] IE issue
Andy Harrison wrote:
Weird - also, now in IE the large images stay shown even when you're
no longer hovering. Sorry to say I've no idea why... :-/
www.teerthyatri.com
IE6 (at least) gets locked up on 'position: relative'. There are too
much styling for the wanted effect in there.
The following is tested in Firefox 1.5.x 2.x, Opera 9.x, Safari 2.x,
IE6 and IE5.2/Mac...
/*Zoom Pics*/
.pic a.p1:link,.pic a.p1:visited {
display: block;
position: static;
}
.pic a.p1:hover {
position: relative;
}
.pic a.p1:link .large, .pic a.p1:visited .large {
display: none;
position:absolute;
top:-100px;
left:50px;
width:450px;
height:300px;
border: solid 1px #000;
}
.pic a.p1:hover .large {
display: block;
}
.pic {
float:left;
width:150px;
}
.pic a img {
border:0;
padding: 25px 0 0 25px;
}
.pic a .large {
padding: 0;
}
.pic p {
text-align:center;
margin-top:0;
font-variant:small-caps;
font-weight:700;
}
...and contains all styles needed for a stable effect.
I have more or less copied the visual effects from the original, as seen
in the good browsers.
The trick for IE6 is that 'position: relative' is switched on :hover,
and switched back to 'position: static' once the mouse-pointer leaves.
That also solves the stacking-problems.
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] IE issue
--snip-- Gunlaug Sørtun wrote: ...and contains all styles needed for a stable effect. I have more or less copied the visual effects from the original, as seen in the good browsers. The trick for IE6 is that 'position: relative' is switched on :hover, and switched back to 'position: static' once the mouse-pointer leaves. That also solves the stacking-problems. Strangely, now the footer is not 'clearing' and jumping into the sidebar! I am lost. Appreciate any suggestions. Regards. Larry __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE issue
Sending this to the list also, as some may actually read the archives. Jehangir Larry wrote: I would like you to explain the 'static' issue a bit more. This is one area that truly befuddles me. 'position: static' is the default-value, but since 'position: relative' is used on :hover I had to declare 'static' to make sure it kicked in in IE. IE has a tendency to lock up in :hover-state under certain conditions. What 'static' does is simply to tell IE that 'nothing is positioned here' when the mouse-pointer leaves the link. That makes IE release the absolute positioned large image and hide it. I won't try to explain IE's erratic behavior without the fix - it's a bug. IE also has severe problems/bugs when we try to stack absolute positioned elements above relative positioned ones. 'position: static' has no effect on stacking - it's always the bottom or default level and any z-index is ignored. Declaring 'position: relative' will lift the element - link - up one stacking-level. Therefore, the link that you :hover on will get 'position: relative' and will automatically be stacked above all non-hovered links. The absolute positioned large image will be lifted with its own :hovered link, and the result is visually perfect stacking. I often use this 'switch stacking on :hover' method for multi-line menus with drop downs, as it ensures correct stacking in all major browsers - not just IE. Hope that all made some sense - despite the fact that we're in part dealing with nonsensical bugs :-) 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] IE issue
Thanks very much. - Original Message - From: Gunlaug Sørtun [EMAIL PROTECTED] To: Gunlaug Sørtun [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Sent: Tuesday, January 09, 2007 11:44 AM Subject: Re: [css-d] IE issue Sending this to the list also, as some may actually read the archives. Jehangir Larry wrote: I would like you to explain the 'static' issue a bit more. This is one area that truly befuddles me. 'position: static' is the default-value, but since 'position: relative' is used on :hover I had to declare 'static' to make sure it kicked in in IE. IE has a tendency to lock up in :hover-state under certain conditions. What 'static' does is simply to tell IE that 'nothing is positioned here' when the mouse-pointer leaves the link. That makes IE release the absolute positioned large image and hide it. I won't try to explain IE's erratic behavior without the fix - it's a bug. IE also has severe problems/bugs when we try to stack absolute positioned elements above relative positioned ones. 'position: static' has no effect on stacking - it's always the bottom or default level and any z-index is ignored. Declaring 'position: relative' will lift the element - link - up one stacking-level. Therefore, the link that you :hover on will get 'position: relative' and will automatically be stacked above all non-hovered links. The absolute positioned large image will be lifted with its own :hovered link, and the result is visually perfect stacking. I often use this 'switch stacking on :hover' method for multi-line menus with drop downs, as it ensures correct stacking in all major browsers - not just IE. Hope that all made some sense - despite the fact that we're in part dealing with nonsensical bugs :-) 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-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE issue
THANKS Andy.
I did as you said, and mostly it works fine.
The z-index although doesn't seem to respond. So I reduced the size of the
large pic and gave it a -ve top margin, to avoid overlaps between small and
large (on hover) images. Otherwise the small one keeps peeking through the
hovered one.
Why is this despite .pic having a z-index = 100 and .pic a .large having =
1000! (The 1000 is in frustration!)
We live and we learn.
Thanks again.
Larry
- Original Message -
From: Andy Harrison
To: Jehangir Larry
Cc: css-d@lists.css-discuss.org
Sent: Sunday, January 07, 2007 6:57 AM
Subject: Re: [css-d] IE issue
Sorry Larry, I don't see what's causing that. I did notice that the image
popups don't work correctly in IE 6 though (they aren't absolutely positioned);
who knows, it may have something to do with that. I have a few suggestions for
your CSS:
.pic a .large {
/*...*/
display:none; /*instead of block; so it's hidden until you hover - and
so you don't have to make it a single pixel to hide it*/
z-index:1; /*or greater; so the large image shows above all the
smaller ones*/
}
.pic a.p1:hover .large {
/*get rid of position:fixed - this is probably causing the problem with
the popups in IE; leave it as absolute*/
}
Hope that helps in some way :-)
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] IE issue
Weird - also, now in IE the large images stay shown even when you're no
longer hovering. Sorry to say I've no idea why... :-/
Good luck,
Andy
On 1/7/07, Jehangir Larry [EMAIL PROTECTED] wrote:
THANKS Andy.
I did as you said, and mostly it works fine.
The z-index although doesn't seem to respond. So I reduced the size of the
large pic and gave it a -ve top margin, to avoid overlaps between small and
large (on hover) images. Otherwise the small one keeps peeking through the
hovered one.
Why is this despite .pic having a z-index = 100 and .pic a .large having =
1000! (The 1000 is in frustration!)
We live and we learn.
Thanks again.
Larry
- Original Message -
*From:* Andy Harrison [EMAIL PROTECTED]
*To:* Jehangir Larry [EMAIL PROTECTED]
*Cc:* css-d@lists.css-discuss.org
*Sent:* Sunday, January 07, 2007 6:57 AM
*Subject:* Re: [css-d] IE issue
Sorry Larry, I don't see what's causing that. I did notice that the image
popups don't work correctly in IE 6 though (they aren't absolutely
positioned); who knows, it may have something to do with that. I have a few
suggestions for your CSS:
.pic a .large {
/*...*/
display:none; /*instead of block; so it's hidden until you hover -
and so you don't have to make it a single pixel to hide it*/
z-index:1; /*or greater; so the large image shows above all the
smaller ones*/
}
.pic a.p1:hover .large {
/*get rid of position:fixed - this is probably causing the problem
with the popups in IE; leave it as absolute*/
}
Hope that helps in some way :-)
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/
[css-d] IE issue
Please take a look at the single picture in the sidebar www.teerthyatri.com It appears below the menu in FF but 'crawls up' in IE, including IE7. Appreciate all help. TIA Larry __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE issue
Sorry Larry, I don't see what's causing that. I did notice that the image
popups don't work correctly in IE 6 though (they aren't absolutely
positioned); who knows, it may have something to do with that. I have a few
suggestions for your CSS:
.pic a .large {
/*...*/
display:none; /*instead of block; so it's hidden until you hover -
and so you don't have to make it a single pixel to hide it*/
z-index:1; /*or greater; so the large image shows above all the
smaller ones*/
}
.pic a.p1:hover .large {
/*get rid of position:fixed - this is probably causing the problem with
the popups in IE; leave it as absolute*/
}
Hope that helps in some way :-)
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/
[css-d] IE Issue: Floated Image pushes into Left Aligned Text
Hi, I'm having an issue only in IE where the text adjacent to the floated left image is pushed in a couple pixels; once the text clears the bottom of the image, the left aligned text displays correctly. See it here: http://www.thedesignasylum.com/secretstash/IE_layout_issue.html I based this on pixy's 3 column layout: http://www.pixy.cz/blogg/clanky/css-3col-layout/ I have tried lots of things that haven't worked and I am at the end of my rope (tiling the background image, z-index, playing around with padding, making all margins 0, putting the middle column text in its own div, blah blah blah). Is this something I have to live with when viewing it in IE or is there a workaround? Thanks in advance, Laura __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Issue: Floated Image pushes into Left Aligned Text
Laura wrote: I'm having an issue only in IE where the text adjacent to the floated left image is pushed in a couple pixels; once the text clears the bottom of the image, the left aligned text displays correctly. See it here: http://www.thedesignasylum.com/secretstash/IE_layout_issue.html Laura, I can't find the article where I saw this, but as I remember you need to do a -3px right side margin on the image. And, as I remember it needs a hack so it is only for IE. This is because IE puts a 3px spacer around images. (Aren't they helpful!) Hope this helps, Vic __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Issue: Floated Image pushes into Left Aligned Text
Laura Watts wrote: I'm having an issue only in IE where the text adjacent to the floated left image is pushed in a couple pixels; once the text clears the bottom of the image, the left aligned text displays correctly. Perhaps the discussion on this page helps: http://www.positioniseverything.net/explorer/threepxtest.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE issue - DIV's not going full width
Ingo,
Thank you for what seems to be a great deal of time that you have put into
looking at my problem and even providing example pages. You explanation makes
sense. Now I just need to see if the customer is willing to change the source
instead of just the CSS.
Thank you,
Jonathan
Ingo Chao [EMAIL PROTECTED] 05/15/05 2:41 pm
Jonathan Duncan schrieb:
Thank you Ingo, the position:relative at least got the logo and nav
to align to a different div which makes them closer to being in the
center.* However I am also trying to get them to stretch out to fill
the whole page horizontally.* These two div have no width that I can
see and they are not being limited by anything that I can tell so I
would think they should expand to fill the screen like they do in
Firefox.* Any ideas why they do not?
Jonathan
Jonathan, I've tried to isolate a rough approximation of the problem, as
I understand it, but I may be wrong.
http://www.satzansatz.de/cssd/tmp/jonathan.html
Note the slight difference in Op+IE versus FF.
[ for those who still believe in code snippets on css-d:
body { margin: 0 auto; width: 250px; border:5px solid blue; padding:0;
height:500px;}
#p-logo { background-color: red; position: absolute; top: 0; left: 0;
right:0; height: 40px; }
#p-logo a { display: block;width: 100%;** }
body
** div id=p-logoa href=#Logo/a/div
** /body
/html
]
In your example, the parent has the same width as body, not shown in my
test case. The current ancestors of a. p. #p-logo aren't positioned.
I was wrong in my earlier post, sorry.* Op, IE, FF are indeed
positioning with respect to the containing block, and that's html, not
body (offset top:0 left:0; starts at the same location).
So where is the bug?
AFAIK, the block level link gets 100% from its parent of width auto,
therefore, #p-logo should gain 100% of the width of its containing block.
But Opera8.01 and IE6 share the same bug: the do offset an absolute
positioned element with respect to the containing block, yes, but do
calculate a percentage width with respect to the parent (=body in your
case.
But what if the parent is not the ancestor?
see http://www.satzansatz.de/cssd/tmp/apboxpercentagewidth.html
That's still CSS1.
IMHO, the bug cannot be fixed without structural changes to your code.
As you can't take the logo out of body/body to prevent the
relational bug, you'll have to move the centering for body to another
page wrapper, and take the logo out:
http://www.satzansatz.de/cssd/tmp/jonathanmod.html
[again a snippet
body
centredwrapperpagecontent.../centredwrapper
aplogo/aplogo
/body
]
But that will not be fun to do within your complex page.
I would love to hear other opinions concerning your problem on this list.
Ingo
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE issue - DIV's not going full width
I have an issue with a site I am working on: http://hula-project.com/Hula_Server We are using the MediaWiki tool on it which is only a side note. My problem is that in IE (XP) the top navigation (#p-navbar) and header logo (#p-logo) will not display full width across the screen like they do in IE. I have been tweaking the CSS and reading for the past couple days and I am having a bit of a brain cramp. If I had written it myself it would probably be easier to figure out. Anyway, if someone could tell me what I am doing to make IE mad at me I would appreciate it. Thank you, Jonathan Duncan __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
