Css Issues. Please Help.

Syrehn

10-27-2009, 08:01 PM

I'm having some troubles with my css and a page I'm working on. In dreamweaver in code/design mode it shows the changes happening but when I upload to preview it doesn't change:

The border around the side_image isn't showing up and neither is the color for the body_text. here is the code and css. I have tried to avoid posting and have been trying to figure it out myself but i'm stuck. could anyone shed some light on this?

Page 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="stylesheets/walkerindustries.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="topback">
<div id="navbar">
<ul>
<li class="home"><a href="index.html">home</a></li>
<li class="about"><a href="about.html">about</a></li>
<li class="services"><a href="services.html">services</a></li>
<li class="showcase"><a href="showcase.html">showcase</a></li>
<li class="quote"><a href="quote.html">request a quote</a></li>
<li class="contact"><a href="contact.html">contact</a></li>
</ul>
</div>
<img src="images/walker_logo.png" width="286" height="85" align="absmiddle" class="logo" /><span class="logotext">providing a wide range of professional rensovation services</span>
</div>
<div id="body_content"><img src="images/side_image5.jpg" width="201" height="450" class="side_image"/>
<div id="body_text">Content for id "body_text" Goes Here</div>
</div>

</div>
</body>
</html>

here is the css code that i'm working with atm: (updated)

@charset "utf-8";
#wrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#wrapper #topback {
background-repeat: no-repeat;
background-color: #191205;
}
#wrapper #topback .logotext {
font-size: 12px;
color: #FC3;
text-align: center;
font-weight: bold;
display: block;
line-height: 90px;
font-variant: small-caps;
font-family: Arial, Helvetica, sans-serif;
padding-top: 3px;
padding-left: 3px;
}
body {
font-size: 100%;
margin: 0px;
padding: 0px;
background-color: #000;
}
.designer {
display: block;
float: left;
margin-top: 5px;
font-family: Verdana, Geneva, sans-serif;
font-size: xx-small;
color: #FFF;
}

#wrapper #topback img.logo {
float: left;
padding-top: 5px;
padding-left: 5px;
}

#wrapper #topback #navbar {
background-color: #09F;
background-repeat: repeat-y;
height: 46px;
display: block;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #B19A54;
border-right-color: #B19A54;
border-bottom-color: #B19A54;
border-left-color: #B19A54;
overflow: hidden;
background-position: right top;
color: 42340a;
}
#wrapper #topback #navbar ul li {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #B19A54;
background-repeat: repeat-x;
display: block;
margin: 0px;
padding: 0px;
float: left;
list-style-type: none;
text-align: center;
font-variant: small-caps;
line-height: 46px;
font-family: "Myriad Pro";
font-size: 24px;
color: #42340a;
background-image: url(../images/navbar.jpg);
height: 46px;
font-weight: normal;
}
#wrapper #topback #navbar ul li.home {
width: 102px;
height: 46px;
}
#wrapper #topback #navbar ul .home a {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #B19A54;
display: block;
float: left;
list-style-type: none;
text-align: center;
font-variant: small-caps;
line-height: 47px;
font-family: "Myriad Pro";
font-size: 24px;
color: #42340a;
height: 46px;
font-weight: normal;
width: 102px;
text-decoration: none;
}

#wrapper #topback #navbar ul .home a:hover {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #B19A54;
display: block;
float: left;
list-style-type: none;
text-align: center;
font-variant: small-caps;
line-height: 47px;
font-family: "Myriad Pro";
font-size: 24px;
color: #42340a;
height: 46px;
font-weight: normal;
width: 102px;
text-decoration: none;
background-image: url(../images/navbar_overlay.jpg);
background-repeat: repeat-x;
}

#wrapper #topback #navbar ul li.about {
width: 101px;
}

#wrapper #topback #navbar ul .about a {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #B19A54;
display: block;
float: left;
list-style-type: none;
text-align: center;
font-variant: small-caps;
line-height: 47px;
font-family: "Myriad Pro";
font-size: 24px;
color: #42340a;
height: 46px;
font-weight: normal;
width: 101px;
text-decoration: none;
}

#wrapper #topback #navbar ul .about a:hover {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #B19A54;
display: block;
float: left;
list-style-type: none;
text-align: center;
font-variant: small-caps;
line-height: 47px;
font-family: "Myriad Pro";
font-size: 24px;
color: #42340a;
height: 46px;
font-weight: normal;
width: 101px;
text-decoration: none;
background-image: url(../images/navbar_overlay.jpg);
background-repeat: repeat-x;
}

#wrapper #topback #navbar ul li.quote {
width: 210px;
}

#wrapper #topback #navbar ul .quote a {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #B19A54;
display: block;
float: left;
list-style-type: none;
text-align: center;
font-variant: small-caps;
line-height: 47px;
font-family: "Myriad Pro";
font-size: 24px;
color: #42340a;
height: 46px;
font-weight: normal;
width: 210px;
text-decoration: none;
}

#wrapper #topback #navbar ul .quote a:hover {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #B19A54;
display: block;
float: left;
list-style-type: none;
text-align: center;
font-variant: small-caps;
line-height: 47px;
font-family: "Myriad Pro";
font-size: 24px;
color: #42340a;
height: 46px;
font-weight: normal;
width: 210px;
text-decoration: none;
background-image: url(../images/navbar_overlay.jpg);
background-repeat: repeat-x;
}

#wrapper #topback #navbar ul li.showcase {
width: 135px;
}

#wrapper #topback #navbar ul .showcase a {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #B19A54;
display: block;
float: left;
list-style-type: none;
text-align: center;
font-variant: small-caps;
line-height: 47px;
font-family: "Myriad Pro";
font-size: 24px;
color: #42340a;
height: 46px;
font-weight: normal;
width: 135px;
text-decoration: none;
}

#wrapper #topback #navbar ul .showcase a:hover {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #B19A54;
display: block;
float: left;
list-style-type: none;
text-align: center;
font-variant: small-caps;
line-height: 47px;
font-family: "Myriad Pro";
font-size: 24px;
color: #42340a;
height: 46px;
font-weight: normal;
width: 135px;
text-decoration: none;
background-image: url(../images/navbar_overlay.jpg);
background-repeat: repeat-x;
}

#wrapper #topback #navbar ul li.contact {
width: 125px;
}

#wrapper #topback #navbar ul .contact a {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #B19A54;
display: block;
float: left;
list-style-type: none;
text-align: center;
font-variant: small-caps;
line-height: 47px;
font-family: "Myriad Pro";
font-size: 24px;
color: #42340a;
height: 46px;
font-weight: normal;
width: 125px;
text-decoration: none;
}

#wrapper #topback #navbar ul .contact a:hover {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #B19A54;
display: block;
float: left;
list-style-type: none;
text-align: center;
font-variant: small-caps;
line-height: 47px;
font-family: "Myriad Pro";
font-size: 24px;
color: #42340a;
height: 46px;
font-weight: normal;
width: 125px;
text-decoration: none;
background-image: url(../images/navbar_overlay.jpg);
background-repeat: repeat-x;
}

#wrapper #topback #navbar ul li.services {
width: 120px;
}

#wrapper #topback #navbar ul .services a {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #B19A54;
display: block;
float: left;
list-style-type: none;
text-align: center;
font-variant: small-caps;
line-height: 47px;
font-family: "Myriad Pro";
font-size: 24px;
color: #42340a;
height: 46px;
font-weight: normal;
width: 120px;
text-decoration: none;
}

#wrapper #topback #navbar ul .services a:hover {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #B19A54;
display: block;
float: left;
list-style-type: none;
text-align: center;
font-variant: small-caps;
line-height: 47px;
font-family: "Myriad Pro";
font-size: 24px;
color: #42340a;
height: 46px;
font-weight: normal;
width: 120px;
text-decoration: none;
background-image: url(../images/navbar_overlay.jpg);
background-repeat: repeat-x;
}

#wrapper #topback #slideshow {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #C1B281;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #C1B281;
border-right-color: #C1B281;
border-left-color: #C1B281;
}

#wrapper #bottomback {
background-color: #CCC;
background-repeat: repeat;
width: 800px;
height: 500px;
}
#wrapper #bottomback #content {
display: block;
width: 390px;
float: left;
padding-right: 5px;
padding-left: 5px;
overflow: hidden;
color: #FFF;
}
#wrapper #bottomback #content .welcome_text {
font-size: 20px;
color: #C1B281;
}

#wrapper #bottomback #content img.welcome {
padding-top: 20px;
}
#wrapper #bottomback #content hr.content {
background-color: #956F45;
height: 1px;
color: #8E663C;
}

hr {
margin: 0px;
padding: 0px;
}
#wrapper #body_content {
}

#wrapper #bottomback #content2 {
float: right;
display: block;
width: 320px;
color: #FFF;
padding-left: 20px;
padding-top: 10px;
background-color: #9B784D;
margin-top: 40px;
margin-left: 40px;
padding-right: 20px;
padding-bottom: 10px;
margin-bottom: 40px;
}
#wrapper #bottomback #footer {
float: right;
background-color: #99F;
display: block;
width: 790px;
margin-right: 5px;
margin-left: 5px;
margin-top: 5px;
text-align: center;
background-image: url(../images/nav_back.jpg);
background-repeat: repeat-x;
color: #42340a;
font-size: 12px;
margin-bottom: 5px;
}
ol, ul, li {
list-style-type: none;
vertical-align: top;
margin: 0px;
padding: 0px;
}
.topheader {
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
color: #FC0;
text-align: left;
}
#wrapper #body_content {
border: thin none #CF0;
background-color: #CCC;
}
#wrapper #body_content #footer {
float: right;
background-color: #99F;
display: block;
width: 790px;
margin-right: 5px;
margin-left: 5px;
margin-top: 5px;
text-align: center;
background-image: url(../images/nav_back.jpg);
background-repeat: repeat-x;
color: #42340a;
font-size: 12px;
margin-bottom: 5px;
}

#wrapper #body_content #body_text {
color: #CCC;
background-color: #6CC;
float: left;
display: block;
padding-left: 30px;
width: 567px;
}
#wrapper #body_content img.side_image {
border: 1px solid #0CF;
float: left;
}

SB65

10-27-2009, 08:09 PM

You're missing a closing bracket in your css here:

ol, ul, li {
list-style-type: none;
vertical-align: top;
margin: 0px;
padding: 0px;
.topheader {
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
color: #FC0;
text-align: left;
}

Syrehn

10-27-2009, 10:02 PM

aah! perfect. thanks for the fresh eyes. i didn't see that the first time around. that solved the problem ^_^

Syrehn

10-27-2009, 10:15 PM

i just curious. i have a div titled body_content that i'm trying to set a background color to. yet the css does not show this color unless i set the height of the div. i didn't exactly want to have to do this. is there a reason for this?

i just updated the code in my previous post to reflect what I'm currently working with

SB65

10-27-2009, 10:47 PM

It's because (some of) the content in #body_content is floated, so the div doesn't extend down beyond the floated comment.

A possible solution is to add overflow:auto to #body_content - this will clear the float at the end of the div and the background colour should then be OK.

Syrehn

10-28-2009, 05:39 AM

cool i will try that. my only other question is. I'm planning to use hr to make a single line but every time i have tried to use this and set the height to 1px and set a color say black it looks like it has a drop shadow inside it.. is there a way to get rid of this?

SB65

10-28-2009, 08:53 AM

I'd advise against using hr - it is awkward to style and in particular IE adds additional top and bottom margins on top of any applied margins. It's much easier to use the border css property instead.

Syrehn

10-28-2009, 02:59 PM

thanks for the advice about the overflow. it worked like a charm.

normally i wouldn't use the hr. but i need to be able to set the length of the line i'm trying to create not just the height (or width via the border option) and as far as i'm aware this can't be done with css border?

SB65

10-28-2009, 03:37 PM

Well, don't say I didn't warn you...:D

From memory you need something like:

hr{
width: 50%;
height: 1px;
background-color: #A7A669;
color: #A7A669;
border:none;
}

border:none gets rid of the shadow, I think, and you need to set both background-color and color for browser consistency, IE uses colour, and FF uses background-color.

Then, IE7 (at least) adds a top and bottom margin of 8px, on top of any margin that's applied, and there's no way to change this. If this is critical then you can address the issue with conditional css to target IE.

Or, you could use an image instead...

Excavator

10-28-2009, 03:48 PM

Syrehn

10-28-2009, 05:09 PM

Rowsdower!

10-28-2009, 05:24 PM

I'll just chip in to agree with SB65 about avoiding <hr /> elements. I have wrestled with them before and they really are a bane to cross-browser consistency. I can't think of any occassion where a border would fail you for this. Even if you need to declare a different width than that of the container you still have options.

But anyway, like SB65 said, if you can find no other way to do it you could use an image (even a 1px by 1px image and then set the height and width as you need to stretch it as needed - if you use a transparent .gif image you can even change the color of this bar whenever you please with background-color styling) and it will be much more controlled and versatile. The only cost for this convenience is a small ding to the old "semantic markup" ego which is small potatoes in this case. It's a rather minor offense.

Syrehn

10-28-2009, 07:06 PM

that's a good thought. i will probably look into doing that then. the transparent image suggestion.

my other question would be on this example i have posted, it's for an about page. how would i set in the css to have the link be different for the navbar_about (same goes if they were to load onto any different page)

should i just make a different class for that one link per page and apply it?

i hope that question made sense.

Rowsdower!

10-28-2009, 07:13 PM

That's one method, yes. A popular and more complex, but easier to "set-and-forget" method is to stagger classes. For example, on the home page, set the body to have a class of "home" and on the about page set the body to have a class of "about".

With that done, set one generic style for the menus as usual and then add a class to each menu item that tells which page it links to. So, the link to the home page would also have a class of "home" and the link to the about page would have a class of "about." Then use something like this to show the current page:

.home #nav .home, .about #nav .about {
...whatever style you want to use to show the user that this is the current page...
}