HTML - Mysterious Breaks/spaces After Header. Annoying!

I am fine-tuning an existing site and have run into one of those incredibly frustrating mysterious spacing difference problems. I've searched, tweaked, tested, validated and all but sacrificed a few voodoo chickens.

The top right page title on these two pages should have the same spacing, that of the first (which all other pages on the site outside the /portfolio subfolder do). For no reason that I can find, pages in the /portfolio folder have extra space at the top.

I have tried using cut and paste from working pages, moving the pages between folders, everything, and the problem persists. Both pages validate as XHTML. I'm testing primarily under FF6 but the problem also shows up in IE and Chrome.

This page is fine:
http://www.nitropress.com/anp_portfolio.php

This page has extra spacing over the page title:
http://www.nitropress.com/portfolio/anp_pf_bcfile.php

What am I overlooking here? AdThanksVance.

Link

Mysterious yellow dots are appearing through my slideshow images in IE - works fine in all other browsers. Only appearing in darkest blacks - standard jpg saved images.

An ideas gratefully received

I can't get my buttons to work in IE (workd in FF btw) I'm pretty sure the problem lies in the following code

Code:

<style type="text/css">
  input.groovybutton
  {
    font-size:21px;
    font-family:Comic Sans,Sans-serif;
    color:#FFFFFF;
    width:138px;
    height:44px;
    background-image:url(background/buttonnorm);
    border-style:none
  }
</style>

<script language="javascript">
  function goLite(FRM,BTN)
  {
    window.document.forms[FRM].elements[BTN].style.color = "#AAFFFF";
    window.document.forms[FRM].elements[BTN].style.backgroundImage = "url(background/buttonon)"
  }
  function goDim(FRM,BTN)
  {
    window.document.forms[FRM].elements[BTN].style.color = "#FFFFFF";
    window.document.forms[FRM].elements[BTN].style.backgroundImage = "url(background/buttonnorm)"
  }
</script>

<form name="groovyform1" METHOD="LINK" ACTION="BDT_main">
  <div style="position:absolute;top:220px;left:22px">
    <input type="submit" name="button1" class="groovybutton" value="Main Page" title="The Main Page" onMouseOver="goLite(this.form.name,this.name)" onMouseOut="goDim(this.form.name,this.name)">
  </div>
</form>

Any help you can spare would be greatly appreciated
I think it may have to do with changing <style type="text/css"> to something else like div, cause thats what i did to my text and it fixed it. I just dont know what to change it to

For some reason there is a large blank area between the form and the caption on this page. It's most likely a simple edit, but i can't figure it out

Any help is greatly appreciated.

http://www.blackwidowinc.com/affiliate-program.html

I have this very annoying problem with my website which i can't seem to solve.

I've built this site with Dreamweaver and somewhere along the way this happaned:
http://www.kobiversano.com

as you can see, there is this black line on top of the gray background on the right side of the page and on the bottom.

How the hell do i remove it?

Thanks in advance.

Super annoying problem with Firefox portable?
I've been using it for almost a year with no problems. All of a sudden my bookmarks take me to completely random RSS bookmarks.

In other words, I'll click on a bookmark for Yahoo answers and it takes me to a BBC new article that I don't have bookmarked but is on my RSS subscription.

I've tried deleting the bookmark.html file and replacing it with an older backup bookmark file but it doesn't work.

If I bookmark something today, tomorrow it will take me to a different site altogether.

Any help would be greatly appreciated.

_________

I'm having trouble with my form code. Every time I put it up, a message is put in saying "This form is inoperational!"

Here is the code I'm using:

Code:

<form action="MAILTO:felinas_jellicleworld@hotmail.com" method="post" enctype="text/plain">

Name:<br>
<input type="text" name="name" size="20">
<p>
Email:<br>
<input type="text" name="mail" size="20">
<BR>
Display:<input type="radio" name="display" value="one" checked="checked">
&nbsp;&nbsp;&nbsp;
Do not display:<input type="radio" name="not" value="two">
<br>
<p>
Country:<br>
<input type="text" name="country" size="20">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">

</form>

No idea how to even title this thread (sorry).

When viewing particular pages, the entire content of my site shifts over to the right about 4/5 pixels. I've noticed that this happens whenever the page has a table within a table.

Code:

body {
        _text-align:center;
        _font-size:125%;
	text-align:center;
	background-color:#000;
	color:#999;
	font-family:'Lucida Grande',Tahoma,'Lucida Sans','Trebuchet MS',sans-serif;
	font-size:62.5%;
	line-height:1.4em;
}

/* Main elements */

#container {
	#overflow:hidden;
	margin:0 auto;
	overflow:hidden;
	padding:0 8px;
	position:relative;
	text-align:left;
	width:980px;

Is the problem there or elsewhere?

thanks

Maybe it's not padding or whatever, but i'm having an issue with my assignment (given the very sketch instructions we get) and I simply can't figure this one out it's making me crazy -.-

Look closely at the box with the paragraph, and the logo. Between them is a space of the original background color. I can't seem to figure out why that space is there and how to close the gap. Any ideas?



here's the CSS code for the div class/id's around the main content(paragraph and photo)

Code:

#content { padding-left: 20px;
           padding-right: 20px;
           margin-left: 150px;
           background-color: #F1E8B0;
           color: #000000;
           padding: 10px 20px;
           overflow: auto;
}

#container {
   margin-left: auto;    
   margin-right: auto;
   width: 80%;
   background-color: #E8D882;
   text-color: #000000;
   border: 2px double #000000;
   min-width: 700px;
}

And here is my xhtml code.

HTML Code:

<body>
<div id="container">
 <h1 id="logo"><img src="javalogo.gif" alt="Java Logo" height="117" width="619" /></h1>
<div id="nav"><a href="index.html">Home</a> <a href="menu.html">Menu</a> <a href="music.html">Music</a>
 <a href="jobs.html">Jobs</a></div><br/>
<div id="content">
  <img src="windingroad.jpg" height="156" width="333" class="floatright" alt="Winding Groad Photo"   />
 <p>Following the winding road to JavaJam...</p>

 <ul>
  <li>Specialty Coffee and Tea</li>
  <li>Bagels, Muffins, and Organic Snacks</li>
  <li>Music and Poetry Readings</li>
  <li>Open Mic Night</li>
 </ul>
 <p>12312 Main Street<br/>Mountain Home, CA 93923<br/>1-888-555-5555</p></div>
 <div id="footer">Copyright &copy; 2011 JavaJam Coffee House<br/><a href="mailto:whatever">SomeSite</a></div>
</div>
</body>

Thanks a lot in advance.

Hello, I am very new to this.
Here is the problem, i have a paragraph, then 3 blockquotes, and then another paragraph. But instead of showing the 2nd paragraph under the blockquotes, it is putting it on the side of the blockquotes. This is undesirable.
Here is my head and style:.
Code:

<head>
<style type="text/css">
body
{background-image:url('Seamless_Parchment_by_FantasyStock.jpg');
margin-top:50px;
margin-bottom:50px;
margin-right:100px;
margin-left:100px;}
h1
{color:Black;
text-align:center;
font-family:"Georgia";
font-size:44px;}
p
{font-family:"Trebuchet MS";
font-size:28px;}
a:link
{text-decoration:underline;
color:black;}
a:visited
{text-decoration:underline;
color:black;}
a:hover
{text-decoration:underline overline; 
color:red;}
blockquote
{font-family:"Trebuchet MS";
font-size:24px;
float:left;
width:800px;}
</style>
</head>

And here is the html in question:

Code:

<p>
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</p>

<blockquote>texttexttexttexttexttexttexttexttexttexttexttext</blockquote>

<blockquote>texttexttexttexttexttexttexttexttexttext</blockquote>

<blockquote>texttexttexttexttexttexttexttexttexttexttexttexttextt</blockquote>

<p>
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</p>

I could just increase the width (tried it - it works) of the blockquotes until the paragraph is forced down, but this seems sloppy to me, and i think it cause problems when other people view it. Any help would be great, Thanks guys!

Hi,

There may be an easy solution but ive spent over 3 hours trying to correct this now.

Basically i have 3 pages, each of which i 'saved as' to ensure the basic layout was identical.

When the pages are aligned left they are all perfectly aligned, however as soon as i align them centrally, the heating and plumbing pages, for some reason indent themseleves slightly right compared to the bathrooms page.

This is so frustrating. Can anyone see why and offer a solution to get them all aligned perfectly central?

Thanks!!

P.S. I think i may have wittled this down to a problem with the main content area, it seems when i apply the css h2 tag or remove the image it suddenly jumps. I have got them all aligned perfectly centrally before with no css in the main content area.

any ideas?

Here is my site at current: www.omgpcgames.com

When viewed in high resolutions, the page streches - I don't want this to happen. Instead, I want the layout to remain in the center, and the two sides open up to reveal a blank background.

My reasoning?
See this

On the left is what it looks like in a high resolution, on the right what I want it to look like.


Any ideas on what I can do?

It's a joomla site - so that may complicate things slightly.

Hey guys
In internet explorer, in a computer that has Skype installed on it, Skype makes all telephone numbers in webpages into Skype buttons with a Skype menu!
Here is an example.
http://thebrowserhighlighter.com/images/tool_skype.gif
There are two problems with this: As a result, Skype takes control of the graphics, it changes the font, the size, and adds a Skype button near it! The second problem is that Skype also "thinks" IDs and or catalog numbers are PHONE numbers, and does the same thing to them!
Is there a way to disable Skype from doing this (not in MY computer, in the HTML itself)?

Hello everyone. Great website! I have been trying to fix a problem with my menu in mozilla. Everything seems perfect in internet explorer so does anyone mind having a look and maybe tell me how to fix it. It is the first website i have built apart from a 1 pager once. If i give you the web address, look at it in IE then go through the menu, then do the same with mozilla if you don't mind. In mozilla when you mouse over the menu it covers half the menu and there is a border thingymijig. You'll see when you have a look. The website is for our local football team, and it is nowhere near finished but i would really like this problem sorted. I have been messing about with some pages - the bit at the top to see what makes any difference, i'm meaning the - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> bit. Which 1 is the best to use?
Any help would be greatly appreciated. Thank you!

http://www.byronboysclub.com