homepage Welcome to WebmasterWorld Guest from 54.198.8.124
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Newbie needs some help please!
trouble with non-repeating images
Kochizzle




msg:3832801
 4:24 am on Jan 23, 2009 (gmt 0)

Hi there. I recently bought a book on CSS and have been teaching myself how to build websites with the technology. I've hit a snag that I'm hoping someone can help me out with....

On this page...
<snip>

The bottom paragraph is being cut off because the image isn't repeating. I used the "repeat-y" code, but to no avail. Anyone know what I'm doing wrong here?

Thanks so much!

[edited by: swa66 at 5:29 am (utc) on Jan. 23, 2009]
[edit reason] no links please, see forum charter. [/edit]

 

Xapti




msg:3832855
 6:48 am on Jan 23, 2009 (gmt 0)

Post your code please.
First thing is to double check your validity/syntax of your code.

make sure you got " background-repeat: repeat-y; " missing semicolon or something could cause the problem.

Also keep an eye on this: [webmasterworld.com...]
Note: you shouldn't be using IE6 for learning though. It should only be tested for fixes once a main page is already set up.

[edited by: Xapti at 6:50 am (utc) on Jan. 23, 2009]

Kochizzle




msg:3832970
 11:11 am on Jan 23, 2009 (gmt 0)

Yes, I am using "background-repeat: repeat-y". But it doesnt repeat, dangit. I'm using IE 7 to check validity.

Would you like me to post the CSS code or the HTML code for said page...

Since my original post, I've made a few changes to get my text to stay within the image dimensions, but if I need to add more text, I may be in trouble...

Kochizzle




msg:3832976
 11:13 am on Jan 23, 2009 (gmt 0)

Here is my style sheet...

/* CSS Document */

body {
margin: 0;
padding: 0;
width: 834px;
position: static;
background-color: #000000;
color: #FFFFFF;
font: Arial, Helvetica, sans-serif;
}

a {
font-weight: bold;
font-style: italic;
}

h1 {
text-align: right;
padding: 0 20px 0 0;
}

h2 {
text-align: right;
padding: 0 20px 0 0;
text-decoration: underline;
}

p {
text-align: left;
padding: 0 20px 0 0;
font-size: 1.1em;
}

#wrapper {
background-color: transparent;
color: #000000;
width: 834px;
margin: 0 40px 30px 0px;
padding: 0 0 0 121px;
}

#broke {
float: left;
width: 121px;
margin: 30px 0 0 0;
background-image: url(images/broke.gif);
background-repeat: no-repeat;
}

#header {
margin: 0;
height: 270px;
width: 834px;
background-image: url(images/header.jpg);
background-repeat: no-repeat;
}

#header-bottom {
width: 834px;
font-size: 1.2em;
height: 1%;
margin: 0;
background-color: transparent;
}

#header-bottom ul {
margin: 0;
padding: 0 75px 0 0;
text-align: right;
}

#header-bottom li {
display: inline;
margin: 0;
padding: 0;
font-color: #FFFFFF;
}

#header-bottom a {
text-decoration: none;
}

#header-bottom a:link {
color: #000000;
background-color: transparent;
font-style: italic;
}

#header-bottom a:visited {
color: #333333;
background-color: transparent;
}

#header-bottom a:hover {
color: #666666;
background-color: transparent;
text-decoration: underline;
}

#header-bottom a:active {
color: #FFFFFF;
background-color: transparent;
}

#motto {
font-weight: bold;
font-style: italic;
font-size: 1.5em;
margin: 0;
padding: 0 0 0 22px;
width: 300px;
float: left;
}

#main {
margin: 0;
width: 834px;
background-image: url(images/body.jpg);
background-repeat: repeat-y;
position: relative;
top: 0;
left: 0;
width: 100%;
padding: 10px;
}

#navigation {
padding: 0 672px 0 0;
}

#navigation ul {
list-style-type: none;
text-align: center;
}

#navigation li {
font-decoration: none;
font-size: 1.6em;
height: 2em;
}

#navigation a {
text-decoration: none;
}

#navigation a:link {
color: #000000;
background-color: transparent;
font-style: italic;
}

#navigation a:visited {
color: #333333;
background-color: transparent;
}

#navigation a:hover {
color: #666666;
background-color: transparent;
text-decoration: underline;
}

#navigation a:active {
color: #FFFFFF;
background-color: transparent;
}

#content {
position: absolute;
float: right;
top: -1px;
right: 0;
color: #000000;
margin: 0;
padding: 30px 0 0 0;
text-align: left;
left: 205px;
width: 626px;
}

#content a:link {
color: #000000;
background-color: transparent;
font-style: italic;
}

#content a:visited {
color: #333333;
background-color: transparent;
}

#content a:hover {
color: #666666;
background-color: transparent;
text-decoration: underline;
}

#content a:active {
color: #FFFFFF;
background-color: transparent;

4css




msg:3833094
 2:12 pm on Jan 23, 2009 (gmt 0)

Hi Kochizzle

First, I would like to welcome you to WebmasterWorld!

Next, could you post your (x)html as well? It would be a bit easier to see your code for this as well. You could just post the basics of the code without your content You can always refer to the Forum Charter [webmasterworld.com] for directions on how to do this.

Also, it is good to test in Firefox instead of IE7, this way, it gives a better idea as to what is working and what isn't. It could be that something is working in firefox, yet not in IE7. This is what Xapti was refering to when he stated that you shouldn't test in IE.

If you don't have the web developer tool bar installed in firefox, I would suggest installing it because you are able to do your validation for your pages right from firefox. The developers toolbar also offers many other helpful tools for you.

4css




msg:3833101
 2:17 pm on Jan 23, 2009 (gmt 0)

#content a:active {
color: #FFFFFF;
background-color: transparent;

The above section of code isn't closed. I'm not sure if this is just a pasting error for here, or if it is like this in your styles. You might wish to check to see if it is closed properly.

This is why validating your pages is so essential. At least IMO it is. By validating your css, the validator would pick this up for you and let you know that you have a possible typo in here.

Below is the section of code closed.


#content a:active
{
color: #FFFFFF;
background-color: transparent;
}

Kochizzle




msg:3833865
 6:35 pm on Jan 24, 2009 (gmt 0)

Yes, that was just a pasting error. Here is the xhtml code...
And thank you SOOO much for the help. I will download firefox with the developer toolbar and check that out. I have heard good things about that...
Thanks again. :)

<!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> Chapter Seven Industries </title>

<meta http-equiv="Content-Type" content="text/html" charset=iso-8859-1">

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

</head>

<body>
<div id="broke">
<div id="wrapper">

<div id="header">

</div><!--header-->
<div id="main">

<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="sponsor.html">Sponsorship</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="links.html">Affiliates</a></li>
<li><a href="store.html">Store</a></li>
</ul>
</div><!--navigation-->

<div id="content">
<p>Chapter 7 refers to the type of personal bankruptcy that usually results in a
complete liquidation of one's assets.... The focus of our company is not to emphasize
financial hardship, rather our interpretation of the term "Chapter 7" refers to a
lifestyle of "going for broke", or "not looking back", or "rolling to the wheels fall
off", if you will.</p>
<p>Our company is attempting to inspire people to strive for individualized success:
Whereas other companies emphasize being the greatest of everything or everyone, we are
interested in people being the greatest that they can be, regardless of how you stack
up to everyone else. Wherever life takes you, be it MMA fighter or IRS tax auditor; X
games champion or courtesy clerk, Chapter 7, LLC encourages you to achieve your personal
best on a daily basis.</p>
<p>In our current social and economic climate if you do not make a conscious effort to
continuously evolve and achieve, someone willing to make that effort will surpass you. Be
true to yourself and get yours! </p>
</div>
<!--content-->

</div><!--main-->

</div><!--wrapper-->

</div><!--broke-->

</body>
</html>

Kochizzle




msg:3835187
 11:31 pm on Jan 26, 2009 (gmt 0)

I downloaded firefox and have been using it regularly. Awesome tool. Thanks again for the advice. I'm still having trouble with the background. Any other suggestions?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved