Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Coding Help - IE/FF

Discussion in 'Website Design Forum:' started by TomStutt, May 23, 2009.

  1. TomStutt

    TomStutt Senior Member

    Hi, Im building my new site. Got part was done (no graphics yet im afraid)

    Its looks as I want it to in IE but looks pants in firefox.

    Can anyone help please or im gonna pull my hair out.

    Thanks, Tom

    sorry the site is Tom Stutt Design | Graphic and Web design
     
  2. berry

    berry Active Member

    Nothing works on the site, what help do you want?
     
  3. Levi

    Levi Moderator Staff Member

    Berry it looks like the text is aligned differently on firefox to ie (8)
    firefox - left aligned and lower down the page
    ie8 - centred and higher up

    I think its the use tables (isnt there a difference in the way ie/firefox treat borders) but I've not really used tables so can't be certain. Well atleast I can see a table mentioned in the source :)
     
  4. TomStutt

    TomStutt Senior Member

    thats right - ie is centered and higher and firefox goes to the left and is lower down but i was firefox to be the same as ie.

    it uses a table to put the content in but i use css to style the page
     
  5. Xenonsoft

    Xenonsoft Active Member

    Gimme half an hour and I'll try and sort your code out, although you may have to rework your CSS a little.

    EDIT: Do you do Web or Print design? Gotta brush up on your coding skills a little.
     
  6. TomStutt

    TomStutt Senior Member

    i think ive sorted it thanks. im just going this in my spare time. i work as an IT technician but really like design so i thought id give it a go.
     
  7. Xenonsoft

    Xenonsoft Active Member

    That's cool, I advise going through W3Schools HTML Tutorials & CSS Tutorials for starters.

    I've gone through your site and recoded it a bit, there were lots of validation errors and wrong use of tags.


    • Just a few notes: float:justify; isn't a value, you can only float things to the left, right or not at all.
    • Image tags are self closing, so you put a /> at the end of them.
    • Always have an alt attribute for images (alt="describe the picture in a few words here") so if the image doesnt load the user will know what was supposed to be there.
    • Don't use tables for layout, only use them for tabular data (like if you ran a hosting company and wanted to show the comparison between your hosting products on their bandwidth, usage etc.). Use div's for layout and style them externally.
    • Remember to put the # sign before Hex colour numbers, or they wont register with the browser as a colour code.
    That'll do for now. I've redone your code as I said if you're interested, feel free to download it and try it out, might need a little bit of tweaking but not much:

    HTML:
    <!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">
    <head>
    <meta http-equiv="www.tomstuttdesign.co.uk" content="freelance,web,design,graphic,design,bristol,designer,www.tomstuttdesign.co.uk,tomstuttdesign" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Tom Stutt Design | Graphic and Web design</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    
    <body>
    <div id="container">
        <a href="index.htm" id="center"><img src="ImagesWeb/logo-web.jpg" alt="Tom Stutt Design Logo" id="logo" /></a> 
          
    <div class="hover-buttons">
        <a href="index.htm">home</a> <em>/</em> <a href="contact.htm">contacts</a> <em>/</em> <a href="portfolio.htm">portfolio</a> <em>/</em> <a href="testimonial.htm">testimonials</a>
    </div>
    
        <h2 id="header">welcome to Tom Stutt Design</h2>
        <p>Hi, my name is Tom and I am the designer and owner of Tom Stutt Design.</p>
        <p>I specialise in graphic and web design and believe that it should not cost you an arm and a leg for someone to produce high quality design work. I always offer a friendly and reliable service that meets the needs of the customers.</p> 
        <p>Please have a look at my portfolio and if you like what you see then please don't hesistate to give me a call or drop me an email.</p>
        <p>Thanks for looking at the site!</p> 
        <p>LATEST NEWS <em>/ COMING SOON</em></p>
        
        <div class="hover-buttons" id="footer_nav">
            <a href="index.htm">home</a> / <a href="contact.htm">contacts</a> / <a href="portfolio.htm">portfolio</a> / <a href="testimonial.htm">testimonials</a>
        </div> 
        
        <div id="footer"><p>Site designed by <a href="mailto:webmaster@tomstuttdesign.co.uk">Tom Stutt Design </a> © 2009 - All Rights Reserved.</p></div>
    
    </div>
    </body>
    </html>
    Code:
    @charset "utf-8";/* CSS Document */em { color:#0099ff; font-style:normal; }#footer_nav { font-size:10px; color:#0099ff; }#header { text-align:center; }#center { margin:0 auto; }#logo { width:380px; height:45px; border:none; margin:0 auto; }body {    margin: 0;    padding: 0;    font-family: "verdana", "arial", "times new roman";    text-align: center;    background-color: #c0c0c0;}        h2 {    color: #0099ff;    font-weight: bold;    padding-bottom:6px;}     h3 {    color: #0099ff;    font-weight: bold;    padding-bottom:2px;}        p {    color: #000000;    font-size: 85%; }a {    color: #000000;    text-decoration: none; font-weight: bold; }            /* wraps the whole document */    #container {    margin:30px auto 10px auto;    width:500px;    line-height: 1.1em;    background-color: #c0c0c0;/*    min-height: 500px;    font-align: center; */    text-align:left;}/* left navigation */#nav {    float: left;    width: 170px;    margin-top: 47px;    padding: 5px;    display:block;    font-family: "verdana", "arial", "times new roman";    text-align: left;}        #nav h2 {     margin-top: 10px;     border-bottom: 1px #333 solid;     padding: 5px;    color: #e41212;    margin-left: 10px;}#nav li {     font-weight : bold;    list-style-type : none;    padding : 5px;    margin-bottom : 5px;    font-family: "verdana", "arial", "times new roman";    color:#000000;}#nav li a {    background-color: #dddddd;    height: 2em;    line-height: 2em;    width: 7em;    font-weight: bold;    border: 1.5px solid #e41212;    text-decoration: none;    color:#000000;    display:block;    padding-left: 8px;}#nav li a:hover {    background-color:#e41212;    color:#ffffff;    border: 1.5px solid #000000;}        #nav p { margin-top: 0; }/* main content  */    #content ul{        list-style-position: outside;    font-size: 95%;}        #content {    padding: 10px;    display:block;    width:400px;    font-size: 80%;}a.content {    color: #ffffff;    text-decoration: underline;    font-weight: bold;}/* footer */#footer {    font-size: 70%;    color: #ffffff;}        #footer a {    font-weight: bold;    color:#707070;}#footer a:hover {    color:#0099ff;}/* hover buttons */.hover-buttons { text-align:center; }.hover-buttons a {    font-weight: normal;    text-decoration: none;    color:#707070;    font-size: 90%;}.hover-buttons a:link {    font-weight: normal;    font-size: 90%;}.hover-buttons a:hover {    color:#0099ff;}
    Keep at it, we all start at the same place not knowing quite what to do, you've got some basic understanding already I can see. Just a word of warning, web design is a skill like any other and you'll have to put time and effort into learning it before you can offer a reasonable service to customers. Your design skills seem decent so that's a good starting point.
     
  8. Good on ya Fred :) nice and thorough :D
     
  9. Xenonsoft

    Xenonsoft Active Member

    Nothing better to do Chris :D

    No doubt Harry will come along and re-do my re-do code :p
     
  10. well it seems that there will need to be a battle of the codemasters :D :lol:
     
  11. Xenonsoft

    Xenonsoft Active Member

    Not a chance, I'm not even gonna answer that :lol:
     
  12. awww Freddie :)
     
  13. tbwcf

    tbwcf Active Member

    do it! battle! Fred vs Galiath! (I know that's not spelt right Berry but I don't have my Tyrannosaurus handy)
     
  14. now that would be a comp and a half :D
     
  15. tbwcf

    tbwcf Active Member

    psssst..... pssssst.... Fred I'll try and help.... just don't tell anyone!
     
  16. tbwcf

    tbwcf Active Member

    ...doh!
     
  17. Nice one Andy.. now Harry won't join in :p
     
  18. Harry

    Harry Senior Member

    I'm in.
     
  19. TomStutt

    TomStutt Senior Member

    Fred you're a legend. it worked a treat after a few tweaks.

    it looks great in IE and FF. Thanks very much and ive learnt a bit more about web design today so i appreciate that very much.

    cheers
     
  20. Harry

    Harry Senior Member

    There are further amends to make to your code though, just so you're aware.
     

Share This Page