Using Internet Explorer will display a vastly different blueprint site compared to what you see on Firefox or

I've been utilizing the Blueprint CSS framework for my website development in order to ensure compatibility across different browsers, but unfortunately it's not rendering properly in IE. The main body is off-center, the image positioning is incorrect, and the text layout is all over the place.

You can view the site at , where you'll see that it looks great in Firefox and Chrome, but falls apart in IE. I thought using Blueprint would solve these issues, especially with IE compatibility included. I've even added the correct IE style sheet, so any other suggestions on how to fix this?

cssinternet-explorerblueprint-css

Answer №1

While I used to utilize Blueprint, I have recently made the switch to Twitter Bootstrap. Regardless of the website's complexity, Blueprint does indeed handle various tasks efficiently, assuming correct markup and proper class implementation.

A key starting point, in addition to including the doctype (as suggested by Michas), is adding a "last" class to the div containing your navbar. The current structure has a span-24 followed immediately by another span-24, a span-15, and a span-9.

The existing setup:

<div class="span-24 last">
    <div class="span-24">
   ...
    </div> 
    <div class="span-15">
        ...
    </div>
    <div class="span-9 last">
        ...
    </div>
</div>

The corrected version:

<div class="span-24 last">
    <div class="span-24 last">
        ...
    </div> 
    <div class="span-15">
        ...
    </div>
    <div class="span-9 last">
        ...
    </div>
</div>

Given the current structure, it wouldn't be surprising if IE struggled with handling 48 spans in a single row.

Answer №2

To be completely candid, I wouldn't opt for blueprint css in the scenario of a website as straightforward as yours. Instead, I would simply generate a separate stylesheet specifically for Internet Explorer and link it in this manner:

<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to utilize a JS script generated within the body or head of an HTML file directly within CSS code?

As a beginner in webpage development, I have a query regarding the technical aspect. Is it possible to utilize variables from a JavaScript function, which is placed either in the head or body of an HTML file, directly in CSS code to make modifications such ...

javascripthtmlcss

The Material UI - makeStyles function is having difficulties generating the intended styles

After implementing withStyles and makeStyles from material-UI, I encountered an issue where the CSS styling was not as expected, despite the correct class name being returned. For example, consider the following component: import React, { Component } fro ...

cssreactjsmaterial-ui

How come the position sticky content vanishes when a z-index is applied?

Can someone assist with the issue I'm having regarding the use of sticky and z-index? Whenever I apply a z-index to a positioned sticky element, its content disappears. Question: How can I utilize z-index for a positioned sticky element without any c ...

htmlcss

Glide your cursor across a different division as it approaches

Whenever I hover over "Div2", I would like the hover effect of "Div1" to be triggered .Div1:hover{ background:green; } <div class="Div1">Greetings!</div> <div class="Div2">Welcome!</div> ...

htmlcss

Using pure JavaScript, implement a transition effect that changes an element's display from

My goal is to create an animation where a hidden menu box slides down and appears when the mouse hovers over a button. The animation works correctly, but I encountered an issue when trying to add the transition from display:inline-block to display:none and ...

javascriptcsscss-transitionstransform

Store the arrays in a JSON file before utilizing Array.push() to append data into it

I'm currently developing a calendar software and I want to store events in a JSON file. My strategy involves nesting arrays within arrays in the JSON format, allowing for easy iteration and loading during program initialization. My main question is: ...

javascripthtmlcssarraysjson

The functionality of Jquery datatables seems to be faulty when navigating to the second page

While utilizing the jQuery datatables plugin, I encountered an issue where the event click function only worked on the first page and not on subsequent pages. To address this problem, I discovered a helpful resource at https://datatables.net/faqs/ Q. My ...

javascriptjqueryhtmlcssdatatable

When you hit a certain point on the website, the scrolling momentarily pauses

Upon refreshing the page and scrolling down, I notice that the website experiences a brief lag for a few milliseconds before continuing as normal. Oddly enough, this issue only occurs after refreshing the page. Any suggestions on how to resolve this? Th ...

javascripthtmlcssweb

Struggling to Achieve Consistent Design Across Different Browsers When Styling a Calendar

My webpage has a calendar that retrieves data from the server using Jquery. Interestingly, the calendar looks perfect on Google Chrome but falls apart on Firefox. I can't seem to style it to make it look consistent across different browsers like in C ...

jqueryhtmlcssgoogle-chrome

Styling radio buttons with customized CSS borders

I'm attempting to style some radio buttons with a bold red border, but I'm having trouble getting it to display correctly in the latest versions of Firefox and Chrome. It works fine in IE9/IE8. For each input element that is required on my form, ...

css

Unlock the power of overlay masks with just CSS and JavaScript on any webpage

After experimenting with different types of masks, I wanted to be able to dynamically create a CSS class and apply it after the DOM had loaded in order to achieve an overlay mask effect. However, my initial attempt was unsuccessful: var style = document.c ...

javascriptcss

Having trouble getting the Click Element with CSS selector to function properly in Google Tag Manager?

How can I detect a click on the specified element by using the "Click Element" variable in Google Tag Manager? <a href="https://amazon.in/product-id" target="_blank" class="amazon-btn"> <div> <span&g ...

htmlcsscss-selectorsgoogle-tag-manager

Modify the color of the matSnackbar

I'm having trouble changing the snackbar color in Angular using Angular Material. I tried using panelClass in the ts file and adding it to the global css, but the color remains unchanged. Any suggestions on how to resolve this? I am still new to this ...

cssangulartypescriptfrontend

What is the best way to modify a CSS property using logical operators in JQuery?

If an element with the class ".has_padding" does not have any text content, it should be set to "display:none;". However, those elements with text inside should remain visible. Below is some code where I have styled the elements to demonstrate the issue. ...

javascriptjquerycss

Load divs, images, or scripts as they enter the viewport

Upon visiting the website , you may notice that certain elements are loaded only when they enter the viewport. I am interested in learning how to implement this feature and am curious about the specific JavaScript or CSS3 techniques utilized for achieving ...

javascriptcssload

Styling drop-down menus for navigation items in CSS

Recently, I created a navigation bar with various links using unordered lists and anchor tags. However, I encountered an issue with implementing dropdown functionality for specific links. Despite following the dropdown example from w3schools, my links seem ...

htmlcssdropdown

Navigation bar text fails to display

Just starting out and trying to create a basic navigation bar, but I can't seem to get the links to show up. All that displays are the logo image and the hamburger icon. How can I make the links visible on the nav bar? Appreciate any help! <!DOCTYP ...

htmlcssnavbarbootstrap-5nav

Is there a way to eliminate the transform style from a draggable element?

I am looking to enhance the CDK drag and drop example by adding a preview of the dragged element with specific left and top positions, without utilizing the transform style. HTML <div class="example-boundary"> <div class="example- ...

javascriptcssnode.jsdraggableangular13

How to customize field appearance in Django authentication login view by adding a CSS class

I recently started working with Django and came across Django forms when using the django.contrib.auth.views.login view for user authentication. However, I'm struggling to figure out how to add a CSS class to the username and password fields. The doc ...

cssdjangodjango-formsdjango-templates

How can I bring a "floating" element above its sibling element without taking up space?

I have attempted setting all the parent elements to relative and this specific one to absolute, but it doesn't seem to be working. I'm quite puzzled at this point, here is the code snippet: <template> <div> <div @mouseover=" ...

htmlcssvue.jsvuejs2vuetify.js