my page looks fine in IE6 / Windows, but when i open it in firefox, its like the divs wont span to hold the content of its child divs...
im in web design 2, but we just got off of frames and im pretty much teaching myself this so any help ill appreciate...
the page is: maxima.accessjdm.com/threads.php
or any page, thats just an example... you can look at in IE to see what i want it to look like...Sounds like you are floating DIVs. In short: Firefox is right and IE is wrong. See this site for a whole list of IE CSS rendering bugs: <!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer.html">http://www.positioniseverything.net/explorer.html</a><!-- m -->
Also read up on how floats are supposed to work at W3.org: <!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visuren.html#floatsthanks">http://www.w3.org/TR/CSS21/visuren.html#floatsthanks</a><!-- m --> for the sites... but i've never been able to comprehend w3...
i made a sample page to better explain what im talking about...
CLICK HERE FOR THE PAGE... (<!-- m --><a class="postlink" href="http://accessjdm.com/test.html">http://accessjdm.com/test.html</a><!-- m -->)
how to i get the parent div to vertically span around the child div?I see what you mean.
In IE the parent div expands with the child div.
It does not in Netscape. The child div extends below the bottom border of the parent div.correctamundo... i didnt really find anything to help me on w3... it was probably there, but everything on that site is encoded into another language...
maybe there is a simpler site to help me? i cant seem to find any...I'm not sure if IE or Netscape is displaying this the correct way but (and this is the first time I think I've ever said this) I like the way IE is displaying it better (eeeww, now I feel dirty).
You would think the parent div would expand to contain any content within it.OK. A quick how-to for floats is in order. And I agree, the W3 is sometimes a bit too... wordy.
There are four basic levels to a Web page.
1. Document Flow
2. Floated elements (block level by default)
3. Inline Elements like text, <b>, <img>, etc.
4. Unfloated block-level elements
They are listed as what "appears" closest to the user when viewed from a Web browser.
Floated elements do not exist in layer 4. They don't take up any space there at all. Only other unfloated block elements and inline elements will stretch the dimensions of layer 4.
Inline elements will wrap around the edges of floated elements.
Other floated elements within the same document flow will butt up against each other. Floated elements will also wholly contain any floated element inside it.
Netscape and Firefox are correct. Internet Explorer is wrong. Internet Explorer (not according to standard) will stretch a non-floated element to contain any floated element inside of it. For example:
<div id="nonFloatedDiv">
<div id="floatedDiv"></div>
</div>
Lets just say that the floatedDiv is 100 pixels tall and is floated left. Internet Explorer will (incorrectly) stretch nonFloatedDiv to 100 pixels tall. Netscape, Mozilla, Firefox, Safari and Internet Explorer 5.x-Mac will make the nonFloatedDiv's height zero pixels. Opera as of version 7.something will encompass floats like Internet Explorer does.
That, in a nut shell is the CSS float model.i see i see, but how would i get the non-floated div to encapsulate the floated divs content? or can i?
so the actual non-floated div is in a level farther away from the user than the floated div with the content in it, so in a sense its not "inside" the non-floated div at all?Originally posted by JDM71488
so the actual non-floated div is in a level farther away from the user than the floated div with the content in it, so in a sense its not "inside" the non-floated div at all?
That's exactly it!
The floated DIV is positioned with respect to the non-floated DIV, but doesn't exist in the non-floated DIV. In addition, any inline content in the non-floated DIV will flow around the edges of the floated DIV, which makes it seem like the floated DIV does exist in the non-floated DIV.
Now to get the "containing" DIV to encapsulate the floated DIV, place another element below the floated DIV in your code and apply the clear: both; property and value to that element.
.
.
.
<style type="text/css" media="screen">
<!--
#nonFloatedDIV {
background-color: #000;
}
#floatedDIV {
background-color: #f00;
float: left;
height: 100px;
width: 100px;
}
.spacer {
clear: both;
height: 1px;
overflow: hidden;
}
-->
</style>
</head>
<body>
<div id="nonFloatedDIV">
<div id="floatedDIV"> </div>
<div class="spacer"> </div>
</div>you are the man!!! so by adding the .spacer which is non-floated, it is kind of making everything go inside the first parent div?
therefore id code like this:
<div id="nonFloatedDIV">
<div id="floatedDIV">
vertical col
</div>
page content
<div class="spacer">nbsp</div>
whatever else underneath the spacer...
</div>I have a webpage with tabs. As the user clicks on the tabs it brings up a different div. But when I click on it the div (instead of showing up right under the tabs show up further down the web page). What is the best way to design the webpage for something like this?
BTW..I am creating the WebPage in Lotus Notes? So the traditional methods of designing webpages are thrown out the window with the bath water.
Um. Don't design your page in Lotus Notes. For your sake, and your sanity's sake. Don't design your page in Lotus notes. Instead, Download HTML Kit (<!-- m --><a class="postlink" href="http://www.chami.com/html-kit/">http://www.chami.com/html-kit/</a><!-- m -->).Unfortunately I have no choice since my employer refuses to leave this platform any time soon. So I must eat from the entree' served me...so to speak.
What is the proper way to set up a page of this nature?Bummer about Lotus Notes I at least hope you have access to the HTML source code. But go ahead and start a new thread and give us more specifics, and we can take it from there. Also, be sure to include the HTML and CSS for the page in question.
im in web design 2, but we just got off of frames and im pretty much teaching myself this so any help ill appreciate...
the page is: maxima.accessjdm.com/threads.php
or any page, thats just an example... you can look at in IE to see what i want it to look like...Sounds like you are floating DIVs. In short: Firefox is right and IE is wrong. See this site for a whole list of IE CSS rendering bugs: <!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer.html">http://www.positioniseverything.net/explorer.html</a><!-- m -->
Also read up on how floats are supposed to work at W3.org: <!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visuren.html#floatsthanks">http://www.w3.org/TR/CSS21/visuren.html#floatsthanks</a><!-- m --> for the sites... but i've never been able to comprehend w3...
i made a sample page to better explain what im talking about...
CLICK HERE FOR THE PAGE... (<!-- m --><a class="postlink" href="http://accessjdm.com/test.html">http://accessjdm.com/test.html</a><!-- m -->)
how to i get the parent div to vertically span around the child div?I see what you mean.
In IE the parent div expands with the child div.
It does not in Netscape. The child div extends below the bottom border of the parent div.correctamundo... i didnt really find anything to help me on w3... it was probably there, but everything on that site is encoded into another language...
maybe there is a simpler site to help me? i cant seem to find any...I'm not sure if IE or Netscape is displaying this the correct way but (and this is the first time I think I've ever said this) I like the way IE is displaying it better (eeeww, now I feel dirty).
You would think the parent div would expand to contain any content within it.OK. A quick how-to for floats is in order. And I agree, the W3 is sometimes a bit too... wordy.
There are four basic levels to a Web page.
1. Document Flow
2. Floated elements (block level by default)
3. Inline Elements like text, <b>, <img>, etc.
4. Unfloated block-level elements
They are listed as what "appears" closest to the user when viewed from a Web browser.
Floated elements do not exist in layer 4. They don't take up any space there at all. Only other unfloated block elements and inline elements will stretch the dimensions of layer 4.
Inline elements will wrap around the edges of floated elements.
Other floated elements within the same document flow will butt up against each other. Floated elements will also wholly contain any floated element inside it.
Netscape and Firefox are correct. Internet Explorer is wrong. Internet Explorer (not according to standard) will stretch a non-floated element to contain any floated element inside of it. For example:
<div id="nonFloatedDiv">
<div id="floatedDiv"></div>
</div>
Lets just say that the floatedDiv is 100 pixels tall and is floated left. Internet Explorer will (incorrectly) stretch nonFloatedDiv to 100 pixels tall. Netscape, Mozilla, Firefox, Safari and Internet Explorer 5.x-Mac will make the nonFloatedDiv's height zero pixels. Opera as of version 7.something will encompass floats like Internet Explorer does.
That, in a nut shell is the CSS float model.i see i see, but how would i get the non-floated div to encapsulate the floated divs content? or can i?
so the actual non-floated div is in a level farther away from the user than the floated div with the content in it, so in a sense its not "inside" the non-floated div at all?
Originally posted by JDM71488 so the actual non-floated div is in a level farther away from the user than the floated div with the content in it, so in a sense its not "inside" the non-floated div at all?
That's exactly it!
The floated DIV is positioned with respect to the non-floated DIV, but doesn't exist in the non-floated DIV. In addition, any inline content in the non-floated DIV will flow around the edges of the floated DIV, which makes it seem like the floated DIV does exist in the non-floated DIV.Now to get the "containing" DIV to encapsulate the floated DIV, place another element below the floated DIV in your code and apply the clear: both; property and value to that element.
.
.
.
<style type="text/css" media="screen">
<!--
#nonFloatedDIV {
background-color: #000;
}
#floatedDIV {
background-color: #f00;
float: left;
height: 100px;
width: 100px;
}
.spacer {
clear: both;
height: 1px;
overflow: hidden;
}
-->
</style>
</head>
<body>
<div id="nonFloatedDIV">
<div id="floatedDIV"> </div>
<div class="spacer"> </div>
</div>you are the man!!! so by adding the .spacer which is non-floated, it is kind of making everything go inside the first parent div?
therefore id code like this:
<div id="nonFloatedDIV">
<div id="floatedDIV">
vertical col
</div>
page content
<div class="spacer">nbsp</div>
whatever else underneath the spacer...
</div>I have a webpage with tabs. As the user clicks on the tabs it brings up a different div. But when I click on it the div (instead of showing up right under the tabs show up further down the web page). What is the best way to design the webpage for something like this?
BTW..I am creating the WebPage in Lotus Notes? So the traditional methods of designing webpages are thrown out the window with the bath water.
Um. Don't design your page in Lotus Notes. For your sake, and your sanity's sake. Don't design your page in Lotus notes. Instead, Download HTML Kit (<!-- m --><a class="postlink" href="http://www.chami.com/html-kit/">http://www.chami.com/html-kit/</a><!-- m -->).Unfortunately I have no choice since my employer refuses to leave this platform any time soon. So I must eat from the entree' served me...so to speak. What is the proper way to set up a page of this nature?Bummer about Lotus Notes
I at least hope you have access to the HTML source code. But go ahead and start a new thread and give us more specifics, and we can take it from there. Also, be sure to include the HTML and CSS for the page in question.