IE must DIE

[Sabz]

Hey folks, hows everyone doin?...
almost finished working on my first website, ofcourse its not winning any design awards anytime soon, but its a start and i'm kinda proud of it... as usual the project is over due and under paying.. but hey! its a great learning experience.

http://www.marinetechegypt.com when everything is done ill be sure to submit for review (suggestions are still welcome though)

so the problem is clearly IE7/IE8 .. i haven't tested in IE6 yet! anyone? i only used Browsershots.com for that so far.

FF displays everything to my liking, however IE8 in Compatibility view does not. and it seems to be the default for my site (how can i change that?). so loong as i uncheck compatibility view it seems to work fine.

now according to my quick testing and reading, comp. view runs on the IE7 engine, and testing and IE7 confirmed that as it looks almost identical to IE8 in comp. view.

so what would be the best way to fix this, i tried using this. with no luck.

<!-- Mimic Internet Explorer 8 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >

should i use conditional if statements IE fixes for CSS elements to fix, or is there an easier more elegant way. and if yes should i be focused on fixing the CSS margins and such? any help is appreciated ill even buy ya a nice cold one hehehe

thanks a bunch guys always helpful
cheers

[kiwibrit]

Looks OK in IE 8 at a quick glance. You might want to tidy up your code (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.marinetechegypt.com%2F), though. Nice looking home page.

[Sabz]

thanks for the heads up mate! i was just testing that html code snippet for IE emulations, it seems its the only thing giving me validation errors.

you mean the text/image alignment wasn't off? compare to FF i suppose.. was it in compatibility mode? its only messes up then.

there must be a way to ensure it doesn't enter that mode on IE7,8!

[Sabz]

alright W3c validation is GREEN! any idea how to optimize for IE7 whats the best way in this case?

[slaughters]

What is wrong with it in IE8? I'm viewing this on my Netbook right now - using Opera 10 and Googles Chrome browser (Firefox is to much of a resource hog for netbooks) and the page looks OK (Except for half of the W in "What We Do" being off to the left of the screen.)

When designing for different browsers - things do not have to look pixel-perfect identical. They just have to look good and be functional.

[Sabz]

What is wrong with it in IE8? I'm viewing this on my Netbook right now - using Opera 10 and Googles Chrome browser (Firefox is to much of a resource hog for netbooks) and the page looks OK (Except for half of the W in "What We Do" being off to the left of the screen.)

When designing for different browsers - things do not have to look pixel-perfect identical. They just have to look good and be functional.


thank for the reply, ive noticed several glitches (affecting only while IE8 is running in comp. mode & IE7). strangely everything is perfect when i take my IE8 off comp. view, so i was thinking maybe there iss a way to force that on a page. i don't expect them to be identical - however, i am certain that the majority audience of the site will be using! quick question: does IE have a 'firebug" equivalent?

ill list the ones off the top of my head:

menu height length
mainHeadline div breaks out of container by at least 200px
footer links margin mis-aligned
"Partners page" titles text missing (same as what you were referring to in"W" Homepage)
"Products and Services" page columns not inline anymore, unacceptable!
..and the list goes on


from what i can gather i'm better off creating another iestyle.css with some fixes or use conditional If statements with inline CSS fixes is that a correct way to proceed?

[slaughters]

"from what i can gather i'm better off creating another iestyle.css"

I'd label that in the horrible idea category. There is really no reason for conditional CSS checking for anything but the oldest browsers, IE6 and below.

"does IE have a 'firebug" equivalent?"

Yes - it is built in to IE 8. Just press the F12 key to bring it up. Not quite as good, but pretty functional

P.S.

The "W" being off the left of the screen is occurring in Firefox as well. It's because you gave it's container "title" a left margin of -10 px, which in turn forces "title" to extend past the left boundaries of its container, "sub_copy".

[Eye for Video]

Taking a quick look at the difference in IE and FF made me think it may have something to do with absolute positioning. So a look at the CSS shows a mis-spelling of absolute in at least one instance.
.container {
text-align:left;
margin: 0 auto;
background: url('/images/bubbles.png') no-repeat 1000px -40px scroll;
position:absolote;
z-index: 5003;
}Not sure how much this will affect overall, put it may.
Also IE does have a Firebug equivilant, IE Developer Toolbar, available here:
http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en
Best of luck to ya!
Eye for Video

[Sabz]

Taking a quick look at the difference in IE and FF made me think it may have something to do with absolute positioning. So a look at the CSS shows a mis-spelling of absolute in at least one instance.
.container {
text-align:left;
margin: 0 auto;
background: url('/images/bubbles.png') no-repeat 1000px -40px scroll;
position:absolote;
z-index: 5003;
}Not sure how much this will affect overall, put it may.
Also IE does have a Firebug equivilant, IE Developer Toolbar, available here:
http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en
Best of luck to ya!
Eye for Video
nice catch there i had that left in when i was testing so thanks for reminding me... great ill debug with that thanks

the only think i have absolutely positioned now is the footer menu text. would that be reason enough for comp. view? does IE not accept absolute positioning at all ?

thanks again

[Sabz]

"from what i can gather i'm better off creating another iestyle.css"

I'd label that in the horrible idea category. There is really no reason for conditional CSS checking for anything but the oldest browsers, IE6 and below.

"does IE have a 'firebug" equivalent?"

Yes - it is built in to IE 8. Just press the F12 key to bring it up. Not quite as good, but pretty functional

P.S.

The "W" being off the left of the screen is occurring in Firefox as well. It's because you gave it's container "title" a left margin of -10 px, which in turn forces "title" to extend past the left boundaries of its container, "sub_copy".

fixed that! now i know why -ve margins can bite ya in the a$$.
uffff , i haven't even started on IE6 yet, ill download and check...

ok got it, ill go back and fix whichever elements are messed up

thanks for the input
btw great website your running there, javascript is next on the list so ill be visiting you site frequently

[slaughters]

Make these changes to your CSS

#footer {
background-image:url(/images/footer.png);
background-position:center bottom;
background-repeat:no-repeat;
height:170px;
margin-top:50px;
width:100%;
}
.quicklink {
font-size:11px;
padding:135px 0 0;
text-align:center;
width:700px;
}
.quicklink p {
color:#000000;
font-size:10px;
width:100%;
}

[Sabz]

ok i made the changes and only added some left padding to ".quicklink p" the only thing is that when i zoom in and out on the page the position of the paragraph changes and misaligns.... and thats why i opted for a position: absolute; property!

is it possible to achieve the same result without using uvsolute positioning

[slaughters]

Things are getting misaligned because your footer is not inside your wrapper.
Your container is designed to stay centered inside the wrapper while your footer is not.

Either move the footer inside your container like your header is, or move it inside the wrapper and have it stay centered.

[JPnyc]

I thought this was going to be a new horror movie release.

[Sabz]

Things are getting misaligned because your footer is not inside your wrapper.
Your container is designed to stay centered inside the wrapper while your footer is not.

Either move the footer inside your container like your header is, or move it inside the wrapper and have it stay centered.

thanks for the help slaughter; took your advice and have the footer nested within the wrapper now however its still moves about when i zoom in/out
should i have it positioned: relative; now ?

[Sabz]

I thought this was going to be a new horror movie release.

hahaha coming to theaters near you! hell i'd watch that ;-)