Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 27
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy IE / Firefox Issues

    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:


    Uploaded with ImageShack.us

    IE:


    Uploaded with 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
    Code:
    <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">
    
    			<!-- bar slider click SWF -->
    			<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>
    			<!-- bar slider click SWF -->
    
        	</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:
    Code:
    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

  • #2
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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 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;
    Last edited by teedoff; 01-23-2012 at 05:13 PM.
    Teed

  • #4
    New Coder
    Join Date
    Jan 2012
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Ashkwil View Post
    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.
    Teed

  • #6
    New Coder
    Join Date
    Jan 2012
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Ashkwil View Post
    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.
    Teed

  • #8
    New Coder
    Join Date
    Jan 2012
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok so i worked my way through the errors and added the HTML 5 code snippet you asked.

    http://validator.w3.org/check?uri=ht...alidator%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

  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed

  • #10
    New Coder
    Join Date
    Jan 2012
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes im editing the file directly, i removed the <center> tag and moved other HTML to the body section, thanks

    Ash

  • #11
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed

  • #12
    New Coder
    Join Date
    Jan 2012
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah just did that before you replied! Worked great

    Ash

  • #13
    New Coder
    Join Date
    Jan 2012
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So how would i go about fixing the remaining errors?

  • #14
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed

  • #15
    New Coder
    Join Date
    Jan 2012
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by Ashkwil; 01-23-2012 at 07:09 PM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •