Problems with first attempt at CSS site.

Any help would be much appreciated!

[DIYmatt]

Hello all, this is my first attempt at a CSS style website. I have always used tables, BUT I always hear how CSS is better. For the most part it seems to work great except two issues, and I hope one of you great and powerful CSS masters can help point me in the right direction!
(Yes that is my sad attempt at flattery! I know it's shameless)

Issue 1) I have the content parts of site and the frames around it set to a height of 100% hoping that it would stretch to fit content as it grew. However when content goes past the box borders it simply continues on under the borders and website below it like the text is on the bottom layer and could continue down right off the website itself coming out at the bottom of the site just over the background image.
(Not sure how much code to paste down here for fear of posting to much code so here is just the div of the content area. If more is needed lemme know)

~Code~
<div id="fehlmanbros-49_">
<img id="fehlmanbros_49" src="images/fehlmanbros_49.png" width="35" height="100%" alt="" />
</div>
<div id="main-top-left-border-courner_">
<img id="main_top_left_border_courner" src="images/main-top-left-border-courne.png" width="14" height="10" alt="" />
</div>
<div id="main-top-border_">
<img id="main_top_border" src="images/main-top-border.png" width="689" height="10" alt="" />
</div>
<div id="main-top-right-border-courner_">
<img id="main_top_right_border_courner" src="images/main-top-right-border-courn.png" width="14" height="10" alt="" />
</div>
<div id="fehlmanbros-53_">
<img id="fehlmanbros_53" src="images/fehlmanbros_53.png" width="29" height="100%" alt="" />
</div>
<div id="fehlmanbros-54_">
<img id="fehlmanbros_54" src="images/fehlmanbros_54.png" width="178" height="11" alt="" />
</div>
<div id="main-left-border_">
<img id="main_left_border" src="images/main-left-border.png" width="10" height="100%" alt="" />
</div>
<div id="maincontentarea_" align="center">
<p style="color:#FFFFFF" align="left"><span class="style6"><span class="style16"></span></span></ul></div>
(Blah blah blah all my content is in here that goes below the bottom of the content box and continues on...)
</span></span></p>
</div>
<div id="main-right-border_">
<img id="main_right_border" src="images/main-right-border.png" width="10" height="100%" alt="" />
</div>

Issue #2)
When i display my finished site in Firefox it looks great! Love it! Done! Then when i opened it in Explorer Several of the images that i sliced up from photoshop (where i designed the site) were at first i thought missing but as it turns out they are shifted down slightly so they are under the image below them. It's not all of the images just about 10 or so slices that are shifted. What can cause this. I went over the code again and again and nothing i could find stands out glaring me in the face as an error... but I've read that Explorer and CSS don't often get along. Is there a fix for these ill fated slices?
Not sure what code to show you guys without showing you ALL of the code, but if you want to see some let me know what you would like to see and i can post it up!

Thank you guys for your help in advance. I hate askin for help but i'm really stuck with these issues!

[rocknbil]

Welcome aboard DIYMatt, there are so many possibilities it's hard to say - from a brief glance at your (X?)HTML and your description, my crystal ball says you are probably using absolute positioning(?)

The masters here will have to have a peek at your CSS to help you so you may want to post the relevant portions of that. It would also be helpful to know if you are using a valid document type [webmasterworld.com] and which one.

I am curious though why all your id's end in an underscore?

[DIYmatt]

HEY! Thanks for the response Rocknbil! Okay lemme see if i can get you what you guys need to figure out where i went wrong.

First things first
As a matter of fact I am using position:absolute; for all of my catigories, The problem is when i tried other ones it would set everything askew. I tried this container around everything else...

#fullheightcontainer {
position: relative;
width: 100%;
display: table;
height: 100%;
background: #FFCCCC;
}

#container {
position:absolute;
margin: 0 auto;
width:979px;
text-align:left;
}

But that didn't seem to affect much of anything. Which position should work?

As for my explorer askew images here is an example of one of them
CSS Tag:

#fehlmanbros-28_ {
position:absolute;
left:198px;
top:273px;
width:781px;
height:9px;
}

And HTML code:

<div id="fehlmanbros-28_">
<img id="fehlmanbros_28" src="images/fehlmanbros_28.png" width="781" height="9" alt="" /></div>

There are several like that BUT not All of them Most of them are in the right spot in both Fire Fox and Explorer only about 5 or 10 sliced images.

As for why all my ID's end with and underscore... Well I'm embarassed to admit I used Photoshop CS3's help for the coding... *looks down* I know it was wrong! Handcode handcode handcode... but i was new to CSS so i figured PS CS3 could help. I tried removing all the underscores after you made mention of it, but it threw off my design some how, several images went completely askew for some reason even though i made sure to remove EVERY underscore... Don't hate me! heheh

Thank you again for your help, and all future help! If you need more code lemme know.

OH and the Doctype i'm using is...

<!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">

[edited by: DIYmatt at 8:40 pm (utc) on Oct. 9, 2007]

[londrum]

all those absolutely positioned divs are going to mess up your document. the thing to remember is this... if you position something absolutely, then it no longer cares what else is in the document. it doesn't take any notice of it.

if you've got something that is a fixed size and always takes up the same space (like a navigation bar at the top of the page, for example) then position:absolute is perfect. but if the content comes halfway down the page and varies in size from page to page, and you want the rest of the document to flow around it, then you will have to position it relatively instead

[Xapti]

Position:absolute is an absolute last resort, since it takes stuff out of flow, things get messy when a user's font size is larger than you think.
Typically when people switch from tables, they end up using position:absolute, I guess it's because it's so similar.
Instead of that method, you should use more proper and common methods, such as using floating divs to create the layout you want. You can search this site, as well as the internet in general, for resources on constructing site layouts based off floats (such as 3-column, 2-column, multiple boxes, or whatever you can think of). There are some limitations, but they aren't too bad when you have all the right knowledge. Of course if you want to bring javascript into the equation, then you can do anything you desire pretty much.
One last closing piece of advice: IE6 (even IE7, but less so) and lower isn't very kind to people who like using web standards and semantic HTML! Be warned!

Oh and one more thing: You are using XHTML doctype, but it may be pointless for you. There aren't too many reasons to be using XHTML over HTML, since there's not much of a difference. This site discusses if XHTML (or something else) is the right doctype for you (your site), you could probably find it by searching "XHTML HTML", or "doctype". (I don't remember the link)

[edited by: Xapti at 4:23 am (utc) on Oct. 10, 2007]

[DIYmatt]

Okay so I tried switching out a few absolute tags for relative ones. And set the height at 100% on the parts that will stretch. here's what it looks like:

#fehlmanbros-49_ {
position:relative;
left:198px;
top:506px;
width:35px;
height:100%;
}

#main-top-left-border-courner_ {
position:absolute;
left:233px;
top:506px;
width:14px;
height:10px;
}

#main-top-border_ {
position:absolute;
left:247px;
top:506px;
width:689px;
height:10px;
}

#main-top-right-border-courner_ {
position:absolute;
left:936px;
top:506px;
width:14px;
height:10px;
}

#fehlmanbros-53_ {
position:relative;
left:950px;
top:506px;
width:29px;
height:100%;
}

#fehlmanbros-54_ {
position:absolute;
left:13px;
top:510px;
width:178px;
height:11px;
}

#main-left-border_ {
position:relative;
left:233px;
top:516px;
width:10px;
height:100%;
}

#maincontentarea_ {
position:relative;
background-image:url(images/maincontentarea.png);
background-repeat: no-repeat;
height:100%;
width:697px;
left:243px;
top:516px;
width:697px;
height:100%;
}

#main-right-border_ {
position:relative;
left:940px;
top:516px;
width:10px;
height:100%;
}

Now those parts that are relative, are like a stair case down my page, not in the place they should be but a relative distance from each other downward on the now stretched out page. I left sliced images that don't move at all on the page at an Absolute positioning... Hmmm i wonder if having my container set at absolute is affecting the relativity of the relative positioned ones...

#container {
position:absolute;
margin: 0 auto;
width:979px;
text-align:left;
}

Any thoughts?

Also Xapti, what did you mean when you said "One last closing piece of advice: IE6 (even IE7, but less so) and lower isn't very kind to people who like using web standards and semantic HTML! Be warned!"

I mean in simple terms? Still new to the rules of this website game. Am i using something i shouldn't do you have a good place that explains it a bit further? I love to learn so if you point me in the right direction i would much appreciate it!

Thanks again guys for all your help so far!

[londrum]

i haven't tested out your actual code, but if you are seeing a staircase then you probably just need to float the boxes.

a <div> is really just a box. and they always try to start on a new line. the css code for that is:
div { display: block; }

but if you want it to appear on the same line as something else, then there are two ways of doing it. you can either stop it being a box
div { display: inline; }

or you can float them all
div { float: left; }

try sticking some floats in your divs, and see if that helps.

[DIYmatt]

I tried making everything Relative and that just flew the whole thing apart, now everything is in a repeating staircase pattern. What could be used to force the images into their correct spot where i want them to be when their set as position:relative? Their position coordinates are right but when relative positioning it put in they ignore that... Hmmm

[DIYmatt]

Ack we apperently posted at the same time! haha Alright i'll give those tags a try. thanks!

[londrum]

i think i get what you are trying to do now... you just want some content in a box with a border around it, and you've got some images that you want to stick in the four corners. is that right?
you can do that with something like this...

<!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">
<style>
.box { background: url(box-background.gif) repeat; }
.box-top, .box-top div, .box-bottom, .box-bottom div { width: 100%; height: 7px; font-size: 1px; }
.box-top { background: url(top-right-corner.gif) no-repeat top right; }
.box-top div { background: url(top-left-corner.gif) no-repeat top left; }
.box-bottom { background: url(bottom-right-corner.gif) no-repeat bottom right; }
.box-bottom div { background: url(bottom-left-corner.gif) no-repeat bottom left; }
.content { padding: 0 1em; }
</style>
</head>
<body>
<div class="box">
<div class="box-top"><div></div></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis 
ornare ultricies libero. Donec fringilla, eros at dapibus fermentum,
tellus tellus auctor erat, vitae porta magna libero sed libero.</p>
</div>
<div class="box-bottom"><div></div></div>
</div>
</body>
</html>

[edited by: londrum at 7:57 pm (utc) on Oct. 10, 2007]

[DIYmatt]

Sent,

Thank you!

[londrum]

we posted at the same time again... i just amended my post above with some actual working code. sorry!

[DIYmatt]

Alright I'll give that a try. Also take a look at the link in Explorer and see the offset random images? In firefox they look fine! in Explorer they are off set downward just ever so slightly. Why does it seem so random? I've looked at them a dozen times and nothing is different about them in the code... So what makes Explorer hate them so?

[londrum]

i've stickied you back the working code.
it's fixes the images in IE, anyway.

i had to rewrite your urls to make them point at the images, so you'll have to change them back.

all you had to do was close up the white-space.
so instead of doing

<div>   <img src="blah blah

you just do

<div><img src="blah blah

[DIYmatt]

Londrum might i say you are awesome! My own personal velvet Elvis! That was it with the Issue of The explorer funky offsets... Something so simple as a space between tags... ugh...

That's GREAT that's a major load off my mind.

The Box Tags did funny things when i tried to add them It made the code ignore the style sheet all together. I removed it and reuploaded the new 0 space code to the test link there.

Basically I'm trying to make it so the content box is stretchy downwards if i should ad more content then there is room for and have the website grow with it. Where if now i add to much content in the box it just continues down under the images directly below the content box and pop out the bottom over the repeating background image

[londrum]

you're going to have to dump the absolutely positioned borders. and use the stretchy box code that i included above (or some other code like it, there are loads of ways you can do it)

that's a lot of work.
the only other thing you could do would be to keep the boxes at a fixed size, and make the content inside it a fixed size as well. and then just include scrollbars if the content overflows the box.

div { overflow: scroll; }

if it was me, i would do a rewrite. you've got about 100 images on that page at the moment but you could reuse the borders from one box on the others. you only really need five images for that. and then with your background and other images you might total about thirty.

if you leave it as it is it's going to rack up your bandwidth bills and your page is going to load slow - losing you all your hard-earned visitors.

[DIYmatt]

Alright so I'm trying to drastically cut down on my site designs slices by reusing ones from other parts of my site is there a way In a CSS site to Flip an image or reverse it so that a right handed corner is now a left handed corner? Some sort of code that reverses it from right to left or up and down?

[Monkey]

div { overflow: scroll; }

Have found this does not work for all browsers. The latest browsers are great but if any of your audience are on older browsers (think IE version 6), the scroll bar does not appear, however the code still hides the primary window scroll bar. Thus a bad experience for IE6 users.....and there still appears to be a lot out there.

[londrum]

is there a way In a CSS site to Flip an image or reverse it so that a right handed corner is now a left handed corner?

there's no way of doing that with CSS.
what most people do is merge all the background-images into one image. just paste them all together into a single image.
and then position the image in different places, to show whichever portion of it that you need. (so you can show the portion which contains the lefthand-corner on one part of your page, and the portion which contains the righthand-corner on a completely different part of your page, for example)

something like this:

.class1 { background: url(image.gif) no-repeat 10px -50px; }
.class2 { background: url(image.gif) no-repeat 10px -100px; }
.class3 { background: url(image.gif) no-repeat 10px -150px; }

...and that way all the different parts of the pic will appear simultanesously, instead of them loading in one after the other.

if you do a google search for "background image sprite" then you'll get some good examples (and they explain it a lot better than i do!)

[DIYmatt]

Thanks guys! Alright I'm looking into these sprite things. I get concept but go cross eyed when it comes to the actual application. So what happens is you basically take all your sliced images and put them in a single large image column Then use coding to tell the website to pull up specific pixel coordinates of the particular image you want to display in a <div> to create the look of the site. Right? this way there is only one large image instead of several images thus reducing the web sites need to call for pictures.

[londrum]

yeah thats it. just got to stick them together and work out the numbers.

[DIYmatt]

Question about the image sprites image. I was putting all the images on a blank layout and i thought to my self "Self? why can't i just use the original sliced image of the whole website itself as the image sprite source sheet. Everything is where it goes so just get the X,Y coords from the slice options and plug it in that way?" "I dunno" I says. "I better ask those masters of CSS what they think!" So what do you think? just use the original photoshop image of the slice for the image sprites source picture? Or is that just crazy talk?

[londrum]

you could do that, and it would work perfectly okay, but the aim of the game is to reduce everything down to the bare minimum that you need - and that means getting the file sizes down as small as possible too.
then your pages will be blindingly fast.

but you can get carried away with this kind of stuff, trying to shave off single bytes here and there. as long as the page loads quicker, that's the important thing.