•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 391,560 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,729 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 1900 | Replies: 6
 |
•
•
Join Date: Sep 2007
Location: North Bay Ontario
Posts: 174
Reputation: 
Rep Power: 1
Solved Threads: 20
Junior Poster
I've got a weird situation where a content div I have defined is truncated in IE if it is longer than the browser window. In other words, if the page doesn't fit in the window, it gets truncated just prior to the border of the div.
.content-left is a navigation panel and .content-right is for content. If that content requires a vertical scroll bar, the page does not scroll enough to view the border at the bottom.
.column-left
{
font-family:verdana,helvetica,arial;
color: #000;
float:left;
width:225px;
background-color:#9CCFC8;
position:absolute;
margin:0px 0px 0px 0px;
padding:15px 0px 15px 15px;
border: 3px solid #000;
}
.column-right
{
float:left;
font-family:verdana,helvetica,arial;
color: #000;
background-color:#9C9;
border: 3px solid #000;
margin-left:250px;
position:absolute;
text-align:left;
width:490px;
padding:10px;
}.content-left is a navigation panel and .content-right is for content. If that content requires a vertical scroll bar, the page does not scroll enough to view the border at the bottom.
Amer Neely - Web Mechanic
"Others make web sites. We make web sites work!"
"Others make web sites. We make web sites work!"
•
•
Join Date: Jul 2006
Posts: 137
Reputation:
Rep Power: 3
Solved Threads: 7
Junior Poster
1-Don't use classes for a unique element in the page which is not used more than once like content and/or navigation panel DIVs.
2-Don't use IE6 to test your CSS any more if you do!
3-Use Firefox 2! [to get better results]
4-Change your code like this:
and then use something like this in your HTML source file:
Good luck.
2-Don't use IE6 to test your CSS any more if you do!
3-Use Firefox 2! [to get better results]
4-Change your code like this:
•
•
•
•
#column-left { font-family:verdana,helvetica,arial; color: #000; float:left; width:225px; background-color:#9CCFC8; position:absolute; margin:0px 0px 0px 0px; padding:15px 0px 15px 15px; border: 3px solid #000; } #column-right { float:left; font-family:verdana,helvetica,arial; color: #000; background-color:#9C9; border: 3px solid #000; margin-left:250px; position:absolute; text-align:left; width:490px; padding:10px; }
and then use something like this in your HTML source file:
e.g. <div id="column-left"></div>
Good luck.
•
•
Join Date: Sep 2007
Location: North Bay Ontario
Posts: 174
Reputation:
Rep Power: 1
Solved Threads: 20
Junior Poster
•
•
•
•
Originally Posted by mostafadotnet 
1-Don't use classes for a unique element in the page which is not used more than once like content and/or navigation panel DIVs.
2-Don't use IE6 to test your CSS any more if you do!
3-Use Firefox 2! [to get better results]
4-Change your code like this:
and then use something like this in your HTML source file:
e.g. <div id="column-left"></div>
Good luck.
Thanks for the reply. I tried your suggestion about using ID instead of classes, but it still refuses to show the bottom border of the DIV.
I am trying to make the site as compatible as possible for both IE and FF, at 800x600 and 1024x768. All is good except for this one glitch.
Amer Neely - Web Mechanic
"Others make web sites. We make web sites work!"
"Others make web sites. We make web sites work!"
•
•
Join Date: Jan 2007
Posts: 2,510
Reputation:
Rep Power: 7
Solved Threads: 103
There is nothing wrong with using classes to address element styles.
Some elitists in the literary world want to force their ideas of "proper use" on the rest of us. They just want to make it harder for the rest of us with their "politically correct" ways. They want us to divide the web page into sections (similar to the sections in Word documents), with one id for each section. That works OK for books and newspapers, but it makes an awful mess of websites intended for demonstration pages, galleries, or advertising, with much needless duplication of styles. I think their purpose is to get rid of advertising.
It has nothing to do with your problem.
Use class for styles if you don't know whether it will be single use or multiple use, if you use overlapping styles, or if you use a common stylesheet.
My rule for simplification is:
- Use classes for styles
- Use ids for JavaScript addressing
Your problem may be that the browser is defaulting to not showing overflow. Try adding the style:
overflow: scroll;
Some elitists in the literary world want to force their ideas of "proper use" on the rest of us. They just want to make it harder for the rest of us with their "politically correct" ways. They want us to divide the web page into sections (similar to the sections in Word documents), with one id for each section. That works OK for books and newspapers, but it makes an awful mess of websites intended for demonstration pages, galleries, or advertising, with much needless duplication of styles. I think their purpose is to get rid of advertising.
It has nothing to do with your problem.
Use class for styles if you don't know whether it will be single use or multiple use, if you use overlapping styles, or if you use a common stylesheet.
My rule for simplification is:
- Use classes for styles
- Use ids for JavaScript addressing
Your problem may be that the browser is defaulting to not showing overflow. Try adding the style:
overflow: scroll;
Last edited by MidiMagic : Oct 28th, 2007 at 4:18 pm.
Daylight-saving time uses more gasoline
•
•
Join Date: Sep 2007
Location: North Bay Ontario
Posts: 174
Reputation:
Rep Power: 1
Solved Threads: 20
Junior Poster
I agree with you about some of the intentions of others.But your suggestion didn't work either. It DID add a scroll bar in the div, and I was able to view the whole page, bottom border and all.
But when I applied it to another page, it broke the content flow.
Amer Neely - Web Mechanic
"Others make web sites. We make web sites work!"
"Others make web sites. We make web sites work!"
•
•
Join Date: Jan 2007
Posts: 2,510
Reputation:
Rep Power: 7
Solved Threads: 103
That's the hazard of the div. If it won't fit nicely in the available space, it shoulders stuff aside.
You have to make sure the div, its contents, and any margin, border, and padding ALL fit in the available space. And remember that browsers on computers with different screen resolutions have different available space.
Compounding the problem, FF puts the the margins, borders, and padding outside the defined size of the div. IE crams them inside it.
You have to make sure the div, its contents, and any margin, border, and padding ALL fit in the available space. And remember that browsers on computers with different screen resolutions have different available space.
Compounding the problem, FF puts the the margins, borders, and padding outside the defined size of the div. IE crams them inside it.
Daylight-saving time uses more gasoline
•
•
Join Date: Sep 2007
Location: North Bay Ontario
Posts: 174
Reputation:
Rep Power: 1
Solved Threads: 20
Junior Poster
Thanks for the reply. Not being a designer I wasn't aware of the details of calculating div widths by IE. Typical though. I'll redo the page with that in mind and let you know how it worked out.
Amer Neely - Web Mechanic
"Others make web sites. We make web sites work!"
"Others make web sites. We make web sites work!"
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
Linear Mode
- Dynamicallu Resizeing IFRAME based on content (JavaScript / DHTML / AJAX)
- I need to grab the height of a div. (JavaScript / DHTML / AJAX)
- Getting the height and width of content fitting DIV element. (JavaScript / DHTML / AJAX)
- Problem with div structure (HTML and CSS)
- Center Div in Browser (JavaScript / DHTML / AJAX)
- Need to Scroll to div element (JavaScript / DHTML / AJAX)
- adjacent tables split up with content (HTML and CSS)
- div inside another div , actually over the bottom slice (HTML and CSS)
- div comes vertical when i need it horizontal sideby side as columns (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: internet explorer rollover button troubles
- Next Thread: how can i used html and css to design website and i need u to help me start design
