Very simple CSS layout killing me :( (div border related)

[Akkari]

So I'm taking my baby steps through this CSS world and the first thing that keeps hitting me and really delaying anything I do, forcing me to start all over is CSS browser compatibility. I tried quite a smile CSS design here:

 

http://isimplifytech.com/css-help/

 

Feel free to take a look at the source and stylesheet. Uses multiple background images to build the layout which seemed only supported by FireFox, Chrome and Safari. IE and Opera will not show anything at all. Instead a white page.

 

Solution suggested by a friend was to use bordered divs for the orange lines (please use ff, chrome or safari to be able to view the thing) and another one for the header image, refraining from any use of bg images. Construction the divs in the stylesheet went ok but then they won't display on the page. For example, to constrcut the border, Adam, a member here suggested:

 

#oline {
border: 1px solid red;
border-width: 0 1px;	
}	

 

This wouldn't display the exact orange line you see in the existing layout, just a test. Now to display it, I used:

<div id="oline"></div>

 

and tried

<div id="oline"><!------></div>

 

But no browser renders it.

 

Well, whatever way this is doable, all I want to do is make the page look like you see it now, but compatible with all browsers and minimal resource usage (not using an image for the orange border and using the suggested bordered-div perhaps)

 

Thanks!

 

[Hybride]

body { background-image: url(images/header.png), url(images/line.png), url(images/line.png);
background-repeat: no-repeat, repeat-y, repeat-y;
background-position: top center, 187px, 833px 250px;

Ok, if this is just a border, you have two options, depending on which way this is going.

 

The first is the background way, in which you'd create a background image (which includes both lines) of your border and in this case, repeat-y. (The following is the shorthand version.)

body { background: url(images/line.png) repeat-y top center} 

 

Or, if this is a container, you can create a div box.

<div style="border:1px solid orange"> </div>

I hard-coded the div's style, but you would move the code into your external CSS file.

 

And try doing:

<div id="oline"> </div>

("&nbsp" is non-breaking space, or, just a space.) If that doesn't work, try adding some text into the div to see if something renders.

[Akkari]

Or, if this is a container, you can create a div box.

 

So basically I cannot use the div border for example to make those two lines without using images, right? (i.e: obtain the view you see now at the URL I posted in the first post)

 

The first is the background way, in which you'd create a background image (which includes both lines) of your border and in this case, repeat-y. (The following is the shorthand version.)

 

Bold part, "including both lines". Got confused at that one. How can I do that with the space between them? Meaning, there are two lines and in between a header image. Are you suggesting that I put them all together, perhaps?

 

Sorry if I'm being stupid, please bare with me. The problem is, I'm very novice at CSS

 

Thanks Hybride, and thanks in advance for anybody that will take the time to throw any input.

[Hybride]

You can render them without an image, it just depends how you want to go - image or without.

 

Test page (check out the source)

Bold part, "including both lines". Got confused at that one. How can I do that with the space between them? Meaning, there are two lines and in between a header image. Are you suggesting that I put them all together, perhaps?

You would use an image program, such as Paint or Photoshop, and create two lines on the canvas with some space between the lines and save it.

 

You should leave the header separate, so you can edit it easily.

[Akkari]

Finally decided to go with your first suggestion.

 

Thanks.