I am obviously new to CSS with my sloppy coding as you will see.

This started out fully functional, but I have found a way to mess all sorts of things up.

I have ran it through the validator multiple times on w3, and thought I fixed the issues, but obviously did not. Apparently even my HTML is all sorts of junked up.

problem 1 - In firefox my line-height tags don't seem to work
problem 2 - In dreamweaver my main content area now does not display where it should (595px over from left)

Any help, suggestions, or advice would be greatly appreciated. Thanks for taking your time to look at this.

target site: redFLUX - atomized for your viewing pleasure

CSS:

body{
background:rgb(153,0,0);
margin:0px;
font:10px Verdana, Helvetica, sans-serif;
color:#808080;
letter-spacing:1px;
background-color:rgb(153,0,0);
background-image:url('http://www.redflux.com/test/images/can_bg.gif');
background-attachment:scroll;
background-repeat:no-repeat;
background-position:top-left;
margin:0px;
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
scrollbar-face-color: white;
scrollbar-shadow-color: white;
scrollbar-highlight-color: rgb(153,0,0);
scrollbar-3dlight-color: white;
scrollbar-darkshadow-color: white;
scrollbar-track-color: white;
scrollbar-arrow-color: rgb(153,0,0);
}
A:link{ color:white; text-decoration:none; }
A:hover{ color:white; text-decoration:underline; }
A:active{ color:white; text-decoration:none; }
A:active:hover{ color:white; text-decoration:underline; }
A:visited{ color:white; text-decoration:none; }
A:visited:hover{ color:white; text-decoration:underline; }
#holder{
background: rgb(153,0,0);
width:350px;
margin:0px;
margin-top:0px;
margin-bottom:0px;
margin-left:595px;
margin-right:7px;
}
#column{
width:350px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
border-left:gray 1px solid;
border-right:gray 1px solid;
border-top:hidden;
border-bottom:hidden;
}
#bottom{
font-size:12px;
font-weight:bold;
color:white;
letter-spacing:-1px;
padding:3px;
text-align:right;
}
h1{
font-size:12px;
font-weight:bold;
color:white;
letter-spacing:-1px;
padding:3px;
text-align:right;
line-height:5px;
}
.content{
background: rgb(153,0,0);
text-align:right;
font:10px Verdana, Helvetica, sans-serif;
line-height:5px;
padding:3px;
}
#top{
background: url(images/top_image.jpg) rgb(153,0,0) no-repeat center;
width:350px;
height:350px;
margin-left:auto;
margin-right:auto;
}

To get the spacing between headings and paragraphs like you have in IE use either paddings or margins on the heading and paragraph tags instead of line height.

As for how things look in DreamWeaver that's really not too important since no one will be viewing the page in DreamWeaver. Just make it look good in browsers.

Line-height:
h1{
font-size:12px;
font-weight:bold;
color:white;
letter-spacing:-1px;
padding:3px;
text-align:right;
line-height:5px;
}

You've told it text should be 12 px but your line-height only 5px ?? Do the math, there's no ROOM for 12px text to be displayed. You should use either ems or % for line-height (and fonts too !). Make your line-height: 100%, .95em and it will 'work' again.

Placement of your .content section.
First of all, you're missing a closing </div>

<div id="holder">
<div id="column">
<div id="top"></div>
<div class="content">
<h1>defined</h1>
<p> this is some stupid filler text</p>
<h1>offset</h1>
<p>this is some stupid filler text</p>
<h1>constructed</h1>
<p>this is some stupid filler text</p>
<h1>compiled</h1>
<p>this is some stupid filler text</p>
<h1>captured</h1>
<p>this is some stupid filler text</p>
</div> <!-- closes content -->
<div id="bottom">
<br /><br /><br /><br /><br />
<p><a href="#holder" class="topbar">top</a>
</div><!-- closes bottom -->
</div> <!-- closes column -->
</div> <!-- closes holder -->

IE is forgiving of such sloppiness (its a sloppy browser).. Firefox is not.

As for DW's internal display, don't rely on it, especially if you are using
an older version (pre-Suite 8). Always preview in the browser.

You really shouldn't use rgb for your colors, you should be using hex values.


margin:0px;
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;

All that is unnecessary. You've already specified margin: 0;, the rest can go.

margin:0px;
margin-top:0px;
margin-bottom:0px;
margin-left:595px;
margin-right:7px;

That is also contradictory. If you want margins, then don't specify margin: 0;
Pseudo classes for your links must be in a specific order:
Link Visited Hover Active - think LoVeHAte

Originally Posted by LadynRed

Line-height:
h1{
font-size:12px;
font-weight:bold;
color:white;
letter-spacing:-1px;
padding:3px;
text-align:right;
line-height:5px;
}

You've told it text should be 12 px but your line-height only 5px ?? Do the math, there's no ROOM for 12px text to be displayed. You should use either ems or % for line-height (and fonts too !). Make your line-height: 100%, .95em and it will 'work' again.

This didn't 'work' at all, or change anything.

Originally Posted by LadynRed

Placement of your .content section.
First of all, you're missing a closing </div>

<div id="holder">
<div id="column">
<div id="top"></div>
<div class="content">
<h1>defined</h1>
<p> this is some stupid filler text</p>
<h1>offset</h1>
<p>this is some stupid filler text</p>
<h1>constructed</h1>
<p>this is some stupid filler text</p>
<h1>compiled</h1>
<p>this is some stupid filler text</p>
<h1>captured</h1>
<p>this is some stupid filler text</p>
</div> <!-- closes content -->
<div id="bottom">
<br /><br /><br /><br /><br />
<p><a href="#holder" class="topbar">top</a>
</div><!-- closes bottom -->
</div> <!-- closes column -->
</div> <!-- closes holder -->

IE is forgiving of such sloppiness (its a sloppy browser).. Firefox is not.

This as well did nothing, dreamweaver was being iffy with that tag to begin with so I am not sure as to where I've gone wrong.

Originally Posted by LadynRed

As for DW's internal display, don't rely on it, especially if you are using
an older version (pre-Suite 8). Always preview in the browser.

I bring this up because it worked all fine until yesterday? I'm not sure where I went wrong removing a line here or there?

Originally Posted by LadynRed

You really shouldn't use rgb for your colors, you should be using hex values.

w3 was telling me I shouldn't? what a mess.

Originally Posted by LadynRed

Originally Posted by LadynRed

margin:0px;
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;

All that is unnecessary. You've already specified margin: 0;, the rest can go.



That is also contradictory. If you want margins, then don't specify margin: 0;[/color][/color]
Pseudo classes for your links must be in a specific order:
Link Visited Hover Active - think LoVeHAte

thanks for your help, I guess.

This didn't 'work' at all, or change anything.

What EXACTLY are you trying to do ?? It looks fine as it is in FF and IE.

This as well did nothing, dreamweaver was being iffy with that tag to begin with so I am not sure as to where I've gone wrong.

There's no "if" at all, if you open a tag you MUST CLOSE it, especially structural markup like a <div>.

Regardless of what DW is showing you, it looks fine in the browser and that is what you should be concerned with, not what DW's internal design-view screen is displaying. DW shows all kinds of things like comments etc and anything like that will make the internal display look 'off'.

W3 was telling you NOT to use hex colors ?? That doesn't sound right at all.

Maybe if you told us exactly what it is that's not 'right' when viewed in the browsers we could figure it out.

good idea!

okay well for starters I have changed a few minor things with both of you guys advice which did help, so it is slightly different whats up now.

What I was referring to with w3 was when I tried to test for compliancy it was saying there is no #990000 - I have since gone and changed it back from rgb, at your advice...

Anyway what is causing me the most grief currently is the following:

1. in firefox the space between my lines is greater than in IE, which displays how I would prefer for it to be displayed.
2. at the bottom in IE the word "top" is located where I want it to be, at the edge of the browser window. In FF there is extra space below it.
3. on Macintosh IE the spray can image doesn't display at all!
4. on Macintosh Safari there is a random gray area, bar, space? at the top and bottom
5. the bold text on the mac looks awful (this is me venting)

That helps, thanks

Does the link you provided contain the current coding ?

1 - Going by what I see (form the link provided), the line spacing on IE 6 and FF 1.5.0.6 looks nearly identical. Do you want them closer or wider apart ? You might want to read this one: Internet Explorer: Line-height / Replaced Element Bug

2 - the problem here is more likely caused by the multiple <br>s you've got. Use margin-top to push the #bottom div down where you want it. You should not use multple <br>s for spacing anyway.

3 - Forget Mac IE, it is a DEAD browser. Most MAC people are going to be using Safari or Konqueror or some other newer browser. Don't kill yourself worrying about IE Mac. However, if you want to look for the bugs: CSS Bugs in IE5 for Mac

4 - I can't view it on a Mac, but I can point you to this resource:
Bug Reports for Safari

5 - probably not much can be done about that one

By the way, I like the artwork

thanks for all your help LadynRed.

I'm sure I'll break something else in a day or so and be back!