Need help with IE issues - CSS-Tricks

This topic is empty.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
July 23, 2013 at 4:27 am #144187

leetempest
Participant

HELP,
I have been staring at this CSS and HTML for days now and cannot get it to display correctly in IE. I’m trying to get the minimum to display in version 8, I don’t care about IE6 or IE7 but need to get it at least looking reasonable in IE8.

[www.bowcora.com](http://www.bowcora.com “www.bowcora.com”)

Can anyone tell me why:

1) The header area is displaying further down the page and the background image is not

2) Why is it not centered

It displays and works perfectly in Firefox, Safari and Chrome, but IE is throwing a complete nightmare.

Any help most appreciated!

Thanks

Lee

July 23, 2013 at 4:46 am #144188

Paulie_D
Member

Can’t test in actual IE8 but in IE10 developer mode it seems fine in IE8 standards & quirks modes.

That was on the second look though…first time I had the same issues.

July 23, 2013 at 7:04 am #144195
Senff
Participant
First thing to do is to make sure there is ABSOLUTELY NOTHING (not even a SPACE) before declaring your doctype. Right now there’s way too much:

This:
```



 <html class="no-js"> 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr">
```
Should be:
```
    <!DOCTYPE html>
    
     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" class="no-js"> 
```
No IE7 or “less than IE7” detection needed.
July 23, 2013 at 7:19 am #144197

leetempest
Participant

Thanks for the replies, there is actually a shedload of code above the DOCTYPE as this is a Joomla template

<!–[if lt IE 7]> <html class=”no-js lt-ie9 lt-ie8 lt-ie7″> <![endif]–>
<!–[if IE 7]> <html class=”no-js lt-ie9 lt-ie8″> <![endif]–>
<!–[if IE 8]> <html class=”no-js lt-ie9″> <![endif]–>
<!–[if gt IE 8]><!–> <html class=”no-js”> <!–<![endif]–>
<?php

defined(‘_JEXEC’) or die;

// Getting params from template
$params = JFactory::getApplication()->getTemplate(true)->params;

$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$this->language = $doc->language;
$this->direction = $doc->direction;
$menu = $app->getMenu()->getActive();
$pageclass = ”;

if (is_object($menu))
$pageclass = $menu->params->get(‘pageclass_sfx’);

// Detecting Active Variables
$option = $app->input->getCmd(‘option’, ”);
$view = $app->input->getCmd(‘view’, ”);
$layout = $app->input->getCmd(‘layout’, ”);
$task = $app->input->getCmd(‘task’, ”);
$itemid = $app->input->getCmd(‘Itemid’, ”);
$sitename = $app->getCfg(‘sitename’);

if($task == “edit” || $layout == “form” )
{
$fullWidth = 1;
}
else
{
$fullWidth = 0;
}

// Add Stylesheets
$doc->addStyleSheet(‘templates/’.$this->template.’/css/bootstrap.min.css’);
$doc->addStyleSheet(‘templates/’.$this->template.’/css/bootstrap-responsive.min.css’);
$doc->addStyleSheet(‘templates/’.$this->template.’/css/bowcora.css’);

?>

I’ve always had code above the doctype in other Joomla sites and never had any issues before.

This is based on a vanilla template from http://www.initializr.com/ and looking at their code it has code above the DOCTYPE.

Lee

July 23, 2013 at 8:28 am #144223

Senff
Participant

Well….regardless of the source, you should just never have anything before the doctype, or else your site will be screwed up in IE (not to mention your code is just not valid). It’s great that you never had issues with the template before, but this time you do, so if you want to keep using the same template, then you’ll experience problems.

I mean, it’s up to you. Generally, if you feed IE valid code, things will be fine. But once you feed IE some invalid code (such as having something/anything before the Doctype), then you’ll have to accept likely funkiness.

July 23, 2013 at 8:58 am #144229

Larsinho
Participant

I don’t like the boilerplate’s solution adding a classname to the html-tag, it just blows up your css code really any browser has to load. I always go for an explicit stylesheet fixing IE issues embedded via conditional tags in addition to that one for browsers who know how to behave :-)

July 23, 2013 at 9:06 am #144231
Larsinho
Participant
My HTML validator throws dozens of warnings and errors. Main problem probably is a kind of nested conditional tag:

 <html class="no-js"> 
July 24, 2013 at 2:52 am #144343

Senff
Participant

No, the main problem is that those tags come before the doctype.
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The forum ‘CSS’ is closed to new topics and replies.