Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Website displays differently in Internet Explorer(IE6) and Firefox

Options
  • 27-03-2009 10:44pm
    #1
    Joeyjoejoe43
    Registered Users Posts: 1,094 ✭✭✭


    First of, Im new to web design and Im just doing a simple website for my Dad. I designed the page using IE6, but when I went to firefox it looked skewed, so i added 4 <br>'s to make it look ok in Firefox, but now there is obviously a big gap between my top image and the linkbox in IE6.

    Question is, is there a way to do this whereby it displays the same in both browser's without gap/skew in one??

    Website: www.celticretreet.com

    Thanks


Comments

  • Options
    #2
    Liam Byrne
    Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne


    Look up some CSS tutorials.

    At the very least, set the body tag's margin and padding.

    Also, check all of your tags to make sure they're opened and closed properly; at first glance, there is a TR at the bottom of the page that is not in any table.

    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.celticretreet.com


  • Options
    #3
    ocallagh
    Registered Users Posts: 3,140 ✭✭✭ocallagh


    First off the code is a bit mixed up. You need to learn how to structure a table properly however for the purposes of your website you actually don't need to use a table. Tables are really only used to display structured data and should not be used for layout. You should use DIV tags, heading tags and paragraph tags, and use CSS to position them.

    Your header image needs to be replaced with a small logo image, and use text on the right for the tutor/host stuff.

    Your navigation is fine however I would suggest using a (UL, LI) list instead.

    The following is a template I put together which should help get you started






    <html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<title></title>
<style>
body {
 font-family: verdana;
 font-size: 1.2em;
}
.nav,.head {
 width: 800px;
 clear: both;
}
.head {
 border-bottom: 1px solid green;
 margin-bottom: 50px;
}
.nav ul {
 float: left;
 margin: 0px;
 padding: 0px;
 width: 100%;
 clear: both;
}
.nav ul li {
 float: left;
 padding: 50px;
 padding-top: 10px;
 padding-bottom: 10px;
 list-style: none;
 background: green;
 margin-right: 5px;
}
.nav ul li a {
 color: #fff;
 text-decoration: none;
}
.content {
 width: 100%;
 clear: both;
 margin-top: 50px;
}
.right {
 float: right;
}
</style>
</head>
<body>
<div class="head"><span class="right">Float something right</span>
logo here
</div>
<div class="nav">
<ul>
 <li><a href="index.html">Link 1</a></li>
 <li><a href="index.html">Link 2</a></li>
 <li><a href="index.html">Link 3</a></li>
</ul>
</div>
<div class="content"><img
 src="[URL]http://www.celticretreet.com/iMAGES/Please.jpg[/URL]" class="right" />
<p>content here content here content here content here content here
content here content here content here content here</p>
<p>content here content here content here content here content here
content here content here content here content here</p>
<p>content here content here content here content here content here
content here content here content here content here</p>
</div>
<div class="nav">
<ul>
 <li><a href="index.html">Link 1</a></li>
 <li><a href="index.html">Link 2</a></li>
 <li><a href="index.html">Link 3</a></li>
</ul>
</div>
</body>
</html>


    please note I haven't checked that template so make sure if is valid html, it needs a title and the images need alt tags etc


  • Options
    #4
    p
    Registered Users Posts: 2,119 ✭✭✭p


    The others have helped you with the code side of things. Can I offer a few small tips regarding the design.

    - Centered text often seems like a natural choice, but it tends to be very hard to read and doesn't look that professional.
    - The font you're using in the heading & navigation is Verana. I'd suggest using Arial as it looks better at those sizes. Also, there's no need for the main navigation to be images, you can achieve this jsut with plain HTML & CSS. Here's a simple example: http://css.maxdesign.com.au/listamatic/horizontal02.htm
    - For the main body text, it looks like you're using Times New Roman. If you want a nice classic font, that looks a little bit more unique, then Georgia might be suitable.
    - Currently the site is the full width of the browser and it looks a little lost. I'd suggest making the whole website 960 wide and center it all. It will all be framed a little nicer.

    Hope that helps, g'luck!


Advertisement