1 reply [Last post]
snowgrind
snowgrind's picture
Offline
newbie
Last seen: 9 years 41 weeks ago
Timezone: GMT-8
Joined: 2009-08-06
Posts: 7
Points: 3

hi everyone,

i am working on my site and i am having a weird issue. my css is being linked to my html and it works fine, but here is the rub, when i style the "body" tag to have a background, it does not show up at all. i have also tried to add the "background" style to my other html tags in the CSS file, no background image will appear when i try to preview it in chrome, opera, safari and firefox. there's no IE because i am on a mac. keep in mind that the rest of the style sheet is working fine with the web page, but for some reason the "background-image" attribute is not working. the css was validated usimg the w3c css validator and it came back with no errors.

now here's where it gets weird, i have another page i have made using the same "background" attribute for the "body" html tag on another page and it displays the background image.

here are both the CSS and the HTML:

css:

/* Universal selector */
/* Remove all default margins and padding */
* {margin:0; padding:0;}

.clear {clear: both;}

html {border:0;}

body {background:url(BASE/images/stripe.jpg); }

h1 {color: #000; font-family: Georgia; font-size: 20pt; }

a { outline:none } /* Gets rid of Firefox's dashed borders */

a img { border:none } /* Gets rid of IE's blue borders */

#wrapper {width: 50em; margin: 0 auto; text-align: left; border: solid 1px;}

#branding { text-align: center; border: dashed 1px #333;}

#main-content {width: 35em; margin-right: 12em; margin-left: 3em; padding-bottom: 1em; background: #333;}

#main-content p {padding:0 10px 0 10px; color: #fff;}

ul {margin: 0 0 0 2em; color:#000; list-style-type: none; }

li { }

#rightcol {width:12em; float:right; background-color: #3311ff;}

#rightcol p {padding: 0 10px;}

#footer {clear: both;}

here is the HTML:

Paleta Design

i am the branding

i am the left col

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt pellentesque erat sed aliquet. Aliquam dignissim consequat purus ac ultrices. Fusce vitae commodo libero. Etiam leo quam, cursus vel gravida quis, adipiscing et nunc. Nulla varius ante at nunc blandit vulputate et eu sapien. Morbi turpis purus, fringilla sed facilisis sed, ullamcorper a metus. Praesent condimentum sem ut nulla posuere nec rhoncus lacus elementum. Aenean eget justo nibh, tincidunt ullamcorper dolor. Integer sit amet massa nibh. Nam a nisi nec eros mollis congue.

  • Item 01
  • item 02
  • Item 03
  • item 04

snowgrind
snowgrind's picture
Offline
newbie
Last seen: 9 years 41 weeks ago
Timezone: GMT-8
Joined: 2009-08-06
Posts: 7
Points: 3

background" attribute not working as no background image HTML

sorry about that, here is the HTML code for my site

<!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" xml:lang="en" >
 
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Paleta Design</title>
<link href="BASE/CSS/palestyle.css" rel="stylesheet" type="text/css" media="all"/>
</head>
 
<body>
 
<div id="wrapper">
 
<div id="branding">
 
<h1>i am the branding</h1>
</div>
<!-- End branding -->
 
<div id="rightcol" class="column">
<p>i am the left col</p>
</div>
 
<div id="main-content" class="main">
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt pellentesque erat sed aliquet. Aliquam dignissim consequat purus ac ultrices. Fusce vitae commodo libero. Etiam leo quam, cursus vel gravida quis, adipiscing et nunc. Nulla varius ante at nunc blandit vulputate et eu sapien. Morbi turpis purus, fringilla sed facilisis sed, ullamcorper a metus. Praesent condimentum sem ut nulla posuere nec rhoncus lacus elementum. Aenean eget justo nibh, tincidunt ullamcorper dolor. Integer sit amet massa nibh. Nam a nisi nec eros mollis congue.</p>
 
 
<ul>
<li>Item 01</li>
<li>item 02</li>
<li>Item 03</li>
<li>item 04</li>
</ul>
</div>
 
<div id="footer">
<p>i am the footer</p>
</div>
<!-- End footer -->
 
</div>
<!-- End container -->
</body>
</html>