Re: [css-d] Problem in IE
On 2/14/11 8:39 AM, Gates, Jeff wrote:
I'm in the middle of developing a website and have just made a change
to the CSS, making the header a light shade of gray to contrast it to
the content area below (it was white). It's showing up correctly in
Firefox but, of course, something is amiss in IE (I'm looking at it
in IE7).
A link to a typical page is:
http://americanartinvites.com/omeka/features The link to the style
sheet is:
http://americanartinvites.com/omeka/themes/fromscratch/css/screen.css
On 2/14/11 7:19 PM, David Hucklesby huckle...@gmail.com wrote:
Even more problems in IE 6... :)
The search FIELDSET expands in that browser-- I suggest replacing the
FIELDSET with a DIV to get it working cross-browser (unless someone else
has a better solution...)
I put these rules at the end of the screen.css as overrides. They fixed
the problems my end. Hope they help:
/* fix IE6 expanding width bug */
#wrap {overflow-x: hidden;}
/* width on #content makes it enclose floated content in IE 6 7
- you may like to add overflow: hidden; to do the same in real
browsers */
#content {background: transparent;}
/* fix doubled margin bug in IE 6 */
#search-wrap {display: inline;}
/* margin-top pokes thru container in old IE */
#primary-nav {
background: #ddd url(bg.gif) repeat-x bottom;
margin-top: 0;
padding-top: 10px;
}
BTW - Why do you link to a stylesheet in the middle of the BODY content?
--
Cordially,
David
--
David, thanks for your response. That did the trick and I am grateful for your
help. If there is a primer somewhere that addresses css issues with IE that you
would recommend I'd love to know since I need to get up to speed on the issues
inherent in developing in older versions of IE.
Your question about why I put a stylesheet link into the body is a fair and
good one. This site is being developed in a CMS that has a header include (the
CMS is Omeka, which is being developed for museums, but its structure is
similar to many WordPress themes with header includes). That particular link
gives each section of the site a different color band at the top and bottom of
the page. I didn't know how to parse out each section other than to put that
link within the body, given that they all use the same header. If you have
suggestions, I would love to hear them. I didn't feel comfortable doing it that
way.
Best, Jeff
__
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] Problem in IE
I'm in the middle of developing a website and have just made a change to the CSS, making the header a light shade of gray to contrast it to the content area below (it was white). It's showing up correctly in Firefox but, of course, something is amiss in IE (I'm looking at it in IE7). A link to a typical page is: http://americanartinvites.com/omeka/features The link to the style sheet is: http://americanartinvites.com/omeka/themes/fromscratch/css/screen.css Any help in rectifying this would be appreciated. Thanks. Jeff __ 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] Problem in IE
On 2/14/11 8:39 AM, Gates, Jeff wrote:
I'm in the middle of developing a website and have just made a change
to the CSS, making the header a light shade of gray to contrast it to
the content area below (it was white). It's showing up correctly in
Firefox but, of course, something is amiss in IE (I'm looking at it
in IE7).
A link to a typical page is:
http://americanartinvites.com/omeka/features The link to the style
sheet is:
http://americanartinvites.com/omeka/themes/fromscratch/css/screen.css
Even more problems in IE 6... :)
The search FIELDSET expands in that browser-- I suggest replacing the
FIELDSET with a DIV to get it working cross-browser (unless someone else
has a better solution...)
I put these rules at the end of the screen.css as overrides. They fixed
the problems my end. Hope they help:
/* fix IE6 expanding width bug */
#wrap {overflow-x: hidden;}
/* width on #content makes it enclose floated content in IE 6 7
- you may like to add overflow: hidden; to do the same in real
browsers */
#content {background: transparent;}
/* fix doubled margin bug in IE 6 */
#search-wrap {display: inline;}
/* margin-top pokes thru container in old IE */
#primary-nav {
background: #ddd url(bg.gif) repeat-x bottom;
margin-top: 0;
padding-top: 10px;
}
BTW - Why do you link to a stylesheet in the middle of the BODY content?
--
Cordially,
David
__
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] Problem with IE 7 and transparency
Hi Everyone,
So I am running into one of my first Conditional comment issues... I
haven't had to work with it to this degree before so I'm a little lost
and looking for some help.
The website is:
http://www.raoset.com/dev/schreurprinting.com/p.php?purl=cssd-test
The problem is the logo, it's using some transparency effects so I
have the following code:
!--[if lte IE 6]!--
.noshow {display:none;}
!--![endif]--
.floatright {float:right;}
.floatleft {float:left;}
/style
body
div class=wrapper
h1 id=bannerWelcome {$row['FName']}/h1
div class=text
!--[if lte IE 6]!--
div style=position:relative; height: 105px; width: 206px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='http://www.raoset.com/dev/schreurprinting.com/media/spc.logo.new.png',sizingMethod='scale')
;
!--![endif]--
img class=noshow
src=http://www.raoset.com/dev/schreurprinting.com/media/spc.logo.new.png
width=250px height=auto/div
/body
Obviously not the entire page... but the problem I'm running into is
from IE 7... It is not displaying the image as it does in safari, or
firefox. If you go to the test page, I think you'll see what I mean..
If not, I'll try and explain better.
Anyone have a clue how to fix it?
Thanks for looking!
--
Jason Pruim
Raoset Inc.
Technology Manager
MQC Specialist
11287 James St
Holland, MI 49424
www.raoset.com
[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] Problem with IE 7 and transparency
On Sep 4, 2008, at 12:52 PM, Jason Pruim wrote:
Hi Everyone,
So I am running into one of my first Conditional comment issues... I
haven't had to work with it to this degree before so I'm a little lost
and looking for some help.
The website is:
http://www.raoset.com/dev/schreurprinting.com/p.php?purl=cssd-test
The problem is the logo, it's using some transparency effects so I
have the following code:
!--[if lte IE 6]!--
.noshow {display:none;}
!--![endif]--
.floatright {float:right;}
.floatleft {float:left;}
/style
body
div class=wrapper
h1 id=bannerWelcome {$row['FName']}/h1
div class=text
!--[if lte IE 6]!--
div style=position:relative; height: 105px; width: 206px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='http://www.raoset.com/dev/schreurprinting.com/media/spc.logo.new.png',sizingMethod='scale')
;
!--![endif]--
img class=noshow
src=http://www.raoset.com/dev/schreurprinting.com/media/spc.logo.new.png
width=250px height=auto/div
/body
Obviously not the entire page... but the problem I'm running into is
from IE 7... It is not displaying the image as it does in safari, or
firefox. If you go to the test page, I think you'll see what I mean..
If not, I'll try and explain better.
Anyone have a clue how to fix it?
Thanks for looking!
Just after I sent this message I realized something I hadn't tried...
So I tried it and now the logo displays, but there is a line at the
top of the logo that is not supposed to be there... I think the
problem comes from it displaying both the conditional comment image
and the original image... Could that be?
--
Jason Pruim
Raoset Inc.
Technology Manager
MQC Specialist
11287 James St
Holland, MI 49424
www.raoset.com
[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] Problem with IE 7 and transparency
Jason Pruim wrote: On Sep 4, 2008, at 12:52 PM, Jason Pruim wrote: The website is: http://www.raoset.com/dev/schreurprinting.com/p.php?purl=cssd-test Anyone have a clue how to fix it? Jason Pruim The IEs are not recovering from all the markup errors, css errors, different sizes for the same image, and the malformed cc's. Correcting all brings it up in 6 7 with the dashed border at the top of the image no longer there. Start by running the file through Tidy online to correct the markup. Correct remaining html errors manually. Then on to the other issues above... aside: Most folks, if they are anything like me, are not going to hang around on that page while it struggles to load the images. -- A thin red line and a salmon-color ampersand forthcoming. 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] Problem with IE 7 and transparency
I would tend to agree with David on the loading part. I clicked the link right after loading this email, read the entire conversation, went to your link, and had an additional ~20 sec. wait for the beans. Probably a minute total...just for the beans :) Figured you should know, maybe something to look into. Keith D. __ 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] Problem with IE 7 and transparency
On Sep 4, 2008, at 3:19 PM, Keith DiSarno wrote: I would tend to agree with David on the loading part. I clicked the link right after loading this email, read the entire conversation, went to your link, and had an additional ~20 sec. wait for the beans. Probably a minute total...just for the beans :) Figured you should know, maybe something to look into. Keith D. Once the design is finalized (I'm working with the designer at my new job) it will load much better and faster :) I need to get better at running my stuff through the validators... and I apologize. I will work on that here shortly. Thanks! -- Jason Pruim Raoset Inc. Technology Manager MQC Specialist 11287 James St Holland, MI 49424 www.raoset.com [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/
[css-d] Problem with IE
I am having a problem with IE. Take a look: http://www.pnma.org/beta_index.htm Looks good with other browsers Help! John __ 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] problem with IE 6 Double Margin Bug?
Gunlaug,
As always your help is amazing! Thank you. And also, Thank you to all
who have helped me along the way to get down to the point, where I
only had 3 bugs left to fix! :)
One question I did have though... I understand the .content {display:
inline;} and the leftColumn {position: relative;} but what does the *
html .wrapper {zoom: 1;} do exactly?
I put it up at the top of the css file, and it works, but is that the
best place to put it? Or should it go somewhere else?
Thanks again Everyone!
On Jan 14, 2008, at 4:44 PM, Gunlaug Sørtun wrote:
Jason Pruim wrote:
I have done some searching about the double margin bug, and have
tried to do Display: inline and margin-left: -80px;
_margin-left-160px but neither wants to work. Do I have the right
bug?
HTTP://www.raoset.com
Yes, you have the right bug, but you're targeting it on the wrong
element.
There are also some other IE6 bugs involved.
The addition of...
.content {display: inline;}
.leftColumn {position: relative;}
* html .wrapper {zoom: 1;}
...will kill the right IE6 bugs on the right elements.
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/
--
Jason Pruim
Raoset Inc.
Technology Manager
MQC Specialist
3251 132nd ave
Holland, MI, 49424
www.raoset.com
[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] problem with IE 6 Double Margin Bug?
Jason Pruim wrote:
One question I did have though... I understand the .content {display:
inline;} and the leftColumn {position: relative;} but what does the
* html .wrapper {zoom: 1;} do exactly?
It's a 'hasLayout'[1] trigger, and in your case I found the non-valid
'zoom' to work best - alternative (valid) triggers tended to have
negative side-effects. I also had to use the '* html' hack to target IE6
(and below), to avoid conflicts with some of IE7' internal bug-fixes.
Without this 'hasLayout' trigger IE6 seemed to interpret .wrapper's
dimensions a bit unreliable - changed positions for .wrapper's children
when hovering links - which is a clear sign that IE6 couldn't determine
.wrapper's dimensions and relation to other elements.
Triggering 'hasLayout' means to lay out the area of .wrapper -
stiffen up IE6' backbone so it immediately interprets exactly how wide
.wrapper is, and where to position .wrapper's children relative to
.wrapper's edges. Result: stable rendering.
I put it up at the top of the css file, and it works, but is that the
best place to put it? Or should it go somewhere else?
Put it anywhere you like where IE6 can pick it up, as long as it is
complete - as I wrote it. The CSS validator will flag it as an error
anyway - unless it is hidden in a conditional comment or something to
that effect.
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
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] problem with IE 6 Double Margin Bug?
On Jan 15, 2008, at 4:09 PM, Gunlaug Sørtun wrote:
Jason Pruim wrote:
One question I did have though... I understand the .content {display:
inline;} and the leftColumn {position: relative;} but what does the
* html .wrapper {zoom: 1;} do exactly?
It's a 'hasLayout'[1] trigger, and in your case I found the non-valid
'zoom' to work best - alternative (valid) triggers tended to have
negative side-effects. I also had to use the '* html' hack to target
IE6
(and below), to avoid conflicts with some of IE7' internal bug-fixes.
Without this 'hasLayout' trigger IE6 seemed to interpret .wrapper's
dimensions a bit unreliable - changed positions for .wrapper's
children
when hovering links - which is a clear sign that IE6 couldn't
determine
.wrapper's dimensions and relation to other elements.
Triggering 'hasLayout' means to lay out the area of .wrapper -
stiffen up IE6' backbone so it immediately interprets exactly how
wide
.wrapper is, and where to position .wrapper's children relative to
.wrapper's edges. Result: stable rendering.
Haven't had a chance to read all of that website yet, but thank you
for it. It's an interesting read so far! It does bring up the question
as to why exactly Microsoft feels they need to do that :) But I'm sure
I can search the archives, and the web to find out lots of theories
about that! :)
Thank you for taking the time to answer! Always appreciated!
--
Jason Pruim
Raoset Inc.
Technology Manager
MQC Specialist
3251 132nd ave
Holland, MI, 49424
www.raoset.com
[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/
[css-d] problem with IE 6 Double Margin Bug?
Hi All :) Recently it was pointed out to me, that I still have a few issues in regards to internet explorer on my site... I am on a quest to squash all those out so I don't have to worry about it. So here's my question: I have done some searching about the double margin bug, and have tried to do Display: inline and margin-left: -80px; _margin-left-160px but neither wants to work. Do I have the right bug? The website is here: HTTP://www.raoset.com And the CSS: HTTP://www.raoset.com/media/css/main.css Any help with this is greatly appreciated. Thanks for looking! -- Jason Pruim Raoset Inc. Technology Manager MQC Specialist 3251 132nd ave Holland, MI, 49424 www.raoset.com [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] problem with IE 6 Double Margin Bug?
Jason Pruim wrote:
I have done some searching about the double margin bug, and have
tried to do Display: inline and margin-left: -80px;
_margin-left-160px but neither wants to work. Do I have the right
bug?
HTTP://www.raoset.com
Yes, you have the right bug, but you're targeting it on the wrong element.
There are also some other IE6 bugs involved.
The addition of...
.content {display: inline;}
.leftColumn {position: relative;}
* html .wrapper {zoom: 1;}
...will kill the right IE6 bugs on the right elements.
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] problem in ie, peekaboo problem ?
I did not get back into working the peekaboo problem, hopefully in the
next day or so. However, I ran into a similar gap problem with
mootools/accordion. I had to add a padding into my #vnav .accordion
style something like:
#vnav .accordion {
padding: .1em 0em; /* OR */
padding: 1px 0px;
}
For IE. It seemed to require 'something'. See a working example with
style at:
http://www.dottedi.biz/codesamples/mootools/accordion_menu/index.php
http://www.dottedi.biz/codesamples/mootools/accordion_menu/stylesheet.css
-B
WenChen wrote:
Hi
The following page use prototype accordion effect,
it look fine in ff, but in ie it shows big space between each accordion
header
http://newped2.auckland.ac.nz/coursebuilder/11/publish/1/3.html
Is it a peekaboo problem?
Any help you could offer would be really appreciated.
Thanks in advance
Wen
__
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/
--
Bob Meetin
dotted i - Internet Strategies Solutions
www.dottedi.biz
303-926-0167
__
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] problem in ie, peekaboo problem ?
WenChen wrote:
Hi
The following page use prototype accordion effect,
it look fine in ff, but in ie it shows big space between each accordion
header
http://newped2.auckland.ac.nz/coursebuilder/11/publish/1/3.html
Is it a peekaboo problem?
Any help you could offer would be really appreciated.
Thanks in advance
Wen
Hi Wen
There doesn't seem to be any floats elements involved so I would that this is a
peekaboo bug which involves missing content. What you have is a vertical space.
It took me quite a while to analyse what I had to look for. You made no note in
your message that id=1_ was a line of javascript which I finally found it in
the code after half and hour. well playing further i found the answer. Resize
the viewpoint in IE to about 200px wide and watch the space above the content.
What you will notice is a certain point, the space disappears. Scroll up the
page and take a look at the Tasks | Resources links. Narrow the viewpoint
slightly more and these links will drop. What do you see on the left of these
links, a float containing your menu. Now widen the viewpoint enough so you can
see the space above the content reappear and notice how this content within the
accordion_content div is always below this float. Click on each of the
accordion js thingy and notice that for each of these accordion_content div the
content is always below the float. When I click on Final and then maximize the
window, the content has no space above it, but now the content is only 100px
wide. This does all send me buggy. Wen, what is this comment in the
accordion.js about. Does the space disappear when this is removed.
WenChen made some tiny change to fix this.currentAccordion.scrollHeight
this.currentAccordion.scrollWidth Problem
I don't understand javascript, but there could be something there maybe. Now
after an hour of bug hunting I now move on to that float with the menu!
#navcontainer {
background-color: #FF;
width: 169px;
float: left;
margin-top: 10px;
}
Is the problem fixed if negative margins are added as such below.
#navcontainer {
background-color: #FF;
width: 169px;
float: left;
margin: 10px -500px -1000px 0;
}
This technique is removing floats [1]. I hope this helps.
BTW, this can been achieved just by xhtml and CSS [2], but it only works in
Firefox and Mozilla and buggy in Opera.
[1] http://www.gunlaug.no/contents/wd_chaos_03.html
[2] http://css-class.com/test/accordian.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] problem in ie, peekaboo problem ?
On Tue, 2007-09-11 at 08:46 -0700, Alan Gresley wrote:
#navcontainer {
background-color: #FF;
width: 169px;
float: left;
margin-top: 10px;
}
Is the problem fixed if negative margins are added as such below.
#navcontainer {
background-color: #FF;
width: 169px;
float: left;
margin: 10px -500px -1000px 0;
}
This technique is removing floats [1]. I hope this helps.
OMG...
This is so wonderful.
Yes the problem is solved now.
And I will add Alan your name in the contributors list in the future
when the tool go opensource.
Best wishes
WenChen
__
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] problem in ie, peekaboo problem ?
Hi The following page use prototype accordion effect, it look fine in ff, but in ie it shows big space between each accordion header http://newped2.auckland.ac.nz/coursebuilder/11/publish/1/3.html Is it a peekaboo problem? Any help you could offer would be really appreciated. Thanks in advance Wen __ 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] problem with IE 6 and a border
JGardner wrote:
I have a red border under the navigation bar which displays correctly in
Firefox, but in IE there is a gap between it and the navigation.
The other problem is another border issue, the gold border around the image
on the page (it is a rotating image) has a gap between the bottom of the
picture and the gold border - again only in IE.
You can see the site/problem here http://www.wacochildrenstheatre.com/
Hi Jennifer:
If you add this declaration in your css:
img {
vertical-align: bottom;
}
It should take care of the problem. IE is allowing space under your
images for the descenders of elements.
Hope this helps,
Matthew
--
Matthew Ohlman
www.ohlman.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] problem with IE 6 and a border
Well, I here I am again with an IE problem. It is really two problems. I have a red border under the navigation bar which displays correctly in Firefox, but in IE there is a gap between it and the navigation. The other problem is another border issue, the gold border around the image on the page (it is a rotating image) has a gap between the bottom of the picture and the gold border - again only in IE. You can see the site/problem here http://www.wacochildrenstheatre.com/ Once again, any help would be greatly appreciated. You all amaze with your expertise!!! Thanks, Jennifer Be a better Globetrotter. Get better travel answers from someone who knows. Yahoo! Answers - Check it out. http://answers.yahoo.com/dir/?link=listsid=396545469 __ 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 IE 6 and a border - solved
Wow, that fixed it!
Thank you Matthew - this group is truly amazing.
Jennifer
- Original Message
From: Matthew Ohlman [EMAIL PROTECTED]
To: JGardner [EMAIL PROTECTED]
Cc: CSS List css-d@lists.css-discuss.org
Sent: Thursday, August 9, 2007 8:42:35 PM
Subject: Re: [css-d] problem with IE 6 and a border
JGardner wrote:
I have a red border under the navigation bar which displays correctly in
Firefox, but in IE there is a gap between it and the navigation.
The other problem is another border issue, the gold border around the image
on the page (it is a rotating image) has a gap between the bottom of the
picture and the gold border - again only in IE.
You can see the site/problem here http://www.wacochildrenstheatre.com/
Hi Jennifer:
If you add this declaration in your css:
img {
vertical-align: bottom;
}
It should take care of the problem. IE is allowing space under your
images for the descenders of elements.
Hope this helps,
Matthew
--
Matthew Ohlman
www.ohlman.com
Shape Yahoo! in your own image. Join our Network Research Panel today!
http://surveylink.yahoo.com/gmrs/yahoo_panel_invite.asp?a=7
__
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] Problem between IE 6 and Firefox - at end of my rope.... please help
I can't figure out why but in IE 6 my spacing looks different (more space on LI). I've read (and tried) just about every hack related to extra spaces on LI's in IE 6 but all to no avail. Here's my design - can someone just point me in the right direction and I'll be happy to figure out within the code on my own. http://www.webjerks.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 between IE 6 and Firefox - at end of my rope.... please help
I can't figure out why but in IE 6 my spacing looks different (more space on LI). http://www.webjerks.com/ Looks ok here. There's a slight difference, but nothing bad. A couple of other issues though. - Why are there images (which don't load anyway) in the list? Would make more sense to use these in the css. - And why use an ordered list when you hide the numbering and hardcode it? Eystein http://thatnorwegianguy.wordpress.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 between IE 6 and Firefox - at end of my rope....please help
First off I don't see your problem. (I'm using IE7) However I might suggest you don't use .png because I'm getting a weird png error. Also you might change the image to a background image for your li. Basically define it in your CSS instead of your links. Also what are the span tags for? -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Michael S. Kirkpatrick Sent: Friday, June 01, 2007 1:23 PM To: css-d@lists.css-discuss.org Subject: [css-d] Problem between IE 6 and Firefox - at end of my ropeplease help I can't figure out why but in IE 6 my spacing looks different (more space on LI). I've read (and tried) just about every hack related to extra spaces on LI's in IE 6 but all to no avail. Here's my design - can someone just point me in the right direction and I'll be happy to figure out within the code on my own. http://www.webjerks.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-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 between IE 6 and Firefox - at end of my rope.... please help
Michael S. Kirkpatrick wrote: I can't figure out why but in IE 6 my spacing looks different (more space on LI). I've read (and tried) just about every hack related to extra spaces on LI's in IE 6 but all to no avail. Here's my design - can someone just point me in the right direction and I'll be happy to figure out within the code on my own. http://www.webjerks.com/ Your blk_button images don't seem to be on the server. Also, as others have mentioned, I think you will get better results if you make them background images on the anchors or span elements. That way the browsers won't be trying to make space for them and you should be able to control the spacing better. Also, I would remove the absolute positioning from the span element and use margins to padding to get it into position. The text is awfully hard to read and your visitors may want to bump up the font size to compensate. Absolute positioning won't tolerate that very well. Lori __ 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] problem with ie/firefox
Hello,
I am having a problem getting something to look good in both ie and firefox.
If I fix the margin/padding to look correct in IE the gray background comes up
behind the navigation into the header in firefox. If I fix it in firefox, I
get a white gap in between the navigation and the gray backgound underneath the
navigation bar. You can see it here:
http://www.gns-abilene.com/index.htm
Right now I have it set up to look correct in IE. These are the only two
browsers I have access to, so I am unsure of what happens in some of the other
ones out there.
Here is the css that deals with that part of the site:
#container #homeRightContent #working {
float: right;
}
#container #homeLeftContent {
background-color: #ececec;
/*padding-top: 1em;*/
padding-left: 1.4em;
font-size:.85;
}
#container #homeLeftContent h1 {
padding: 1em 0 0 0;
}
#container #homeRightContent #working {
padding-left: 1.5em;
}
#container #homeLeftContent h2 {
padding-top: 0em;
}
I sure would appreciate some help - thank you in advance!!
Jennifer
__
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] problem with ie/firefox
Hi Jennifer,
Do the following in your CSS:
1-) Get rid of margin-top:1em for #navigation;
2-) Add: #header map {margin-bottom:1em;}
Maurício Samy Silva
http://www.maujor.com/
I am having a problem getting something to look good in both ie and
firefox. If I fix the margin/padding to look correct in IE the gray
background comes up behind the navigation into the header in firefox. If
I fix it in firefox, I get a white gap in between the navigation and the
gray backgound underneath the navigation bar. You can see it here:
http://www.gns-abilene.com/index.htm
Right now I have it set up to look correct in IE. These are the only two
browsers I have access to, so I am unsure of what happens in some of the
other ones out there.
__
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 IE
Danielle Tilley wrote:
Does anyone have any idea why on my sites homepage
www.ponderosawebsolutions.com/OREND
the div containing the logo and quote shows up in Firefox but not in
IE7. I haven't checked any other browsers yet.
IE needs a 'hasLayout'[1] trigger.
I suggest you add...
#content {height: 1%;}
...to fix IE's problem.
Opera 9.x and Safari 2.x render it like Firefox 2.x does.
Remark: you should also test with browser's font-resizing options, and
improve the design so it can take a bit of stress.
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] Problem with IE for Mac
Dear css-discuss I have a problem with the IE browser for Mac. The page can be seen at: http://www.sheldrake.org/homepage.html which will eventually be the new index page for this website. The page works ok on IE 6.0 for Windows, Firefox 1.0.1 and Safari 1.2 for Mac. On IE for Mac the page structure breaks down, the fern image appears right of the Nav bar instead of below, and the navigation links don't work. The problem seems to be associated with the css scripting for the nav bar (within head section of page). Help much appreciated. John Caton. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with IE for Mac
On Sep 7, 2006, at 8:52 PM, [EMAIL PROTECTED] wrote: I have a problem with the IE browser for Mac. The page can be seen at: http://www.sheldrake.org/homepage.html which will eventually be the new index page for this website. The page works ok on IE 6.0 for Windows, Firefox 1.0.1 and Safari 1.2 for Mac I would suggest as a first step to validate your html http://validator.w3.org/detailed.html your Doctype is on the 3rd line instead of the first one,... (I tried to save your page locally, but my browser happily made a mess). The clean up the comments in your css section. I saw a least one miss- nested comment there, under div#listmenu, you start a comment that is not closed. Some browsers are quite relaxed on those things, IE Mac can be very picky. If you still have problems with IE Mac, browse around this site: http://www.l-c-n.com/IE5tests/ Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] problem with IE in 600x800 widths
Hello all, Could someone take a look at the browser cam screenshots David gave me (thanks David!). If you go to the second page of results you'll see that on a Windows computer with 800x600 resolution, using OS XP or 2000-Pro in an IE browser, the body of the page gets shoved down below the nav images. Does anyone have any idea WHY that only happens under those circumstances and what I can do to fix it? http://www.browsercam.com/public.aspx?proj_id=261744 Thanks! Erin Spangler [EMAIL PROTECTED] wrote: Could someone who has browser-cam check this page for me? http://www.hotfrenchbulldogs.com/regarding.html (or pick any page for that matter except the index page) Erin Spangler 26 shots here: http://www.browsercam.com/public.aspx?proj_id=261744 I did not wait for them to load. Best, ~dL __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] problem with IE in 600x800 widths
[EMAIL PROTECTED] wrote:
Does anyone have any idea WHY that only happens under those
circumstances and what I can do to fix it?
Cause: 3px bug moved on to container, added to width and getting
squeezed in IE.
One working solution, add...
#leftnav {margin-bottom: -1000px;}
...which makes #leftnav take up no space (as the browsers see it), so IE
have nothing to drop page-body below, and will keep it staying up there
regardless of window-width.
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Problem with IE and strange blinking
Hi All, Somebody has some explanation to the strange effect in scrolls of Agenda and Noticias y Novedades, when you pass the cursor over the buttons of the right superior zone. Only I have seen it in IE. Web is http://comarcajoven.com Thanks in advance -- Pedro Iturriaga Santolaya Construcción de web basada en estándares (W3C). Diseño centrado en el usuario. Accesibilidad. [EMAIL PROTECTED]www.ipit.biz Tel: +34 985 116990 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with IE and strange blinking
Hi Pedro,
Somebody has some explanation to the strange effect in
scrolls of Agenda
and Noticias y Novedades, when you pass the cursor over
the buttons of
the right superior zone. Only I have seen it in IE.
You have to aply Layout to the container #menu_sup for IE.
Something like: #menu_sup { zoom:1 }
Then it should work.
For theorie on this matter:
http://www.satzansatz.de/cssd/onhavinglayout.html
Regards Rainer
--
www.rohschnitt.de
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with IE and strange blinking
Pedro Iturriaga wrote:
Hi All, Somebody has some explanation to the strange effect in
scrolls of Agenda and Noticias y Novedades, when you pass the cursor
over the buttons of the right superior zone. Only I have seen it in
IE.
Web is http://comarcajoven.com
IE is recalculating and re-rendering the /entire/ layout on hover-action
in that section - every time. That causes the flicker.
You can prevent the flickering scrollbars by isolating #menu_sup from
the rest of the layout in IE only, by adding a 'hasLayout'[1] trigger.
Adding this should work...
#menu_sup {height: 100%;}
...and I have tested it for your page, just to be on the safe side :-)
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
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Problem with IE Double Margin Bug (I think?)
Hi all, I seem to be having a problem with the IE double margin bug on floats. It's only affecting this page: http://roblin.bluelangroup.net/v4_Services.php and only when viewed in IE6. Other pages on the site render fine in FF and IE. The CSS can be viewed at: http://roblin.bluelangroup.net/master.css I've tried adding the PIE fix of display:inline to the #wrap-inner, #content, and #menu divs (there are my floats) individually, and in combination with each other. Nothing seems to correct the problem. Thanks in advance for any suggestions. - Erik Domingo PS I left the display:inline set on the #content div; playing with background colors seemed to point to that div as the one whose left-margin is doubling (strange, since I thought the bug only affected margins on the same side as the float...?) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with IE Double Margin Bug (I think?)
Erik Domingo wrote:
I seem to be having a problem with the IE double margin bug on
floats. It's only affecting this page:
http://roblin.bluelangroup.net/v4_Services.php
and only when viewed in IE6. Other pages on the site render fine in
FF and IE.
The IE double margin on floats bug isn't the problem.
Firefox handles table align=center ... different from IE (and
Opera), so if Firefox gives you the correct look, you'll have to wrap
that table in a non-float - /not/ a 'float: right'.
This is all you need on the #content container...
#content {
margin-left: 200px;
border-left: 1px solid black;
}
...to make IE6 (and Opera) render the page exactly like Firefox does.
---
I have no idea whether the following is exactly how that table-centering
in a float is handled in these browsers, but this is what it appears like:
- Floats without defined width will shrink-wrap, but Firefox won't let
that happen because the 'align=center' on the table creates equal
margins on both sides that are pushing outwards as far as possible in
order to center the table.
- IE6 (and Opera) seems to shrink-wrap the float first, so there are
no space, or need, for margins to center the table.
The result: two different outcomes from table-centering in a width-less
float. No width-less float = no visible differences.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Problem With IE
Hello, I am relatively new to CSS I thought I would give it a go on a design and the design looks fine in every browser except IE. The site is at http://www.soihost.com/second/ The CSS is at http://www.soihost.com/second/screenstyle.css I have validated and spent the last 2 days trying to find a answer on Google with no luck. Thanks for any help! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem With IE
Ken Webster wrote: Hello, I am relatively new to CSS I thought I would give it a go on a design and the design looks fine in every browser except IE. The site is at http://www.soihost.com/second/ The CSS is at http://www.soihost.com/second/screenstyle.css I have validated and spent the last 2 days trying to find a answer on Google with no luck. Drop the (optional) xml declaration -- it throws IE into Quirks Mode. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Problem With IE
Try with this style for your menulist:
ul.navbar {
width : 100%;
margin : 0;
padding : 0;
background-color : #89d60e;
}
.navbar li {
float: left;
list-style:none;
width: 20%;
}
And the set the width of .titleBox top 98%
// Sebastian Dammark
www.dammark.net
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Problem with IE showing text
Hi, When I view my page Internet Explorer is not displaying the text right away. I have to highlight the text or scroll the page for the text to be show and sometimes after that it disappears again. The text displays fine with Firefox...so it's not a font color issue like I first thought. Does anyone know what this issue is?...is a CSS issue or what?...I never had this happen before so I'm clueless __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with IE showing text
Brian Jones wrote: Hi, When I view my page Internet Explorer is not displaying the text right away. I have to highlight the text or scroll the page for the text to be show and sometimes after that it disappears again. The text displays fine with Firefox...so it's not a font color issue like I first thought. Does anyone know what this issue is?...is a CSS issue or what?...I never had this happen before so I'm clueless Hi Brian, IE has different kinds of bugs causing not showing or jumping away, so it is difficult to say what in your case will be the reason. Or maybe it is a small typo in your code that makes IE go away. - Do you have a link to your page? Greetings, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Problem with IE and print stylesheet
I'm experiencing difficulties with my print stylesheet for www.iriswebtest.net/ter/THE SITE/services/. This is the first time I've done a print stylesheet so I'm kinda groping in the dark. It's working fine in Firefox but in IE6 it wants a page that is probably 10 inches wide, so it's not honoring my hoped-for right margin. Plus it's ignoring my h1 h2 h3 size declarations The CSS is embedded in the document. Any help will be greatly appreciated. Averill Ring __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with IE
Alan Chandler wrote: However, it is still not exactly right. The black band with the title in it should more or less (I think there is a couple of pixels out at the moment) line up with the top of the logo picture). On IE it seem to be about the third the way down the logo picture. zero the default margin-top of the h1 -if that's possible in the Tapestry Framework ;) Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with IE
On Sunday 12 February 2006 10:29, Ingo Chao wrote: Alan Chandler wrote: However, it is still not exactly right. The black band with the title in it should more or less (I think there is a couple of pixels out at the moment) line up with the top of the logo picture). On IE it seem to be about the third the way down the logo picture. zero the default margin-top of the h1 It works thanks, but I don't understand why margin-top was ever non zero. My css guides say its default value is zero and its not inherited. -if that's possible in the Tapestry Framework ;) Almost everything is possible, some things take more time than others :-) But the CSS is all mine, I have a standardardized border component that takes a application level parameter of the url for the site CSS and another one, if I want, for each page and writes them into the header. Its my brain that gets fried, trying to follow all the problems browser differences occurs. Its made worse by the fact that I use Konqueror as my standard browser, which almost nobody takes account of and which occassionally does some strange things. -- Alan Chandler http://www.chandlerfamily.org.uk Open Source. It's the difference between trust and antitrust. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with IE
Alan Chandler wrote:
On Sunday 12 February 2006 10:29, Ingo Chao wrote:
zero the default margin-top of the h1
It works thanks, but I don't understand why margin-top was ever non zero. My
css guides say its default value is zero and its not inherited.
Browser defaults are different, and, to complicate things, the
implementation of margin-collapsing is buggy in IE.
Some set all to zero and build up upon:
* {margin:0; padding:0}
Its my brain that gets fried, trying to follow all the problems browser
differences occurs. Its made worse by the fact that I use Konqueror as my
standard browser, which almost nobody takes account of and which
occassionally does some strange things.
You are right, it's boring to speak about the state of bug decay in
different IE versions like in a self-help group again and again, and it
would be fun to discuss more fresh stuff about Konqueror and Safari here.
Ingo
--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with IE
On Saturday 11 February 2006 07:52, Alan Chandler wrote: On Saturday 11 February 2006 02:42, ilduca69 wrote: http://validator.w3.org/check?uri=http%3A%2F% 2Fwww.chandlerfamily.org.uk%2Fcharset=%28detect+automatically% 29doctype=Inlineverbose=1 I agree that the validator seems to fail quite a lot. OK - I managed to almost fix up the page so the validator works, mainly by defining the DOCTYPE an xhtml. There is one warning which will take some more work, but is not related to this. Now, I'll ask the question again . My web page, at the url below will not display properly in IE. The div with id=header is being expanded vertically to match the height of the floated image, whereas I want to to stay at the height of the text plus padding, as it does in Firefox. I have been unable to find what quirk it is that causes this, and therefore not find a way around it. Can anyone help. -- Alan Chandler http://www.chandlerfamily.org.uk Open Source. It's the difference between trust and antitrust. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with IE
Alan You wrote Now, I'll ask the question again . My web page, at the url below will not display properly in IE. The div with id=header is being expanded vertically to match the height of the floated image, whereas I want to to stay at the height of the text plus padding, as it does in Firefox. I have been unable to find what quirk it is that causes this, and therefore not find a way around it. Can anyone help. The *quirk* in your page is the you have triggered IE's Quirks [1] mode. You have placed two comments ahead of the XHTML Doctype Declaration. Moving those bits below the Doctype in the head of your document will trigger IE's Standards Mode.[2] Any code or comments ( including an XHTML prologue) appearing before the XHTML Doctype will cause IE 6 to switch. This condition should be fixed in IE7. Getting IE 6 in Standards mode should make it render more like FireFox. [1] http://www.quirksmode.org/css/quirksmode.html [2] http://www.alistapart.com/stories/doctype/ Hope this helps... Jim Nannery www.redfernenterprises.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with IE
Alan Chandler wrote:
OK - I managed to almost fix up the page so the validator works, mainly by
defining the DOCTYPE an xhtml. There is one warning which will take some
more work, but is not related to this.
Now, I'll ask the question again .
Thanks for validating; it makes debugging easier, and it's not an end in
itself.
My web page, at the url below will not
display properly in IE. The div with id=header is being expanded
vertically to match the height of the floated image, whereas I want to to
stay at the height of the text plus padding, as it does in Firefox.
I have been unable to find what quirk it is that causes this, and therefore
not find a way around it.
http://www.chandlerfamily.org.uk
You are throwing comments in before the doctype; therefore, IE7b2 and
IE6 are rendering the page in quirks mode.
I mention this because the fix below will /not/ work in quirks mode.
Your CSS
#header { ... width: 800px; }
gives 'layout' to the header [1]. Having layout, the header will expand
to contain the floating img.
#header img { ... float: left; }
In standards mode, IE7 would respect a given height - let's say, 50px -
#header { ... width: 800px; height: 50px; }
Without this explicit height, even in 'more standards' mode, IE7
unfortunately still expands the header to contain the float because of
the mentioned 'layout' issue.
That's it for IE7b2.
IE6 needs a restriction to prevent the expanding:
#header { ... width: 800px; height: 50px; overflow:hidden;}
Now the height is respected, but the image is cut. So
#header img { .. float: left; position:relative;}
is needed to let the float stick out of the header.
This does not work in quirks mode, and this does not work in IE5.5 or below.
Other browsers shouldn't see this quirky stuff, so the head section
needs a conditional comment 'less than or equal to' IE7
!--[if lte IE7]
link rel=stylesheet href=iefix.css type=text/css /
![endif]--
and iefix.css says
#header { height: 50px; }
#header { _overfl\ow: hidden;} /* only IE6, because the underscore
excludes IE7 and the escape excludes IE5.5 */
#header img { _position:relative;} /* lte IE6 */
But I see, this path full of hacks. An alternative path would be to
change the condition that IE tries to contain the float at all.
Back to the first step:
#header { ... width: 800px; }
Can't your design do without this width?
Ingo
[1] http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with IE
On Saturday 11 February 2006 20:33, Ingo Chao wrote:
But I see, this path full of hacks. An alternative path would be to
change the condition that IE tries to contain the float at all.
Back to the first step:
#header { ... width: 800px; }
Can't your design do without this width?
I don't think its needed, so I took it out. Indeed, I would have difficulty
following the other path exactly, because much of the page header stuff is
generated by the Tapestry Framework that I am using and it would be quite
difficult (although not impossible) to figure out how to get it to render the
conditional stuff).
Now at least I get some semblance of what I want with IE6 (only one tried - I
run a linux desktop, so have to go bother my wife ot have a look).
However, it is still not exactly right. The black band with the title in it
should more or less (I think there is a couple of pixels out at the moment)
line up with the top of the logo picture). On IE it seem to be about the
third the way down the logo picture.
--
Alan Chandler
http://www.chandlerfamily.org.uk
Open Source. It's the difference between trust and antitrust.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] problem in ie 6.x windows with image
Hi all,
I am trying to place a single image in a footer such that it will overlap
the top and bottom of the footer...
url: http://baseballtriviaquiz.com/virgil/history.html
css: is contained within the page (I will remove it later)
I think you might be better off moving the tree image to the footer div as
a background image. You could have the tree, the light green and the
darker green bottom border combined into one very wide (depending on your
layout's width settings) image that would then be applied to the footer
div, positioned to the bottom left of the footer div.
#footer {
margin: 0 17px 1.0em 0;
padding: 0;
background: #c6d28a url(long-footer-bg.gif) no-repeat bottom left;
height: 25px;
}
Attempted diagram of iamge below.
xx
xx xx
xx xx
x
x
xx
xx x
xx this is the no-repeat very long bg image w/ treex
xx x
XX
x
- - OR - -
You could also try positioning the tree absolutely (instead of relative)
so that it is taken out of the document's normal flow, thus, not affecting
the footer's layout. I think the background image option is easier, and
more stable cross-borwser. I'm sure others will have excellent ideas too.
Good luck
--
Jono Young
Designer | Developer | Illustrator
Charleston Web Solutions
Bringing Higher Standards to the Lowcountry
http://www.charlestonwebsolutions.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Problem with IE
I have a problem on my personal web site (see url in my signature). There is an image and some text inside a div. div id=header img src=/images/logo.gif/imgh1Chandler's Zen/h1 /div The div itself has a background image which is repeated in the y-direction, the image is floated left. On firefox (and Konqueror) the height of this image is what I want, the depth of the heading text and its padding. A subsequent div (the menu) is designed to sit up to the right of the bottom element of the image. On IE, the background image is stretched down the the height of the floated left image, forcing the menu down below the image. I have searched around the net in search of any indication of what on IE is causing this problem and for a hack to get round it. But I can't find one. Can someone here help me please with what to do. Thanks. -- Alan Chandler http://www.chandlerfamily.org.uk Open Source. It's the difference between trust and antitrust. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with IE
Il giorno 10/feb/06, alle ore 23:19:22, Alan Chandler ha scritto: I have a problem on my personal web site (see url in my signature). There is an image and some text inside a div. div id=header img src=/images/logo.gif/imgh1Chandler's Zen/h1 /div http://validator.w3.org/check?uri=http%3A%2F% 2Fwww.chandlerfamily.org.uk%2Fcharset=%28detect+automatically% 29doctype=Inlineverbose=1 Thanks. -- Alan Chandler http://www.chandlerfamily.org.uk Open Source. It's the difference between trust and antitrust. ilduca69 XHTML + CSS http://ilduca69.altervista.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with IE
On Saturday 11 February 2006 02:42, ilduca69 wrote: Il giorno 10/feb/06, alle ore 23:19:22, Alan Chandler ha scritto: I have a problem on my personal web site (see url in my signature). There is an image and some text inside a div. div id=header img src=/images/logo.gif/imgh1Chandler's Zen/h1 /div http://validator.w3.org/check?uri=http%3A%2F% 2Fwww.chandlerfamily.org.uk%2Fcharset=%28detect+automatically% 29doctype=Inlineverbose=1 I agree that the validator seems to fail quite a lot. Most of the problem comes from closing the tags with a / inside the head Unfortunately I am not sure what I can do about this, because I am using the Tapestry Framework to generate the page, and this part is generated by a standard component. But, I guess my main question is - has this anything to do with the problem I am experiencing? -- Alan Chandler http://www.chandlerfamily.org.uk Open Source. It's the difference between trust and antitrust. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Problem in IE/WIN with borders
Hi, I'm a newbie and trying to learn CSS as i go along. Tried to convert my website from tables to css, but have a problem in Win/IE. Other browers (Firefox(lin,mac), Opera(mac), IE(mac) don't show this problem. Used borders to have same lenght columns, tried several other systems (Faux columns and overflow:hidden - padding) but they never suited my needs. http://roundtheworld.homelinux.com If you go the website the first time it all looks like it should. When you do a refresh or try a link the borders are all screwed up. I looks like it first displays the menus and then draw the border over it, so you can't see the menu anymore. The right menu is displaced to the center area and if you just go over it (hover) with your mouse it sudenly all comes back like it should. Go to the website again, by going to the adress bar en push enter (not refreshing) all works again. First idea was something to do with caching but nothing gave a sollution, tried a few hacks and fooled around in the css and html code, but couldn't come up with any solution. It could be dirty code/fault/error, but no other browser has this problem. Can somebody take a look at it PLEASE !! (my deadline is coming up, leaving for the trip in less than 14 days, and the site is everything but finished, put way too much time (intresting time though) in the css convertion.) Cindy __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem in IE/WIN with borders
cindy Smeulders wrote: http://roundtheworld.homelinux.com If you go the website the first time it all looks like it should. When you do a refresh or try a link the borders are all screwed up. I looks like it first displays the menus and then draw the border over it, so you can't see the menu anymore. Confirmed. I can not reproduce it locally, though, and life editing in IEDomExplorer is not reliable in this case. I'd try to play with the containing elements #container, #inner A position:relative for both or B position:static to both and zoom:1; to both In the desperate case this should not work, mix A+B. Please report back if it worked or not. (my deadline is coming up, leaving for the trip in less than 14 days, A Trans Siberian trip in winter? Good luck! Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] problem in IE with subnav layout
The page: http://www.lullabot.com/node/18 The problem in question is the secondary subnavigation layout. In IE, the background image only extends so far in IE, whereas in Firefox/everything else looks fine. See how, when correct, the li's are wide enough that they'll go past the left edge of the browser? Not happening in IE. If you outline div elements in both FF and IE you'll see that FF sends your navigation div all the way to the left, whereas IE does not. Where IE stops the white is exactly where the menu div ends. Get that menu div to extend left in IE and you'll be golden! __ 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/
Re: [css-d] problem in IE with subnav layout
Well, if i outline the #secondary-nav div, i see in all browsers that the width of that div stays at 120px as defined in the css. However, the difference is that the a breaks out of this parent div in FF/others, and is displayed running all the way left to the edge of the browser. Not in IE. The a stays within the parent div (#secondary-nav). Now, if i expand the width of the secondary-nav div to, say 500px, it extends rightwards, not leftwards (the desired effect). Is it possible to get it to extend leftwards somehow? Thanks, I really appreciate the help. -John CJ Larson wrote: The page: http://www.lullabot.com/node/18 The problem in question is the secondary subnavigation layout. In IE, the background image only extends so far in IE, whereas in Firefox/everything else looks fine. See how, when correct, the li's are wide enough that they'll go past the left edge of the browser? Not happening in IE. If you outline div elements in both FF and IE you'll see that FF sends your navigation div all the way to the left, whereas IE does not. Where IE stops the white is exactly where the menu div ends. Get that menu div to extend left in IE and you'll be golden! __ 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/ -- John Haas Web/Multimedia Designer [man][ape] design w: http://www.manapedesign.com e: [EMAIL PROTECTED] p: 215.868.2661 630 N. 17th St. #1 Philadelphia, PA 19130 No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.371 / Virus Database: 267.14.16/225 - Release Date: 1/9/2006 __ 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/
Re: [css-d] problem in IE with subnav layout
Well, if i outline the #secondary-nav div, i see in all browsers that the width of that div stays at 120px as defined in the css. However, the difference is that the a breaks out of this parent div in FF/others, and is displayed running all the way left to the edge of the browser. Not in IE. The a stays within the parent div (#secondary-nav). This isn't what I'm seeing. Using the CSS Editor in FF (web developer toolbar extension) I go to outline custom elements and highlight div and a. Both are extending completely the left (in the naviation, not content). In IE (doing the same thing using the IE Developer Toolbar) the div is restricted in size and does not go completely to the left. However, the a does. The white is being stopped at the left edge of the navigation div instead of running all the way to the left with the a. [sending screen shots off list] __ 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] problem in IE with subnav layout
Hi folks...
The page:
http://www.lullabot.com/node/18
The problem in question is the secondary subnavigation layout. In IE,
the background image only extends so far in IE, whereas in
Firefox/everything else looks fine. See how, when correct, the li's
are wide enough that they'll go past the left edge of the browser? Not
happening in IE.
The site is centered, and the background image of the links in my subnav
li's are set to display on a:hover.
I'd appreciate any help offered here, thanks!
The menu CSS:
.second #secondary-nav {
position: absolute;
top: 187px;
left: 20px;
margin: 0;
padding: 0;
width: 120px;
font-size: .6875em; /* 11px */
}
.second #secondary-nav ul {
list-style: none;
}
.second #secondary-nav ul li {
list-style:none;
margin: 0 0 .5em -500px;
}
.second #secondary-nav ul a {
display: block;
text-align: right;
padding: 0 8px 0 9px;
color: #394E81;
text-decoration: none;
line-height: 18px;
white-space: nowrap;
}
.second #secondary-nav a.active {
background-image: url('images/sl-whitebar.gif');
background-position: center right;
background-repeat: no-repeat;
margin: 0 0 0 -800px;
}
.second #secondary-nav a:hover {
text-decoration: underline;
}
--
John Haas
Web/Multimedia Designer
[man][ape] design
w: http://www.manapedesign.com
e: [EMAIL PROTECTED]
p: 215.868.2661
630 N. 17th St. #1
Philadelphia, PA 19130
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.371 / Virus Database: 267.14.15/223 - Release Date: 1/6/2006
__
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] problem with IE
Hi,
I have this page:
http://sportivoferroviario.com/index.php
The problem is in a group of div like this:
div id=news
div class=new/div
div class=new/div
div class=new/div
div class=advertiseimg src=banner.gif alt=banner/div
/div
#news {width:40em; }
#news div.new {float:left; width:20em; }
#news div.advertise img {width:20em; }
In Firefox I get the expected result:
http://sportivoferroviario.com/FF.jpg
But, in Internet Explorer 6, doesn´t:
http://sportivoferroviario.com/IE.jpg
Any help will be apreciatte,
Best regards
__
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] Problem with IE and background image
I am new on the list and need some help. I have placed a fixed background image on my Web site at: http://www.shamar.org/emet/. It works fine in Firefox but not IE. However, I have a fixed image on another place on the Web site http://www.shamar.org/ that works fine in both Firefox and IE. The style sheets are loaded here: for the site that doesn't work: http://www.shamar.org/style/news.css and for the site that does: http://www.shamar.org/style/core-style.css I am guessing it's something simple ... appreciate it. Lee __ 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] Problem with IE and background image
I am new on the list and need some help. I have placed a fixed background image on my Web site at: http://www.shamar.org/emet/. It works fine in Firefox but not IE. However, I have a fixed image on another place on the Web site http://www.shamar.org/ that works fine in both Firefox and IE. The style sheets are loaded here: for the site that doesn't work: http://www.shamar.org/style/news.css and for the site that does: http://www.shamar.org/style/core-style.css I am guessing it's something simple ... appreciate it. Lee __ 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] Problem in IE with Height of Page and Hovering Links
Hello,
I noticed something weird in IE6 with my page. When I hover a link (the
link color changes and its background color as well), the page height is
reduced and part of the text is no more visible.
I applied a min-height to the container div in the form:
/* for understanding browsers */
.container {
min-height: 55em;
height: auto;
}
/* for Internet Explorer */
/*\*/
* html .container {
height: 55em;
}
and it solved the problem. But is there a better workaround?
Thank you for your help.
Cheers
Chris
__
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/
