cssfreakie

okay this been quite a waste of my time and of yours haku sorry for that. The problem seemed that my stylesheet of IE6 was not properly included. i had src="ie/z-indextest.css" instead of src="css/ie/z-indextest.css" I thought let try something simple like change the body background color to total black.... and noting happend pointing me to the <link> So if someone wants to overlap like I wanted here is the solution in your ie stylesheet add. #mid{ height:323px; position:relative; z-index: 100; } it worked like a charm Cheers! and Sorry haku for bothering you edit: haku were you refering to these guys? http://understandinggraphics.com/

Thanks Haku for your quick reply, and i agree offtopic that the colors are illogical and awful and i tottaly agree with that. But i am using some weird dummie custom made design for this thread to make a proper distinction between the header etc. To underline my content is overlapping the header(image....) The real design is pretty eye catching and there is a very clear distinction between the header and the content. But i leave that to the person designing the stuff. Fact is i still got a design like this with those precise measurements and really don't se that can be done with floats since they have to overlap. that's the design and i can't do anything about it. foating and averlapping are two different things and i find i should have to master both instead of running the otherway. back to the topic. if anyone might want to look in to the above and might have an idea without floats since i must use overlapping elements (*the design dictates me to! and the realife design is pretty kick ass btw but i am not allowed to show it) please let me know. -->Btw the IE 7 thing is solved i used the property 'grey' which is not valid. SO that leaves only IE6!!

haku sorry to say, but that floatorial is it great but not for what i am aiming for if i read it correctly. the examples given are only for things in the normal flow. But the design I am aiming for is trying to let elements overlap. And that's why i need anything other than a static position to apply a z-index. Now if i am correct a position relative on a parent (without setting additional properties) can be useful (and has NO extra side effects) if a child element needs a position absolute. so that is what i did on #header (relative) and #header-content (absolute). I'll remove that position relative from the content, but i now realise i did that to give it a z-index Higher to Overlap the header. Now i can be completely wrong or either stupid, but every tutorial i read tells me that. The problem i have is ie 6 cut's of a div. I know there is a IE6 z-index bug, but i am not sure how to fix it even after reading quite a lot and trying quite alot. If anyone knows what might be wrong to the above please tell me i am happy to learn. -edit i added an image of a 3d model on how the mark-up should end up looking also in ie6 [attachment deleted by admin]

I will certainly have a look in that haku, but i thought i was doing it right. for instance: i gave #header a position of relative, so that #header-content with a position absolute behaves according to the relative position of #header.. is that not the right way? i think you are right about position:relative; of #middle that one could have been left out. But could you maybe tell if my #header and #header-content way was right? that's really how I learned it.

oh not only ie6 does weird, ,looking a little closer showed me that ie7 doesn't show the dotted border of div#mid So in a nutshell ie6 cuts off div#mid-content and ie7 doenst show the border of div #mid

Hi all, I have a little trouble with some browser named IE 6 not that that is a surprise but maybe someone can help me out with the following. the content in div#mid-content in IE 6 is being cut-of (see image) it should reach out till the red line. the basic mark-up looks like this: but for a working example look here : http://cssfreakie.webege.com/zindextest.php <div id="wrapper"> <div id="header"> <div id="header-content"> <ul id="left-menu"> <li id="bla"><a href=""></a></li> <li id="bla"><a href=""></a></li> <li id="bla"><a href=""></a></li> </ul> </div> </div> <div id="middle"> <div id="mid"> <div id="mid-content"> <?php include 'somecontent.php'; echo $some_stuff; ?> </div> </div> <div id="right"> <div id="right-content"></div> </div> </div> <div id="footer"> <div id="footer-content"></div> </div> normal css body{ background:#fff; color:#fff; } #wrapper{ width:960px; margin:0 auto; } #header{ position:relative; width:960px; height:424px; background: url(../images/z-indextest/header.png) no-repeat; float:left; } #header-content{ position:absolute; bottom:180px; width:960px; border:1px solid red; } #middle{ position:relative; width:960px; float:left; background: #006680 url(../images/z-indextest/middle.png) no-repeat; min-height: 323px; } #mid{ width:520px; min-height:323px; margin:-180px 10px -150px 20px; padding:5px; float:left; text-align: justify; border:3px dotted grey; } #mid-content{ } #right{ width:300px; min-height:323px; margin:-180px 20px -150px 10px; padding:5px; float:left; border:3px dotted grey; } #right-content{ } #footer{ width:960px; height:323px; background: url(../images/z-indextest/footer.png) no-repeat; float:left; } ie 7 and lower #middle, #mid{ height:323px; /* height of the background image */ } P.s. I am using meyers reset btw, if anyone has a suggestion or solution i would be pretty pleased to hear here it. [attachment deleted by admin]

Ok cool thanks Haku, i was hoping a similar technique as with image maps would be possible Mystery solved case closed ! :'(

HI crmamx, I can really recommend a book, The problem with most of the on-line tutorials is that they are not very didactic. the stuff you just mentioned is in chapter one of the book i mentioned earlier ( there they explain isset() empty() ) I really really like this one: http://books.google.nl/books?id=nJWN1dyxaJIC&printsec=frontcover&dq=head+first+php+mysql&hl=nl&ei=CEpLTeGzPMftOY_bhTo&sa=X&oi=book_result&ct=result&resnum=1&ved=0CDgQ6AEwAA#v=onepage&q&f=false HAve a glimpse in an online edition. it's real value for the money if you'd ask me P.s. post the code you have in the php forum for review and ask if that is a nice way to go.

sorry to bump thi, but if anyone may have an idea or might want to point me in the right direction please let me know i really want to learn this.

good to hear it worked good luck!

weird stuff. maybe becuase of cache? not uploaded stuff. Anyways if it is fixed, mark it solved

in addition to raknjak, maybe try to give the box a width of more than 500px 502px for instance. I assume you wont change the buttons right? raknjaks slution is ofcourse better

Yes i do hope if someone knows, The sprites of for instance Bing and Facebook uses the background repeat image at the very bottom with a width of the total sprite. I have a felling that that is the only way. IF someone knows please let us know

hi all, This one has been puzzling me for quite some time and tonight i tried a little more but I have a feeling this is not possible. In a nut shell i would like to use an minor image on an image sprite to be repeated just like a normal image would by either repeat-x repeat-y or repeat. The problem is how? since sprites need a width otherwise they show the whole sprite. If anyone knows if this is possible and and how please let me know Just for a visual idea i added an image where the gradient black to grey image is the one i would love to repeat [attachment deleted by admin]

Sorry James, but please re read your own question. do you think that any of us except for prophets could think of what you are trying to achieve? I really have know idea. But i would love to help you out. Please provide some code... what did you try? or show a print screen of how you want it and how it is so we have stuff to compare. right now you are redirecting me to some side bar (on the left) on a webpage with 9 different buttons..... Now i could pick one but 8 out of 9 I choose the wrong one. Be precise

Well that makes it much more clear. the reason for this to happen on your browser and not at ours is pretty much unclear it seems, because we all use firefox right...?, but what i do know is how to solve it (and i am sure after you read this you know what causes this, .....fonts in your operating system) your <ul> has a fixed width, so it is forced to push out anything that it can't contain width wise. The problem is you have no idea what the width is of the inner elements since they are not set fixed and they may be influenced by font interpretation (your using some interesting fonts which depend on the client side, ubuntu might very well use different fonts than windows etc) Just to get the idea of what i mean try to change the stuff below into the second code with a smaller width #navbar ul { list-style: none outside none; margin: 0 auto; padding: 0; text-align: center; width: 500px; /* change it to 300px and look what happens */ } I bet if you change your width to a min-width of 500px or a fixed width of anything bigger than 500 it will be fixed. P.s. i love to hear if it worked if not let me know

sounds like a typo

I just checked but i can't seem to find what the problem is. Maybe it is browser related. Could you maybe make a printscreen of what you find looking odd, and tell the browser type and version?

thank you chaseman i love learning with pictures and videos Cheers!

My sister has a great book with loads of examples drawings, little puzzles and repetition. it's called Head First PHP Mysql from O'reilly. I can really recommend that book. Its really fun, full of pictures. Probably not extremely advanced but for learning the basics in a fun way it's great and in the end you can make a simple dating site lol But i have to agree with thorpe that after you learned the basics (properly) you should be able to think in the right direction which should or can lead you to the answers or asking the right questions.

Well, it depends of-course on your overall design and the end users. Are they young? old? is it about luxury, jazz. It really depends. But the most important thing is, are you going to rely on the end users font list (client side fonts) or are you going to use an @font-face or maybe even canvas or sfir (server side fonts). Google for @font-face and Sfir and see what possibilities there are. If you don't like those server side fonts, maybe have a look here: http://www.webdesigndev.com/web-development/16-gorgeous-web-safe-fonts-to-use-with-css But it really depends on your design. A grudge font probably looks out of place for a luxury site. Let me know what you ended up with

well it could be pretty much alot of things(4 if i am correct), maybe you can post your html markup and css. and i will have a look at it. Post it in code tags though preferably from Doctype to </html> and your css Maybe also tell how you want it to be looking like that way we have some goal to work to.

place a reset.css above your own styles that takes away most browser differences. I prefer meyer's reset.

hehe awesome thanks guys. I just noticed it had to look a few times to believe it, i was allready thinking my brain made a typo in the viewing Cheers! -edit: and thanks a lot since this is against the rules (but the world is full of revolution these days )

well i think this is what you are looking for. pay attention to the order of the elements btw in the html part that is. css: body{ text-align: center; } #wrapper{ border:1px dotted grey; width:960px; margin:0 auto; } #left{ border: 1px dotted blue; width: 150px; height: 150px; float:left; } #right{ border: 1px dotted red; width: 150px; height: 150px; float:right; } p{ text-align: justify; } html markup <body> <div id="wrapper"> <div id="left"></div> <div id="right"></div> <p>Loads of text here.</p> </div> </body> working example here: http://cssfreakie.webege.com/divs.php good luck with it! P.s. you can of-course give the little blocks some margin to create more space around them.