HTML - Help! My Paragraph Is Behaving Strangely.

Hi.

My problem is this...

When I zoom in on my site to see it more clearly in close up, it is behaving very strangely. The content in the RH column starts overlapping the menu, which is in the centre column, and positions part of itself behind the menu buttons. The link for the trial version of the site is:

http://www.advancewebsolutions.co.uk/commonthread/

I'm not sure whether this is a HTML or CSS problem, but I'd be grateful if anyone could spot what is causing this problem.

Many thanks in antiicpation...

I'm a relative novice to HTML and CSS trying to earn some extra cash doing freelance web designing. With the project I'm working on now, my client has pointed out that in IE 6 and 7, the Submit and Reset buttons of the Contact page are not working. The thing is, they actually are working, it's just that the rollover area for some reason has been reduced to just the bottom edge of the button. Here's the url I test off so you can see what I mean: http://www.animationpolitik.com/newDMsite/contact.html

The buttons work just fine in Firefox and IE8. However if you go into either IE6 or 7 you'll notice that the interior yellow highlight of the Submit and Reset buttons only lights if you carefully roll over the bottom edges of the buttons. They'll work if you hit them at those exact locations, but if you mouse over the center of the buttons and click, nothing happens, which apparently is confusing a lot of my client's customers. It's strange because these are just the default buttons that are created when using the <form> tag; there's no styling on them whatsoever. The table I have them nested in reads like this:

<form method="post" action="contact_retrieval.php" target="_top">

...

<table class="comments" border="0">
<tr>
<td height="18" colspan="2">Additional comments/questions:<br />
<textarea rows="7" cols="55" wrap="physical" name="comments">
</textarea>
</td>
</tr>

<tr>
<td width="87" height="18"><input type="submit" value="Submit" name="submit"></td>
<td width="393"><input type="reset" value="Reset" name="reset"></td>
</tr>
</table>
</form>

I've been searching the issue for the past several hours and have tried everything from moving the buttons outside the table to relocating them outside the <form></form> tags, but nothing woks. Any idea what could be causing this madness? Any help with this situation would be greatly appreciated!

Hello,

I am building a website for a client :

http://timhawarah.com/testing.php

In Firefox (my favorite browser) there is about a 15 px space in the rooftop of the house which is wrong.

In IE the website looks like it should.

What can I do to correct this problem.

Any help would be most appreciated!

Thanks,
TaylorJumbo

MY CSS looks like this:


Quote:
body {


background-color: #202020;

font-family: Arial, Verdana, sans-serif;
font-size:12px;
color:#202020;
text-align: left;


}

#topnavigation li
{
display: inline;
list-style-type: none;
padding-right: 13px;

}


#top2 li
{
display: inline;
list-style-type: none;
padding-right: 13px;

}


a:link, a:visited {
text-decoration:none;
font-weight: none;
font-family: Arial, Verdana;
padding: 0px;
marging: 0px;
font-size: 10px;
background-color: transparent;
color: #202020;
border-bottom: 1px dashed #3e9446;


}

a:hover {
text-decoration:none;
font-weight: none;
font-family: Arial, Verdana;
padding: 0px;
marging: 0px;
font-size: 10px;
background-color: transparent;
color: #fff;
border-bottom: 1px dashed #3e9446;


}


a.imagelink:link, a.imagelink:visited, a.imagelink:active {
text-decoration:none;
font-weight: bold;
font-size: 12px;
background-color: none;
color: #202020;
border: 0px;


}

a.imagelink:hover {
text-decoration:none;
background-color: none;
color: #fff;
border: 0px;;

}

#outercase {
width: 790px;
background-color: #fff;
margin: 0px auto;
padding: 0px;
border: 0px;
text-align: left;


}

#top1 {
width: 790px;
height: 57px;
margin: 0px;
padding: 0px;
text-align: left;
background-color: #fff;
background: url("/images/wip1.jpg") no-repeat;
border: 0px;


}


#top2 {
width: 790px;
height: 122px;
margin: 0px;
padding: 0px;
text-align: right;
background-color: #fff;
background: url("/images/wip2.jpg") no-repeat;
border: 0px;


}




#topnavigation {
width: 780px;
margin: 0px;
padding-right: 10px;
padding-top: 5px;
text-align: right;
background-color: #fff;
border: 0px;


}



#middle {
width: 750px;
height: 300px;
margin: 0px;
padding: 20px;
text-align: left;
background-color: #fff;
border: 0px;


}

#banners {
width: 770px;
margin: 0px;
padding: 10px;
text-align: left;
background-color: #fff;
border: 0px;


}

#bottom {
width: 780px;
height: 10px;
font-size: 9px;
margin: 0px;
padding: 5px;
text-align: left;
background-color: #3e9446;
border: 0px;


}
and my xhtml looks like this

Quote:
<?include("header.php");?>

<div id="outercase">

<div id="topnavigation">

<?include("navitop.php");?>

</div>


<div id="top1">

</div><div id="top2">

<?include("teasertop.php");?>

</div>

<div id="middle">

</div>

<div id="banners">

<?include("banners.php");?>

</div>

<div id="bottom">

<?include("footer.php");?>

I am trying to create the webpage looks like the attached jpg Required Appearance (the image containing the blue rectangle) but it is instead displaying as the attached jpg Actual appearance.
I have coloured the relevant code in red.
Please tell me why this is happening it seems to be something to do with the <div> tabs. How can I get the two divs display next to each other? Thanks for any help


<!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" xml:lang="en" lang="en">
<head>
<title></title>

</head>
<!-- #ab0101 = red -->
<body bgcolor="#ab0101" >
<div id="header" >

<div style ="width: 1000px; height: 140px; margin: auto; background: #ffffff;">

</div>

</div>
<!-- division that will contain the two divisions-->
<div style ="width: 1000px; margin: auto; height:800px; ">
<!-- First division ffffff is white-->
<div style ="width: 200px; height:800px; background: #ffffff;" >
</div>
<!-- Second division 000066 is blue-->
<div style ="width: 800px; height:800px; background: #000066;">
</div>

</div>


</body>
</html>

I have a phpbb3 board with some custom code, and it's not rendering properly on IE6/IE7. The page is at http://forum.protestwarrior.com/temp.html

To see this page rendered in IE6 or IE7 if that's not your default browser, go to http://www.ipinfo.info/netrenderer/ select IE6 or IE 7 from the drop down, enter the above url in the render field, and hit render to see what it looks like.

for IE7, you'll notice that the first private message on top is restricted to the right side of the screen. For IE6, the inbox is off altogether.

To see what the page is supposed to look like, view it in FF.

Any suggestions?