HTMLHelp Forums > Page doesn't line up in IE

Full Version: Page doesn't line up in IE

HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)

aoshilover

Sep 2 2009, 07:29 PM

Hi,
I was wondering if anybody could help me out. It has been a long while since I've done any html/css coding and I desperately need to get this page fixed. It's driving me crazy.
The layout looks fine in Firefox but the margins don't line up when I view them in IE. I don't know why it is and I can't figure out how to fix it.
If anyone could help me out, I'd really appreciate it!

Thanks!

QUOTE

<html>
<head>

<title>NorCal Critters -Pet Care from Moo to Meow!</title>

<style type="text/css">
body
{ background-color: #c4eefc;
color:#000000;
margin:0px 0px;
padding:0px;
font-family: MS Reference Sans Serif, Tahoma, Verdana;
background-image:url(bg.jpg);
background-repeat:repeat-y;
background-attachment: fixed;
background-position: center;
}

A:link { text-decoration: none; color:#f6e1f7; padding:1px; border-bottom:1px dotted #3A4A25; }
A:visited { text-decoration: none; color:#f6e1f7; padding:1px; border-bottom:1px dotted #3A4A25; }
A:hover { text-decoration:none; color:#ebf6fa; padding:1px; border-bottom:1px dotted #FFFFFF; }

#navi A { display:block; background-color:#ebf6fa; color:#000000; border: 1px solid #0F1A03; padding:2px; text-

align:center; font-size:11px; margin-left:-35px; margin-right:5px; margin-top:2px; margin-bottom:2px; font-

family:Verdana;}
#navi A:link { text-decoration: none; }
#navi A:visited { text-decoration: none; }
#navi A:hover { text-decoration:none; color:#000000; border:1px solid #0F1A03; background-color:#f6e1f7; }

#sitetitle {text-align:top; background-color:#F2F37B; font-size:18px; }

#emptyrow { height:5px; }

#content {border:0px solid #000000; padding:5px; font-size:13px;text-align:justify; }

#emptycolumn { width:15px; }

#menu {border:0px solid #000000; width:190px; padding:5px; font-size:11px;}

h1 { border: 1px solid #000000; background-color:#d0f2fe;font-size:12px;font-family:Arial; text-

align:center;margin-bottom:5px;margin-top:5px; padding:0px; color:#000000; line-height:18px; }

#header {border-bottom:1px solid #000000; font-size=12px; font-family:Arial; text-align:justify; margin-bottom:5px;

margin-top:5px;font-weight:bold;color:#322002;}

</style>

</head>
<body>

<table cellspacing="0" cellpadding="0" align="center" width="50%">
<tr>
<td colspan="3" id="sitetitle"><img src="headerfinal.jpg" width="800" height="291"></td>
</tr>

<tr>
<td id="menu" valign="top">
<h1>Menu</h1>

<ul id="navi">

<a href="http://www.norcalcritters.com">Home</a><br>
<a href="http://www.norcal.com">About Us</a><br>
<a href="http://www.norcal.com">Contact</a><br>
<a href="http://www.norcal.com">Services</a><br>
<a href="http://www.norcal.com">Special Offers</a><br>
<a href="http://www.norcal.com">Resources</a><br>
<a href="http://www.norcal.com">Policies</a><br>
<a href="http://www.norcal.com">Disclaimer</a><br>

</ul>
<h1>Copyright</h1>
Copyright ©2009 NorCal Critters

</td>

<td id="content" valign="top">

<h1>Welcome</h1>

Thank you for visiting Norcal Crittes, Pet care from Moo to Meow!<br>
If you would like to help us raise one million dollars for pet charities please visit
<a href="http://www.1shoppingcart.com/app/?af=1046100" target="_blank">The Million Petizen Rally</a> or purchase
<a href="http://www.1shoppingcart.com/SecureCart/SecureCart.aspx?mid=9DA03C05-13F9-40E8-9D2F-

404F2A63FBFD&pid=148d710821b057a307d9a8c285679093" target="_blank"> Knowing your Pet's Health</a>, a guide for

optimal wellness from snout-to-tail. Your support and contribution will help many animals in need.
<center>
<br>
<a href="http://www.facebook.com/pages/NorCal-Critters/109838225885#/group.php?gid=122010114299&ref=nf"

target="_blank">Join us on Facebook!</a></center>
</td>

</tr>
</table>

</body>
</html>

pandy

Sep 2 2009, 11:31 PM

What version of IE? Doesn't look too shabby in my IE6.

For consistent display it's important that you use a doctype that puts browsers in Standards (Strict) Mode.
http://htmlhelp.com/tools/validator/doctype.html
http://hsivonen.iki.fi/doctype/

You also need a doctype so you can validate, which helps you to find HTML errors.
http://htmlhelp.com/tools/validator/

You also have CSS errors.
http://jigsaw.w3.org/css-validator/validat...;usermedium=all

It isn't that bad. Just get the doctype on and you'll soon have it fixed. Hopefully that solves the display problem also. If it doesn't - just ask again.

aoshilover

Sep 3 2009, 05:37 PM

Unfortunately it still does nothing what so ever.
The tiny CSS errors don't contribute to the misalignment and I fixed most of them.
And adding the doctype did nothing.
Is there a different phrasing I need to input, or a code for it to work well on Internet Explorer?

QUOTE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>NorCal Critters -Pet Care from Moo to Meow!</title>

<style type="text/css">
body
{ background-color: #c4eefc;
color:#000000;
margin:0px 0px;
padding:0px;
font-family: "MS Reference Sans Serif", Tahoma, Verdana,Arial;
background-image:url(bg.jpg);
background-repeat:repeat-y;
background-attachment: fixed;
background-position: center;
}

A:link { text-decoration: none; color:#f6e1f7; padding:1px; border-bottom:1px dotted #3A4A25; }
A:visited { text-decoration: none; color:#f6e1f7; padding:1px; border-bottom:1px dotted #3A4A25; }
A:hover { text-decoration:none; color:#ebf6fa; padding:1px; border-bottom:1px dotted #FFFFFF; }

#navi A { display:block; background-color:#ebf6fa; color:#000000; border: 1px solid #0F1A03; padding:2px; text-align:center; font-size:11px; margin-left:-35px; margin-right:5px; margin-top:2px; margin-bottom:2px; font-family:Verdana;}

#navi A:link { text-decoration: none; }
#navi A:visited { text-decoration: none; }
#navi A:hover { text-decoration:none; color:#000000; border:1px solid #0F1A03; background-color:#f6e1f7; }

#sitetitle {text-align:right; background-color:#F2F37B; font-size:18px; }

#emptyrow { height:5px; }

#content {border:0px solid #000000; padding:5px; font-size:13px;text-align:justify; }

#emptycolumn { width:15px; }

#menu {border:0px solid #000000; width:190px; padding:5px; font-size:11px;}

h1 { border: 1px solid #000000; background-color:#d0f2fe;font-size:12px;font-family:Arial; text-align:center;margin-bottom:5px;margin-top:5px; padding:0px; color:#000000; line-height:18px; }

#header {border-bottom:1px solid #000000; font-size=medium; font-family:Arial; text-align:justify; margin-bottom:5px;

margin-top:5px;font-weight:bold;color:#322002;}

</style>

</head>
<body>

<table cellspacing="0" cellpadding="0" align="center" width="50%">
<tr>
<td colspan="3" id="sitetitle"><img src="headerfinal.gif" width="800" height="291"></td>
</tr>

<tr>
<td id="menu" valign="top">
<h1>Menu</h1>

<ul id="navi">

<a href="http://www.norcalcritters.com">Home</a><br>
<a href="http://www.norcal.com">About Us</a><br>
<a href="http://www.norcal.com">Contact</a><br>
<a href="http://www.norcal.com">Services</a><br>
<a href="http://www.norcal.com">Special Offers</a><br>
<a href="http://www.norcal.com">Resources</a><br>
<a href="http://www.norcal.com">Policies</a><br>
<a href="http://www.norcal.com">Disclaimer</a><br>

</ul>
<h1>Copyright</h1>
Copyright ©2009 NorCal Critters

</td>

<td id="content" valign="top">

<h1>Welcome</h1>

Thank you for visiting Norcal Crittes, Pet care from Moo to Meow!<br>
If you would like to help us raise one million dollars for pet charities please visit
<a href="http://www.1shoppingcart.com/app/?af=1046100" target="_blank">The Million Petizen Rally</a> or purchase
<a href="http://www.1shoppingcart.com/SecureCart/SecureCart.aspx?mid=9DA03C05-13F9-40E8-9D2F-

404F2A63FBFD&pid=148d710821b057a307d9a8c285679093" target="_blank"> Knowing your Pet's Health</a>, a guide for

optimal wellness from snout-to-tail. Your support and contribution will help many animals in need.
<center>
<br>
<a href="http://www.facebook.com/pages/NorCal-Critters/109838225885#/group.php?gid=122010114299&ref=nf"

target="_blank">Join us on Facebook!</a></center>
</td>

</tr>
</table>

</body>
</html>

aoshilover

Sep 3 2009, 10:27 PM

FIGURED IT OUT!!
instead of using pixels for the width, i changed it to percent.

so instead of this

QUOTE

#menu {border:0px solid #000000; width:290px; padding:5px; font-size:11px;}

I changed it to this

QUOTE

#menu {border:0px solid #000000; width:25%; padding:5px; font-size:11px;}

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.