I want to have a textarea that's 500px, this is the CSS I use for the textarea:
width: 498px;
padding: 0px;
margin: 0px;
I noticed IE and Chrome have a 1px border by default, on the other hand FF have a 2px border which results the textarea to be 502px instead of 500px, any workarounds?
Just a note, I could explicitly specify the texarea border width, ie. border-width: 1px, but the problem here is that it doesn't work nicely with IE (the default textarea border in IE doesn't visually look ok when the border is set to 1px), I could change the border color but I don't want to do this, I prefer to keep the default browsers styles, I just want the width to be the same in all browsers without changing the default styles or setting a color to the border, is this possible?
You can set all of your browsers' default styles to be the same by using a Reset CSS sheet at the top of your document. I like the YUI reset CSS myself. That should set the base styles for all of the controls to be the same across all browsers to begin with, and that should allow for a more predictable layout.
IMO if you let each browser have its own style (which can even be customized by the user!) , you're on the road to having an unpredictable style for your application, with problems popping up in places you never thought they would. Better to use a reset CSS and then style your applications accordingly. If you checkout yahoo's site (referenced), they'll also have their own "base" CSS that you can start from, which is pretty cool.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">
We tend to create separate style sheets for IE and FF to get around their 'quirks'. A simple bit of code can then be used to ensure the correct style sheet is used.
<!--[if lte IE 6]> works for < than IE 6
<link href="/css/IE6Below.css" media="screen" rel="Stylesheet" type="text/css" />
<![endif]-->
There is also
works for IE 6
etc...
we use jQuery to decorate our html elements and let it deal with cross browser issues.
In essence you are deploring that the browser defaults are not the same with every browser but don't want to change those properties yourself directly.
This does not make sense.
Like others I'd recommend using a reset stylesheet (I'm a big fan of Eric Meyer's) and then style the borders exactly the way you want them. Easy. Clear. No downsides.
Related
This is my site
www.landshoppe.com
My links and searchbox in the over laying divs of the header portion with background image is not clickable in IE 8. Is this an inherent IE Z-index problem ? (Though I have given a Z-index 5 for the searchbox div). Or is this a position issue ? (I have assigned position relative to the div).
The page validates in W3C validator. So no html errors.
Where is the glitch ?
You should create a specific stylesheet for IE. Reference it using conditional comments like this:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/styles/ie.css" />
<![endif]-->
And add in the CSS - for the clickable area - these attributes:
A background color (any color, it does not matter). E.G.: background-color: #000000;
ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
This solved it for me!
#Consta Gorgan I found a solution by putting all the events inside the div into another within this div and making its position:absolute. Now it works ! Though I have some issue in mobile responsive design. Guess I will tackle that as next level :)
I am reverse engineering a previous employee's work and noticed a number of css classes look like this...
.img-shadow {
float:left;
background: url(../images/shadowAlpha.png) no-repeat bottom right !important;
background: url(../images/shadow.gif) no-repeat bottom right;
}
Can anybody think of a reason for a css class to declare background twice like this (specifically with the !important)?
According to wikipedia, the second background rule is for IE6.
Internet Explorer 6 and below also
have a problem with !important
declarations when the same property of
the same element has another value
specified within the same code block,
without another !important
declaration. This should result in the
second value being overridden by the
first, but IE6 and lower do not honor
this.
It's a cheap PNG fix for IE6. Since IE6 won't recognize the !important tag, it will use the GIF background, while all other browsers will use the PNG.
Older versions of IE will use the last one.
These versions had problems with png transparency.
looks like he's attempting to support browsers that don't handle alpha .png's properly (cough IE6 cough)
I would like to make use of border-radius and the different variations on my web pages. I'd also like to have alternate CSS for the browsers that don't support this. I am using MVC3.
Is there a simple way that I could have different CSS presented depending on if the browser does or does not support border-radius and just have ONE CSS file. In other words I would prefer to not have to have an additional CSS file to manage different variations of browser.
I read about BrowserCaps. Is anyone using this with MVC3 for CSS switching?
Use the excellent jQuery round corner plugin.
http://jquery.malsup.com/corner/
It's supported in all browsers including IE. It draws corners in IE using nested divs (no images). It also has native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property instead.
Here's How to use it
You need to include the jQuery and the Corner js script before </body>. Then write your jQuery like $('div, p').corner('10px'); and place before ''. So your html will look like the below code. Here i'm making round corners for all div and p tags. If you want to do it for specific id or class then you can do something like $('#myid').corner();
<body>
<div class="x"></div>
<p class="y"></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
<script>$('div, p').corner();</script>
</body>
Check working example at http://jsfiddle.net/VLPpk/1
UPDATE
If you want a cross browser Solution using only CSS, then use the following
.curved {
behavior: url("border-radius.htc");
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Safari and Chrome */
-khtml-border-radius: 20px; /* Linux browsers */
border-radius: 20px; /* Opera 10.50, IE and CSS3 */
}
Download the htc file from http://code.google.com/p/curved-corner to make this work in IE browsers. jQuery plugin mentioned above remains the easiest way to do this where you don't have to modify so many CSS properties everytime you want to issue a radius.
Modernizr might be helpful for you. It would add either borderradius or no-borderradius to your markup using javascript and you can then style based on that:
http://www.modernizr.com/docs/#borderradius
I have the following code:
ul.myList li{
border-right: 1px dotted #000;
}
However, on the last element, I need to remove that border as the design that I am working from dictates that the last item does not require a border as a separator.
So, I need to target the last child of a list and so within my css I have added
ul.myList li:last-child{
border-right: none;
}
Which as we all know, works fine in Firefox, Safari and Chrome.
The problem lies when we view the page in Internet Explore 6 through to 8.
So, after some digging around, I found the answer:
If the browser is IE<8, specify a stylesheet like this:
<!--[if lt IE 8]>
<link rel="stylesheet" href="css/ie_all.css" type="text/css" />
<![endif]-->
And within your IE stylesheet specify the following rules:
ul.myList li{
border-right: expression(this.nextSibling==null?'none':'inherit');
}
The nextSibling expression looks to see if there is an element after it and if there is inherits the rule specified in the default stylesheet, if not it applys a new rule.
More information can be found here
IE8< does not support this pseudo selector. Check the MSDN article for all supported features :)
You could take a look at this jQuery solution to Enable pseudo selectors in IE, or just leave it as is in IE.
As Internet Explorer before version 9 (which is still in development) doesn't support :last-child selector at all, my best solution, unfortunately, would be to set a class or id on the last element in your list and try to select that.
Of course, if leaving the right border in for IE won't break the layout completely, you may want to leave your code as is, if you don't mind IE screwing up rendering just a little.
You can do this using jQuery. So instead of relying on CSS. Use jQuery Selectors to set the property of your last element. I understand that u havent tagged your question with it.
jQuery('ul.myList li:last-child').css("Key","value");
I just discovered the box-sizing: border-box CSS property which solves a bunch of cross browser layout problems for me.
The only issue I now have is that IE7 doesn't seem to support it. Is there a hack to get IE7 to support it?
There are several ways to do this, none perfect.
As you point out:
Firefox / Opera / Safari / Chrome / IE8+ will recognise the box-sizing property allowing you to use border-boxes.
IE6 will use the old school (correct?) border-box model by default.
However IE7 uses the W3C padding box model when in standards mode, and will not recognise the CSS box-sizing property so there's no way to revert to the border box model. If you need to support IE7 (and you probably still do), you're stuck with one of four options:
1. Conditional Comments:
<!--[if IE 7]>
Special instructions for IE 7 here
<![endif]-->
Use box-sizing for IE8 and 9, then make specific overrides for IE7. This option will be painful.
2. The Schepp Box Sizing Polyfill:
https://github.com/Schepp/box-sizing-polyfill
This excellent Polyfill is an HTC file which modifies the default browser behavior in IE6 and 7 so they use the W3C box model. It's fine for light use, but may cause problems of it's own if used extensively. Use with caution and TEST.
3. Old Style Nested Divs:
The old style nested div approach is still a fine way:
<div style="width:100px; border:1px solid black">
<div style="margin:10px">
Content
</div>
</div>
A non-semantic nested div provides the padding indirectly, with the disadvantage that your markup becomes untidy. Obviously don't use inline styles, I'm using them here for the sake of illustration.
The old adage Never use padding on a fixed width element still stands true.
4. My Preferred Solution - A Direct Child Selector:
The other way round this is with the direct child selector. Say you have a fixed width div containing some content:
<div class="content">
<h1>Hi</h1>
<p>hello <em>there</em></p>
</div>
You can then write a rule to add left and right margins to all the direct children of the div:
.content {
width:500px;
padding:20px 0;
}
.content > * {
margin:0 20px;
}
This will add a little margin to the h1 and p, but not to the nested em, giving the appearance of 20px padding on the content div, but without triggering the box model bug.
5. Consider Dropping IE7 support
IE7 is the last browser not to recognise the box-sizing property. If you're getting little traffic from IE7, you might consider dropping support. Your CSS will be much nicer.
As of late 2013, this is my preferred option.
2017 EDIT: It's probably long past time to drop support for IE7 now, and just use border-box.
You can use a polyfill to make it work on some items, it didn't work for my input fields though.
https://github.com/Schepp/box-sizing-polyfill
box-sizing: border-box;
*behavior: url(/css/boxsizing.htc);
Just note that the behavior url is relative to the page and not the css file. Use relative paths to site's root (start the url with an slash and then go from there).
I'm assuming you're using this to get around the IE6 box model. Unfortunately, there really is no general way to trick earlier versions of IE into supporting arbitrary CSS properties.
I would recommend not using the box-sizing property, because every browser other than IE6 will implement the box model correctly. The Wikipedia article does a good job of explaining how IE6 differs.
To solve this, I recommend using a separate style sheet for IE6, and including it using IE conditional comments. In your IE6 style sheet, you can specify different widths/heights/padding/margins to make your layout look consistent. You can include a style sheet for IE6 only like this:
<!--[if IE 6]>
<link href="ie6sucks.css" rel="stylesheet" type="text/css" />
<![endif]-->