PDA

View Full Version : IE7 CSS Issue



NWOM
Mar 18th, 2010, 05:10 AM
Just made http://www.perfectiontire.com live not too long ago and was just recently notified that there were some big issues in IE7. IE8 and Firefox look great though. It's primarily the front page that has the majority of the problems.

The background-image in each of the 4 panes for some reason is covering up the rest of the background-images and the divs are being pushed down.

Any guidance would be much appreciated. Am not familiar with many IE vs Firefox issues.

Thank you.

MrEnder
Mar 18th, 2010, 05:42 AM
ok can you show me the code of the divs that are being pushed down?

and the CSS that effects them?

Then I wont have to look through your code for a while ^.^

makes it easier for me to help you faster ^.^

Excavator
Mar 18th, 2010, 05:52 AM
Hello NWOM,
Just guessing but was this site converted from tables?
It looks like whoever converted it just renamed every single tr and td with a class or an id, even when he couldn't come up with reason for having a div there or a way to style it.
I even found some classes in your markup that are not styled at all! I can pretty much guarantee that any class or id that you don't style, or that you only put margin:0; on, is not needed.
If youi don't mind, I'd like to bookmark this page as an example of divitis (http://www.apaddedcell.com/div-itis).

To fix it I would suggest a total re-write using semantic markup (http://robertnyman.com/2007/10/29/explaining-semantic-mark-up/).

Fixing the errors found by the validator may be worth a try. Have a look at the links about vaildation in my sig below. Maybe re-using those id's is what's throwing off IE7, that's right where things fall apart.

NWOM
Mar 18th, 2010, 06:15 AM
Appreciate the feedback so far. I've only done this for a few months so that's one of the reasons for the CSS not being clean. Another problem for the mix-matched coding is that I am developing websites in the CMS system "Drupal". A lot of what you see on the front page is the output that is generated automatically using Drupal modules.

The modules that I am using on the front page are:

"Panels" to display the 2 columns pulling in 4 nodes.
"Views" for the Google Map pulling location nodes.

I then CSS the site using Firebug and override the default generated styles in a custom css outside of what the modules use by default.

The nodes that are being pulled all use the following php page:


<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?>"><div class="node-inner">

<div class="content">

<div class="field field-type-filefield field-field-image">
<div class="field-items">
<?php foreach ((array)$node->field_image as $item) { ?>
<div class="field-item">
<? if($node->field_link[0]['url']!="") {?>
<a href="<?php print $node->field_link[0]['url'] ?>"><?php print $item['view'] ?></a>
<? } else { ?>
<?php print $item['view'] ?>
<? } ?>
</div>
<?php } ?>
</div>
</div>

<div id="node-title"><div id="title-container"><h2 class="title">
<? if($node->field_link[0]['url']!="") {?>
<a href="<?php print $node->field_link[0]['url'] ?>"><?php print $title ?></a></h2></div></div>
<? } else { ?>
<?php print $title ?></a></h2></div></div>
<? } ?>

<? if(preg_match("/tires/",$_SERVER['REQUEST_URI'])) {?>
<div id="frontdescrip">

<?php
if ($node->field_logoimage[0]['view']) { ?>
<div class="field field-type-filefield field-field-logoimage">
<div class="field-items">
<div class="field-item"><a href="<?php print $node->field_logolink[0]['url'] ?>"><?php print $node->field_logoimage[0]['view'] ?></a></div>
</div>
</div>
<?php } ?>

<?php print $node->content['body']['#value'] ?></div>

<? } else { ?>

<div id="frontdescrip">
<?php print $node->content['body']['#value'] ?>
</div>

<div class="field field-type-filefield field-field-logoimage">
<div class="field-items">
<div class="field-item"><a href="<?php print $node->field_logolink[0]['url'] ?>"><?php print $node->field_logoimage[0]['view'] ?></a></div>
</div>
</div>

<? } ?>

</div>

</div></div> <!-- /node-inner, /node -->

Definitely not the cleanest way of doing things; however, the advantages in using Drupal has made these inconsistencies worth it.

I also looked at the divitis page. That makes a lot of sense. Whenever I wanted to ID something I used a div. I'll finish reading the article to prevent this habit from happening in the future.

Excavator
Mar 18th, 2010, 06:34 AM
I did see the drupal stuff and all the modules that go with it.

Did you look at those repeated id's the validator finds? That's right where your layout starts wondering off. Specifically #node-title and #title-container. I did not look for #frontdescrip but it's re-used too.




Also, when posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.


...

NWOM
Mar 18th, 2010, 07:10 AM
Thanks. I'm using the Web Developer firefox extension which shows that page as being validated oddly enough. I'll start using those validation links.

I went ahead and switched out the IDs for Classes. I'll go through the rest of the validation errors right now fixing whatever I can.

I'll keep you guys posted. Thanks again guys for all your help so far.