Hi experts,
I used 2 divs (side-bar and main-copy) and tried to line them side by
side.
For the most part this works fine. Both divs appear at the same y-
value on the screen.
However, as I decreased the width of my IE window,
just when the browser's horizontal scrollbar appears, the right div
got shifted down by the height of the left div. i.e. the right div's
top equal to the left div's bottom. If I increased the browser's
width then the right div will float right back to where it should be.
Please help.
Minh
CSS file:
/*************** *************** *******
* TITLE: Sinorca Screen Stylesheet *
* URI : sinorca/sinorca-screen.css *
* MODIF: 2003-Apr-30 19:31 +0800 *
*************** *************** *******/
/* ##### Common Styles ##### */
body {
color: black;
background-color: rgb(240,240,240 );
font-family: verdana, helvetica, arial, sans-serif;
font-size: 71%; /* Enables font size scaling in MSIE */
margin: 0;
padding: 0;
}
html body {
font-size: 8.5pt;
}
acronym, .titleTip {
border-bottom: 1px dotted rgb(153,153,153 );
cursor: help;
margin: 0;
padding: 0 0 0.4px 0;
}
..doNotDisplay {
display: none;
}
..Error {
background-color: red;
font-weight: bold;
margin: 3em 0 0 0;
padding: 0.5ex 0 0.5ex 1ex;
}
..smallCaps {
font-size: 110%;
font-variant: small-caps;
}
/* ##### Header ##### */
..superHeader {
color: white;
background-color: rgb(100,135,220 );
height: 2em;
}
..superHeader a {
color: white;
background-color: transparent;
text-decoration: none;
font-size: 91%;
margin: 0;
padding: 0 0.5ex 0 0.25ex;
}
..superHeader a:hover {
text-decoration: underline;
}
..superHeader .left {
position: absolute;
left: 1.5mm;
top: 0.75ex;
}
..superHeader .right {
position: absolute;
right: 1.5mm;
top: 0.75ex;
}
..midHeader {
color: rgb(39,78,144);
background-color: rgb(140,170,230 );
}
..headerTitle {
font-size: 337%;
font-weight: normal;
margin: 0 0 0 4mm;
padding: 0.25ex 0;
}
..menuBackgroun d {
background-color: rgb(0,51,153);
}
..subHeader {
color: white;
background-color: transparent;
margin: 0;
padding: 1ex 1ex 1ex 1.5mm;
}
..subHeader a {
color: white;
background-color: transparent;
text-decoration: none;
font-weight: bold;
margin: 0;
padding: 0 0.75ex 0 0.5ex;
}
..subHeader a:hover {
text-decoration: underline;
}
..superHeader .highlight, .subHeader .highlight {
color: rgb(253,160,91) ;
background-color: transparent;
}
/* ##### Side Bar ##### */
#side-bar
{
width: 15em;
float: left;
clear: left;
/*border-right: 1px solid rgb(153,153,153 );*/
background-color: yellow;
}
#side-bar div {
/*border-bottom: 1px solid rgb(153,153,153 );*/
}
..sideBarTitle {
font-weight: bold;
margin: 0 0 0.5em 2.5mm;
padding: 1em 0 0 0;
}
#side-bar ul {
list-style-type: none;
list-style-position: outside;
margin: 0;
padding: 0 0 1.1em 0;
}
#side-bar li {
margin: 0;
padding: 0.1ex 0; /* Circumvents a rendering bug (?) in MSIE 6.0 */
}
#side-bar a, .thisPage {
color: rgb(0,102,204);
background-color: transparent;
text-decoration: none;
margin: 0;
padding: 0.75em 1ex 0.75em 5mm;
display: block;
}
..thisPage {
color: black;
background-color: white;
padding-left: 4mm;
border-top: 1px solid rgb(153,153,153 );
border-bottom: 1px solid rgb(153,153,153 );
}
#side-bar a:hover {
color: white;
background-color: rgb(100,135,220 );
text-decoration: underline;
font-weight: bold;
}
..sideBarText {
line-height: 1.5em;
margin: 0 0 1em 0;
padding: 0 1.5ex 0 2.5mm;
display: block;
}
#side-bar .sideBarText a {
text-decoration: underline;
margin: 0;
padding: 0;
display: inline;
}
#side-bar .sideBarText a:hover {
color: rgb(0,102,204);
background-color: transparent;
text-decoration: none;
}
..lighterBackgr ound {
color: inherit;
background-color: white;
}
/* ##### Main Copy ##### */
#main-copy
{
color: black;
background-color: green;
text-align: justify;
line-height: 1.5em;
margin: 0 0 0 15em;
/*padding: 1mm 1mm 1mm 1mm;*/
border-left: 1px solid rgb(153,153,153 );
height: 480px;
}
#main-copy p {
margin: 1em 1ex 2em 1ex;
padding: 0;
}
#main-copy a {
color: rgb(0,102,204);
background-color: transparent;
text-decoration: underline;
}
#main-copy a:hover {
text-decoration: none;
}
#main-copy h1 {
color: white;
background-color: rgb(100,135,220 );
font-size: 100%;
font-weight: bold;
margin: 3em 0 0 0;
padding: 0.5ex 0 0.5ex 1ex;
}
#main-copy label {
color: white;
background-color: rgb(100,135,220 );
font-weight: bold;
margin: 3em 0 0 0;
padding: 0.5ex 0 0.5ex 1ex;
}
#main-copy .topOfPage {
color: white;
background-color: transparent;
font-size: 91%;
font-weight: bold;
text-decoration: none;
margin: 2.5ex 1ex 0 0; /* For MSIE */
padding: 0;
float: right;
}
#main-copy .topOfPage {
margin: 2.75ex 1ex 0 0; /* For fully standards-compliant user
agents */
}
dl {
margin: 1em 1ex 2em 1ex;
padding: 0;
}
dt {
font-weight: bold;
margin: 0 0 0 0;
padding: 0;
}
dd {
margin: 0 0 2em 2em;
padding: 0;
}
/* ##### Footer ##### */
#footer {
color: white;
background-color: rgb(100,135,220 );
font-size: 91%;
margin: 0;
padding: 0.5em 2.5mm 0.5ex 2.5mm;
clear: both;
}
#footer .left {
/*line-height: 1.45em;*/
float: left;
clear: left;
}
#footer .right {
text-align: right;
/*line-height: 1.45em;*/
}
#footer a {
color: white;
background-color: transparent;
text-decoration: underline;
}
#footer a:hover {
text-decoration: none;
} 1 2187 ne********@yaho o.com wrote:
Hi experts,
Ha! Sorry, they're all busy. But I'm here... ;-)
I used 2 divs (side-bar and main-copy) and tried to line them side by
side.
For the most part this works fine. Both divs appear at the same y-
value on the screen.
However, as I decreased the width of my IE window,
just when the browser's horizontal scrollbar appears, the right div
got shifted down by the height of the left div. i.e. the right div's
top equal to the left div's bottom. If I increased the browser's
width then the right div will float right back to where it should be.
I predict, without having gone to the URL you will be providing below,
that your divs (or at least, the "right div") will be floated left, and
that the behavior is therefore as designed. That is, floats are supposed
to do that (hence the name).
What else do you want to happen with two side-by-side blocks which lack
the room for their combined width? (Not a rhetorical question; you have
to think about this.)
>
CSS file:
No, this is where you provide the URL, from which we can see all of the
CSS you posted below, plus the CSS you didn't post, plus the markup
you're using, plus the doctype, plus the way your server is serving it.
body {
color: black;
background-color: rgb(240,240,240 );
font-family: verdana, helvetica, arial, sans-serif;
font-size: 71%; /* Enables font size scaling in MSIE */
Yes, it does, sort of (that is, compared to using pixels or points).
However, it pretty much *mandates* font size scaling in MSIE, as well as
in other visual browsers, because 71% is about 30% smaller than I want
to see your page at.
margin: 0;
padding: 0;
}
html body {
font-size: 8.5pt;
}
Do you know what IE7 will do with the above? (Hint: see http://msdn2.microsoft.com/en-us/library/bb250496.aspx) Is it what you
planned? And what is it you expect from 8.5pt in any browser?
(Personally, I will be squinting or surfing away.)
>
#side-bar
{
width: 15em;
float: left;
clear: left;
/*border-right: 1px solid rgb(153,153,153 );*/
background-color: yellow;
}
#side-bar div {
/*border-bottom: 1px solid rgb(153,153,153 );*/
}
I personally guarantee that there is no usefulness in posting
commented-out CSS rules in a NG.
#main-copy
{
color: black;
background-color: green;
text-align: justify;
line-height: 1.5em;
margin: 0 0 0 15em;
/*padding: 1mm 1mm 1mm 1mm;*/
border-left: 1px solid rgb(153,153,153 );
height: 480px;
}
#main-copy p {
margin: 1em 1ex 2em 1ex;
padding: 0;
}
#main-copy .topOfPage {
color: white;
background-color: transparent;
font-size: 91%;
font-weight: bold;
text-decoration: none;
margin: 2.5ex 1ex 0 0; /* For MSIE */
padding: 0;
float: right;
}
#main-copy .topOfPage {
margin: 2.75ex 1ex 0 0; /* For fully standards-compliant user
agents */
}
And then there's IE7. How does that fit the above two rules and their
comments?
Without the markup, your CSS can't provide the whole story. What is
..topOfPage? What contains #main-copy? And so on. If you still need help,
provide a URL with firther details.
HTH
--
John This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: Jocab |
last post by:
Just had a look at the Wired.com site and it seems it's completely in
XHTML and CSS. I don't understand this snippet of code on their
homepage, though:
<link rel="stylesheet" type="text/css" media="screen"
href="http://a1112.g.akamai.net/7/1112/492/2002091447/www.wired.com/news/v/20020914/css/cs4/wnScreen.css"
/>
<link rel="stylesheet"...
|
by: Mark Johnson |
last post by:
Oddly enough, I found it difficult, using Google, to find a list of
best-of sites based on the quality of their css packages.
So I'd ask. Does anyone know of particularly good sites which are in
good measure because of their creative and useful css designs? I'm
aware of Zen Garden and a few others. So don't bother with those. And
I hope I...
|
by: Peter Brause |
last post by:
Hello,
my stylesheet shows different colors for visited, active and hovered links.
It works fine in IE 6, but in Opera 7 the color for the active link (red
background) is never shown. How to explain this?
Here is my code: (code optimization will be done later)
1. The HTML file
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">...
|
by: Tammy |
last post by:
What would be a good alternative to using frames? I need something
that will section my webpage into two halves and can change both
frames on a single click.
Thanks in Advance,
Tammy
|
by: Diane Wilson |
last post by:
I'm trying (once again) to figure out how to make a robust
CSS layout style that can replace tables. I'd like to be able
to do a basic two-column layout, with a one-column header,
a two column body, and a two-column footer.
The problem, and one that always sends me back to using tables,
is that word "robust." Absolute positioning gets...
| |
by: g |
last post by:
I'd like to have a CSS file for everything that's common to my site,
and other CSS files that are specific to certain pages or groups of
pages. When a page loads, it would load in BOTH the General CSS and the
specific CSS file for that page. As long as none of the selector names
were the same on both, could the page follow the styles set out...
|
by: VK |
last post by:
Randy Webb wrote:
> VK said the following on 5/2/2006 9:48 AM:
> > If you mean "trying to render it" then FF behavior is the same as for
> > all other UA's willing to be in use (and not W3C demos). If document is
> > served as text/html, FF will render it somehow anyhow.
>
> So you are saying it totally disregards the DTD and any hints from...
|
by: shapper |
last post by:
Hello,
I created a theme folder where I place my Skin and CSS files.
I have 5 files:
Base.skin, Base.css, Default.css, Contacts.css, Print.css
Base Skin and CSS files should be used on all pages.
|
by: New Bee |
last post by:
Hi,
I have been looking at Themes and Skins today and now resonably understand
how they work at a ground level. But I have a couple of questions.
1. ) StyleSheetTheme
I dont understand where this would be used. As I understand it the
precidence is like this.
|
by: fpimentel |
last post by:
I have the following CSS:
h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin:0;
padding:0;
}
|
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: 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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
|
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: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in...
| |
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.
| |