Support NeoGAF

Zapages · May 26, 2009

Hey guys

I am trying to redesign my site in a fashion that it is easier to update so I've decided to do the site that includes a bit more of css then ever before. I don't know what I'm doing wrong here. But the thing is I never used CSS before in terms of background images and stuff.

I am trying to load my header image through css stream load everything up. It seems alright in Dreamweaver, but it never shows up in Firefox nor in IE8... Argh...

Css code:

Code:

* { padding: 0; margin: 0; }

body {
 font-family: Lucida Console, Monaco, monospace;
 font-size: 12px;
 color: #FFF;	
}
#wrapper { 
 margin: 0 auto;
 width: 877px;
 height: auto;
}
#header {
 color: #333;
 width: 825px;
 height: 150px;
 float: left;
 padding: 0px;
 border-bottom: none;
 border-top:  1px solid #000;
 border-right: 10px solid #000;
 border-left: 10px solid #000;
 background-image:url(images/background/WholeBanner08_836x140.png);
 background-attachment: fixed;
 background-position: top;
 background-repeat:no-repeat;
 height: 206px;
 margin: 10x 0px 5px 0px;
 background:#4e4e4e;
}
#navigation {
 float: left;
 width: 850px;
 color: #333;
 padding: 10px;
 border: 1px solid #ccc;
 margin: 0px 0px 5px 0px;
 background-color:#4e4e4e;
}
#leftcolumn { 
 color: #333;
 border: 1px solid #ccc;
 background:#4e4e4e;
 margin: 0px 5px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 175px;
 float: left;
}
#content { 
 float: left;
 color: #333;
 border: 1px solid #ccc;
 background:#4e4e4e;
 margin: 0px 5px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 450px;
 display: inline;
}
#rightcolumn { 
 color: #333;
 border: 1px solid #ccc;
 background:#4e4e4e;
 margin: 0px 0px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 175px;
 float: left;
 position: relative;
}
.clear { clear: both; }

html/php code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3 Column - fw-39-3-col</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<style type="text/css">
<!--
body,td,th {
	font-family: Lucida Console, Monaco, monospace;
	color: #FFF;
	font-size: 12px;
}
body {
	background-color: #4e4e4e;
}
a {
	font-family: Lucida Console, Monaco, monospace;
	font-size: 12px;
	color: fff362;
}
a:visited {
	color: fff362;
}
a:hover {
	color: #FFF;
}
a:active {
	color: #FFF;
}
-->
</style></head>
<body bgcolor="#4e4e4e" text="#FFFFFF">
<!-- Begin Wrapper -->
<div id="wrapper">
  <!-- Begin Header -->
  <div id="header"><h2>&nbsp;</h2>
    <h2>&nbsp;</h2>
    <p>&nbsp;</p>
    <h2>&nbsp;</h2>
    <h2>&nbsp;</h2>
    <p>&nbsp;</p>
    <h2><br />
    </h2>
    <h2><form method="get" action="http://poplegacy.planets.gamespy.com/search.php" target="_top">
        <table width="827" border="0" bgcolor="#000000">
          <tr>
            <td width="54" height="32" align="left" valign="top" nowrap="nowrap" class="style1"><p>&nbsp;</p>
            <p><strong><a href="http://www.google.com/"><img src="http://www.google.com/logos/Logo_25blk.gif" border="0" alt="Google" align="middle"></img></a></strong></p></td>
            <td width="749" nowrap="nowrap" class="style1"><strong><br>
              <input type="hidden" name="domains" value="poplegacy.planets.gamespy.com">
              </input>
              <label for="sbi" style="display: none">Enter your search terms</label>
              <input type="text" name="q" size="64" maxlength="255" value="" id="sbi">
              </input>
              <label for="sbb" style="display: none">Submit search form</label>
              <input type="submit" name="sa" value="Search" id="sbb">
              </input>
            </strong></td>
          </tr>
          <tr>
            <td class="style1">&nbsp;</td>
            <td nowrap="nowrap" class="style1"><table>
              <tr>
                <td><strong>
                  <input type="radio" name="sitesearch" value="" checked id="ss0">
                  </input>
                  <label for="ss0" title="Search the Web"><font size="-1">Web</font></label>
                  </strong></td>
                <td><strong>
                  <input type="radio" name="sitesearch" value="poplegacy.planets.gamespy.com" id="ss1">
                  </input>
                  <label for="ss1" title="Search poplegacy.planets.gamespy.com"><font size="-1">Prince of Persia Legacy</font></label>
                  </strong></td>
                </tr>
              </table>
              <strong>
              <input type="hidden" name="client" value="pub-0957974631644706">
              </input>
              <input type="hidden" name="forid" value="1">
              </input>
              <input type="hidden" name="channel" value="9729260783">
              </input>
              <input type="hidden" name="ie" value="ISO-8859-1">
              </input>
              <input type="hidden" name="oe" value="ISO-8859-1">
              </input>
              <input type="hidden" name="safe" value="active">
              </input>
              <input type="hidden" name="flav" value="0000">
              </input>
              <input type="hidden" name="sig" value="twMrVeHElcpelkTP">
              </input>
              <input type="hidden" name="cof" value="GALT:#FFF38A;GL:1;DIV:#000000;VLC:FFF38A;AH:center;BGC:1D3855;LBGC:1D3855;ALC:FFF38A;LC:FFF38A;T:FFFFFF;GFNT:FFF38A;GIMP:FFF38A;FORID:11">
              </input>
              <input type="hidden" name="hl" value="en">
              </input>
            </strong></td>
          </tr>
        </table>
      </form>
      <strong><span class="style1">
      <!-- SiteSearch Google --></span></strong></h2>
  </div>
  <!-- End Header -->
  <!-- Begin Navigation -->
  <div id="navigation"> Navigation Here </div>
  <!-- End Navigation -->
  <!-- Begin Left Column -->
  <div id="leftcolumn"> Left Column </div>
  <!-- End Left Column -->
  <!-- Begin Content Column -->
  <div id="content"> This is the content </div>
  <!-- End Content Column -->
  <!-- Begin Right Column -->
  <div id="rightcolumn"> Right Column
    <div class="clear"> </div>
  </div>
  <!-- End Right Column -->
 </div>
<!-- End Wrapper -->
</body>
</html>

In Dreamweaver:

In Firefox/IE8:

Thank you guys for the help...

SnakeswithLasers · May 26, 2009

Is your image in the right directory? =P

Zapages · May 26, 2009

SnakeswithLasers said:
Is your image in the right directory? =P

yes...

D4Danger · May 26, 2009

Liu Kang Baking A Pie · May 26, 2009

Are your CSS and HTML files in the same directory? If you have your CSS in a "/css" folder, the location relative URL (images/etc/etc/) will make the browser look in "/css/images/etc/etc." However, Dreamweaver may be doing something weird and looking for it from the location of the HTML file, which is why it would appear fine there.

I always do "url(../images/)" in my CSS, which is always in a "/css" folder. That way, it looks starting from the root directory.

SnakeswithLasers · May 26, 2009

^^

Looks like they're in the same directory.

Code:

<link rel="stylesheet" type="text/css" href="styles.css" />

Zapages · May 26, 2009

SnakeswithLasers said:
^^

Looks like they're in the same directory.

Code:

<link rel="stylesheet" type="text/css" href="styles.css" />

Yep same directory...

The main header code:

Code:

#header {
 color: #333;
 width: 825px;
 height: 150px;
 float: left;
 padding: 0px;
 border-bottom: none;
 border-top:  1px solid #000;
 border-right: 10px solid #000;
 border-left: 10px solid #000;
 background-image:url(images/background/WholeBanner08_836x140.png);
 background-attachment: fixed;
 background-position: top;
 background-repeat:no-repeat;
 height: 206px;
 margin: 10x 0px 5px 0px;
 background:#4e4e4e;
}

Code in the html/php

Code:

<!-- Begin Header -->
  <div id="header"><h1></h1><h2>&nbsp;</h2>

This should work... But it doesn't. ;_;

I've searched about 20 or so and got nothing except for posting the image just like I would before, but I am not going for that at all.. Argh...

So confusing...

heavenly · May 26, 2009

Liu Kang Baking A Pie said:
Are your CSS and HTML files in the same directory? If you have your CSS in a "/css" folder, the location relative URL (images/etc/etc/) will make the browser look in "/css/images/etc/etc." However, Dreamweaver may be doing something weird and looking for it from the location of the HTML file, which is why it would appear fine there.

I always do "url(../images/)" in my CSS, which is always in a "/css" folder. That way, it looks starting from the root directory.

This should solve your problem if your images exist outside the directory your css file is in.

MrSardonic · May 26, 2009

Here is your answer

#header {
color: #333;
width: 825px;
height: 150px;
float: left;
padding: 0px;
border-bottom: none;
border-top: 1px solid #000;
border-right: 10px solid #000;
border-left: 10px solid #000;
background-image:url(images/background/WholeBanner08_836x140.png);
background-attachment: fixed;
background-position: top;
background-repeat:no-repeat;
height: 206px; <-- this overrides the value of height specified above
margin: 10x 0px 5px 0px; <-- this is invalid code, change to "10px"
background:#4e4e4e; <-- this overrides ALL previous background property declarations
}

Replace with this (uses shorthand)

Code:

#header {
 color: #333;
 width: 825px;
 height: 206px;
 float: left;
 padding: 0;
 border: 1px solid #000;
 border-width:1px 10px 0;
 margin: 10px 0 5px;
 background:#4e4e4e url(images/background/WholeBanner08_836x140.png) no-repeat 0;
}

Also, get rid of all those h2 and p with nbsp in them...it's bad practice and unnecessary. Use css to handle spacing and positioning.

D4Danger · May 26, 2009

I just noticed. You are overriding the background property further down.

background-image:url(images/background/WholeBanner08_836x140.png);
background-attachment: fixed;
background-position: top;
background-repeat:no-repeat;
height: 206px;
margin: 10x 0px 5px 0px;
background:#4e4e4e;

use "background-color" or put the "background" property above the background-image.

see if that works.

edit: balls. posted at the same time.

ThatObviousUser · May 26, 2009

Zapages said:
It seems alright in Dreamweaver

Problem #1

BTMash · May 26, 2009

You should install Firebug for firefox as well...it'll help you figure out what is overriding what rules (along with what is being retrieved from the css rules).

Zapages · May 26, 2009

MrSardonic said:
Here is your answer

Replace with this (uses shorthand)

Code:

#header { color: #333; width: 825px; height: 206px; float: left; padding: 0; border: 1px solid #000; border-width:1px 10px 0; margin: 10px 0 5px; background:#4e4e4e url(images/background/WholeBanner08_836x140.png) no-repeat 0; }

Also, get rid of all those h2 and p with nbsp in them...it's bad practice and unnecessary. Use css to handle spacing and positioning.

Thank you so much for this. That worked perfectly. Really appreciated it.

How can position the google search engine thingy? Should I make Div? in Css then how can I move through that? As the whole thing is a table and is huge amount of messy and confusing code...

hateradio · May 26, 2009

Btw, I'm not sure if you're going to put content in these areas or not, but you're using a large ammount of empty tags like <h2> </h2>. If it's space that you need, create a div and set a height, margin, or padding instead of using so many empty tags.

Also, you're using XHTML strict, yet your tags don't match up, like on line 45 of the thing you posted, you have an open <h2> tag that doesn't get closed. Moreover, you're using stuff like bgcolor, align, border, etc., inside of your code instead of the CSS. Not to mention target="_blank" ... you should either fix everything or work under a different doctype.

Use Notepad++ since it helps you keep track of tags and stuff with its highlighting features, also don't forget that http://validator.w3.org can be your best friend.

ThatObviousUser · May 27, 2009

Zapages said:
Thank you so much for this. That worked perfectly. Really appreciated it.

How can position the google search engine thingy? Should I make Div? in Css then how can I move through that? As the whole thing is a table and is huge amount of messy and confusing code...

...and this is why.

Support NeoGAF

CSS help - stupid question

Zapages

Member

SnakeswithLasers

Member

Zapages

Member

D4Danger

Unconfirmed Member

Liu Kang Baking A Pie

Member

SnakeswithLasers

Member

Zapages

Member

heavenly

Member

MrSardonic

The nerdiest nerd of all the nerds in nerdland

D4Danger

Unconfirmed Member

ThatObviousUser

á½ Î±á¼´ÏÏÎ¹ÏÏÎ¿Ï ÏÎ±á¿Ï Îµá¼¶

BTMash

Member

Zapages

Member

hateradio

The Most Dangerous Yes Man

ThatObviousUser

á½ Î±á¼´ÏÏÎ¹ÏÏÎ¿Ï ÏÎ±á¿Ï Îµá¼¶

Similar threads

Support NeoGAF

CSS help - stupid question

Member

Member

Member

Unconfirmed Member

Member

Member

Member

Member

The nerdiest nerd of all the nerds in nerdland

Unconfirmed Member

á½ Î±á¼´ÏÏÎ¹ÏÏÎ¿Ï ÏÎ±á¿Ï Îµá¼¶

Member

Member

The Most Dangerous Yes Man

á½ Î±á¼´ÏÏÎ¹ÏÏÎ¿Ï ÏÎ±á¿Ï Îµá¼¶

Similar threads

á½ Î±á¼´ÏÏÎ¹ÏÏÎ¿Ï ÏÎ±á¿Ï Îµá¼¶

á½ Î±á¼´ÏÏÎ¹ÏÏÎ¿Ï ÏÎ±á¿Ï Îµá¼¶