CSS and DIV, trouble overflowing "correctly"

7,872 Expert 4TB

I cannot seem to achieve what I want here. It's not a FF vs IE thing because I cannot get it in either.

The heirarchy of my page is effectively:

Expand|Select|Wrap|Line Numbers

 
<center>

    <div id="backing" >

        <center>

            <div id="PageAnnouncement" class="PageAnnouncement"  ></div> 

        </center>

    </div>

</center>

The goal is to make "PageAnnouncement":
-centered (done: embeded center tag...not sure if that passes standards)
-occupy 90% of the width-space of the "backing" div (done: width=80% in style)

The trouble spot mainly comes in with:
-ONLY overflow downwards and not side-side. I would effectively like the DIV tag to perform some sort of "wrap". I am ok with a scrollbar, but only if it scrolls up/down, not left/right. Even if there is no scrollbar and it grows unbounded downwards, I would be ok with it.

Does anyone have any thoughts on this?
Currently, the style for that DIV is this:

Expand|Select|Wrap|Line Numbers

 
padding: 2px;

width: 90%; 

overflow: auto; 

border-color: Red; 

border-width: 3px;

border-style: solid; 

border-collapse: collapse; 

background-color:Yellow; 

font-size: 14px; 

font-weight: normal;

I even debated changing that DIV to a readonly textarea, but I need to be able to put basic HTML inside the DIV, plus FF and IE treated textwrapping differently in textareas.

Mar 27 '08 #1

Subscribe Post Reply

1846

drhowarddrfine

7,435

Expert 4TB

Is this what you mean?
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div{
margin:0 auto;
padding:2px;
border: 3px solid red;
border-collapse:collapse;
background-color:yellow;
font-size:14px;
}
#backing{
}

#PageAnnouncement{
width: 90%;
overflow: auto;
}
</style>
</head>
<body>
<div id="backing" >
<div id="PageAnnouncement" class="PageAnnouncement">
<p>This is a testThe goal is to make "PageAnnouncement":
-centered (done: embeded center tag...not sure if that passes standards)
-occupy 90% of the width-space of the "backing" div (done: width=80% in style)

The trouble spot mainly comes in with:
-ONLY overflow downwards and not side-side. I would effectively like the DIV tag to perform some sort of "wrap". I am ok with a scrollbar, but only if it scrolls up/down, not left/right. Even if there is no scrollbar and it grows unbounded downwards, I would be ok with it.

Does anyone have any thoughts on this?
Currently, the style for that DIV is this:</p>
</div>
</div>
</body>
</html>
[/HTML]

Mar 27 '08 #2

Plater

7,872

Expert 4TB

Hmm that does produce the appearance of correctness in that situation.
However the outlying DIV contains a bit more pieces and already has it's own CSS. I suppose I should have though to include that. I wrote the CSS for it a long time ago however.

Expand|Select|Wrap|Line Numbers

 
#backing

{

   z-index: 100;

   position: static;

   display: block;

   width: 760px;

   background-color: #faebd8;

   text-align:left; 

}

So when I tried to "combine" them I came up with this:

Expand|Select|Wrap|Line Numbers

 
#backing

{

   z-index: 100;

   position: static;

   display: block;

   width: 760px;

   background-color: #faebd8;

   text-align:left; 

}
 
#PageAnnouncement

{

   margin:0 auto;

   padding:2px;

   border: 3px solid red;

   border-collapse:collapse;

   background-color:yellow;

   font-size:14px;

   width: 90%; 

   overflow: auto; 

}

Which didn't appear to change at all from my previous attempts.

Mar 27 '08 #3

drhowarddrfine

7,435

Expert 4TB

Didn't notice I left 'overflow:auto' in there. I don't understand what its purpose is for you. I think I don't understand what you are looking for now.

Mar 27 '08 #4

Plater

7,872

Expert 4TB

I am attaching two images, one in FF and one in IE.
These are with overflow not specified (nothing about overflow entered), but otherwise using the "combined" CSS from earlier.

FF correctly retains the box size, buit does not "wrap" the text and lets it go floating on to the side.
IE keeps the text inside the box, but increases the box's width.

I want the Box's 90% width to stay like in FF, but the text to cause it to grow down (and not to the side, if IE made it grow down instead of out, that would be what i want)

EDIT: the dimensions limit me from uploading (hold on)

http://www.rxms.com/images/webimage/FF.JPG
http://www.rxms.com/images/webimage/IE.JPG

Mar 27 '08 #5

Plater

7,872

Expert 4TB

After stopping and looking at my pictures I think I realized my problem.
My test was bad, I am using a non-breaking stream of characters....

Mar 27 '08 #6

drhowarddrfine

7,435

Expert 4TB

Yep. Non-breaking characters will cause that.

Mar 27 '08 #7

Plater

7,872

Expert 4TB

Yeah, so after all that what I had to start with was correct.
Some days I should just never leave the manufacturing zone.

Mar 27 '08 #8

by: Stefan Gangefors | last post by:

I'm trying to figure out what I'm doing wrong when using ereg(). This is my regexp: ereg("^]$", "]"); and that does'n work, but this does: ereg("^$", "[");

PHP

Microsoft not content with "dissing" just the Classic VB Developer Army....

by: Jim Hubbard | last post by:

It seems that Microsoft not only does not need the classic Visual Basic developer army (the largest army of developers the world has ever seen), but now they don't need ANY Windows developer at a...

.NET Framework

What is the largest "auto number" that can exist in an Access database? How to reset autonumber to start at 1?

by: John Baker | last post by:

Hi: I know this is a strange question, but I have inherited a system where files are copied and records re auto numbered (as an index field) )frequently, and I am wondering how high the number...

Microsoft Access / VBA

Control in Master Page.. "Name lblStatus is not declared"

by: Monty | last post by:

Hello, I have a label control in my master page like this: <asp:Label ID=lblStatusMessage runat="server"></asp:Label> When I reference the control in my code-behind I get this error "Name...

ASP.NET

modified "histogram" exercise from K&R2

by: arnuld | last post by:

this is a programme that counts the "lengths" of each word and then prints that many of stars(*) on the output . it is a modified form of K&R2 exercise 1-13. the programme runs without any...

C / C++

Having trouble use "While"

by: Ajm113 | last post by:

Ok I got my stuff to split, but how can I have the while work correctly so it will show all of the arrays correctly? Like if you where using Mysql to retrieve data. But this time it is retrieving all...

PHP

Dynamically and "correctly" allocating memory

by: filia&sofia | last post by:

For example I would like to dynamically allocate memory for linked list (or complex struct etc.) that has not maximum number of elements. All that I can remember is that I have to have allocated...

C / C++

C# Windows App - "Global" shared variable

by: sap0321 | last post by:

This should be kindergarten stuff but for some reason I am having trouble with it. I do 99.9% web programming and this is the first windows app i've done in years - probably the first ever in C# ......

.NET Framework

trouble with tinyMCE images

by: matheussousuke | last post by:

Hello, I'm using tiny MCE plugin on my oscommerce and it is inserting my website URL when I use insert image function in the emails. The goal is: Make it send the email with the URL...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

CSS and DIV, trouble overflowing "correctly"

Similar topics