IE and Firefox- html different???

safeastinkywinky · 7 Mar 2006 at 00:30

http://www.caerphillydragons.co.uk

For some reason the positioning of the page is different in firefox vs ie and opera . It seems closer to the edges in firefox than the other two which is giving me issues when using div tags to place my text and images!!! Also I've lost the borders from my css list for my navigation bars!!! So frustrating. Any help much appreciated. I'm new to web programming and used to using c++ etc, so any web help much appreciated. Should I get rid of my tables and use div tags completely???

Thanks.

Augmented · 7 Mar 2006 at 00:56

safeastinkywinky said:
For some reason the positioning of the page is different in firefox vs ie and opera . It seems closer to the edges in firefox than the other two which is giving me issues when using div tags to place my text and images!!!

All browsers (well, layout engines) exhibit slight differences when displaying markup. This is because they all have a 'default' stylesheet that applies various properties to elements when the content is either unstyled or has not had a particular property set e.g. <h1>s are a large font-size, and exist on their own line. <em>s are displayed in italic form, <strong> as bold text and so on.

The most notorious issue with this is that this includes the application of default margins and padding which can cause mayhem when you're trying to control layout across browsers.

So, the quickest fix for your problem would be to explicitly set the margin for the <body>:

Code:

body {
margin: 5px;}

Overriding any default that exists. You might assign a value for the padding too.

The better option is to 'reset' margins and padding for all elements - this gives you much better control over how elements display, and allows you finer grained control of your layout. For this, you use the universal selector, and additionally assign the rule to body and html:

Code:

*, html, body {
margin: 0;
padding: 0;}

Should I get rid of my tables and use div tags completely???

Yes, but not necessarily <div> tags, it's more important that you work towards semantically-rich markup. You shouldn't be using tables for layout at all. Do use them for marking up data and anything that should be in a table. Use the right tag for the right job. If you are adding a paragraph of text, place it between <p>aragraph tags, rather than within <div> tags, for example. May sound stupid, but many converts from table-based layout methods will place everything in <div>s. <div>s are semantically worthless - their purpose is to allow the grouping of elements together for styling, script manipulation or sectioning of a document.

HTH

.

safeastinkywinky · 7 Mar 2006 at 13:23

Thanks very much mate. Just the reply I was looking for! I'll check out both methods now.

safeastinkywinky · 7 Mar 2006 at 13:31

Yeah works fine.

Code:

*, html, body {
margin: 0;
padding: 0;}

Thank's a lot!

safeastinkywinky · 7 Mar 2006 at 13:43

One more thing, my nav bar is still no displaying the borders in IE and is in Firefox:

css code:

Code:

#topnav 
{ 
	background-color:#FFFFFF; 
	padding: 0.2em 0.2em; 
	margin: 0; 
	position: relative;
	 
}

#topnav li
{ 
	display: inline;
	padding: 0 0 0 0.5em; 
	margin: 0;
}

#topnav li a,#topnav li a:link,#topnav li a:visited
{ 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 12px;color: #1E3113;
	font-weight:bold; 
	text-decoration:none;
	border-right: 0.5px solid #1E3113;
	border-color: #1E3113; 
	padding: 0 0.5em 0 0; 
	margin: 0;
}

#topnav li a:focus,#topnav li a:hover,#topnav li a:active 
{
	color: #A7B69E;
	font-size:12px;
	
}

html code

Code:

<table width="740" border="0" cellpadding="0" cellspacing="0">
  <tr>
  <td>
  <ul id="topnav">
			<li><a href="/index.html">home</a></li>
			<li><a href="/members.html">members</a></li>
			<li><a href="/fixtures.html">fixtures</a></li>
			<li><a href="/results.html">results</a></li>
			<li><a href="/gallery.html">gallery</a></li>
			<li><a href="/contact.html">contact</a></li>
			<li><a href="/links.html">links</a></li>
			<li><a href="/guestbook.html">guest book</a></li>
			<li id="memberlogin"><a href="http://www.caerphillydragons.co.uk/login.php">login</a>
			
			</li>
	  </ul>    </td>
    </tr>
  </table>

Any Ideas?

Augmented · 7 Mar 2006 at 13:58

It may be because you've specified a width of 0.5px for the border, which isn't a valid value as you can't display half a pixel. IE may be rounding it down to 0, and FX rounding it up to 1px.

safeastinkywinky · 7 Mar 2006 at 14:00

Thanks, will try that now.

safeastinkywinky · 7 Mar 2006 at 14:06

Woked a treat. Just one more thing... (Getting like Columbo now) My nav bar is slighlty fatter in firefox than ie. Causing all my text below to be one or 2 pixels off (height wise) between browsers?

Thanks.