• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Coding Help - IE/FF


Levi

Moderator
Staff member
#3
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 :)
 

TomStutt

Senior Member
#4
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
 

Xenonsoft

Active Member
#5
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.
 

TomStutt

Senior Member
#6
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.
 

Xenonsoft

Active Member
#7
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.
 

TomStutt

Senior Member
#19
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