Internet explorer keeps on splitting my words. Chrome and Firefox are working fine.
Here is my code and the link to the website: http://www.hgsainc.com/about/
Thanks for your help!
.page #main .entry-content {
width: 100%;
padding-right: 0;
word-wrap: normal;
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
table-layout: fixed;
}
.page #main .entry-content p,
.page #main .entry-content span {
font-size: 16px;
line-height: 30px;
text-align: right;
}
I haven't looked at your site, but it looks like you need to add the -ms-hyphens prefix to your css. You have the -webkit and -moz but no -ms:
-ms-hyphens: none;
See here for more info: http://msdn.microsoft.com/en-us/library/ie/hh771871(v=vs.85).aspx
Also, after looking into it a bit more, it looks like Opera doesn't support this, and neither do most mobile browsers: http://caniuse.com/css-hyphens - Just a heads up in case you come across that down the road.
After checking the developer tools in Internet Explorer, inspecting the paragraph that was having this problem showed a -ms-hyphens:auto; style in your code. You should probably add a style with -ms-hyphens:auto; to your block of styles to prevent this from happening.
The style that causes this is placed in http://www.hgsainc.com/wp-content/themes/twentythirteen/style.css, at the * 5.3 Entry Content part. You can also remove the hyphens styles from there to prevent having to do this.
Related
Chrome and Opera render my page properly without issue, however IE11 and Edge do not.
I am using pure CSS to expand/collapse 3 section headings. It was my understanding IE 11 had more support for CSS3/webkit and I definitely thought Edge would of stepped up it's game.
https://jsfiddle.net/x0c5fsqh/
CSS Snippet
summary::-webkit-details-marker {
background: url(/images/toggle-expand.png) center no-repeat;
color: transparent;
font-size: 125%;
margin-right: 2px;
}
details[open] summary::-webkit-details-marker {
background: url(/images/toggle.png) center no-repeat;
color: transparent;
}
summary:focus {
outline-style: none;
}
article > details > summary {
font-size: 28px;
margin-top: 16px;
}
details > p {
margin-left: 24px;
}
details details {
margin-left: 36px;
}
details details summary {
font-size: 16px;
}
Rendered Properly
How IE/Edge renders it
All of the headings overlap in to the content of the previous sections that should be hidden and the toggle images do not appear at all. Just looks like the above CSS is completely ignored.
Any ideas?
From what I can see the <details> and <summary> elements are not supported in IE and Edge. It has nothing to do with supporting CSS3 features. It looks like those elements are part of the HTML5.1 spec.
Reference: MDN, WebPlatform, caniuse.com.
Take a look at the Resources tab on caniuse.com. There's a few links pointing to some polyfills.
As others have noted, CSS properties prefixed with -webkit- won't work in IE/Edge. Just as -o- or -ms- wouldn't work in Chrome.
I have some alignment problem in my coding. In Windows, all the browsers seems okay. But when I checked it in Mac firefox, the alignment is not perfect. I can fix it by changing the value a bit. But it should be only for Firefox on Mac.
Is there any CSS attributes or something for this?
Example: http://jsfiddle.net/9chk5/
.notes {
display: inline-block;
position: relative;
width: 16px;
height: 16px;
margin: 0 auto;
background: #abc;
}
.search-notes {
font-size: 14px;
color: #484848;
position: relative;
top: -20px;
margin: 0 25px 0 22px;
}
and the HTML
<div class="notes" style="top:2px"></div><div class="search-notes">This link is used to get information about the visitors from the google organic search. This link is used to get information about the visitors from the google organic search. This link is used to get information about the visitors from the google organic search. This link is used to get information about the visitors from the google organic search. </div>
</div>
You can use classes to achieve what you want. Sniff out the user's Browser and OS and add a class to body for your specific case. E.g. apply macFirefox class to body if user is using Firefox on Mac, then in CSS use .macFirefox .yourClass { /*CSS rules*/ }.
However it will be better to apply styles in a way which are crossbrowser.
For example in your particular case changing style to
.search-notes {
font-size: 14px;
color: #484848;
position:absolute;
display:inline;
/* position: relative;
top: -20px;
margin: 0 25px 0 22px; */
}
should do the trick.
Updated your fiddle
You can step into the gray area of undocumented feature queries. This way you can target only Firefox on Mac:
#supports (-moz-osx-font-smoothing: auto) {
#firefox-on-mac { display: block; }
}
And if you want to target all Firefox, except those which are on Mac, do this:
#supports (-moz-appearance: none) and (not (-moz-osx-font-smoothing: auto)) {
#firefox-not-on-mac { display: block; }
}
I am deliberately not using #-moz-document, because it has been disabled for public use per Firefox bug #1035091.
See this codepen for practical example.
Being a web designer I hope to make websites that at least work in as many browsers as possible. I still try to design for IE 7 for those visitors only using IE and who don't know anything else. However I'm not too familiar id IE and it's spacing and it's hacks.
My website looks good, you can view it here, in every browser except IE. :s Thankfully it's only the footer now.
I'm hoping someone can give me advice and help me fix this hiccup and then maybe give me some references or articles about IE & it's spacing issues & hacks.
My footer doesn't work in either IE 7 or 8.
IE 7:
IE 8:
CSS
#footer { width: 100%; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; margin-top: 100px;/*border: 1px solid #0C0;*/}
#footer a { text-decoration: underline; color: #c7bd89 !important; }
#footer a:hover { text-decoration: none; color: #fff; }
#footer h6 { background: url(img/FOOTER-HR-BG.jpg) left center repeat-x; text-align: left;}
#footer h6 span { background: #8e2023; display: inline-block; padding-right: 5px; }
I've tried a bunch of different ways but I'm not sure whats happening in IE with this footer. If anyone can shed some light on what might be happening, it would be greatly appreciated!
you have an unclosed aside element for starters. if you view it in ie8 and use f12 developer tools you can see how the footer is now a child of the element. close that guy out....should help out.
I'm not sure of the root of the problem but instead of using "float: right;", using "position: absolute; right: -2px;" seems to solve the issue (also ensure #searchform has a relative position).
When I declare this style for a div:
#fbInner{
position: absolute;
margin: 11.2% 9.7% 0% 26.4%;
width: 63.5%;
height: 54.6%;
overflow: visible;
/*max-height: 190px;
max-width: 490px;*/
font-size: 11px;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
color: #FFF;
/*border: solid 2px gray;*/
}
Chrome sets every margin right except of the margin top, which is set much smaller than in other browsers ... strange, all other margins are displayed like it should ...
What is the reason for that?
Is there a workaround that still uses percentages?
Seeing as this is an x-browser css question, resetting the css styles would be a valuable first step - maybe even the solution. You haven't disclosed any HTML code, so I can't know what other tags or styles are affecting #fbInner
In any case, here is the "meyerweb reset" stylesheet: http://meyerweb.com/eric/tools/css/reset/
Link it topmost in your HTML file. It will probably break your site, but that's a good thing. At least it should be equally broken in all browsers now. When you've fixed the look of your page, it should work properly in most/all browsers.
In the following page http://ada.kiexpro.com/test2/map.html
I added:
white-space: normal;
to wrap the copyright text that is coming our from the Google map API.
It works in FF and IE but Chrome seems to ignore the CSS selector:
global.css:
#cm_map span {
white-space: normal !important;
}
Google has an anonymous div with inline styles surrounding the copyright content. Only hook I can see is that it's a sibling of the "logocontrol" div. To override, try something like the following:
#cm_map #logocontrol + div[style] {
left: auto !important;
line-height: 13px;
right: 5px;
bottom: 6px !important;
white-space: normal;
width: 95%;
}
Not thoroughly tested but something like this should work.
This may also be a bug in Chrome: white-space normal !important doesn't override nowrap.
I've reported this bug at http://code.google.com/p/chromium/issues/detail?id=89573, but based on how they have been completely ignoring a more important issue since 2009, I have little hope of this being fixed.
Here is another example of chrome ignoring the important. This time its on the position. Unclicking the "position: relative" does bring the absolute into the picture. So the style is valid.