I'm creating a site in Sharepoint and have a problem with the dropdown navigation... in IE7 the li width is not setting to 100% and honestly it looks pretty stupid.
Having tried (and failed) miserably to get a working example on jsFiddle (unfortunately the live site needs a login, so I can't post a direct link) it's really hard to get an idea of what's going on... but I was kinda hoping this was a fairly common problem (although after a silly amount of time on Google, I've not found a solution) that someone can help with. Apologies again for the very simple and elegant code generated by Sharepoint ;)
Thank you!
(CSS) Sharepoint's default stylesheet
(CSS) my own custom stylesheet
Firefox vs IE7 comparison shot
It's not the li's width which is wrong it's the hyperlink inheriting OOTB styles from coreV4.css
Add this to your custom CSS file.
.s4-tn ul.dynamic li a
{
min-width: auto;
zoom: normal;
}
Tested this on IE 7, 8, 9, FF, Chrome and Safari on a Win7 box.
I don't know what this CSS bug is called but it works :)
Have fun!
Related
I'm having browser compatibility issue in my UI. In Firefox I'm facing some UI breakage issues, In chrome i don't have any issues.So my team said to try some CSS properties with don't dependent on browser that could be a solution for this.So anyone may know about this?
<li align="center" ng-show="showLoadingIcon">
<img src="app-vrm/img/loader.gif"/>
</li>
This is what the code for that loading mask. If change align from center to right,left or justify .That is working fine in chrome but in Firefox the loading mask is loading always in left side. It should be displayed in the center of the screen
A good starting point is to make sure you're starting from the same point by creating a reset.css file. This file makes sure that for each browser e.g. the margin-top for a P-tag is always 5px. There are plenty of resources on the web
Furthermore, you should have a look at W3Schools table for browser compatibility here.
Last but not least, be aware that some CSS3 tags are not implemented at all yet because they are 'too modern'. Or your browser is too old.
And a good CSS-validator might help. In Google Chrome (or Iron Browser, or Chromium) you can enable the developer tools and look at the console for errors, or install an extension (Web Developer for Firefox together with Firebug). Or if your site is online validate it with W3 CSS validator
Good luck!
I have created a cross-browser centre alignment of image. Main useful thing is img having margin and display property. Please see working solution at this link:
URL: http://codepen.io/krunalv/pen/gborwo
.loadingImage-wrapper li img{
height: 50px;
width: 50px;
display: block;
margin: 0 auto;
}
I fixed this issue........ i changed the code instead of
align="center"
i added
style="text-align:center;"
So this property is working in Firefox as well.
I really want to thank the people who help me to find out the solution.I got many new things from you whenever you are giving some answers.
I'm building a html website using foundation.zurb 4 framework and now I'm having an issue on making the nav bar work on IE8. I kind of manage to make everything work on IE8 except that nav bar. I'm using a separate css file for the nav bar menu and another one for the IE8 tweaks. All the files can be found here.
I'd like to apologise the fact that the code is quite long and hope my request is not a bit too much to ask. I hope someone could help me as I'm getting a bit desperate now :(
Update: See it in action here It doesn't need to be responsive on IE8 I just want it to be static ;)
Media Queries - Responsive CSS3 is not supported for ie8 or less.
You are using this:
#media only screen and (min-width: 58.75em)
.top-bar .toggle-topbar {
display: none;
}
IE8 is like..."WTFISTHIS?"
Meaning it tries doing it but it just doesn't understand going back and forth
There is this plugin:
https://github.com/scottjehl/Respond
If you really need to support it but my answer is to let ie8 be static like a regular desktop version.
I thought I had finished the markup for this website that I am creating for my mom’s dog walking business, but then I realized that my CSS is only partially applied to my site in Internet Explorer. It’s strange because the body background image in my CSS displays but my nav image and nav's anchor tags don’t show and the borders to my divs are missing in IE.
Everything works fine in Firefox.
Also the padding and margins are crazy in ie.
I’ve read from people that ie generally isnt too friendly towards margin-left margin-right padding-left and paddin-top- stuff like that. That it generally prefers for example padding: 20px; or margin: 30px;
But I don’t know if that was what I did wrong. I don’t see how that would make my borders and nav image disappear in ie. Very frustrating.
The url is www.grinningpup.com/dannytesting/grinningpup.com/index.html
I tried to write semantic markup. I hope the solution isn't due to a stupid mistake I made.
Welcome to SO!
I've taken a quick look at your site and I can see the issue is that you've used HTML 5 elements which aren't supported in older versions of IE.
Easiest fix is to add Modernizr which is a javascript library aimed at detecting browser support, and in most cases, polyfilling them (only in this case). There are numerous resources on the subject. My fvourite is this; http://diveinto.html5doctor.com/ but just google and check SO for more information.
I hope this helps you!
You are using HTML5, which IE8 and below don't interpret right.
You'll need to include html5shiv and add the following to your css:
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
HTML "nav" tag and "section" tag not support IE 8 and earlier versions. So, you only use "div" tag solve all problem.
I have a website that will be loaded in a web frame of an iPad app, so I have created a separate CSS file for the iPad, which is automatically loaded by a user agent call. Nothing too difficult here.
The problem is that 2 divs are not responding to the display:none CSS. The sidebar and the footer are still showing, despite being specifically called in the CSS just the same as all of the other elements, which are hidden correctly in Safari on the iPad.
www.themonitorgroup.com/disclaimer.html is a good page to illustrate this issue.
www.themonitorgroup.com/css/ipad.css is the specific CSS file for the ipad.
I assume there is something stupid simple I am missing. Please let me know if you can find anything. Thanks so much in advance.
Validators are your friend. You're missing a closing brace here:
#mainnav {
display: none;
And you have #sidebar rather than .sidebar in the style sheet.
I'm new in this area and I wrote a div style which didn't work properly for firefox 4, opera 11.1 and for ie 8.0 but worked for chrome 11. The code which was a style for a div was the following only with a different order
#info_text
{
background:#fdf6cc;
width: 650px;
margin-left:1px;
padding-left: 30px;
padding-right: 263;
min-height: 90px;
}
After changing it this way it worked for all the browsers except for the Internet Explorer 8.0.
Can I do something to make it work or it's the problem of the browser?
Does it metter the order in this case?
The order doesn't matter in this case.
You are missing units for the padding-right property. Running your code through a validator will flag errors like this.
Welcome to world of web development! All browsers interpret CSS differently, particular old versions of IE (try the above in IE6 for some fun!)
To understand exactly what problems you're having we need to see a working web page with the above.
The order of the CSS doesn't particularly matter to be honest, though obviously later CSS overrides earlier CSS and this something which is used commonly in the industry.
try opening "developer options" under "tools" in ie, if there is a more specific class, it may be overwriting something, or if something is formatted poorly, IE may be excluding it all together. Another option is "firebug lite", firebug is a very useful tool for getting started with css, javascript, and page structure. Without a link to the page that you are having the problem on, it's very hard to determine the cause, I copied your css and tried it myself, but got the expected result in all browsers