 TheServant  1,168
Recognized Expert Top Contributor
I am trying to re-do everything on my site so it is all neat and organized code, which includes re-doing my css. I have realized a problem that can be overcome in other ways but it would be easier if I could do it here.
Here is some of my css: - body {
-
font: 12px Verdana, Arial, Helvetica, sans-serif;
-
background: #000000 url(top_bg.png) repeat-x;
-
height: 100%;
-
width: 1024px;
-
margin: 0 auto;
-
padding: 0;
-
behavior: url("../csshover3.htc");
-
}
-
#header {
-
width: 100%;
-
margin: 0;
-
padding: 0;
-
background: silver;
-
text-align: center;
-
}
-
#content_wrapper {
-
height: 100%;
-
width: 1000px;
-
margin: 20px 0;
-
padding: 10px;
-
border: gray groove 2px;
-
background: silver;
-
display: block;
-
overflow: hidden;
-
}
-
#left_menu {
-
height: 100%;
-
width: 150px;
-
float: left;
-
padding: 5px;
-
border: black groove 2px;
-
}
-
#content {
-
width: 668px;
-
float: left;
-
padding: 0;
-
border: black groove 2px;
-
}
-
#footer {
-
width: 1000px;
-
margin: 0;
-
padding: 5px 12px;
-
background: silver;
-
}
Firstly, my div's (#left_menu and #content) are not 100% height. Everywhere just says make sure the body and parent div is height 100% and all is good, however this is not working in my case.
Second, I have noticed a very annoying problem which is if I have padding / borders / margins and use width 100% / height 100% it simply adds it on to the body width / height. Let me explain: The body is 1024px. If I have the #header width as 100% it works fine. If I add a 2px border it is 1028px wide (100% + 4px). Is there a way to have the 100% include the 2px, or do you have to do nested div statements?
Thanks for your help.
14 4141 
So body is 100% of what? You need to set html to 100%, also.
'width' is the width of the content. Borders, margin and padding are outside the width.
TheServant 1,168
Recognized Expert Top Contributor
OK, so there is no easy way to have one width for the body, or html, and the rest is done automatically when the rest includes borders, padding and margins?
And just a quick note: The editor I am using (phpDesigner) doesn't recognise html as a css class like it does body? Is html a normal class to define? And besides using minheight (I can never get it to work in IE) can something else be done to height to use it like that?
I just set html,body{heigh t:100%} in my css. Originally, IE would not allow setting styles on <html> but I think that's fixed in IE7.
Up through IE6, min-height did not work and IE treated height as min-height. But that's IE for you. IE7 still screws it up when it's combined with height.
Google for Diaz min-height hack.
TheServant 1,168
Recognized Expert Top Contributor
Thanks for your help, I will have a look.
TheServant 1,168
Recognized Expert Top Contributor
Hey, been working on this but it’s constantly got issues: - html,body {
-
min-height: 500px;
-
height: auto !important;
-
height: 100px;
-
width: 1024px;
-
margin: 0 auto;
-
padding: 0;
-
}
-
#content_wrapper {
-
height: 100%;
-
width: 1000px;
-
margin: 10px 0;
-
padding: 10px;
-
border: gray groove 2px;
-
background: silver url(content_bg_dark.gif) repeat;
-
display: block;
-
}
-
#left_menu {
-
height: 100%;
-
width: 150px;
-
float: left;
-
padding: 10px 5px;
-
border: gray groove 2px;
-
text-align: center;
-
background: silver url(menu_bg.png) repeat-y;
-
}
-
#content {
-
height: 100%;
-
width: 648px;
-
float: left;
-
padding: 10px;
-
border: gray groove 2px;
-
background: silver url(content_bg.gif) repeat;
-
}
-
#news_bar {
-
width: 618px;
-
border: gray groove 2px;
-
background: black;
-
color: red;
-
padding: 0 10px;
-
margin: 0 auto;
-
text-align: center;
-
}
-
#inner_content {
-
width: 618px;
-
margin: 10px 0 auto;
-
padding: 5px;
-
text-align: left;
-
}
-
#right_menu {
-
height: 100%;
-
width: 150px;
-
float: right;
-
padding: 10px 5px;
-
border: gray groove 2px;
-
text-align: center;
-
background: silver url(menu_bg.png) repeat-y;
-
}
-
The page is as follows: -
<body>
-
<div id="content_wrapper">
-
<div id="left_menu">
-
<p>Left Menu</p>
-
</div>
-
<div id="content">
-
<div id="news_bar">
-
<p>News Bar</p>
-
</div>
-
<div id="inner_content">
-
<p>Inner Content<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />This is a word.</p>
-
</div>
-
</div>
-
<div id="right_menu">
-
<p>Right Menu</p>
-
</div>
-
</div>
-
</body>
-
Now the problem is: The height fix works very well, provided that the height of the contents (for example #inner_content) does not exceed the height specified in the body definition at the top (100px). If it does, the left and right menu do not size along with the #content, and #content just gets bigger while #left and #right menu stay the same height as the parent definition (100% = 100px) which is what I have told it to do.
Is there a way to have them resize along with the rest of the contents (ie. #content)?
Does all that height stuff have to be in there for any reason? I took it all out and just added 'height:100%'.
TheServant 1,168
Recognized Expert Top Contributor
If you're talking about the body tag then yes. That was Diaz's fix. When I get home I will check it on all browsers to see if it can be just height: 100%;
And if you mean individual tags, then yes the height value must be passed on between parents otherwise it will be defaulted to auto I think and lose the body height. Is my question clear?
TheServant 1,168
Recognized Expert Top Contributor
Just height 100% works fine on all browsers, but I haven't tried IE6. So does anyone have a suggestion as to how I could solve my problem?
You could help solve our problem by putting your page on your server and pointing to it in your post. Trying to guess what you want based on markup and confused CSS is a waste of everyone's time, imo.
Notes on the file. Tested in compliant browsers and IE 6/7. If it ain't what you want, tell us what needs to change.
Please see: http://www.chelseacreekstudio.com/ca/cssd/test-108.html Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: Bruce Rusk |
last post by:
I'm using Stephen Lebans' RTF2 control in a report, and have discovered what
may be a slight bug in it.
I have a lot of non-Western language (Chinese) text in my RTF field, and
such records get sized strangely using the .RTFHeight property of the
control. Specifically, lines of text get cut off the bottom of the control
when I use the code...
|
by: martin |
last post by:
Hi,
I am a web page and a web user control. My web user control is placed in my
web page using the following directive
<%@ Register TagPrefix="uc1" TagName="Header" Src="WebControls/Header.ascx"
%>
The web user control contains the following server controls
|
by: John Lau |
last post by:
Hi,
Is there documentation that talks about the page lifecycle, the lifecycle of
controls on the page, and the rendering of inline code, in a single
document?
Thanks,
John
|
by: Guadala Harry |
last post by:
In an ASCX, I have a Literal control into which I inject a
at runtime.
litInjectedContent.Text = dataClass.GetHTMLSnippetFromDB(someID);
This works great as long as the contains just client-side
HTML, CSS, etc.
What I want to do is somehow insert a *server control* into the , then set the server control's properties at runtime.
|
by: serge calderara |
last post by:
Dear all,
I am new in asp.net and prepare myself for exam
I still have dificulties to understand the difference between server control
and HTML control.
Okey things whcih are clear are the fact that for server control component ,
code is running on the server side.
But if I take as example a Label. I place on a webform an HTM label...
| | |
by: Mike |
last post by:
Hi,
I am strugling with a simple problem which I can't seem to resolve.
I have an asp.net page which contains a server-control (flytreeview,
which is a kind
of a tree to be exact).
The tree is being updated by some other process through remoting.
When the page loads, I init the tree, and in my browser I can see the
initialized tree.
The...
|
by: gsb58 |
last post by:
Hi!
On a form I have a calendar. The form is rezised to 1024x768 (Don't
worry - this is a training case) when loaded.
Now I want to center the calendar on the form so that its edges are
equally far from the upper, right, left and bottom borders of the form.
I understand I must use the location property, am I right?
|
by: paul.hester |
last post by:
Hi all,
I have a custom control with an overridden Render method. Inside this
method I'm rendering each control in its collection using their
RenderControl method. However, I'm running into a problem in this
scenario:
<myprefix:mycontrol runat="server">
<%= SomeVariable %>
</myprefix:mycontrol>
|
by: Rolf Welskes |
last post by:
Hello,
I have an ObjectDataSource which has as business-object a simple array of
strings. No problem.
I have an own (custom) control to which I give the DataSourceId and in the
custom-control so I get the ObjectDataSource. No problem
.....
ObjectDataSource src = .... //is ok i have it
|
by: rizwanahmed24 |
last post by:
Hello
i have made a custom control. i have placed a panel on it. I want this
panel to behave just like the normal panel. The problem i was having is
that the panel on my custom control doesnt accept other controls. The
control i drag drop on it becomes the child of my custom control's
parent form and not the child of my custom control. Then...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language...
| | |
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it. ...
|
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...
| |
