I'm having two issues.
My application is not centered in IE, but looks perfect in chrome.
I have conditional just for IE, but it doesn't seem to be working. The #outline is not shifting to the left like the ie.css file is telling it to.
It is my understanding that the conditional I put in the isn't supported for IE 10 or IE 11 so what can I do so that these versions aren't ignored?
The conditional I put in
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
You can view it in action with all the files and whatnot here: http://andrewhnovak.com/AMC%20Ticket%20Calculator%202.0/index.html
Remove the zoom: 80%' fromamc.css` line 7. That is an IE only style, and is what is messing things up.
If you were trying to accomplish something by having that there, then let me know in the comments and I'll see if I can help. But you'll notice that that shrinkage isn't happening in any other browser.
Related
I have a Problem with the Position of the HTML elements. I am developing a web form.
Until today, I was using IE8 in my Computer (Company issues...) but today I got a new Computer with IE 10.
My problem is that I could see this form perfectly before, but now all elements are moved. For example, the are move 20px more or less to the top, and if I fix it for IE 10, I can't see it in IE 8 correctly.
My question is if the browser interpret in a different way the position:relative tags? And if it is like that, how could I solve it? The users of this form will use IE8 and 10 too...
I already add to my HTML code the tag <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7">
Thanks for all your help!
You can use conditional comments to apply style to specific browsers:
gt = greater than
lt = less than
lte = less than or equal to
gte = greater than or equal to
This will target anything greater than IE 8:
<!--[if gt IE 8]>
<link rel="stylesheet" type="text/css" href="gtie8.css" />
<![endif]-->
This will target anything less than IE 9:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ltie9.css" />
<![endif]-->
This will target anything that is not internet explorer:
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
Source:
http://www.quirksmode.org/css/condcom.html
Do you use any reset style sheet? If you don't I strongly advise you implement one. I'm afraid, this will almost certainly knock other elements out on your page. It basically gives you a consistent starting point across all browsers.
Where posible try avoid adding a whole bunch of browser hacks.
I would like to ask if there is any easy way of displaying different page for IE6/7 users who enter a website.
Like a redirect from example.com to example.com/ie7
Unfortunately IE7 doesn't like the website I made so I want to display miniversion of the original website, I have put too much effort into the original to downgrade it now.
Will this line always work? On every version/build of IE7? Or is it more complicated?
I want to be sure that 100% of IE7 traffic gets redirected.
<!--[if IE]><meta http-equiv="refresh" content="0;URL=http://www.example.com/ie7"><![endif]-->
You can use a different CSS on the same page to get a simpler result
<!--[if lt IE 8]>
<link href="/IE7style.css" rel="stylesheet" type="text/css" media="all" />
<![endif]-->
Just overwrite all the styling needed to make IE7 happy
to serve content to IE7 , you need to set the version in conditionnal comments.
<!--[if IE 7 ]><p>I'm IE 7</p><![endif]-->
IE7 and lower :
<!--[if lte IE 7 ]><p>I'm IE 7 at the most.</p><![endif]-->
Where lte means Lighter Than or Equal
The better way is
<!--[if IE 7]>
<script type="text/javascript">
window.location = "http://www.example.com/ie7";
</script>
<![endif]-->
This should be done server side. You can use something like ua-parser to detect ie <=7, and redirect to a new site accordingly.
Im using css button generator to create the code for my css button and it generates the css code and the html code used to insert the css code. But I don't what classname to use. I tried
But that shows up blank in the website preview.
And for an offline site with minimal design would it be better to put the buttons inline? The site will be put on a CD. I'm using dreamweaver cs6.
Well i guess you will need to learn basic HTML first. Each HTML document should contain HEAD and BODY tags. In HEAD section you link your CSS file or write your generated CSS style between STYLE tags. Something like:
<style type="text/css">
.button1 {font-size:15px; color: #cccccc; ....}
.button2 {font-size:18px; padding:10px; ...}
</style>
or link your CSS file inside HTML header with:
<link rel="stylesheet" href="/css/your-stylesheet.css">
You can also check here for some basic examples of HTML and structure of HTML documents.
w3schools
With your link you just make a link to your CSS style which will open as a plain text in browser window so you don't really include it. So include CSS style in your HEAD section either by link or to put your CSS classes and everything between STYLE tags. Once you will do this "call" your style in your links like this:
Go to Google
Local file
Thanks guys. Got it to work. I found this question and answer: mmo-champion.com and it made it clear what you guys were saying.
I deleted the <style type="text/css"> and made sure that the class was = to "classname" since that was what it was called in the CSS file because it was unchanged, and then it worked. I think it didn't work because I had the class = "button1" and I also didn't delete that bit of code before.
Gantt charts & project diary
(source: css-tricks.com)
One more thing, because Internet Explorer does not support some elements which work on Chrome or FireFox, there are some special codes for including only IE CSS file (file that works only if IE is identified):
For all the IE versions, use this:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="file.css" />
<![endif]-->
For X version only:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="file.css">
<![endif]-->
** This code can only be used for IE7. If you want to use the CSS code for other IE version, change "7" in the line !--[if IE 7> to the appropriate version number.
For IE5.5:
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="file.css" />
<![endif]-->
For IE6 and lower (including IE6), use if lte IE 6 or if lt IE 7.
For IE7 and higher (including IE7), use if gte IE 8 or if gt IE 7.
Sometimes IE blocks webpages' scripts or ActiveX controls.
To ignore IE block scripts or ActiveX controls, use this line, at the head of the HTML code.
NOT in the <head> tags, at the first line. It's important.
<!-- saved from url=(0014)about:internet -->
To read more about this error, read MOTW.
I am creating a website based from tumblr that seems to work fine on google chrome, but has a issue with the ad box that I have assigned to the right of the page.
I have searched google and found this related question, but the answer given does not work for me.
I have tried the following.
Just adding a html class="ie9" tag with the proper if statements.
Clearing my cache.
And checking the browser mode.
It seems to be just one element of the page. The right side does not show up correctly, but I fiddled with the customization in IE 9 and I have the exact margin reqs. However I can't seem to link the stylesheet.
Is this because I'm linking a static file in this manner?
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/texnbv5/j70mi1pbq/ie9.css" />
Does this have anything to do with the fact that I am linking this stysheet from a different domain instead of the hosted domain?
Also is there anyway I can just single out the line that needs to be adjusted?
Is it possible for me to place a if statement in the css portion of my site
<!--[if IE 9]<style>#Content-right{margin:-1000}</style>
<![endif]-->
it's not working because you didn't close your comment tag. It has nothing to do with cross-domain css file fetching, which is entirely legal.
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/texnbv5/j70mi1pbq/ie9.css" />
should be <!-- [if IE 9] -->
Also... what engine is supposed to be acting on this IF?
There is a very interesting article on just this topic. It addresses the need/desire to isolate browser specific CSS without having to create an entire CSS file. There are also a number of benefits to the approach. I have utilized it for a number of years due to my own needs and was unaware until recently that such analysis had been performed on the technique.
Here is the link: Conditional Stylesheets vs. CSS Hacks
Other Things of Note:
Positioning of your Stylesheets is very important in CSS. Since we can't see your other calls and you are using a separate stylesheet, it is important that you place the conditional statement under your standard stylesheet.
Example
<link rel="stylesheet" href="path/to/standard.css" />
<!--[if IE 9]-->
<link rel="stylesheet" href="http://path/to/ie9.css" />
<!--[endif]-->
This is because CSS uses the styles that were loaded last if there is a conflict. I only mention this because it could be affecting you results as it is a common mistake.
Try this code
<!--[if lt IE 9]>
<link rel="stylesheet" href="http://static.tumblr.com/texnbv5/j70mi1pbq/ie9.css" />
<![endif] -->
I hope you work it
<!--[if gte IE 5]>
<link rel="stylesheet" type="text/css" href="iemaster.css" />
<![endif]-->
<![if !(IE 5)]>
<link rel="stylesheet" type="text/css" href="master.css" />
<![endif]>
to load a different stylesheets depending on whether or not it is IE. The problem is that i have button bar going across the top. In IE I need the padding at 0 and other wise i need it at 200px, but no matter what I do to the values, the bar in IE doesn't seem to change. It changes for chrome though. The only thing that seems to work is if I make the class affecting it a different name then the non-IE one. Of course this means my non-IE wouldn't load properly. Other then this the CSS seems to load perfectly. Why is this?
That's not how you should be doing it.
Nobody is using IE5, so forget about that.
Do it like this instead:
<link rel="stylesheet" type="text/css" href="master.css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]-->
Your master stylesheet will get loaded in every browser.
Are you sure you care about IE6? If so, put IE6 specific rules inside ie6.css.
Put IE7 specific rules inside ie7.css.
You shouldn't need a separate stylesheet at all for IE8 or IE9. Those browsers are compliant enough to handle the same stylesheet as the other browsers.
Your bottom block is not actually a comment (it doesn't begin with <!--) so all browsers will read the master stylesheet. Also, check your logic: IE6 is both greater than IE5 and != IE5, so the main stylesheet will get loaded for some versions of IE anyway.
If you reverse the order that you link to the stylesheets that should fix it. What's happening is the IE-specific style sheet is being set first, but the master.css is overwriting it after.
Also, I don't think you need <![if !(IE 5)]> and <![endif]> around the non-IE one.