7 replies [Last post]
amelie
amelie's picture
Offline
newbie
Last seen: 9 years 21 weeks ago
Timezone: GMT+8
Joined: 2012-08-16
Posts: 4
Points: 7

Hi,
I'm confusing about the Header's layout rendered in Ie8(and other modern browsers) is fine, but not in ie9, and the CSS seems to not displayed in ie9 well... I really don't know how to fix it...what I'm thinking is that possibly relative to the "float" property ? or the hasLayout problem? (I am sorry for some reason that i don't have the full original code right now.)

header.jpg
Untitled-1.jpg

here's the css code:

#function ul.myul li > a{
  color:#fff;
  display:block;
  text-decoration:none;
  line-height:14px;
  padding: 0 12px 0 0;
}
 
#function ul.myul li {
  float: left;
  padding:5px 0 3px 5px;
  height:18px;
}
 
#function ul.myul {
  float: left;
}

PS. html doctype is HTML5 declared and rendered in IE8(IE9) in standard mode.

Thanks for reading this. Smile

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi amelie, Hard to fix like

Hi amelie,
Hard to fix like this but try adding a width to the UL

#function ul.myul {
  float: left;
  width:200px: /* ? */
}

amelie
amelie's picture
Offline
newbie
Last seen: 9 years 21 weeks ago
Timezone: GMT+8
Joined: 2012-08-16
Posts: 4
Points: 7

HI Tony, thank you so much...

HI Tony,
thank you so much... but there's a problem that I try to add the width in my stylesheet, it's still not work in IE9(but ie8 and other browsers can work). Ie9 looks like only read the default layout and bootstrap style (i use it for some other layouts, like button or dropdown, etc.) except mine. but it works if i add the width via IE's developer tool(F12), that's weird. >"<

oh...and there's something that i forgot to mention about...the site was built in HAML + Compass based on Ruby on Rails... and it's weird that when I use the develop environment to check the IE9...layout is fine as other browsers, but when I deploy to the production environment, it went wrong terribly....i don't know what's the problem cause these consequences, why IE9 render so badly than IE8 ? why IE9 can't read some of my stylesheets, there must be something wrong while i'm coding... (i'm not a rails engineer but i do sure about that my engineer buddy has do the compile correctly when deploy to the production environment, by the way)

i discovered that there're other problems on the site in IE9, and looks like the same issue... (ul li in wrong position, img without width & height what I set up for, etc.)

thank you Tony, thanks again. and I'm still working on it ... hope that i can figure it out and fix up ... Smile
thanks for your patient. Smile

Hi guys, if you have any ideas, please let me know... and i'm very happy to learn more about these web things. Smile

Amelie Smile

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 7 years 24 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Hello amelie, It might be a

Hello amelie,

It might be a good idea to post a live link here, as well can go around and play with it a bit. Just looking at screenshots really become a guessing game, so if you can, please do!

Regards,
Mihir.

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

amelie
amelie's picture
Offline
newbie
Last seen: 9 years 21 weeks ago
Timezone: GMT+8
Joined: 2012-08-16
Posts: 4
Points: 7

hi there,here's the site

hi there,
here's the site link http://style.fashionguide.com.tw Smile

oh my...horrible in IE 9... >"<

i'm a new of FED... but i do try hard to learn more and try to do my best i can. Smile

thank you guys. Smile

Amelie Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 7 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

You have this:<meta

You have this:<meta content='IE=8' http-equiv='X-UA-Compatible'>.

That can break IE9. The compatibility http-equiv is for old pages that are written with broken code. It makes IE9 act like an older, buggy IE. Lose it. You may have to refactor some of the markup or css, but it will then be more robust.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

amelie
amelie's picture
Offline
newbie
Last seen: 9 years 21 weeks ago
Timezone: GMT+8
Joined: 2012-08-16
Posts: 4
Points: 7

gary.turner wrote:You have

gary.turner wrote:

You have this:<meta content='IE=8' http-equiv='X-UA-Compatible'>.

That can break IE9. The compatibility http-equiv is for old pages that are written with broken code. It makes IE9 act like an older, buggy IE. Lose it. You may have to refactor some of the markup or css, but it will then be more robust.

cheers,

gary

hi gary,

thanks for your suggestion!! but i did add this meta tag while after i found break layout in IE9. due to this cause, so i make the view looks like as IE8 temporarily(at least not so badly), and my purpose is to earn some time to fix the problem with IE9.

here is the worst page for instance:
http://style.fashionguide.com.tw/magazines

as you can see, in this page when using the content type in IE8 standard mode, it looks fine, but in IE9 standard mode, it's totally mess up!! especially, my CSS seems not work in IE9(but fine in IE8 and other browsers)... so.. that's why I put the meta tag, i know that's not a good way to go.

BTW, are you say that maybe i need to rebuild the markup or css ? is it the only way out?
i mean...is there any other way to fix the problem without rebuild the markups ?
i'm sorry if i misunderstand you.
can you point out the problem for me, please Smile

Amelie

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 7 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

You have syntax errors. IE

You have syntax errors. IE tends to not handle them all that gracefully; a Good Thing® imo. An extra closing tag can cause severe disruption.

Error Line 1278, Column 54: Stray end tag div.
 
<div class='new modal collectItem hide' id='magaedit'>
 
✉
Error Line 1278, Column 54: Cannot recover after last error. Any further errors will be ignored.
 
<div class='new modal collectItem hide' id='magaedit'>

Plus, what are these asterisks in the css? (Not to mention a whole potload of additional examples.)
video {
  display:inline-block;
  *display:inline;
  *zoom:1
  }

I think I know what you're trying to do, but that's not the way to do it.

The way to handle debugging is to make things right to begin. Don't pander to broken models such as older IEs. You have a broken page/site written for broken browsers. The compatibility mode is a MSFT work-around so that IE9 will act as stupid as its predecessors.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.