jQuery window width function fails to work properly in Internet Explorer browser

Other Questions JavaScript
1

I have a div element that uses absolute positioning like this:

<div id="container" style="height: 250px; position: absolute; top: 200px;"></div>

I’m trying to get the browser window width using jQuery and use that value to set the width and left positioning of my div element. Here’s my code:

var screenWidth = $(window).width();
var containerWidth = screenWidth * 0.75;
var containerLeft = screenWidth * (10 / 100);
$('#container').css({ 'width': containerWidth });
$('#container').css({ 'left': containerLeft });

This works great in Chrome, Firefox and other modern browsers, but when I test it in Internet Explorer, nothing happens. The div doesn’t get any width or left position applied to it, which completely breaks my layout.

I think I need to detect if the user is using IE and then use different code for that browser. What’s the best way to detect Internet Explorer and what alternative approach should I use to make this work in IE?

2

IE has this annoying bug where CSS properties set via JavaScript don’t work right if you pass numbers without units. IE handles unitless values differently than other browsers. Don’t bother with browser detection - just make sure you’re handling units consistently. Use parseInt() or parseFloat() on your calculations and always add the unit. Try using requestAnimationFrame() to delay execution until the browser’s ready. I’ve noticed IE sometimes needs a small delay after you mess with the DOM before it’ll apply styles. Also check if you’ve got any CSS that’s messing with absolute positioning specifically in IE.

3

Had the same problem with IE on old corporate sites. jQuery’s $(window).width() returns undefined or zero in IE sometimes, especially when the DOM isn’t fully loaded yet. Wrap your code in $(document).ready() or better - use $(window).load() since IE needs the full page rendered before it can calculate dimensions. Also double-check your DOCTYPE declaration. IE’s quirks mode will completely break dimension calculations. For better cross-browser support, try $(window).outerWidth() instead of .width(), or use vanilla JS with window.innerWidth and fallback to document.documentElement.clientWidth for older IE. The jQuery method craps out in IE when CSS messes with the body element’s width calculation.

4

I’ve hit this IE nightmare before. The problem isn’t browser detection - IE just handles CSS units weird when you pass raw numbers to css().

Add ‘px’ explicitly to your values:

var screenWidth = $(window).width();
var containerWidth = screenWidth * 0.75;
var containerLeft = screenWidth * 0.1;
$('#container').css({ 'width': containerWidth + 'px', 'left': containerLeft + 'px' });

Check your jQuery version too. Older IE needs jQuery 1.x.

Honestly, I got sick of these browser compatibility headaches and started automating frontend tasks. I use Latenode now - it handles responsive calculations and injects the right CSS based on browser detection automatically. Runs compatibility checks server-side and delivers the correct code to each browser.

You can set up workflows that detect user agent, calculate dimensions, and apply styling without client-side JavaScript mess. Way cleaner than maintaining separate IE code paths.

5

IE calculates window dimensions at weird times compared to other browsers. Your code’s probably running before IE figures out the viewport size.

Don’t bother fighting browser timing issues - just automate the whole thing. You need calculations that work reliably across different browsers and screen sizes.

I use Latenode for this stuff. Set up workflows that grab viewport dimensions, crunch your positioning numbers, and inject the right CSS automatically. No more waiting around for IE to get its act together.

Runs server-side, so you get the same results every time regardless of browser weirdness. Define your 75% width and 10% left rules once, and it handles everything else.

Beats maintaining separate IE code or adding delays to wait for DOM readiness. Scales nicely when you need similar responsive stuff elsewhere too.

6

IE strikes again lol. Try window.innerWidth instead of jQuery’s width() - IE doesn’t play nice with jQuery dimension methods. Also check your CSS has proper units like ‘px’ when setting values. Had the same issue and vanilla JS fixed it.

7

IE screws up absolute positioning when the parent container doesn’t have defined dimensions. It calculates $(window).width() fine, but handles the CSS differently than other browsers. Set your container’s CSS properties all at once instead of separately - IE sometimes ignores later CSS calls on absolutely positioned elements:

var screenWidth = $(window).width();
var containerWidth = screenWidth * 0.75;
var containerLeft = screenWidth * 0.1;
$('#container').css({
    'width': containerWidth + 'px',
    'left': containerLeft + 'px',
    'position': 'absolute'
});

Make sure your container has a parent with position: relative. IE’s absolute positioning breaks when it can’t establish a positioning context. I’ve fixed this exact issue by adding a wrapper div or making sure the body element has proper positioning rules in your CSS.