CSS - Z-index Problem In Ie7 With Fixed Header Element And Transparency

Please look at this page - http://www.thomashall.com/art-deco-tour.asp?pan=1 Once the panorama loads notice that the drop down menu nav bar is under the panorama and not above. Is is possible to layer the element such that the nav appears on top of the object element?

Hi guys!

Ok here's the thing, I've tried everything I know and hunted the net trying to find an answer, and just when I think I have, another issue crops up. Sorry about the title but I just don't know what to call what it is I'm trying to do. But it SHOULD be possible, and it SHOULD be really simple, which is frustrating the heck out of me because I cannot get this to work!

Here is what I'm trying to do, complete with pictures to help visualize things.

Example
This shows how I want my site layout to appear. A regular width site so it can be displayed on low res desktops, BUT with extra artwork on the left and right, complete with a couple of flash animations to the sides.

Code:

http://img708.imageshack.us/img708/2458/layoutstyle.jpg

The red outline shows a typical 800x600 display, as you can see, they should only be able to see what's in the center of the page.

The dark blue outline shows a much higher resolution display

The light blue color shows the extra artwork only revealed to higher resolutions

The flash boxes contain flash elements which should remain fixed in those locations regardless of the resolution the user is using (they'd be setup to match the background image, so must not move)

The dark blue outline shows how the same site would look on a much higher resolution. Instead of black space to the left or right, or the actual site stretching to fit (not looking for a liquid layout in this case), they get to see the rest of the artwork, plus the flash elements.

The purpose of this is so it will look fine on low resolution displays, but also, when viewed on higher resolution displays, will then show the extra artwork instead of blackness.


Problems
Just when it looks like it might work, I find that each browser displays things incorrectly, pixels, picas, ems, etc. and so on. How do I get it to work across the board? I don't want to be unprofessional and do the "This site should only be viewed in X browser".

The flash enabled parts always wrap and refuse to appear off screen, how do I fix this? When I place them, I want them to stay exactly where they are (which is offscreen on a low resolution, but visible on a higher resolution), not bunch up and move out of place.

I can get the actual background to appear correctly, so when resizing the browser, it remains fixed in the center and reveals the rest of the artwork both left and right. But other elements simply refuse to behave correctly (see first problem, this happens especially with browsers not rendering the same things the same, such as pixels etc. being done differently in each browser).


If you want a real world example of what I'm trying to achieve, please view the following website:

Code:

http://us.blizzard.com/diablo3/?rhtml=y

unfortunately I have no idea what language they used and it looks unreadable to me, so borrowing from view source isn't an option for me in this case (I use Dreamweaver, css and php, and have no understanding of xml or whatever it is they're using, neither do I have the time to learn another language).

Is there anyone who can help me here, cause this is REALLY frustrating me now, it should be incredibly simple but it's not, and I feel as if I'm being forced to abandon everyone who doesn't have X display and X browser. Which I don't want to do.


P.S. Sorry about the weird links, seems new accounts can't use url's *shrugs*.

Something for the css pros:

Can anybody give me a hint on how to convert the following (table) based markup snippet to div-only markup?

http://www.twosailors.net/test.html

In all my tests I cannot get the rightmost cell expand so the whole menu gets it's total size. I do NOT want to convert the boxes to fixed width but keep them shrinkwrapping around the menu texts. Also, I do want a border around the boxes so any faking with background colors will not work either.

Any ideas?
Andreas Pardeike

Hello,
im trying to make Fixed width 3 columns (each column have fixed width) layout 100% height with header and footer.

-Well I see alot of examples around the web, but i dont see complete one and im really tired of searching, i made the Fixed width 3 comlumns layout, left and right are absolute position, and center is relative to the header

-the problem is that all columns dont fill the whole height of the browser windows, the footer doesnot work good. so the whole thing is missed up, so please show 100% working example of what i need.

Thanks in Advanced
Samer

I'm attempting to get a page that has a header, footer, left navigation bar with a fixed width, with a right "fluid" content section. I can get it to work by giving the main content a "margin-left" of the width of the navigation panel, and absolutely positioning the navigation. Problem is, with the navigation being absolutely positioned, it takes it out of the flow and doesn't push the container to fit its contents. I've trying playing with using floated divs, which is I'm sure the way I'll have to go, but I want the navigation bar to always be a fixed width of 175px, and I want the content section to stretch to fill the remaining space. I'd also like to make sure the content portion appears BEFORE the navigation panel in the order it appears on the HTML for SEO purposes. I'm sure it's easy using Javascript, but I'd like to do a pure CSS solution, if possible. How do I do that? Here is the link if you want to have a look:

http://www.chcs-ut.com/support.php?section=technical

I have a header box contained within a "wrap" box in the usual IE kludge to get it to deal with padding and centering consistently. When the page loads, I can see a small (approx 50px) blue-outlined box flash up. My header is specified as 738px wide, not about 50px, but it is blue-bordered. Wrap has no border.

In Firefox, the weird box then moves to the top of the screen, and things load as they should. The box disappears under the other elements.

In Blogger (this is actually a Blogger template), the small box first appears about half an inch down the screen, and then the page loads from that point down, and I'm left with half an inch of background I don't want. (page is he http://acid-test.blogspot.com if you'd like to see what I mean.) The behavior seems to be the same in IE. The little box disappears, as in Firefox, but seems to set the top of the page in some strange way.

Is there a command I can use in the stylesheet to force the elements to move to the top of the page? Is there any way I can find out what the weird little box is? And get rid of it? Does anyone have a clue what's going on? I sure don't.

Thanks for any help you folks can give me!

Hello,

If you visit: http://tombraiders.net/katie/newsite/index2.shtml

user: letme
pass: in

You'll see my main content area does not fill to the footer. Any ideas how to fix this?

The CSS page is he http://tombraiders.net/katie/newsite/style.css

Okay I learned html/css about two years ago, and haven't really used it much since. but I'm trying to get back into it and have run into a problem with my design.

Basically what I have is a DIV tag in the index that is used to center everything on the page, and provide a border. Basically what I wanted to do was add buttons that I made in photo shop and a banner to every page I'm making, so I put them in a SSI file. That works just fine, but what I'm trying to do is make them positioned relatively positioned to the DIV in the index but still have them in the SSI file, but every time I try to add the styles to either my SSI file, style sheet for the index page, or right to the main index it wont position them inside the div.

Sorry if that really didn't make sense. If you need an example take a look at the texts from last night home page (sorry it wont let me include a url) and I'm trying to get it kinda like that but with the buttons along the top of that centered outlined portion, and the banner above that.

I'm really stumped here, ladies and gentlemen, so if anyone has any idea how I can get this working that would be amazingly helpful. And if I missed anything you need to know just let me know, its pretty late and I can't really think straight right now, haha

Thanks in advance.

http://cheers-sendai.com/fluidframe.htm has a great and simple example of 3 cols (OK, 2 cols in the middle section makes "4 cols"), header and sticky footer, where the middle col has overflow:auto so it can be scrolled. GREAT example, I think (due to the use of bg colors, etc.).

The left/right/width values of the divs are manipulated so that the middle section runs from 10% to 90% and the left/right divs fill in accordingly.

I'd like to be able to set, for example, the left and right divs to be 150 px wide (NO percentages!) and have the middle section stretch between them (regardless of viewport width) and be able to be scrolled, too.

The problem I see is that most examples use percentages. I can set the left div to be a fixed width, then set the middle section left coord. to be, say, 150px, but then I need to set its width to stretch to "150 to the left of the right side of the viewport" and I don't know how to do this.

Thanks.

Please look at this page

http://www.tmhdesign3.com

and this one

http://www.tmhdesign3.com/real-estate-broker.asp

The first one used a flash file, the second does not.

On the first page I want the dropdown navigation to overlay on the flash but it does not. I played with z-index to no success...

Hi, I have this problem with loading new movie on the same page with fixed background.
Here is an example of what i want to do . I have two flash files main.swf and movie1.swf, and main.swf loads first when i open index page. On the button of this main.swf i have action

loadMovieNum("movie1.swf", 0);

which should load new movie in the same window and everything works fine when i test SWF file but when i embed it in a HTM page with fixed background only first move main.swf loads fine as it should but when i click on the button in this main.swf to load new movie movie1.swf in the same page it will not load??? It starts to load and than just stops. I guess there could be something wrong with my CSS style but i have never been working with CSS as i am only beginner in web design. Could anyone help here please? Here is y CSS style. PHP Code:
 body {margin:0px; padding:0px; vertical-align:top; background:url(images/back.jpg) no-repeat top #2BA3F4;} 

I realize older IE versions don't play nice with the position: fixed tag.... and I need an alternative. can someone please explain why this doesn't work? here is my style sheet....

Code:

body { background-image: url(../images/spacer.gif); background-repeat: repeat; height: 100%; width: 100% color: 000;	  }

p {
	margin-bottom: 0em;
	line-height: 1.5;
}
div.sub h4,
div.sub {	color: #000;
	}

img {
	border: none;
}
div.main {text-align: left; width: 555px; height: 427px; clear: both; border: solid 0 #fff; padding: 0;}
div.journalhead { position: absolute; top: 427px; left: 1px; width: 555px; height: 73px; }
div.projects { position: absolute; top: 333px; left: 555px; width: 344px; height: 44px; }
div.logo { position: absolute; top: 1px; left: 555px; width: 345px; height: 332px; }
div.projectthumbs { position: absolute; top: 376px; left: 555px; }
div#journalbottom { position: absolute; top: 453px; left: 1px; width: 555px; height: 47px; }
ul { position: absolute; float: left; margin-bottom: 0; }

ul#fader li img { text-align: left; position: fixed; top: 1px; left: 1px; width: 555px; height: 427px; padding: 0; }



.fade{
	margin-bottom: 0em;
}

.fade p{
	margin-bottom: 0em;
	text-align: center;
	width: 100%;
}

a:link {color: #000; }
a:visited {color: #000; }
a:active {color: #333; }
a:hover {color: #333; }

any light shed would be great, i realize it's a bit sloppy at present.


please help

My layout is not liquid. everything is fixed position. If the veiwer adjusts his text size in his browser then part of the content text in the div's will be pushed out of sight because {overflow:hidden;} has me covered.

How do I get the content in the div to become scrollable in this case?

I don't know if it's possible but I don't really want to have scroll bars on my div's UNLESS the user adjusts text size and forces it to happen.

Can this be done and if so any Ideas on how to do it?

Hi!
My first post

I got a problem with my sticky footer
as you can see the footer is fine, fixed to the bottom of the page but I got an unnecessary scroll

The site: www dot flyttamig dot com

think the problem is that i put 100% height on html

html,
body {
margin:0;
padding:0;
height:100%;
}


Can you guys help me get rid of this scroll

Thanks