I'm trying to get this to work:
<!doctype html>
<html>
<style>
section{
display: none;
}
section:only-child {
display: block;
}
</style>
<body>
<section>This should be visible</section>
</body>
</html>
I believe that the text 'This should be visible' should be visible! This is also the case in Firefox. Firebug, as well as Safari's Web Inspector think so as well.
However, if you open the page in Safari (OSX and iPhone), the text is not showing. Why is this?
I tested your code, also with a doctype, and with a non-HTML5 element (a div). All webkit browsers I could test had issue: Safari-on-Windows 5, Chrome Windows, Chrome Linux, Epiphany-webkit.
When I changed from display states to background colours, however, webkit worked fine. Changing other display states like float also worked fine.
This is very likely a bug (though I didn't see one via search engines, but I did not search bugs.webkit.org) purely to do with changing display states. It also works fine if the element is first set to block and :only-child is set to none, so it would specifically be overriding the display: none. Opening element inspectors seems to trigger the CSS display which remains until refresh.
Your code (if you add a doctype too) seems to be a pretty good test case. If this bug isn't already on bugs.webkit.org you could submit this code.
*edit okay I definitely have Javascript on, still don't see the ability to have this be a comment rather than an answer, which is what I originally intended.
I have the same problem and I found this workaround:
http://jsfiddle.net/ZxAnH/
section {
height: 0;
overflow: none;
}
section:only-child {
height: auto;
}
It wouldn't hide the elements margins but as a wrapper it could be enough to hide some elements. Did you found another workaround?
Related
My website appears different in firefox compared to chrome or safari, the logo image at the top of the page is placed higher towards the top of the page.
I have tried using vertical-align but had no luck. Any suggestions? (page is institute101.com)
header .logo img.standard {
display: none;
vertical-align: middle;
}
The page is even more messed up in IE, is there a general rule I should keep in mind when making a page compatible for all browsers?
The difference in layout is because Firefox is not honouring the 30px padding on your body element. Firefox seems to be ignoring that.
The problem is highly likely to be the dreaded Quirks Mode.
Many browsers will put the page into quirks mode if the site does not begin with a valid Doctype. The problem with quirks mode is that it works differently in different browsers.
Your page does have a doctype, but importantly, it is not the first thing in the page, and that is why it is going into quirks mode -- you have some rogue CSS and javascript tags before it; these need to be moved into the <head> section of your page.
Fixing this will definitely solve the problem as far as IE is concerned. It will probably solve the problem for Firefox.
Hope that helps.
The problem comes from this css file:
Last row of this file is:
body { margin:0; padding:30px 0 0; }
if you delete the padding you'll have the same appearance with Firefox.
I have created a CSS rule that's being applied to a SPAN element residing within a TD element.
The rule is supposed to add content to the span. I'm using the :after selector for doing this.
So far so good. IE8 displays everything correctly. But with my IE10 I don't see the content added to the SPAN element.
Using Internet Explorer Development Tools (F12), I can see that both rules have been disabled by IE10:
What's causing this to happen? Why are these rules disabled? There are no overriding substitution rules defined in the stylesheet to do this.
Your help is appreciated.
Inserted elements are inline by default. Try setting it to inline-block.
I ran into a similar problem today with IE10 with an :after setting for an image. Turns out I had two errors; I didn't have <!DOCTYPE html> at the top of the file, and in Compatibility View Settings the Display intranet sites in Compatibility View option was checked. After I fixed my webpage and unchecked the value the page displayed as expected.
Here is the css I am using:
.foo:after {
content: url(images/foo.png);
position: relative;
top: 2px;
left: 8px;
}
I have a problem with my css.
I tested it with both latest FF and IE without problem but Chrome does not render it properly.
I want to display all childs elements of a tag as blocks i use
Tag > * {
display:block;
}
it works fine in both IE and FF but not chrome.
I tried forcing it using the console and put display:block but it failed.
It seems as if chrome ignores display:block ?
EDIT: Tag is a custom Tag actually CurrentWeather
full Css :
CurrentWeather > * {
display:block;
}
body {
text-align:center;
}
div#result{
text-align:left;
margin: 0 auto;
width:50%;
}
EDIT2:
I think it is an ajax problem as when i harcode the added html it works fine.
Does chrome not apply css on dynamic content ?
thanks
The selector tag > * doesn't target all children of a tag, only the immedate children.
You would use tag * if you want to target all children.
Chrome doesn't have such a serious bug as ignoring display:block, so there has to be something that is specific to your case.
It's hard to tell exactly what it is without seeing the code, but some possible reasons:
The tag is an inline tag, and you are not using a HTML5 doctype.
The markup is broken, so the child elements are not the elements that you think they are. (Especially as different behaviour between browsers is typical for broken markup.)
works fine for me:
http://jsfiddle.net/DigitalBiscuits/nkymw/1/
There may be an error somewhere in your css that's causing Chrome to stop processing the CSS.
If you have a missing ; or } chrome doesn't like this.
You'll need to show us all your code or else use the CSS validator to look over your code
http://jigsaw.w3.org/css-validator/
I just finished my portfolio site, which is my first attempt with html5 and it looks great in Chrome. But when I tested it in IE and FF, exept IE9, there are some major differences that all occur in the header. I think this is because the header has a fixed position. I did this because of the menu. I created a one pager and if I didn't set the position on fixed, the menu disappeared when you clicked on a menu item.
A second error is that with IE all the images get a blue border, which doesn't appear on Chrome.
And a third error is the font in the header is also different with IE. I used an #font-face font for it.
My HTML and CSs code validates on W3C.
You can find the website at www.nathaliedehertogh.be
Can someone please help me out with this one.
All you need to do is add clear:both to #menu, and border:0 to img.
The blue outline is default in some browsers to show that the images are links.
You need a clear in your header to allow the content to flow as wanted after.
The blue border for IE simply needs a CSS setting:
img {
border: 0;
}
As for the font, some fonts don't read correctly in IE. The error I get is:
#font-face failed OpenType embedding permission check. Permission must be Installable.
You don't have a height defined in your div 'kopregel'.. this is causing an issue since you have elements with heights defined inside it.
NOTE: I see it all broken in FF, stuff is being smooshed to the right.
The problem with your header is you need the clear function in your css.
Here is the new and edited code.
#content, hr {
clear: left;
margin-left: auto;
margin-right: auto;
width: 80%;
}
No issue with fixed positions this is just a common issue, hope this helps let me know!
Another major Difference Chrome vs IE check this out
http://technofizzle.blogspot.in/2013/04/chrome-and-ie-display-image-completely.html
I've looked all over this site and the rest of the internet, but can't figure out why this is happening. My page displays fine in all browsers but IE8 (though, technically, I haven't checked earlier versions of IE). Even in IE8, it sometimes displays correctly (which makes no sense to me).
Here's the page: http://www.thedudehatescancer.com/testsite/past-results.shtml
Sometimes the social network and footer information moves up the screen and overlays the bottom portion of the main page content, and sometimes it stays at the bottom of the page, where it belongs.
style sheets are under the same root.
main: stylesheet.css
IE hacks: stylesheet-iehacks.css
I can't figure it out. My guess is I'm doing something stupid, but I wish I knew what it was. Any help would be very much appreciated!!
The main problem is that you are using display:inline-block.
The easy fix for this problems is to add zoom:1 to anything that is using inline-block.
This adds the hasLayout property in ie
For Example;
#networkswrap {
background: url("images/bg-gray2.jpg") repeat scroll 0 0 transparent;
border-bottom: 3px solid #989896;
display: inline-block;
height: 60px;
overflow: visible;
width: 100%;
zoom:1
}
It looks like your site is using several CSS properties that have the potential to cause problems in IE.
It certainly has issues in IE7 and your use of <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> should cause IE8 to use the IE7 rendering engine.
Initially, I thought it might be the hasLayout problem due to your use of display: inline-block. I tried implementing a fix for that but it made no difference.
I think the problem you are experiencing is due to your use of min-height. I tried applying a min-height hack and it seemed to work.
#mainwrap{
min-height:600px;
height:auto !important;
height:600px;
}
Worthy site by the way; my mum had AML.
I hope this helps,
Mark