CSS - What Does Html>body Define?

My CSS works in IE and Mozilla but not Netscape or Opera
I have a 2 column website, built with 2 relative position DIVs, with overflow set to auto. Because of this, I turned off overflow on the body tag and on the html tag (overflow: hidden;). I didn't want to have 2 scroll bars on the right side of the window. When I first tested this on 4 browsers, IE, Mozilla, Netscape and Opera, it worked great, only having one scroll bar on the right side of the window when the page was longer than the window height. But when I moved to a new host server recently, I discovered that Netscape and Opera stopped working. They now simply give me blank screens. When I remove the "overflow: hidden;" specifications from the body tag and the HTML tag in my CSS file, Netscape and Opera once again display my web pages. However, now I get 2 scrollbars on the right side of all 4 browsers (in IE, the second scrollbar isn't actually there, but the space holder for the scrollbar is there).

Is there a cross browser way for doing what I'm trying to do? Or am I faced with detecting the browser type on the server-side, and setting the style sheet appropriately?

Here are the related parts of my CSS:

/* CSS styles */
BODY {
font-family : Verdana, Arial, Helvetica, sans-serif ;
font-size : 10pt;
background : Black;
color : White;
margin: 0;
padding: 0;
border-width: 0;
overflow: hidden;
}


HTML {
overflow: hidden;
}


#LeftNavDIV {
position:relative;
width:185px;
height:100%;
float:left;
padding:2px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:1px solid white;
overflow:auto;
}


#ContentDIV {
position:relative;
height:100%;
width:75%;
float:right;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:0px dashed #336699;
overflow:auto;
}

I have a page I'm working on, and while my right column appears correctly in IE (for a change) in FF the right column gets pushed out just a little bit too far.

How do I define, in css, that if the browser is FF to use a certain style, but if not to use my default setting?

Thanks!

The picture you can see is part of a PSD which I'm now "converting" into html... anyway, I'd like to know whether there is a CSS attribute that can define the exact width of borders?

Anyone able to guide me to find where to edit form elements?

I want to change the 'check box' and 'drop down menu's'

Hi!

Let's say I define this:

#gaga.baracuda {......}

#haha.baracuda {other info....}

Is this allowed?

http://localhost/donkeyshare/content.php?cID=portal

PHP Code:
/* page properties */
.properties {background-color: #EEEEEE; margin: 0 px}

/* table configuration */
.table1 {border: 1px solid #BBBBBB; color:#333333}
.table2 {background-color: #DDDDDD; font-weight:bold; font-variant:small-caps; font-size:12px; font-family:verdana}
.table3 {background-color: #EEEEEE; font-size:12px; font-family:"Courier New";}

/* link configuration */
A:link {color: #333333; text-decoration:underline}
A:visited {color: #333333; text-decoration:underline}
A:active {color: #333333; text-decoration:underline}
A:hover {color: #333333; text-decoration:overline} 





What do i do if i want to define differnt link properties to table 3, thats difernt then table 2. please take a look and tell me what you think.

Hi!

Should I do this?

p
{

margin-top: 2em;
margin-bottom: 2em;

}

or this:

p
{

margin-bottom: 2em;

}


Same question for headers (h1, h2, etc)


Thanks!

Dear all,

I am willing to develop a div tag, which will cover the entire body tag. The code I am using is the following:

Code:

<div id="warningLayer"
style="position:absolute; width:100%;
height:100%; margin:0; padding:0;
background-color:#000000; opacity: 0.5;
z-index:999999999; display:block;
overflow:visible;">
&nbsp;
</div>

Unfortunately, the HTML page covers more that the browser window, hence when the visitor scrolls down the page, the body remains uncovered. How could I fix this issue?

Thank you in advance.

I am trying to center the whole page. the body contains all divs, contained in one main div. I tried I trick I have been using for a while but it messed with one the other divs. I was using

Margin-Left:-375px; Position:Absolute; Left:50%;

any ideas for another way to center my page?

I am currently setting the body id of my pages to highlight what item I am on...
Such as:
body#news #news_tab a,
{
border-bottom: 1px solid #fff;
background: #fff;
color: #000;
}

But I was wondering if it was also possible to somehow make a div appear (changing display from hidden to block) by putting an id in the body tag....But since the div isn't a link, for some reason I can't make it work.

I tried:

Adding this div:
<div id="news" style="display:none">Testing Me</div>

Adding this body tag:
<body id="news">

And then adding this style definition:
body#news #news
{
display: block;
}

but it still doesn't display. Is this just not possible? Is there anyway around it?

Thanks!

Hi all,
I would like to be able to have the body background change when moving from page to page.
Is it possible, without javascript.

Code:

body {
    margin: 0px;
    padding: 5px 0px 5px 0px;
	background: url(blue2.jpg) fixed;
} {

Specifically the surrounding blue2.jpg that frames the page.

page link

css link

Thanks.

I'm a novice with CSS and HTML so the following may seem elementary to most of you. I'm a retail vitamin store owner with a website, (URL address blocked: See forum rules) . We do very well with our store front and are getting better and better with our online discount vitamin store.

Our web master has programmed our site so we can easily insert new products. This is done in the <body>. Recently I've wanted to add some spice with color and formatting .

At first I was doing this with something like <FONT FACE="Verdana, Helvetica, Arial" size="4" color="006600">. But now as I get into CSS and double checking all code with W3.org, it doesn't like this approach.

Now I'm trying <span id="enzymatic" class="prod_description"> in the <body> with
span#enzymatic p {
color: green;
}
span#enzymatic h4{
color: blue;
}
etc. in a CSS definition file.

It all works well, but W3.org still doesn't like where I've inserted the code. If you go to our page:

(URL address blocked: See forum rules)=country-life-seniority-multivitamin

You will get among other "errors" the following message:

<h4>Seniority &trade; Multi-Vitamin Capsules </h4>
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Any hints as to what basic rules I'm breaking? Be kind.

Many thanks,

healthyphil

hello friends,


please tell me how can i specify a hyperlink, active, hover and visited attribute in body { }

for example i have the following css

BODY
{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #F2F2F2;
font-family: Arial;
font-size: 11px;
color: #000000;
text-align: left;


}


now i want to specify the default hyperlink with active, hover and visited attribute within body.

Thx.