CSS - Ie6/general Css Question... Kind Of Tricky

I'm fairly new to CSS and I'm really getting stuck on how to make a column on a web page behave the way that I'd like it to.

I want to have a column that is composed of three parts: a header image, a footer image, and a middle section that expands in height to match the content height. These three pieces make up the "background" of the column. Now I want to overlay content on top of it and have the column expand in height to suit.

I can accomplish this fairly easily if I restrict my content to the middle portion. This isn't what I want though. I want the content to overlap the header and footer images.

This diagram describes what I'm trying to do:

+----------------------------------------+
|........................................|
|..Fixed height header image.............|...Content
|........................................|...text
+----------------------------------------+...to
|........................................|...overlay
|........................................|...all
|..Expanding region (solid fill color)...|...three
|........................................|...regions
|........................................|...with
+----------------------------------------+...the
|........................................|...center
|..Fixed height footer image.............|...region
|........................................|...expanding
+----------------------------------------+


This is what I'm doing in my html:

Code:

<div class="contentArea">
     <div class="contentTop"></div>
     <div class="contentStretch"></div>
     <div class="contentBottom"></div>
     <div class="main-page-content">
         My Content Here
     </div> 
</div>

This is in my style sheet:

.contentArea{
border: none;
height:auto;
line-height: 100%;
padding: 0px;
width: 785px;
float:left;
}


.contentTop {
background: url('../images/contentTop.jpg') no-repeat left center;
border: none;
height: 276px;
line-height: 100%;
padding: 0px;
width: 785px;
float:left;
}

.main-page-content{
border: none;
line-height: 100%;
padding: 0px;
width: 515px;
height: auto;
position:relative;
left:265px;
top:-610px;
}


.contentBottom {
background: url('../images/contentBottom.jpg') no-repeat left center;
border: none;
height: 317px;
line-height: 100%;
padding: 0px;
width: 785px;
vertical-align:bottom;
}

.contentStretch {
background: url('../images/StretchPic.jpg') repeat-y left center;
border: none;
line-height: 100%;
padding: 0px;
width: 785px;
float:left;
}


As you can see, I've tried to overlay and move the main content upwards by -610 pixels to get it to sit on top of the previously placed divs. This appears to work to position the content, but the underlying images do not behave!

I've been at this for days and I'm at the point where I need help! Any suggestions?

Ron

FAQ what's having issues...

Hi!

I have an FAQ page that consists of a series of answer <ul>s nested under question <li>s. A little javascript shows the active answers alongside the question. The questions are supposed to align vertically with the answers and with a constant margin.

Using relatively positioned parent li's and absolutely positioned child uls is doing the trick for all but ie 6-7, which are not respecting the left:400px declaration in a predictable (to me, at least) way. The answers are floating right and left based upon the width of the question.

Any help would be greatly appreciated!

Thanks..

I have a menu that needs to be pixel perfect.
It uses ID's for each menu item with a specific width and background positioning property when the user hovers over the each menu item. This is fine so far.

It is getting tricky now because I need to use a drop down menu. Using the Superfish js, it uses a class (sfHover) appended on the parent ul when the child li is hovered. That would be fine if it were a mere background colour but in this case I need to control background positioning.

eg
li#main-nav-3 a:hover{ width:83px; background position:-227px 0;}
...
<li id="main-nav-3"><a href="#">Attractions</a></li>
<li id="main-nav-3" =><a href="#">Business</a>
<ul>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
</ul>
</li>
...

on rollover:

...
<li id="main-nav-3" class="sfHover"><a href="#">Attractions</a></li>
<li id="main-nav-3" =><a href="#">Business</a>
<ul>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
</ul>
</li>
...


I just wish you could write li#main-nav-3.sfHover a:hover {new background position} to solve this but you can't.

Anyone else faced a similar problem?

Link to the problem page:
http:sidouglas.net/cmx/tourism/
The rollovers are : Business a nd About NZ.

this is really for a counter strike source server MOTD (which lets you use HTML/CSS)

First of all for the MOTD i want to use a graphic on it, there are 2 versions of it. One that fits nicely on a 800x600 screen, and one that doesnt (meant for 1024x768+)

unfourtantely the bigger one looks alot better. but I do not want it to go off the screen for gamers with smaller screen resolutions.

so bassicaly what i want to do is use a different graphic depending on what's happening (if the person has less than 1024x768 screen res or if the user has 1024x768 or above). Bassicaly it's a super duper tricky fluid layout.... thing....

Can this be done or will I just have the face the music?

Hi friends, all good?

It was wanting to make an equal thing of the image that I am placing



To place option with these properties of the source and the size. Somebody would know as to make this?

Sorry my English

Thanks

So I have a myspace, and I like things neat and compact. And I like filling out lots of long surveys that most likely no one will ever read, and posting them on my myspace. But when I do that, my page becomes very long and I don't like that. So my idea was something like this:

There would be a series of links across the top that would correspond to the various surverys and/or other content that I deem necessary to share with the world. The many users who visit my page looking for more details about my life click on the link of their choice. The box below all the links shows that particular survey. They read it all, and of course want more, so they click the next link. And poof, a new survery shows up right where the other one was. Compact and efficient.

I've seen sites use a slightly similar system before, often in the help/faq sections. You find the topic you need help with, click on it, and it pops up below it. However I'm pretty sure they used javascript, which isn't allowed on myspace. ("Security" or some other overrated matter). Therefore I would have to do it with CSS. I was thinking have each survey in a different table, all absolute positioned in the same place. Then when you click the link, either all the rest get visibility turned to not visible, (and that one turned to visible), or perhaps the z-index is changed. However I'm not sure you can do that in a link, especially without javascript. So I may need to find an alternative. Unfortunately, I'm not very good with CSS at all, and I'm also not very creative in problem solving.

Does anyone have any ideas on how I could implement this system without javascript or using other pages? (I just get my one little myspace homepage, although I guess I could cheat and use blog pages too. But then all the other blog crap like comments would show up on it).

I apologize if this has already been covered, I tried to look through the more recent posts for something similar and found nothing, and I wasn't really sure what to search for, since it isn't really something concrete I'm working with. I don't necessarily need code, mostly just ideas right now.

Thanks in advance to anyone who helps, and if you don't know what I'm talking about/thought it was too long, tell me and I'll try to clear it up or shorten it up, respectably (and respectfully, as it were).

PS. My myspace account, if you care and didn't already guess, is www.myspace.com/mynameismolotov. Althought it's basically empty right now.

Hi

I am currently trying to self teach myself CSS, harder than I thought, lol. Anyway I have a page that uses CSS but there are certain areas that don't display correctly/I can't get to work. I'm hoping someone can help

Page:

jinx-inc.co.uk/development

Problem Areas are highlighted in this picture (to make things easier)

jinx-inc.co.uk/development/problems.jpg

1: This area should have the blue colour all the way down.

2: Pretty much same problem as 1 but this is a repeating background instead of a background colour.

3: There is a Footer but it's gone walk about. The only way I can get it to show is through absolute position as this css file will be used as the master for all pages, so absolute won't work.

4: Table border problem but not too fused about that at the moment.

Code available:

jinx-inc.co.uk/development/css.txt

jinx-inc.co.uk/development/html.txt





Many thanks

I am having what I can only imagine is a very common problem.
Firefox is working fine and IE is not.

I want the logo then the name image next to it in the header.

I am positioning with css as below:

Code:

<div id="header">
     <div class="logoholder">
         <img src="images/logo70.jpg"/>
         <img class="djembefola" src="images/djembefolaheader.jpg">
     </div>
</div>

and the css:
Code:

.logoholder {
    position:absolute;
    left : 20px;
    top : 0px;
    width:500px;
    height:70px;
}
#header img {
    float: left;
}
#header img.djembefola {
    float: none;
}

I am aware that this CSS may be very weak, as I'm not too experienced and am coding by hand. What would a robust way of doing this be. I don't really like this float lark but it was necessary to get the logo to stick left.

Is it a good idea to have it inside the logoholder div (albeit bad naming by me) or is it unnecessary?

Sorry I just realised that I didn't link to the page I had intended to.... www.djembefola.net

Thanks for your time and consideration!

After many attempts I have been unable to get an unordered link list to fill the desired width. The main nav list should be the same width as the boxes in the left column. http://test.solidgroundnc.com/sg_css4.htm

I would also appreciate any and all suggestions regarding my code/design for that same page. I'm not a web designer, not nearly, as my first attempt using tables proves - http://www.solidgroundnc.com. I was flamed so much when asking a question about that one that I decided to learn more, which includes css, and probably enought to get me into more trouble. ;-)

Cheers,
Golem

Hello -
My name is Steve Douglas website designer for AAA Northwest Ohio. I'm 19, and learning as I go - AAA paying for any courses that I need to take, but i'm not the school type of guy. I like to learn it by self-studying; i learn it better by making my own mistakes.

Anyways were doing a site re-design, I first started off with a simple re-design with just HTML and tables (whoopity doo), boss was impressed - I was not. I hated it.

But - I'm doing a new site design now with CSS, learned how to code it overnight. I started the designing and had wierd errors all around with browser related issues, I would re-design, re-design, and re-design until everything worked Perfect in all Screen Resolutions, IE 5.0, IE 6.0, IE 7.0, and Firefox

I got advice from a fellow devshed guy kasmatu (spelling could be off), but helpful guy, gave me the clue to get the Mozilla Firefox Extension for CSS [Love It!].

Now should I follow these tools by heart? I mean like if I click Tools then Validate CSS, and Validate HTML, and Etc.

1. I am at a state where my header finally looks great in all popular browsers, but when I validate my CSS it's saying i'm missing a </div> at line 40 - Which is True! but when I go to add it, um, yea doesn't like that - all ID's are totally screwed from there after. not even the header looks right. And it doesn't look like a simple fix.

I mean it's working! - So why should I want to validate my CSS?

ALSO - and this is prolly why.. How do I speed up the site? Our Current site that we are using, is running 98 seconds loading time for Dialup users (a minute an a half!). The new CSS is at 45 seconds for Dialup users (i think).

I'm pretty sure it's to do with all the Javascripts i'm using, I'm planning on combining the Scripts together and taken out code I do not need. But the document sizes are still huge.

---------
I'm looking into HTTP Compression for our server - is this smart? we are running on a windows 2000 server IIS - What are the negatives to installing the compresser?
----------

Here is the site re-design
http://www.aaanwohio.com/test/together.php

Our Current Site is located at
http://www.aaa.com/stop - Zip Code 43465

Hello,

I tried to make a page with a header, left column and right column, as shown in the screenshot. http://img292.imageshack.us/my.php?image=screengr2.jpg
You can see the code at the bottom. I used the faux-column technique to make the column colors extend to the bottom of the page.

Is this a good way to do it? and does this method give problems with different resolutions on different computer-monitors.

I used floats in this example to position the divs, is this a common solution or is absolute or relative positioning better?

My goal is to teach myself a way to easily and effectively divide a webpage, so that I have a basic method, also in larger and more complex websites.

I like to hear any tips/techniques to improve this.

I used the folowing code:
Code:

<html>
<body>
<div class="wrapper">
	<div class="header">
    		<br /><br /><br /><br /><br />
    	</div>
   	<div class="left">
		<img src="homer.jpg" />
	</div>
   	<div class="right">
    		<div class="nav">
			<a href="home.htm">home</a> <!-- menubar -->
		</div>
    		<div class="contents">
			This is the contents of the page
		</div>
     </div>
</div>
</body>
</html>

and the css code
Code:

body{
	background: url(fauxcolumn.jpg) 15% 0;
	margin: 0;
	padding: 0;
}

.header{
	background-color: green;
	float: left;
	width: 100%;
	margin: 0%;
	padding: 0%;
}

.left{
	background-color: purple;
	width: 15%;
	float: left;
	margin: 0%;
	padding: 0%;
	height: 100%;
}

.nav{
	background-color: blue;
	width: 85%;
	float: left;
	margin: 0%;
	padding: 0%;
}

.contents{
	float: left;
	width: 85%;
	margin: 0%;
	padding: 0%;
	background-color: red;
}

Thanks in advance.

Hi all

Take a look at this in Firefox and then in IE7:

http://www.josh.ch/files/temp/ie7_margin_bug/formulare.html

The text input and the textarea fields have a strange margin on the left in IE7 that shouldn't be there. It seems to be "inherited" by the outher paragraph, just change the value in css/general.css on line 29 to see it happen. FF and IE6 behave well, IE7 doesn't.

Interestingly, the select field (and all the other fields like radio buttons and checkboxes) don't have this problem.

I did a search and found this link:

http://www.positioniseverything.net/explorer/floatIndent.html

Seems to be something like that, but the display:inline fix didn't help. the only way I see is a minus margin for the text input and textarea fields for IE7 only, but maybe there's a cleaner way?

Thanks a lot for help :-)
Josh

Greetings all,

Firstly, I am just now starting to use CSS instead of tabled layouts. I must say I am impressed by the power of CSS, but am still learning the ins-and-outs of it.

I was wondering if there are any good references/books you'd suggest purchasing or looking at online?

Now for my specific question. For my simple page project I am using to learn CSS, I have a <div> that denotes the header. This is supposed to simply have a small .jpg image on the left and some text on the right, like this:
___________________________
|[ i m a g e ]....................text |

However, it comes out looking like this:

___________________________
|[ i m a g e ]..........................|
|.....................................text|

I suspect it is due to the align: right of the text, but am not sure how to correct it.

Relevant snippets of code:

testpage.html
Code:

...
<div class=header>
<img src="image.jpg"><h1>TEXT</h1>
</div>
...

style.css
Code:

...
#header{
background-color: #FFF;
border: 2px solid #666666;
width: 860px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 0;
}

#header h1{
text-align: right;
margin-right: 20px;
font-style: italic;
letter-spacing: 3px;
}

Thanks for any advice.

Hi,

I have three <div>

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
 <div id="container" style="width:500px;height:700px;background-color:green;">
     <div id="one" style="float:left;width:100px;background-color:#ff9900; ">one<br>one<br>one<br>one<br>one<br>one<br>one<br></div> 
     <div id="three" style="float:right;width:100px;background-color:red;">three </div> 
     <div id="two" style="float:left;width:70%;background-color:#ff9988;">two jdfk hnldncf ddhf sd ohdnfc kbldhcv ohsvnskd hvjnsdhv hviopsdhv kbhopvd v onksdnv oln;sdmnv m;mv mnml;vm  vm;klf kdfl'gl;v 'fg 'kdf'kvb'l ;'lfk</div>
    
 </div>
 </BODY>
</HTML>

I noticed when I increased the % width of my <div two> it goes below my <div three>

I was under the impression it should just stay at the same level and text should wrap around my div three? But I guess that's not the case. Am I doing the something wrong or is this the expected behavior?