 IE Problems |
  |
| Dejan |
 Feb 28 2009, 08:06 AM
Post
#61
|
|
Member  Group: Members Posts: 49 Joined: 14-January 09 Member No.: 7,542  |
???
|
  |
 
|
| Darin McGrew |
Feb 28 2009, 09:57 PM
Post
#62
|
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
I'm still not sure what you're trying to do, or why you think you need to specify a height for your main container. Just let your main container adjust to its content, and design the background images to adapt to any height of the main container.
|
|
|
|
| Dejan |
Mar 17 2009, 12:45 PM
Post
#63
|
|
Member Group: Members Posts: 49 Joined: 14-January 09 Member No.: 7,542 |
heya sorry guys for my long time being offline,
had a lot on my mind.. im back for now. I also beginning a new design, the old one pretty sucked i think. Darin, On your post above, an example: http://smitska.woelmuis.nl/layout2.html If u open it with IE, the main container in the middle goes almost from top to bottom(which is quite correct), if u open it with opera.. Its correct on top, but on the bottom there is a huge gap. So thats the problem, i dont know what sizes to give the container. U say let it adapt the size of the concent, but every page has a different content so that would be quite ugly that the size changes every page Greetz Dejan |
|
|
|
| pandy |
Mar 17 2009, 11:57 PM
Post
#64
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Fix the errors to start with.
http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes Fixing the only CSS error will shed some light. http://jigsaw.w3.org/css-validator/validat...g=1&lang=en You can't both declare new properties and use inherit at the same time. Remove inherit and you'll see what's going on. Now you should see the underlined non-breaking spaces all the way down. The content of #header is higher than #header so it overflows. It's higher than "container too. Again it overflows. This is what happens in good browsers, not only Opera. IE instead expands the height of the box to fit its content. This is why it's not a good idea to define a fixed height for text. It must go somewhere and you can never know the actual height of a piece of text since that depends not only on the amount of text but also on the user's preferences. |
|
|
|
| Dejan |
Mar 18 2009, 09:04 AM
Post
#65
|
|
Member Group: Members Posts: 49 Joined: 14-January 09 Member No.: 7,542 |
Thanks for your respond paddy.
I fixed all the errors in my page. But i still dont understand why there is such a huge gap under the container(opera). I u want to explain, please do it with a little more css codes, because i have problems with understanding technical english. I want to have the layout dont soon...... because damn i suck at it hehe http://smitska.woelmuis.nl/layout2.html This post has been edited by Dejan: Mar 18 2009, 09:08 AM |
|
|
|
| pandy |
Mar 18 2009, 09:58 AM
Post
#66
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Because of this. If you had kept the text-decoration: underline you could have seen all those little underlines all the way down.
HTML 47 <div id="header"> 48 <p>HEADER</p> 49 <p> </p> 50 <p> </p> 51 <p> </p> 52 <p> </p> 53 <p> </p> 54 <p> </p> 55 <p> </p> 56 <p> </p> 57 <p> </p> 58 <p> </p> 59 <p> </p> 60 <p> </p> 61 </div> To make it clear, there is no gap. The content, that is all the paras with , is taller than the boxes that contain it. The text must go somewhere. Good browsers let it overflow its container, or containers in this case. The text will stick out below the containing boxes, you could say. Bad IE expands the height of the containers to fit their content. With me now? Replace all the with a visible word and you can see it clearly.  |
|
|
|
| pandy |
Mar 18 2009, 10:33 AM
Post
#67
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Again, this is why it's a bad idea to fix the height of boxes that will contain text.
|
|
|
|
| Dejan |
Mar 18 2009, 11:32 AM
Post
#68
|
|
Member Group: Members Posts: 49 Joined: 14-January 09 Member No.: 7,542 |
but how must i do it then without giving sizes to the containeR??
It must have a background, so i dont know what sizes... really complicated =\ |
|
|
|
| pandy |
Mar 18 2009, 01:41 PM
Post
#69
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
If you want it to look exactly like that, you have to cut the background up and use it as several backgrounds. For example non-repeating top and bottom parts and a middle part that repeats vertically. That may mean you need to add more HTML elements since you can only have one backgrund per element.
|
|
|
|
| Frederiek |
Mar 18 2009, 01:47 PM
Post
#70
|
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
This is all you need in the <body> tag:
CODE <div id="container"> <div id="header"> <p>HEADER</p> </div> </div> <div align="center">advertentie: <script language="javascript" type="text/javascript" src="http://views.m4n.nl/_v?zid=502602"></script> </div> |
|
|
|
| Darin McGrew |
Mar 18 2009, 02:16 PM
Post
#71
|
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
CODE <div id="header"> To me, this just screams out for a heading element (i.e., h1, h2, etc.).<p>HEADER</p> </div> |
|
|
|
| pandy |
Mar 18 2009, 02:40 PM
Post
#72
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
QUOTE(pandy @ Mar 18 2009, 07:41 PM)  For example non-repeating top and bottom parts and a middle part that repeats vertically. So I was wrong. I thought the border was part of the image. Good news, you only need 2 bg-images. Much easier. If you use 2 containers you can use a small repeating background with just the color at the top of the old image for the outer one. Then you position the the other background, the one with the girl, at the bottom of the inner container. It will overlay the repeating background. Use the borders with these containers too and fix the space between them with padding. Maybe it's easier to understand if you see it done. You deserve a break, I think. http://w1.181.telia.com/~u18115332/dejan/ Now you can have as little or much text as you want and the containers and the background(s) will adopt. I removed all heights. You probably want to adjust the padding and margins the heading, I didn't bother with that. |
|
|
|
| pandy |
Mar 18 2009, 02:54 PM
Post
#73
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I see now that I maybe didn't pick the best bit of your image for the repeating background, but you can fix that.
|
|
|
|
| Dejan |
Mar 18 2009, 03:44 PM
Post
#74
|
|
Member Group: Members Posts: 49 Joined: 14-January 09 Member No.: 7,542 |
Thanks for your work pandy, appreciate it alot
So if i understand right, U made that the container adapt the sizes of the background images? or to the text what is in the container? anyway, its almost what ive looking for, im trying to edit now and observe your version, so i know what i did wrong.. I really want to learn this  thanks alot!!! |
|
|
|
| pandy |
Mar 18 2009, 04:01 PM
Post
#75
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
You're welcome.
 Both wrappers expand and shrink with the height of the text. That's what block level elements do if you don't stop them. Remove some lines and then add some lines and you'll see how it works. The top background tiles vertically, so it fills the space however small or big. The bottom background doesn't tile and is glued to the bottom of the inner wrapper, so it will always be at the bottom. If you don't want the text to go all the way down you can add a little bottom padding to the inner wrapper. QUOTE anyway, its almost what ive looking for, im trying to edit now and observe your version, so i know what i did wrong.. You tried to control too much. Control as little as possible. Content needs to be able to grow or shrink. Change text size in your browser and see how the height varies. That's one thing you can't have control over, so you have to work with it, not against it. |
|
|
|
| pandy |
Mar 18 2009, 04:07 PM
Post
#76
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
QUOTE(pandy @ Mar 18 2009, 08:40 PM) Use the borders with these containers too and fix the space between them with padding Uhm, wrong again. The inner border must be on your old container. Both the wrappers I added must span the whole width so both backgrounds can go all the way out. That's why three DIVs are needed. |
|
|
|
| Dejan |
Mar 19 2009, 12:42 PM
Post
#77
|
|
Member Group: Members Posts: 49 Joined: 14-January 09 Member No.: 7,542 |
Thanks pandy for the help!!
Another question(dont know if its right to ask here) Does anyone have a option of how to make a nice menu that fits to the current page? I made a few but they didnt fit nice to the page. |
|
|
|
| Frederiek |
Mar 19 2009, 03:57 PM
Post
#78
|
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
That's a matter of taste, really.
Post the url of what you tried, maybe we can give you some suggestions. |
|
|
|
| pandy |
Mar 19 2009, 04:48 PM
Post
#79
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I forgot to say this earlier. You use 'groove' for the border style. But you can't get a groove border with only 1 pixel and I doubt it's groovy (ha ha!) with 2 pixels either. The more fancy style borders take several pixels since they consist of several parts. No show stopper. Just thought you'd want to know.
|
|
|
|
| Frederiek |
Mar 20 2009, 03:12 AM
Post
#80
|
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
Correct.
Nonetheless, even with a 2px groove border, the effect looks quite good and subtle: darker on the lighter parts of the image (top) and lighter on the darker parts (bottom). Groovy, ain't it? |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 25th April 2024 - 03:52 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC