HTML - Help? Ie7 - Site Header Displaying Differently

This site: http://gmjones.org/

Displays well, apart from the black background!, in Opera and FireFox browsers but not in Microsoft's browser.

The code for the search box is

<li><form action="http://www.google.com/search" name="searchbox" method="get" style="padding-top: 1px;">
<input name="hl" value="en" type="hidden">
<input name="sitesearch" value="gmjones.org" type="hidden">
<input maxlength="205" size="38" name="q" value="">
<input value="SEARCH THIS SITE" name="" style="font-size: 80%; margin-left:19px;" type="submit">
</form></li>

How do I get the search box to appear within the rest of the red strip, and in red?

Thanks.

EDIT: DON'T KNOW WHAT I DID BUT IT'S OK NOW!

Hello there,

My site header buttons aren't showing up in Google Chrome.

Design fees, web design and answers, are the only buttons that show in Chrome.

The header buttons show up fine in IE, Firefox, Safari and others.

Site is dreamboxdesigndotcomdotau

Any help appreciated!

Internet Explorer version 6 is not showing the pages of my web site the same as Firefox 2, At the top there's a split between the two images on the left.

http://www.thegoanexperience.com/

Originally it was meant to be touching the top but now for some reason it's moved down the page a little bit.

http://bbmodding.com/index.html

I don't see anything obvious in the code that would explain why it's not displaying. Does IE just hate me?

Displays PERFECTLY in FF.

I just don't understand..

Edit:

Thanks for the help guys. I feel stupid. I can always count on this site to help me fix my problems .

Guys, i am in a real bind here. I recently redesigned my website & gave it a fresh look. Well apparently that new look has come with a cost! My homepage doesn't display correctly in IE6 or IE7. I am getting a lot of complaints about it & I have no clue how to fix it. I added a script to inform users that they were using an older browser that was outdated but a lot of my users cannot update their browsers because they are on work computers & what not. Can someone please help me fix this mess.

My homepage URL is: http://www.biglake411.com/

The site displays correctly using firefox & IE8. The problem is with IE6 & IE7. Here are screen shots of each:





Thanks in advance.

Hi,

We have a site uploaded at www.ejwelch.com

The file in question will be either index.html or index2.html (we may move back a temporary old index.html in place for now). the page i am referring to has a black header. The left navigation menu displays fine in mac safari, but does not display right in IE.

Any ideas or suggestions GREATLY appreciated! thanks in advance

Hi

Maybe it's just on my computer, but my site's not coming up right in Firefox the last few days.

It works fine in other browsers.

Can anyone see a fault in my coding to explain why there is no info appearing in the "Tommo's Trivia" box?

The site is at http://www.billygoatkaraoke.com.au

Thanks for taking a look.

Shaun

http://goldenworldgoods.awardspace.com/

Hello again, I did this site in Dreamweaver, looked fine in my dreamweaver editor, uploaded it and voila everything goes nuts.

List of Problems: The Links are not positioned properly, not big enough plus the drop downs to the bottom and not to the right. That was properly my fault since I just copied a suckerfish method... But can someone help with this.

If you study the News Header in the CSS, it says it has a background image, how ever it doesn't show when I uploaded it. I know the url and the pic is correct cause it worked in Dreamweaver...

The background for "welcome" is all the way up there which isn't supposed to happen, it supposed to be right on top of the Hello text but that isn't happening either.

The hello and welcome are supposed to be aligned to the left of the right header.

Thats about it, please can someone help me. I've changed the format of this like 3 times just to get it correctly done, but nothings working.

Thank you

And don't worry I got it all validated and what not

Hi,

I've been making a website but have only been testing it in Internet explorer, now I've tried opening it in Firefox and noticed alot of problems. When I open it in IE, there is about a 4-5mm gap at the top before the header appears andeverything is positioned fine because I have layed it out this way, but in Firefox the gap at the top doesnt exist and therefore everything is a few millimeters out of position (text, images etc).

Is there anyway that I can get rid of this gap at the top of the IE page so that it looks the same? I have tried margin-top with no luck.

CSS code:

Code:

/*This first piece of 'body' code defines what colour the background of the whole website is. It is set to #000000, I.E. black.*/

body
{
	background: #000000;
	color: white;
}	
	
div#site
{
	display: block;
	color: #000000;
	margin-top: -10px;

}

/*This header code sets the size and background image of the header section of the website. It sets the image to a picture I have created called
'header2', and the code also needs to link to the image as it's not in the same folder as the css/html files, so the code 'images/header2.gif'
finds the file 'header2.gif' in the sub-folder 'images'. */

#header
{
	background: url(images/header2.gif);
	width: 865px;
	height: 143px;
	
}	

/*This header .text section defines any text properties that will be used if I decide to add any text to the header area.*/

#header .text
{
	position:relative;
	top:42px;
	left:322px;
	
	word-spacing: 24px;
	font-size: large;
}

/*The navbar2 section of code defines how the navigation bar is set out. The width is set at 70% so that the bar doesnt go all the way across the
screen. It is also center-aligned to make the page look neat.*/

div#navbar2 {

    width: 70%;

    border-top: solid #000 0px;

    border-bottom: solid #000 0px;

	background-image: url(images/button.gif);
}

div#navbar2 ul {

   margin: 0px;

   padding: 0px;

   font-family: Arial, Helvetica, sans-serif;

   font-size: 12px;

   color: #FFFFFF;

   line-height: 30px;

   white-space: nowrap;

}

div#navbar2 li {

   list-style-type: none;

   display: inline;

}

/*This code sets how the text should be layed out on the navigation bar. It has margins and padding to place it in the centre of the buttons.
It also sets the text colour to white.*/

div#navbar2 li a {

   text-decoration: none;

   margin: 20px;
   
   padding: 7px 15px;

   color: #FFFFFF;

}



div#navbar2 li a:visited {

   color: #FFFFFF; /*This code is used so that when people click on the links, they stay white next time rather than changing colour.*/

}

div#navbar2 li a:hover {

   font-weight: bold;
   
   color: #FFFFFF;

   background-color: #FF00FF; /*This code causes a pink/purple box appear around the text when the cursor is hovered over it.*/

}

/*The content code sets the background image of the main section of the website, and defines where on the page it should be placed.*/

#content
{
	background: url(images/content.gif);
	width: 865px;
	height: 534px;
	margin-left: 0px;
	margin-right: 0px;
	float: left; 
    margin: 0px 187px;
	
}

#content_nobars
{
	background: url(images/content_nobars.gif);
	width: 865px;
	height: 534px;
	margin-left: 0px;
	margin-right: 0px;
	float: left; 
    margin: 0px 187px;
	
}

/*The content .title, .title2 and .title3 sections of code define where each title should be placed, what text size and colour it should be,
and also how wide/tall the text box is allowed to be.*/

#content .title
{
	color: #CC66FF;
	font-size:16px;
	position:absolute;
    text-align:left;
	left:515px;
	top:215px;
	width:500px;
    height:18px;
	overflow:hidden; /*This 'overflow' command stops the text box from spreading all of the page if too much information is placed into it.*/
					 /*If any extra text is in an area and there is no more room, the page will just hide it from sight, therefore keeping tidiness.*/
}

#content .text
{
	color:black;
	font-size:14px;
	position:absolute;
	text-align:left;
	left:500px;
	top: 255px;
	width:500px;
	height:80px;
	overflow:hidden;
}

#content .title2
{
	color: #CC66FF;
	font-size:16px;
	position:absolute;
    text-align:left;
	left:515px;
	top:375px;
	width:500px;
    height:18px;
	overflow:hidden;
}

#content .text2
{
	color:black;
	font-size:14px;
	position:absolute;
	text-align:left;
	left:500px;
	top: 415px;
	width:500px;
	height:80px;
	overflow:hidden;
}

#content .title3
{
	color: #CC66FF;
	font-size:16px;
	position:absolute;
    text-align:left;
	left:515px;
	top:541px;
	width:500px;
    height:18px;
	overflow:hidden;
}

#content .text3
{
	color:black;
	font-size:14px;
	position:absolute;
	text-align:left;
	left:500px;
	top: 580px;
	width:500px;
	height:80px;
	overflow:hidden;
}

#content .read_more
{
	color:black;
	font-size:14px;
	position:relative;
	text-align:center;
	left:355px;
	top: 168px;
	width:100px;
	height:16px;
	overflow:hidden;

}

#content .read_more2
{
	color:black;
	font-size:14px;
	position:relative;
	text-align:center;
	left:355px;
	top: 318px;
	width:100px;
	height:16px;
	overflow:hidden;

}

#content .read_more3
{
	color:black;
	font-size:14px;
	position:relative;
	text-align:center;
	left:355px;
	top: 468px;
	width:100px;
	height:16px;
	overflow:hidden;

}

#content_nobars .about_us_text
{
	color:black;
	font-size:14px;
	position:absolute;
	text-align:left;
	left:480px;
	top: 425px;
	width:550px;
	height:250px;	
	overflow:auto;
}

#content_nobars .other_title
{
	color: #000000;
	font-size:24px;
	text-decoration:underline;
	position:absolute;
    text-align:center;
	left:510px;
	top:200px;
	width:500px;
    height:30px;
	overflow:hidden; 	
}

#content_nobars .other_text
{
	color:black;
	font-size:14px;
	position:absolute;
	text-align:left;
	left:480px;
	top: 250px;
	width:550px;
	height:432px;	
	overflow:auto;
}

#content_nobars .about_us_picture
{
	background: url(images/1.jpg);
	width: 290px;
	height: 175px;
	position:relative;
	left:130px;
	top:50px;
}

/*The footer code defines the location of the footer image, and the size of it.*/

#footer
{
	background: url(images/footer.gif);
	width: 870px;
	height: 105px;
}

/*These 2 commands keep URL links coloured black, before and after they have been visited.*/

a:link { color:black }
a:visited { color:black }

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<!--This head code defines the title that is displayed at the top of the screen on the Browser's bar. It also links the html document to the css file
which will be used to create the layout and look of the website.-->

<head>

<title>Pampered Pooches Grooming</title>

<link rel="stylesheet" type="text/css" href="pampered-pooches-grooming.css">

</head>

<!--This code uses different div tags in conjuction with the css file, which will each be layed out according to individual needs.-->

<body>

<div id="site">

	<div id="header">
	
	</div>
	
	<div id="navbar2">
		
	<ul>

<!--This code creates a list of the navigational links to other pages of the website-->	
	
	<li><a href="index.html">Home</a></li>

	<li><a href="aboutus.html ">About Us</a></li>

	<li><a href="services.html ">Services</a></li>
	
	<li><a href="theparlour.html ">The Parlour</a></li>
	
	<li><a href="dogofthemonth.html ">Dog of the Month</a></li>
	
	<li><a href="contactus.html ">Contact Us</a></li>

	</ul>
	
	</div>
	
	<div id="content">


<!--This footer code is placed at the bottom of all of the other code so that it appears at the bottom of the screen in the webpage.-->
	
	<div id="footer">
	</div>
	

	

</div>

</body>

</html>

Thanks for any help.

I just notices something strange about my site: I typically use firefox, so I never noticed it before.

http://arcadefreedom.com

in firefox, everything displays fine, but in ie... look at the stats boxes on the right (purple), there is a space between the title and the body of each stats box that doesnt appear in firefox.

I've tried everything I can think of (and I'll be the first to admit i'm not all that great in html) to get rid of that space in IE... valign, cellspacing, cellpadding...

Any ideas?

Thanks!

Hi. I just had my dad download the Opera web browser and I was checking on a website I did with all black tables... the tables are unseen when viewed on Mozilla or IE but when I look at the page on Opera the tables show up and are grey bordered. Is this just an error with Opera's code reading or is there something I can be doing to prevent it?

the site is
www.spmstudio.com

Thanks!

Hi,
I am creating a page with a navbar. The navbar have few buttons which are clustered towards left of the bar. This shows correctly in the dreamweaver; but the buttons are completely spread out in the browser view.
Please help me to correct this problem


Quote:
<table align=center border=0 cellpadding=0 cellspacing=0>
<tr>
<td colspan=3 align=center >
<img src="Graphics/myhotdrinks.jpg">
</td>
</tr>

<tr bgcolor="#000000">
<td>
<table class="navbar" width="724" >
<tr>
<td width="52" style="max-width:5px">
<a href="index.asp">
<font face="Arial, Helvetica, sans-serif" >Home&nbsp;</font>
</a>

</td>



<td width="74" style="max-width:5px" >
<a href="products.asp">
<font face="Arial, Helvetica, sans-serif" >&nbsp;Products</font>
</a>
</td>


<td width="67" style="max-width:5px" >
<a href="contactus.asp">
<font face="Arial, Helvetica, sans-serif" >&nbsp;About us</font>
</a>
</td>

<td width="69" style="max-width:5px" >
<a href="register.asp">
<font face="Arial, Helvetica, sans-serif" >&nbsp;Register</font>
</a>
</td>



<td width="438"></td>


</tr>




</table>

</td>


</tr>
Regards,
John

I am new at al of this and I just stood up a site and thought everything was going well, it looked great, I validated the code, life was good. until I looked at it in IE. It's WAY messed up! Its got horizontal and vertical scroll bars IN the page, and the tabs I made don't look quite like they are supposed to. I have no Idea how to fix it, I am hoping someone on here can look at my page in IE and look at my code and help me out here. my site is http://pughs.no-ip.org to look at it, and I will post my code he

Code:

<!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">
 <head>
  <title>
   Pugh's World - Freedom of Information
  </title>
  <link rel="stylesheet" href="default.css" type="text/css" />
  <link rel="shortcut icon" href="i.jpg" type="image/x-icon" />
  <script type="text/javascript" src="klappe.js"></script>
 </head>
 <body>

  <table width="100%" cellspacing="0" cellpadding="0" style='background: transparent'>
   <tr>
    <td class="clear" width='49%' >
    </td>
    <td class="clear" align="center">
     <a href="/"><img alt="Pugh's World" src="ilogo.jpg" border="0"/>
     </a>
    </td>
    <td class="clear" width="49%" align="center">

    </td>
   </tr>
  </table>
  <div align="center">
  </div>

<!--TABS-->

  <table class="mainouter" width="94%" border="1" cellspacing="0" cellpadding="10" align="center">
   <tr>

    <td class="outer" align="center">
     <ul id="tabnav">
      <li><a href="index.html" class="active">Home</a></li>
      <li><a href="blog.html" >Blog</a></li>
      <li><a href="about.html" >About</a></li>
     </ul>
    
<!--MAIN TABLE HEADER-->

    
     <table cellpadding="4" cellspacing="1" border="0" style="width:737px" align="center">
      <tr>
       <td>
        <table style="width:100%" cellspacing="0" cellpadding="0" border="0">
         <tr>
          <td class="bottom" align="left">
           <span class="smallfont">
            Welcome to Pugh's!
            <br/>
            <font color="blue">Last Blog Post:</font> <font color="darkred">(never)
            </font>
            <br />
           </span>
          </td>           
          <td class="bottom" align="right">
          <br />
          </td>
         </tr>

<!--CONTENT TABLE-->       

         <tr>
          <td class="bottom"><br /><b>Site is Back Up!</b> - 8-21-2008 18:55:34
          </td>
         </tr>
         <tr>
          <td class="bottom">
           <table class="main" border="0" cellspacing="0" cellpadding="0" style="width:100%">
            <tr>
             <td class="text">
	      <p>Well, so far there is absolutely no content, but at least we are back up!<br />
              </p>
              <h1>Check back for updates!
              </h1>
             </td>
            </tr>
           </table>
           <br />
          </td>
         </tr>
        </table>
       </td>
      </tr>
     </table>
     <br /><br /><br />
    </td>
   </tr>
  </table>
  <p class="footer">
&copy;2008 John Pugh
  </p>
 </body>
</html>

Please take a look at this page: http://lifeengineering.org/

Try out the menu links and see what I'm talking about. The "short" pages shift horizontally. In other words, if the div block with the content doesn't reach the bottom of the browser window, then it's rendered in a different horizontal position. So, changing the pages through the menu makes the pages appear to "jump".

NOTE: You'll need a reasonably big resolution to see what I'm talking about (e.g. 1152 x 864+).

Any suggestions on how to correct this? Is there a way to pad blank spaces at the end of my content in the div block to ensure that it always reaches the end of the browser window? Or something similar?

------
Issue #2: My background isn't ideal. I like the rainbow, but I'd like to change it.

If I wanted to make the rainbow arc appear stationary as I scroll the page (i.e. to have the upper left arc of the rainbow always appear on the upper left corn of the screen), how would I do it?

Any other suggestions, artistically, with respect to the page background?

Thank you kindly!

Hello,

I am running a Dotnetnuke website and I am running a News Feed module. In the template, I have the code below. I made the font size smaller to decrease the space between each feed. This works in IE 8 (smaller space between news items), but not IE 7. Any advice?

<table><tr><td><a href='[Link]'><strong><span style="font-family:century gothic;font-size:14; color:#000000;">[Title]</span></strong>
<span style="color:#000066"> Read More...</span><div style="font-size:4px;"><br/></div></a></td></tr></table>

Thank you in advance!

Matt Sabatello
msabatello@brookhaven.org
631-960-8650