IE / Firefox Issues

Ashkwil

01-23-2012, 04:49 PM

Hey guys im a little stumped as i have an issue with IE not being compatible with a site im making!

www.ash-kwil.co.uk/dean2

Thats the site, now the logos of the car brands should be to the left of the chunk of text and fit nicely, however on IE they do not. Also the navigation does not appear properly in IE (im using firefox) and in both i have a line under the nav going through the flash scroller which i cant get rid of if someone can help with that also.

here is an example of what it looks like here:

Firefox:
http://img220.imageshack.us/img220/4135/firefoxl.th.jpg (http://imageshack.us/photo/my-images/220/firefoxl.jpg/)

Uploaded with ImageShack.us (http://imageshack.us)

IE:
http://img830.imageshack.us/img830/6195/66433178.th.png (http://imageshack.us/photo/my-images/830/66433178.png/)

Uploaded with ImageShack.us (http://imageshack.us)

As you can see its a mess in IE, the nav is not styled and the BG of the nav is repeated twice and the DIVs containing text and SWF car badges are staggered!

HTML of index.html
<HTML>
<head>
<CENTER>
<link rel="stylesheet" href="style.css"/>
<div id="container">
<div id="logo">
<IMG SRC="logo.jpg"><br>
</div>
</head>

<div id="header" align="center">
<br><br><br><br><br><br>
<hr><nav><ul><li>
<a href="./" title="Home">
<strong>Home</strong>
<span>Our homepage</span>
</a>
</li>
<li>
<a href="./" title="About Us">
<strong>About Us</strong>
<span>Who we are</span>
</a>
</li>
<li>
<a href="./" title="Vehicle Tinting">
<strong>Vehicle Tinting</strong>
<span>Our tinting service</span>
</a>
</li>
<li>
<a href="./" title="Vinyl Wrapping">
<strong>Vinyl Wrapping</strong>
<span>Our vinyl wrapping service</span>
</a>
</li>
<li>
<a href="./" title="Galleries">
<strong>Galleries</strong>
<span>View our work</span>
</a>
</li>
<li>
<a href="./" title="Cotact Us">
<strong>Contact Us</strong>
<span>Get in touch</span>
</a>
</li>
<li>
<a href="./" title="FAQ's">
<strong>FAQ's</strong>
<span>Frequently Asked<br>Questions</span>
</a>
</li>
</ul></nav></div>

<div id="flash" align="center">


<div id="flashmo_slider">
<iframe scrolling="no" style="border: 0px;" width="902px" align="center" height="260px" src="http://www.ash-kwil.co.uk/dean2/NEWSLIDER/bar_slider_click_1.html"></iframe>
</div>


</div>

<body>

<div id="main text" style="background-color:#FFFFFF;height:400px;width:401px;float:left;">
<h1>Welcome to Performance Auto Tints,
<p>Based near Pontefract West Yorkshire, Performance Auto Tints are proud <b><u><font color="red">NOT</font></u></b> to offer a mobile tinting service. <br><br>
You wouldn't allow your car to be resprayed at the roadside so why settle for second best when it's being tinted?<br><br>

With 20 years installation experience and by only operating from out indoor tint bay, we are able to guarantee a first class finish on each and every car.<br><br>

Coupled with our unrivalled lifetime guarantee we are West Yorkshires' if not Yorkshires' premier tinting and vinyl wrap company.<br><br>

Having tinted over 450 cars in 2011 alone and more than 1200 since June 2009 we are vastly experienced with all major car manufacturers and models</P>
</div>

<div style="float: right;height: 200px;width: 501px;">
<object width="501" height="400"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="http://ash-kwil.co.uk/dean2/carbrands.swf">
<embed src="http://ash-kwil.co.uk/dean2/carbrands.swf" width="501" height="400"></embed>
</object>

</div>
<img src="footer.jpg">

</center>
</body>
</html>

CSS File:
body{
padding:0;
margin:0;
font:76% tahoma, verdana, sans-serif;
background:#FFFFFF;
color:#929292;
}

img.floatleft {
float: left;
margin: 4px;
}

img.floatright {
float: right;
margin: 4px;
}

a{
text-decoration:none;
color:#286ea0;
}

a:grey{
colour :#ffffff;
}

a:hover{
text-decoration:underline;
}

#container{
width:902px;
padding:10px 10px 10px 10px;
background:#ffffff;
border: 0px;
}

h1{
margin-bottom: 0px
font-size:2.1em;
font-weight:normal;
color: #262626;
}

h2{
margin:0 0 20px 0;
font-size:2.1em;
font-weight:normal;
}

h3{
margin:20px 0 10px 0;
font-size:1.4em;
font-weight:normal;
}

p{
text-align:left;
color: #4b4b4b;
font-size:13px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

h1.gallery{
text-align:left;
color: #262626;
font-size:20px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

/**************************************************************************************************** ***************
* HEADER
**************************************************************************************************** ***************/
#header {height: 98px; width:902px; position: relative; background: url('navbg.jpg');}
#header a#logo {font-size: 1.8em;font-weight: bold;display: block;line-height: 98px;position: absolute;top: 0;left: 0;color: #323338;font-family: "Lato", Arial;}
#header a#logo span {color: #d00401} /* color */
#header a#logo:hover {text-decoration: none;color: #000}
#header nav ul {position: absolute;top: 0;right: 0 list-style-type: none;}
#header nav li {float: left;}
#header nav li {list-style-type: none;}
#header nav li a {float: left;color: #323338;display: block;padding: 20px;text-decoration: none; }
#header nav li a strong {display: block;font-size: 1.1em;margin-bottom: 0;}
#header nav li a span {color: #989898;font-size: 11px}
#header nav li.active a strong, #header nav li.active a span,
#header nav li a:hover strong, #header nav li a:hover span {cursor: pointer;color: #000 !important}
#intro {color: #fff;height: 255px;position: relative;padding: 50px 550px 10px 0;position: relative}
#intro #macbook {position: absolute;bottom: -34px;right: 0;width: 550px;height: 309px;background: url('../img/macbook.png') no-repeat}
#intro #macbook img {position: relative;top: 20px;left:89px}
#intro h2 {font-size: 1.2em;text-shadow: 0 0 0;color: #afadae}
#intro p {color: #dddddd;margin-bottom: 20px}
#subIntro {height: 70px;position: relative;padding: 33px 0 7px 0;position: relative}
#subIntro h2 {color: #000;font-size: 1.4em;font-weight: normal;margin-bottom: 0}
#subIntro p {font-size: 1.1em}
#subIntro .button {position: relative;top: 5px;right: 60px !important}

I hope ive given enough information for someone to help me and i really do appreciate anyone who tried to help.

Thanks a lot!
Ash

riptide

01-23-2012, 05:07 PM

to be on the safe side I would replace <a href="./" title="About Us">
with <a href="#" title="About Us"> while building the site. firefox will loose the style of links if it's missing the href="" in a link. so IE could be buggy too.

#container{
width:902px;
padding:10px 10px 10px 10px;
background:#ffffff;
border: 0px;
}

why don't you have a position on this. also what happens if you add a height?

teedoff

01-23-2012, 05:09 PM

You have just a few errors in your markup, one of which though is NO valid doctype, which IE does not like.

I would add a valid doctype and try fixing these (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ash-kwil.co.uk%2Fdean2%2F&charset=%28detect+automatically%29&doctype=Inline&group=0)errors to see if IE behaves for you first.

You also have a <center> tag way up under your <html> tag. Not only is that out of place, its out of date..lol The center tag has been deprecated in favor of css: margin: auto;

Ashkwil

01-23-2012, 05:17 PM

teedoff

01-23-2012, 05:24 PM

Ok first off thank you very much for replying!!

Secondly either the # replacing or the doc type seems to have fixed it!

However a little niggle is now the NAV bar overhangs and the FAQ link goes a line under, how can i edit this to fit it seems like theres plenty fo room for it, and also how to get rid fo the horizontal line under the nav cutting into the flash?

Thanks again i really really appreciate the help!

You need to fix those errors. I think maybe you intended to use HTML5 doctype, but its not right. You use one html5 specific tag (<nav>), but without a hack ("html5shiv" google it) IE doesnt recognise that element. You're never going to get IE to render correctly with those types of errors.

Ashkwil

01-23-2012, 05:31 PM

Ok ill work my way through them and try to sort them they look a bit confusing but ill see what i can do and get back to you

teedoff

01-23-2012, 05:44 PM

Ok ill work my way through them and try to sort them they look a bit confusing but ill see what i can do and get back to you

Most are self explainatory, but if you get stumped on any, just post back which one and we can help.

Ashkwil

01-23-2012, 05:53 PM

Ok so i worked my way through the errors and added the HTML 5 code snippet you asked.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ash-kwil.co.uk%2Fdean2%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.2

There are a few errors left and i dont know how to fix them if you could tell me what to do on one or two i can work my way through those too,

Thanks for all of the help!!

Ash;)

teedoff

01-23-2012, 05:57 PM

Have you uploaded your latest version to your server? If not please do so.

The first error is saying
Document type does not allow <center> tag where it's at. As I said before, no html elements go in the head section, and even so the center tag should no longer be used anyway. Removing that will probably fix a few errors at once.

Ashkwil

01-23-2012, 06:01 PM

Yes im editing the file directly, i removed the <center> tag and moved other HTML to the body section, thanks

Ash

teedoff

01-23-2012, 06:05 PM

Looks better already! lol

Now to center your page again, add:

margin:0 auto;

to your #container stylerule.

You'll still have some errors to work through.

Ashkwil

01-23-2012, 06:13 PM

Yeah just did that before you replied! Worked great

Ash

Ashkwil

01-23-2012, 06:34 PM

So how would i go about fixing the remaining errors?

teedoff

01-23-2012, 06:52 PM

Read the explainations. They really are very clear as to whats wrong and how to fix them. The first one, which is probably the hardest one to understand, says:

Line 10, Column 7: end tag for "head" which is not finished</head>
✉

Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on.

You dont have a title tag in your document.

Ashkwil

01-23-2012, 06:57 PM

Ah i must have missed the simplicity of that one! Can i ask about the others though i cant see what it means about i havent closed it etc as i have closed the <nav> tag etc..

Also the navs FAQ is still a line under and the whole container div is not centered in IE either

Thanks again
Ash

teedoff

01-23-2012, 07:27 PM

You've now mixed an html 4.01 transitional doctype and still using <nav> which is HTML5 specific element.

Change your doctype from:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

To

<!DOCTYPE HTML>
<html>

riptide

01-23-2012, 07:28 PM

it looks fine in IE8 to me but I have wide screen.

Ashkwil

01-23-2012, 07:48 PM

Ok i figured out why it was not centered, apparantly i had to add text-align: center to the body to make IE center the div!

But im still stuck with the other errors and the navigation!

Thanks

teedoff

01-23-2012, 07:53 PM

Ok i figured out why it was not centered, apparantly i had to add text-align: center to the body to make IE center the div!

But im still stuck with the other errors and the navigation!

Thanks

What?? It was already centered when you added margin: 0 auto; to the #container stylerule. :confused:

Ashkwil

01-23-2012, 07:58 PM

Not for me it wasnt, it worked in FF and GC but not in IE

teedoff

01-23-2012, 08:08 PM

Not for me it wasnt, it worked in FF and GC but not in IE

No text-align: center does NOTHING to center your page. You were probably viewing a cached version in IE.

Ashkwil

01-23-2012, 08:17 PM

No text-align: center does NOTHING to center your page. You were probably viewing a cached version in IE.

Ah ok just removed it, no change sorry about that must have been the cached version then!

I am down to 5 errors and am unsure of how to fix them! any help would be great.

Thank you for your time so far!

Ash

Ashkwil

01-23-2012, 08:22 PM

NVM (sorry for DP)

teedoff

01-23-2012, 08:25 PM

I dont know how many times I need to say this. <nav> is an element NEW to HTML5 ONLY. To use <nav> you have to have an HTML5 doctype, which I provided several posts ago. If you dont want to use <nav> then yes you can use a div with an id of nav. then style the #nav in your css instead of styling your <nav> element. IE does not yet fully support html5 elements like <nav>, which is why you inserted that htmlshiv code from before.

You cant have it both ways. Either use html5 or dont. If you only have that one html5 element, there's really no need to use html5 doctype. But then yes the <nav> element must be changed.

Ashkwil

01-23-2012, 08:35 PM

yes i understand that which is why i removed the nav element and have got it working fine in both browsers now.

That is not my problem the problem is the 5 remaining errors

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ash-kwil.co.uk%2Fdean2%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&group=0&st=1&user-agent=W3C_Validator%2F1.2

Thanks
Ash

teedoff

01-23-2012, 08:53 PM

Most of those errors are because you're using the <embed> element, which will never validate as is.

Are you reading the explainations? The very first error has a link that says why its not validating, then that page has a link to the page I've linked below.

Here (http://www.alistapart.com/articles/flashsatay)is a good tutorial/article to validate flash embedded elements.

Ashkwil

01-24-2012, 08:04 PM

Ok i changed it and now have more errors...

Previous
<object width="501" height="400"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="http://ash-kwil.co.uk/dean2/carbrands.swf" />
<embed src="http://ash-kwil.co.uk/dean2/carbrands.swf" width="501" height="400" ></embed>
</object>

New

<div style="float: right;height: 200px;width: 501px;">

<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com
/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="501" height="400" id="movie">
<param name="carbrands" value="carbrands.swf" />
<embed src="carbrands.swf" quality="high" width="501"
height="400" name="movie"
type="application/x-shockwave-flash"
plug inspage="http://www.macromedia.com/go/getflashplayer">
</object>
</div>

Any advice?