FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Overflow





coreymanshack
Why do my content margins overflow in firefox but not IE? anyone know a fix?

MY CCS >>>>>>>>
Code:
body{
background-color: #000000;
color: #4d4d4d;
font-family: Arial;
font-size: 10pt;
text-align: center;
}
img{
border: 0px;
}
#main{
position: relative;
border: 1px solid #4d4d4d;
margin:0 auto;
text-align: left;
width: 50%;
}
#logo_menu{
position: relative;
border-bottom: 1px solid #4d4d4d;
width: 100%;
height: 98px;
background: url('graphix/menubg.png');
}
#logo{
position: absolute;
left: 0px;
}
#menu{
position: absolute;
right: 0px;
margin-right: 10px;
margin-top: 10px;
}
#content{
color: #dedede;
letter-spacing: 1px;
height: 330px;
background: url('graphix/stripe.png');
}
#contentmargins{
width: 100%;
overflow: none;
height: 310px;
}
#footer{
position: absolute;
width: 100%;
height: 10px;
text-align: center;
}
#transparent{
background: #000000;
position: absolute;
filter: alpha(opacity=25);
-moz-opacity: .25;
opacity: .25;
}
#bodytext{
background-color: transparent;
align: top;
color: #CCCCCC;
width: 100%;
position: absolute;
line-height: 14px;
padding: 5px;
}
#contentheader{
position: relative;
border-bottom: 1px solid #4d4d4d;
width: 100%;
height: 10px;
background: url('graphix/menubg.png');
}
imagefree
It doesnt give the complete idea. Share the html document also. With this, i cant understand what would the problem be.
coreymanshack
imagefree wrote:
It doesnt give the complete idea. Share the html document also. With this, i cant understand what would the problem be.


Ooops, I ment to say click my sig.
{name here}
The most common reasons I've run into when I'm having problems with overflowing divs are:
1. Unsmart use of px padding with liquid designs
2. Unsmart use of px margins with liquid designs
3. Fixing the height of things which can grow to a lot of content.
4. Bad CSS techniques when positioning the wrapper

Rather than positioning all these elements absolute like you've done, why don't you enclose the entire design within a wrapper so the measurments only need to be done once and your site is liquid both horizontally and vertically? No, wait. I see that you do have a wrapper. It's just not stated as wrapper, and that wrapper isn't positioned right.
Code:

#wrapper {
    position: absolute;
    width: 50%;
    left: 25%;
    top: 0px;
}

Just an example of how you could align a div to the center on a browser so that no errors occur on any generally CSS compliant browser.

You also use excess use of position: relative where you don't even use left: or top:, thus defeating the purpose of doing so.
In menu you specify the right: attribute which doesn't even exist without margin- or padding-.
You excessively cap the height in which everything can grow.
align:top doesn't exist. vertical-align: top does. text-align: top doesn't either - that's for horizontal measurements. Plus, vertical align doesn't work in the first place unless you're using tables or monkeying with images. It doesn't work on divs...or spans...or any other tag for that matter with the exceptions of img and table on a W3C compliant browser.
#main uses margin:0 auto. Specify one value or it will misrender.

Those are all the mistakes I found in your CSS file. As for your HTML, you drift in an out from closing tags with the proper HTML > and the proper XHTML />. Stick with one, and put in an HTML 4 doctype on the document since that seems to dominate over your XHTML. Otherwise the browser might detect several errors in your document depending on how it renders (by default html could be set to read as XHTML or a dated version of HTML, so it might be good to state your standard).
coreymanshack
{name here} wrote:
The most common reasons I've run into when I'm having problems with overflowing divs are:
1. Unsmart use of px padding with liquid designs
2. Unsmart use of px margins with liquid designs
3. Fixing the height of things which can grow to a lot of content.
4. Bad CSS techniques when positioning the wrapper

Rather than positioning all these elements absolute like you've done, why don't you enclose the entire design within a wrapper so the measurments only need to be done once and your site is liquid both horizontally and vertically? No, wait. I see that you do have a wrapper. It's just not stated as wrapper, and that wrapper isn't positioned right.
Code:

#wrapper {
    position: absolute;
    width: 50%;
    left: 25%;
    top: 0px;
}

Just an example of how you could align a div to the center on a browser so that no errors occur on any generally CSS compliant browser.

You also use excess use of position: relative where you don't even use left: or top:, thus defeating the purpose of doing so.
In menu you specify the right: attribute which doesn't even exist without margin- or padding-.
You excessively cap the height in which everything can grow.
align:top doesn't exist. vertical-align: top does. text-align: top doesn't either - that's for horizontal measurements. Plus, vertical align doesn't work in the first place unless you're using tables or monkeying with images. It doesn't work on divs...or spans...or any other tag for that matter with the exceptions of img and table on a W3C compliant browser.
#main uses margin:0 auto. Specify one value or it will misrender.

Those are all the mistakes I found in your CSS file. As for your HTML, you drift in an out from closing tags with the proper HTML > and the proper XHTML />. Stick with one, and put in an HTML 4 doctype on the document since that seems to dominate over your XHTML. Otherwise the browser might detect several errors in your document depending on how it renders (by default html could be set to read as XHTML or a dated version of HTML, so it might be good to state your standard).


Ok let me address these errors one by one that you have posted.

1: Excessive Use of Position Relative - This defines that the item is a block element or something like that. Some attributes applied to div's don't work on non-block elements. Please correct me here, I know I just said something wrong.

2. #menu right attribute. As you can see, I positioned this element absolute, thus saying right: 0px; makes it align to the right of the div instead of the standard left.

3. I excessively cap the height of the elements because I don't want any downward overflow, I want the height to be fixed. Any suggestions here?

4. align: top; is only depriciated, it does exist. I do not know how to use the clear attribute to do what I want, The black shadow div is seperate from the text div, align: top; makes the text div appear on top of the black shadow div. Do you know how I can use the clear attribute to do this?

5. text-align: top; I can't seem to find where I used this attribute.

6. margin: 0 auto; You are completely wrong on your accusation here, please research this.

Thank you for thoroughly examining my css and being truthfull. Although I don't think any of these "errors" would cause a whole div overflow where it isn't supposed to.

About the tags, there are certain tags in the xhtml standard that don't need to be expliclty closed, like <body/> is wrong.

<img /> is not. <br /> is not <select></select> is not. I tend to make my document xhtml strict when I test it against w3c's standards.
{name here}
Quote:
1: Excessive Use of Position Relative - This defines that the item is a block element or something like that. Some attributes applied to div's don't work on non-block elements. Please correct me here, I know I just said something wrong.

If it's width is 100% it's not going to be block for sure. All relative does is allow you to move it slightly to the right or left if needed from the position it's currently in by using the left: and top: tags.

Quote:
2. #menu right attribute. As you can see, I positioned this element absolute, thus saying right: 0px; makes it align to the right of the div instead of the standard left.


Quote:
3. I excessively cap the height of the elements because I don't want any downward overflow, I want the height to be fixed. Any suggestions here?

Personally I think that fixing the horizontal is quite stupid because then your content will either overflow down or force your content into a tiny scroll box if you choose to use overflow:auto. It's not really friendly unless you work with larger heights than 300px.

Quote:
4. align: top; is only depriciated, it does exist. I do not know how to use the clear attribute to do what I want, The black shadow div is seperate from the text div, align: top; makes the text div appear on top of the black shadow div. Do you know how I can use the clear attribute to do this?

I believe that z-index is what you want. Setting a div to a lower z-index makes it appear higher, and setting it higher makes it lower that a div with a higher one. That should be less deprecated.

Quote:
5. text-align: top; I can't seem to find where I used this attribute.

Whoops! I glazed over this one. I might have mistaken a margin-top: for something else.

Quote:
6. margin: 0 auto; You are completely wrong on your accusation here, please research this.

It's something I don't see often, so I guess I am wrong. I think I mistook this for some IE hack.

Quote:

About the tags, there are certain tags in the xhtml standard that don't need to be expliclty closed, like <body/> is wrong.

<img /> is not. <br /> is not <select></select> is not. I tend to make my document xhtml strict when I test it against w3c's standards.

I know this, actually. The problem with your document is you have no doctype, so it renders by default to some HTML standard and not XHTML, making it erronous. You fade in and out from using <img /> and <img> and some other one attribute tags. Your page might even render improperly if you're not using the right standard.

For example, HTML 4 has margins around the page while HTML 3 does not. XHTML Transitional doesn't have this margin either, but it requires you to use the cleaner method of no caps in tags and closure of single tags.
coreymanshack
{name here} wrote:

Quote:
3. I excessively cap the height of the elements because I don't want any downward overflow, I want the height to be fixed. Any suggestions here?

Personally I think that fixing the horizontal is quite stupid because then your content will either overflow down or force your content into a tiny scroll box if you choose to use overflow:auto. It's not really friendly unless you work with larger heights than 300px.

I'm not planning on stacking tons of content in to make scrollbars, that's my point in setting a fixed height.

{name here} wrote:

Quote:
4. align: top; is only depriciated, it does exist. I do not know how to use the clear attribute to do what I want, The black shadow div is seperate from the text div, align: top; makes the text div appear on top of the black shadow div. Do you know how I can use the clear attribute to do this?

I believe that z-index is what you want. Setting a div to a lower z-index makes it appear higher, and setting it higher makes it lower that a div with a higher one. That should be less deprecated.


No, no, no z-index is NOT what i'm looking for, the stacking of the elements is right. Pm me when u and I are both on and i'll show you what happens when I take out align:top;

{name here} wrote:

Quote:

About the tags, there are certain tags in the xhtml standard that don't need to be expliclty closed, like <body/> is wrong.

<img /> is not. <br /> is not <select></select> is not. I tend to make my document xhtml strict when I test it against w3c's standards.

I know this, actually. The problem with your document is you have no doctype, so it renders by default to some HTML standard and not XHTML, making it erronous. You fade in and out from using <img /> and <img> and some other one attribute tags. Your page might even render improperly if you're not using the right standard.

For example, HTML 4 has margins around the page while HTML 3 does not. XHTML Transitional doesn't have this margin either, but it requires you to use the cleaner method of no caps in tags and closure of single tags.


Once again, I make it xhtml strict when I test it against w3c standards.


I still have yet to find out the problem.
{name here}
Quote:
I'm not planning on stacking tons of content in to make scrollbars, that's my point in setting a fixed height.

It's not going to be much of a site then, will it?

Quote:
No, no, no z-index is NOT what i'm looking for, the stacking of the elements is right. Pm me when u and I are both on and i'll show you what happens when I take out align:top;

Why don't you make a copy of the HTML and CSS file, and put it on your site as a different name, then PM me with the link to it? This will make it easier for both of us.

Quote:
Once again, I make it xhtml strict when I test it against w3c standards.


I still have yet to find out the problem.

1. You have NO DOCTYPE! It's interpereted as HTML by the browser because it does not specify whether you are using HTML or XHTML and what standard you are exactly using!
2.
Code:
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>

That's HTML, not XHTML because (1) It's capitalized. (2) Contents of attributes are not properly enclosed with quotation marks in lowercase (3) You do not properly close the tag.

3.
Code:

<img src="graphix/icons/home.gif" alt="Home">
<img src="graphix/icons/portfolio.gif" alt="Portfolio">
<img src="graphix/icons/order.gif" alt="Order">
<img src="graphix/icons/contact.gif" alt="Contact">

Absolutely none of these gifs actually close properly.

4. http://validator.w3.org/check?uri=http%3A%2F%2Fwww.xsquareddev.net%2Fmain.html&charset=%28detect+automatically%29&doctype=Inline&group=0
It completely fails validation because you mix UTF with ASCII.
coreymanshack
{name here} wrote:
Quote:
I'm not planning on stacking tons of content in to make scrollbars, that's my point in setting a fixed height.

It's not going to be much of a site then, will it?

Quote:
No, no, no z-index is NOT what i'm looking for, the stacking of the elements is right. Pm me when u and I are both on and i'll show you what happens when I take out align:top;

Why don't you make a copy of the HTML and CSS file, and put it on your site as a different name, then PM me with the link to it? This will make it easier for both of us.

Quote:
Once again, I make it xhtml strict when I test it against w3c standards.


I still have yet to find out the problem.

1. You have NO DOCTYPE! It's interpereted as HTML by the browser because it does not specify whether you are using HTML or XHTML and what standard you are exactly using!
2.
Code:
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>

That's HTML, not XHTML because (1) It's capitalized. (2) Contents of attributes are not properly enclosed with quotation marks in lowercase (3) You do not properly close the tag.

3.
Code:

<img src="graphix/icons/home.gif" alt="Home">
<img src="graphix/icons/portfolio.gif" alt="Portfolio">
<img src="graphix/icons/order.gif" alt="Order">
<img src="graphix/icons/contact.gif" alt="Contact">

Absolutely none of these gifs actually close properly.

4. http://validator.w3.org/check?uri=http%3A%2F%2Fwww.xsquareddev.net%2Fmain.html&charset=%28detect+automatically%29&doctype=Inline&group=0
It completely fails validation because you mix UTF with ASCII.


How many times do I have to say it? I make it XHTML compliant when I check it against their standards. I code however the heck I want when the website is in draft.

It's going to serve a general purpose of selling custom php coding. You don't need tons of content for that.



I figured out the problem in the meantime, it was with the padding in #bodytext, but you were to busy spotting "errors" in my document rather than actually trying to find the problem, This wasn't a spot errors in my document post, but thanks anyway!

My document is now xhtml 1.0 strict valid, just for you.
Related topics
The Unofficial Jokes Thread
Why use IE?
Text stecked to the mouse
A script for Loading
Firefox 1.0.7 Released
Spider-Web Link Tutorial
What song makes you sad?
use frames in forum
Printers and Photopaper
Naruto Gate
Help needed with Javascript and overflow
Ajax Stack Overflow IE
Buffer overflow
overflow:auto not working on mobile devices
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.