CSS help - stupid question

Status
Not open for further replies.
Z

Zapages

Member
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:
2vmsyo7.jpg


In Firefox/IE8:
29or0xu.jpg


Thank you guys for the help... :)
 
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 said:
^^

Looks like they're in the same directory.

Code: 
<link rel="stylesheet" type="text/css" href="styles.css" />
Click to expand...

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...
 
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.
Click to expand...

This should solve your problem if your images exist outside the directory your css file is in.
 
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
}
Click to expand...

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.
 
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;
Click to expand...

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

see if that works.

edit: balls. posted at the same time.
 
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).
 
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.
Click to expand...

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...
 
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>&nbsp;</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.
 
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...
Click to expand...

...and this is why.
 
Status
Not open for further replies.

Similar threads

kids talk stupid
2
59
2K
touchfuzzy replied
Rampage Jacksons stupid ass son nearly kills a wrestler
7 8 9 10 11
518
3K
BennyBlanco replied
Send Help | Official Trailer | Sam Raimi
9
176
Toots replied
A little Computer Help Please
2
53
1K
Magister replied
High-End Headphone help
15
941
Xeela_sunston replied
Top Bottom