I need to set the width of textboxes as 80% of it's parent. So first I used
td input[type="text"]
{
width: 80%;
}
But it was not rendering properly if the input is the child of td. So, I used Css expressions
td input[type="text"]
{
width: expression(this.parentNode.offsetWidth*0.8);
}
It is working as I wanted in every browser except IE 6. Can anybody help me, where I am going wrong? I know that expressions are allowed in IE 6. So, is it the problem of using css expression or something to do offsetWidth.
Thanks in advance.
td input[type="text"]
Attribute selectors don't work in IE6. If you want to support this browser, add a class="text" and style on td input.text.
You shouldn't need anything complex with scripts, jQuery or expressions.
try rewriting as
* html td input[type="text"]
{
width: expression(this.parentNode.offsetWidth*0.8) !important;
}
however my own alternative method would be to detect ie version and if its 6 redirect to an error page with a angry face alerting to the user : Its 21st Century you moron! Update!
:)
Sorry I am writing answer for my own question, thought if somebody can get help from this.
I tried many things from CSS, nothing worked in IE 6. So, finally used jquery
if (jQuery.browser.msie && jQuery.browser.version.substring(0, 1) == "6") {
$("td > input[type='text']").each(function() {
$(this).css("width", $(this).parent().width() * 0.80);
});
}
It worked for me fine.
I believe this issue is caused by the ie 6 box model. The width and height include the padding and the borders. See here for more info.
Related
I'm having a hard time figuring out how to make my footer stick to the bottom of the screen, even when the page is smaller than the screen.
www.test-domain.sk
I'm guessing it's something to do with the container length, but I'm honestly completely unsure.
Any help would be appreciated. :)
This concept is something known as a sticky footer. The Mozilla Developer Network has a page here illustrating a few ways to accomplish it. In the example of your www.test-domain.sk page, I believe you can add the following css to make your footer stick to the bottom of the viewport (screen).
html {min-height:100%)
body {100vh}
div#page {min-height:100vh; display:grid; grid-template-rows: auto 1fr auto}
Assuming you are looking for something like this, but if not, be more specific. As in post the code you already have.
footer {
position: fixed;
bottom: 0;
}
I need to target IE using Media Queries. example
#media screen and (max-width:1024px) {
/*Only IE Fix here*/
/*Any other browser*/
#-moz-document url-prefix() {
#categoryBackNextButtons{
width:486px;
}
}
There is a similar way like there is for firefox?
I know it's an old topic, but I've just been searching for the same question and found the answer (while seeing this when searching). If anybody else finds this, here is what worked for me (IE10/11, Firefox 39.0)
IE: #media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
Firefox: #-moz-document url-prefix()
Please don't resort to user-agent string parsing or browser hacks. See this great article by Paul Irish on conditional comments. You can also see the source code of the HTML5 Boilerplate project.
Simply use the class names in your CSS like so .lt-ie8 div
Ok I have a pretty simple problem. In Chrome, Safari, and Firefox everything is fine and perfect. But in IE9 it is not.
I have CSS style set up for a couple different links.
.header a:link {
color:#fff;
background-color:#f00;
}
.content a:link {
color:#00f;
text-decoration:underline;
}
.nolinkcolor a:link {
color:#000;
background-color:fff;
}
Here is the problem when using the last css style .nolinkcolor it does not work at all on IE9 all other browsers it works fine. In IE9 it basically ignores the .nolinkcolor and uses the styles of the .header
I just want to know if this is known problem and if there a tweak of fix for it???
thanks
Please check you div like Your test. Also it matter parent container for link. If it is inside other container. you have to overwrite CSS. like:
modify CSS like:
body #parentContainerID or class a.nolinkcolor {}
.nolinkcolor a:link {
color:#000;
background-color:fff;
}
Make sure you include the # character in background-color.
Fixing that that, I'm not seeing any other issues in IE9:
JSFiddle test
This is a cached map from the software: ogmaps
Please look carefully at the tiny shades below the address bar in the main window here.
On once clicking the minimize/maximize button, it gets showed up fully. Tested on firefox, and google chrome.
Can't say that this is the browser problem, since when I loaded this cached map on the Qt widget, I still had to click the minimize/maximize button, to get it gets showed up fully.
The html for the map is too long to be posted here. If there is any relevant section that you know of, then please tell me and I'll post it here.
EDIT 2
Finally I have managed to upload that html code here: http://code.google.com/p/earthhtml/source/browse/trunk/ogmap.html
Please have a look about the div tags.
Although this may seem like something trivial, it worked out for me. I had the exact same problem (among other GM problems) using GMv3 and couldn't figure it out.
I added a min-height to the div containing the map (with !important)
I removed ALL max-height & max-widths from the CSS
This fixed the 'small map' problem plus an additional problem I had with the GM pins and infowindows.
On top of that, make sure that there are NO divs with a high z-index on your page, as GM will resize the containing div not to interrupt with the top div. Another div with a higher z-index will also mess up the map and make the height and the width go crazy.
div#map{
min-height:600px !important; /* or any value that suits you */
position:relative;
margin-left:0;
margin-right:0;
left:0;
border:1px solid #979797;
}
I hope this works as good for you as it worked for me. If not, good luck!
Having major issues getting my wordpress website to display correctly in IE6.
Link to screenshot below. My background image is missing, the nav is knocked down a few extra pixels, and most of my content is off center.
www.genevarealtytrust.com/content/wp-content/themes/wp-terra-basic/images/ie6_wpterra.jpg
FF screenshot (linked below) is what it should look like. Have tried in Safari, a couple versions of Firefox, and IE7, and all look just the way that they are supposed to. IE6 is the only one giving me trouble.
www.genevarealtytrust.com/content/wp-content/themes/wp-terra-basic/images/ff_wpterra.jpg
Any ideas??
Link: www.genevarealtytrust.com/content
I've validated my code, and have tried a few things, but no success.
Help! Appreciate it!
You can try using conditional styles. In document's head section paste:
<!--[if lte IE 6]>
<link rel="stylesheet" media="screen,projection" href=www.example.com/ie.css" type="text/css" />
<![endif]-->
Now You can start editing ie.css without worrying about spoiling design for other browser.
Extra space around nav: IE sometimes has default margins/paddings different from other browsers. Try defining
#something {
margin: 0;
padding: 0;
}
explicitly in Your new css.
No background: Maybe it's the alignment. Try adding somethig like "top left" to Your background-image definition. Example:
background-image: url('../img/site-bg.jpg') no-repeat scroll top right;
Content centering: In CSS there are two ways to center content. First: setting the parent element text-align property to center;. Second: Defining width and setting margin to top-bottom-margin-value auto;. Example:
#something {
width: 100px;
margin: 10px auto;
}
I hope this will help solve any of Your problems :)
This isn't really an answer to your question (and since I don't have enough rep to comment :) ), but try running through this list of common IE CSS bugs. It's helped me work out some kinks in my CSS, but IE 6 is a warzone. Otherwise, I'd really suggest getting the fantastic book Bulletproof Web Design.
Thanks for the tips guys! Daveslab, I'll definitely keep that list handy, and thanks for the book recommendation.
Centering Issue/Missing Background Image:
I made the alternate css doc and that gave me more room to experiment - I was able to resolve the missing background image and centering issue by simplifying the CSS a bit for the problematic section by trial and error. (removed float, position...)
Extra pixels:
What finally ended up fixing the 3 pixels on the bottom of my header was... just stupid.
Evidently IE6 was applying an extra 3 pixels to the bottom of the header image because my html code for that div was split into 3 lines...
<div id="header">
<img src="url" />
</div>
I just had to combine them all into one line, and the extra padding on the bottom disappeared. Dumb... (and ugly)
<div id="header"><img src="url" /></div>
I still have an extra pixel on the right side that I'm trying to resolve - still investigating.