Public Forums 71,145 posts

[djw2 Friend djw2Join date: March 2010Posts: 7Downloads:1Uploads:0]

#150685

I have an issue with the top spotlight in IE7.

I had the width set to 980 with three positions in the spotlight area… user 1, user 2, and user 3.

Chrome inspect element showed the wrapper to be set at 100%, and the modules to be set at 33.33%.

For some reason the third module, user 3, drops to a second row, below user 1.

This does not happen when any fluid width setting is selected, just the fixed widths.

It also doesn’t happen with the width set over 1000, however there is a large space between the menu and the content of the modules… 40 or 50 px maybe. IE shows the compatibility view button broken and says something about the design of old websites. I tend to believe this is in fact a compatibility issue… though it’s an IE compatibility issue and not a website compatibility issue.

Either way… I’d like to fix it. I’d like to set the width back to 980, I just don’t want it at 1000.

Any ideas?

Thanks!

By the way… Purity II absolutely rocks. Thank you for publishing such an advance template to the greater community. I’m also grateful for the amount of documentation you’ve made available about both the template, and the T3 framework.

Thanks again!

[toymaker Friend toymakerJoin date: April 2010Posts: 123Downloads:0Uploads:5 Thanks: 10 Thanked: 45 times in 32 posts]

#341827

Its kind of difficult to help if you dont post a link to the site… :confused:
If you dont have this site alive, at least post a screenshot to see what is really happending to you.

Cheers,
Gabriel

[djw2 Friend djw2Join date: March 2010Posts: 7Downloads:1Uploads:0]

#341829

Sorry, I’d thought the information would be enough…. I cannot possibly be the only one experiencing this issue. The template is the current version, and I’ve virtually no modifications to the template files. This is the way I downloaded it… presumably how everyone has downloaded it. I was surprised not to find it when I searched the forums in the first place.

Anyway… here’s a link.

http://www.never-told.com/site/

Thanks

[toymaker Friend toymakerJoin date: April 2010Posts: 123Downloads:0Uploads:5 Thanks: 10 Thanked: 45 times in 32 posts]

#341871

yes.. I see what you mean…its a IE bug regarding the decimal number rounding in percentages…

anyway, you can fix a small -1 left margin to the “column” class and apply it only to IE7.

Go to layouts/blocks/head.php and find line 22

Where it says:


<!-->
<style>
.clearfix { display: inline-block; } /* IE7xhtml*/
</style>
<!-->


change to..


<!-->
<style>
.clearfix { display: inline-block; } /* IE7xhtml*/
.column { margin-left: -1px !important;}
</style>
<!-->


BTW.. here you can find more info about the IE7 rounding problem.
http://stackoverflow.com/questions/1084469/how-do-i-get-around-the-ie-css-percentage-rounding-problem

Maybe you should add this margin to the <!–> block too… or maybe to the ie.css file instead, whatever suits you better. 🙂

Cheers,
Gabriel

1 user says Thank You to toymaker for this useful post

1. ikerjer

[djw2 Friend djw2Join date: March 2010Posts: 7Downloads:1Uploads:0]

#341949

Thanks Toymaker!

That solves the module breaking to the next row, which is great. There’s still a rather large gap between the menu and the spotlight headings, but I can live with it… I guess. Do you no why IE8 is showing the errors… the ‘compatibility view’ thingy? Can that be solved?

Thanks again.

[toymaker Friend toymakerJoin date: April 2010Posts: 123Downloads:0Uploads:5 Thanks: 10 Thanked: 45 times in 32 posts]

#341956

Good to know it worked for you… 🙂

Regarding your other problem, you could start by validating the code. This usually works for me…
Your css shows some trouble http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.never-told.com%2Fsite%2F

… you should do the same thing with your xhtml code. There are some gross errors on it…

Invalid code or errors in the parsing of it, usually generates compatibility problems. Some browsers will even stop parsing the rest of the page… this generates different “looks” across browsers.

Make your code 100% valid! 😉

[Author]

Posts