The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

5 Pages V « < 2 3 4 5 >  
Reply to this topicStart new topic
> IE Problems
Dejan
post Feb 28 2009, 08:06 AM
Post #61


Member
***

Group: Members
Posts: 49
Joined: 14-January 09
Member No.: 7,542



???
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 28 2009, 09:57 PM
Post #62


WDG Member
********

Group: Root Admin
Posts: 8,291
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dejan
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 17 2009, 11:57 PM
Post #64


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,179
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dejan
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 18 2009, 09:58 AM
Post #66


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,179
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 &nbsp;, 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 &nbsp; with a visible word and you can see it clearly. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 18 2009, 10:33 AM
Post #67


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,179
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dejan
post 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 =\
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 18 2009, 01:41 PM
Post #69


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,179
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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>



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Mar 18 2009, 02:16 PM
Post #71


WDG Member
********

Group: Root Admin
Posts: 8,291
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



CODE
    <div id="header">
        <p>HEADER</p>
    </div>
To me, this just screams out for a heading element (i.e., h1, h2, etc.).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 18 2009, 02:40 PM
Post #72


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,179
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. smile.gif
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 18 2009, 02:54 PM
Post #73


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,179
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dejan
post 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 biggrin.gif

thanks alot!!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 18 2009, 04:01 PM
Post #75


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,179
Joined: 9-August 06
Member No.: 6



You're welcome. happy.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 18 2009, 04:07 PM
Post #76


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,179
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dejan
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 19 2009, 04:48 PM
Post #79


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,179
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

5 Pages V « < 2 3 4 5 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 20th March 2019 - 10:06 AM