CSS - Css - Background-color Of Overflow Text From Pre

I have a problem with a page on my website. Some of the text on the bottom of the page floats over the text at the top of the page. The only browser where it looks good is IE6.

So i dragged my page through de XHTML checker of W3C and debugged until it had no errors. Next I did the same with my css file.

I used the browsercam to see if it made any difference. Unfortunately it didn't.

It still has the error and i don't know how to fix it or where to start. I hope someone can help me out here.

Or maybe someone can tell me where i can find some info about these problems. Browsing this forum, i see that i am not the only one who is having problems with different browsers.

You can see here how the webpage looks in IE6 on XP (This is how it should look in other browsers).
You can see here how the webpage looks in Safari
You can see here how the webpage looks in IE5 on Win 98.

This is my css:

Quote:
body {
background-color: White;
color: Black;
}

a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: Black;
}

a:link {
color: #F0027F;
}

a:visited {
color: #F0027F;
}

a:active {
color: #F0027F;
}

a:hover {
color: Black;
}

h1, h2, h3 {
margin: 0px;
padding: 0px;
font-weight: normal;
}

#container {
position:absolute;
left:50%;
width: 600px;
margin-left: -300px;
border: 1px solid Black;
background-color: White;
}

}

#banner {
background-color: White;
border-bottom: 1px solid White;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
height: 42px;
padding: 0px;
text-align: left;
width: 310px;
padding-left: 0px;
}

#banner-commentspop {
background-color: White;
border-bottom: 1px solid Black;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
font-weight: bold;
padding: 0px 10px;
text-align: left;
width: 310px;
}

#banner a {
color: #FFFFFF;
text-decoration: none;
}

#banner1 {
font-size: xx-large;
font-weight: bold;
width: 600px;
padding-left: 0px;
border-bottom-width: 1px;
border-bottom: 1px dashed #F0027F;
color: #F0027F;
height: 0px;
}



#content {
background-color: #FFFFFF;
color: Black;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
overflow: hidden;
padding: 5px 5px 5px 0px;
width: 350px;
border-right-width: 10px;
border-style: none dashed none none;
border-right: 1px dashed #F0027F;
margin-right: 20px;
padding-bottom: 20px;
}
#menu {

font-family: Arial, Helvetica, sans-serif;
margin-bottom :15px;
color: Black;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size: 8pt;
overflow: hidden;
padding: 0px 0px 0px 10px;
background-color: White;
border-style: none none none dashed;
}

.blog {
background-color: White;
padding: 10px 0px;
width: 310px;
margin-top: 45px;
}

.blog p {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}

.blog blockquote {
}

.blog li {
}

.blog h2 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
border-bottom: #000000;
text-align: left;
font-weight: bold;
margin-bottom: 10px;
padding: 0px 70px 30px;
}

.blog h3 {
color: #F0027F;
font-family: Arial, Helvetica, sans-serif;
font-size: 17pt;
text-align: left;
font-weight: bold;
margin-bottom: 0px;
}

.blog .blogphoto {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
width: 30px;
float: left;
text-align: left;
padding-top: 40px;
}


.blog .blogbody {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
width: 250px;
margin-left: 70px;
float: right;
margin-top: -155px;
}

.blog .posted {
color: #2CB0CF;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
line-height: normal;
text-align: left;
border-bottom: 1px dotted #F0027F;
width: 245px;
margin-bottom: 40px;
font-style: italic;
border-bottom-width: 1px;
padding-bottom: 10px;
}

#links {
background-color: White;
overflow: hidden;
width: 190px;
margin-left: 0px;
border-left: 1px dashed EF1385;
padding-left: 30px;
border-left-width: 1px;
border: 1px dashed #F0027F;
border-bottom: 0px;
border-right: 0px;
border-top-width: 0px;
padding-bottom: 700px;
padding-top: 30px;
}

.side, .syndicate, .powered {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
padding: 3px 15px 10px 0px;
text-align: left;
}

.side a {
text-decoration: none;
color: #F0027F;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
}

.side a:link {
color: #F0027F;
font-weight: bold;
}

.side a:visited {
color: #F0027F;
}

.side a:active {
}

.side a:hover {
color: Black;
}


.calendar {
line-height: 140%;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
padding: 2px;
text-align: center;
margin-bottom: 30px;
}

.calendar table {
padding: 2px;
border-collapse: collapse;
border: 0px;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font: 8pt;
font-weight: bold;
}

.calendar caption {
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
border-bottom: 1px solid #999999;
text-align: left;
font-weight: bold;

text-transform: uppercase;
padding: 3px;
letter-spacing: .3em;
}

.calendar th {
text-align: center;
font-weight: normal;
}

.calendar td {
text-align: center;
}

.sidetitle {
border-bottom: 1px solid Black;
color: #F0027F;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
letter-spacing: normal;
text-transform: uppercase;
}

.side ul {
padding-left: 0px;
margin: 0px;
margin-bottom: 30px;
}

.side li {
color: #000000;
text-align: left;
margin-top: 0px;
list-style-type: none;
}

.side img {
border: 1px solid Black;
float: left;
}

.photo {
text-align: left;
float: left;
}

.link-note {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
text-align: left;
padding: 2px;
margin-bottom: 15px;
}

.comments-head {
border-bottom: 1px dashed #F0027F;
color: #F0027F;
font-family: Arial, Helvetica, sans-serif;
font-size: 17pt;
font-weight: bold;
margin-bottom: 10px;
text-align: left;
margin-left: 70px;
}

.comments-body {
color: Black;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
text-align: left;
margin-bottom: 10px;
margin-left: 70px;
}

.comments-body textarea {
width: 75%;
}

.comments-post {

border-top: 1px dotted #F0027F;
color: #2CB0CF;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
line-height: normal;
padding: 3px;
text-align: left;
}

.extended {
font-size: 8pt;
font-style: normal;
margin-bottom: 1ex;
width: 400px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: Black;
}

i wanted usersto choose their own style sheet by giving them different links like red, green, blue which will take them to different layouts or background color page. the problem was that worked only for that particular page but if they click on any link or menu from that page it will take them back to the default color.
is there any way that i can set so that their choice will stay throught their surfing ?
any thoughts ?

hanks

Hi,

I am trying to apply a background color to an item other than the body but I cannot make it display in IE 6 or 5.5. I have tried applying it to both <div>'s and <p>'s. Does IE not support the background-color property outside of the page background?

Hi there people,

I have a question about CSS but before I start off asking this question I'll introduce myself.

I'm a new user of this great forum, my name is Dwight and I'm a student on the "Graphical Lyceum Amsterdam" where I follow the education for "Multimedia Designer".

Ok so now you know me a little, I'll start off asking my question.

Question: I have to change the layout for a html page that askes for information from different asp pages, but that's not my problem . The problem is that I have to make some td's a different color -the background that is- but the problem is that I can't change the html page itself (it is automaticly generated and I don't have permission to change it).
So my question is can someone tell me how I can change the color of some (not all!) td's with CSS without making classes?

Tnx, Dwight

Hey Guys!

I'm going absolutely bonkers trying to find out how to change the color of the background of a certain element on my site. I installed Vanilla forums on my site and am trying to customize the css script.

If you look at the page, you will see an annoying white in the body. I am trying to make the background of that #F6F6F2. Could you guys possibly put me in the right direction?

Thanks!

Here is a link to my page:
shipswatchdotcom/forum/vanilla/aaa.html

Here is the css script:
Code:

#Body {
	margin: 0;
	width: 99.9%;
	position: relative;
	background: #F6F6F2;

}
#Head {
	background: #B8D4B8;
	padding:0;
	margin: 20px 20px 0;
	text-align: left;
	position: relative;
}
div.Popup h1,
div.Popup h2,
div.Connect h1,
div.Connect h2 {
	background: #F6F6F2;
	border-bottom: 1px solid #3b5998;
}
.Banner {
	padding: 10px;
	text-align: left;
	position: relative;
	background: #F6F6F2;
}
.Banner ul {
	background: #B8D4B8;
	padding: 0;
	margin: 0;
}
.Banner ul li {
	display: inline;
	padding: 0;
	margin: 0;
}
.Banner ul li a {
	font-weight: bold;
	padding: 3px 6px;
	font-size: 11px;
	color: #336633;
	display: inline-block;
}
.Banner ul li a:hover {
	background: #E5F0E5;
}
.Banner ul li a.SignOut {
	font-weight: normal;
	position: absolute;
	top: 10px;
	right: 10px;
}
.Banner ul li a span {
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	padding: 1px 2px 0 1px;
	background: #F6F6F2;
	border-right: 1px solid #F6F6F2;
	border-bottom: 1px solid #F6F6F2;
	color: #F6F6F2;
	font-size: 9px;
	position: relative;
	top: -3px;
}
#Content {
	float: none;
	width: auto;
	margin: 0 280px 0 10px;
	background: #F6F6F2;
}
#Panel {
	float: right;
	margin-right: 10px;
	background: #F6F6F2;
}
#Panel div.SearchBox input.InputBox {
	width: 200px;
	margin-right: 4px;
	background: #F6F6F2;
}
div.SearchBox {
	margin-bottom: 6px;
}
body.Profile div.SearchBox {
	display: none;
}
body.Profile #Content {
	float:none;
	width: auto;
	margin: 0 10px 0 280px;
	background: #F6F6F2;
}
body.Profile #Panel {
	margin: 0 0 0 10px;
	background: #F6F6F2;
}
form.Activity textarea {
	width:99%;
	background: #F6F6F2;
}
#Foot div {
	width: auto;
	background: #F6F6F2;
}
body.Post #Content {
	width: auto;
	margin:0 20px;
	background: #F6F6F2;
}
#ConversationForm textarea.MultiComplete,
#ConversationForm .TextBox,
#MessageForm textarea,
div.Comment div.CommentForm,
div.Comment div.CommentForm textarea,
div.CommentForm textarea,
#DiscussionForm input.InputBox,
#DiscussionForm textarea {
	width:99%;
	background: #F6F6F2;
}
#ConversationForm form {
	border: none;
}
div.Preview div.Message,
ul.MessageList div.Message {
	clear: none;
}
#DiscussionForm form {
	background: #F6F6F2;
	border: 1px solid #ccc;
}
div.MessageForm,
div.Tabs {
	background: #F6F6F2;
	border-bottom:1px solid #ccc;
}

/* Tabs */
div.Tabs {
	background: #F6F6F2;
	padding: 0;
	border-bottom: 1px solid #aaa;
}
div.Tabs ul {
	padding: 0 8px;
	white-space: nowrap;
}
div.MessageForm {
	padding: 8px 8px 5px;
}
div.MessageForm div.Tabs {
	padding: 0 8px;
}
div.Tabs li a,
div.Tabs li a:link,
div.Tabs li a:hover,
div.Tabs li a:active,
div.Tabs li a:visited {
	font-size: 11px;
   margin: 0;
   border: none;
   border-radius: 0;
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
   background: #F6F6F2;
   color: #336633;
   text-decoration: none;
   padding: 8px 10px;
	line-height: 11px;
}
div.Tabs li a:hover {
   text-decoration: underline;
}
a.Active,
div.Tabs li.Active a {
   background: #F6F6F2;
   color: #336633;
   margin: 0;
   border: 1px solid #aaa;
	border-bottom: none;
   border-radius: 3px 3px 0 0;
   -moz-border-radius: 3px 3px 0 0;
   -webkit-border-radius: 3px 3px 0 0;
   display: inline-block;
	font-size: 12px;
	line-height: 12px;
   font-weight: bold;
   text-decoration: none;
   padding: 6px 10px;
	position: relative;
	top: 1px;
}
div.Tabs li a span {
   line-height: 1;
   font-size: 80%;
   padding: 0 3px;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   font-weight: normal;
	background: #F6F6F2;
   color: #4A7023;
   margin: 0 0 0 4px;
}
div.DiscussionsTabs div.SubTab {
	font-size: 11px;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-top: 1px solid #aaa;
	background: #F6F6F2;
	margin:0;
	padding:4px 8px;
}
div.HeadingTabs ul {
	margin: 8px 0 0;
}
body.Discussion a.Bookmark {
	margin: 6px 2px;
}
div.Preview {
	border: 1px solid #aaa;
	background: #F6F6F2;
	margin:0 0 8px;
	padding: 8px;
}
.Foot {
	background: #F6F6F2;
	border: none;
}
div.MorePager a,
div.MorePager a:link,
div.MorePager a:visited,
div.MorePager a:active,
div.MorePager a:hover {
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	background: #F6F6F2;
	border: none;
	color: #4A7023;
	line-height: 1;
	padding: 0;
	text-decoration: none;	
}
div.MorePager a:hover {
	color: #4A7023;
	text-decoration: underline;
}
body.add #Content {
	margin: 0 10px;
	background: #F6F6F2;
}

/* Panel Boxes */
#Panel div.Box {
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	background: #F6F6F2;
	padding: 0;
}
div.Box h4 {
	color: #4A7023;
}
ul.PanelActivity,
ul.PanelInfo {
	border-top:1px solid #ccc;
}
ul.PanelActivity li,
ul.PanelInfo li,
ul.PanelInfo li.Active {
	background: #F6F6F2;
	border-bottom: 1px solid #ccc;
}
ul.PanelInfo li.Active {
	background: #F6F6F2;
}
#Status {
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	background: #eee;
	color: #000;
	line-height: 1.6;
	padding: 3px 6px;
	margin: 0 0 8px;
}
body.Profile ul.PanelInfo {
	border: #F6F6F2;
}
body.Profile ul.PanelInfo li {
	margin: 0;
	padding: 0;
}
body.Profile ul.PanelInfo li a {
	font-size: 12px;
	display: block;
	padding: 0 6px;
	background: #F6F6F2;
}
body.Profile ul.PanelInfo li a:hover {
	background: #F6F6F2;
}

/* Sign In Page */
body.Entry #Content {
	text-align: center;
	margin: 0 auto !important;
}
body.Entry #Content div.Box {
	background: #F6F6F2;
	border: 0;
}
div.Methods {
	border-left: 1px solid #ccc;
}

/* Messages */
div.DismissMessage {
	background: #F6F6F2;
	border: 1px solid #ccc;
	padding:6px 8px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
div.DismissMessage a.Dismiss:hover {
	color: #000;
}
div.Warning {
	background: #d00;
	border: 1px solid #b00;
	color: #F6F6F2;
	text-shadow: 1px 1px 1px #444;
}
div.Warning a.Dismiss {
	color: #F6F6F2;
}
#Content div.Box {
	color: #000;
	background: #F6F6F2;
	border: 1px solid #F6F6F2;
}
body#dashboard_entrycontroller_signin div.Box {
	border: none;
}
/* Autocomplete */
.ac_results {
   border: 1px solid #d7d8da;
	color: #000;
   border-top: 0;
   background-color: #F6F6F2;
}
.ac_results li {
   border-bottom: 1px solid #d7d8da;
}
.ac_lastitem {
   border-bottom: 0 !important;
}
.ac_results strong {
   background: #F6F6F2;
}
.ac_over strong {
   background: #F6F6F2;
}
.ac_over {
   background: #3b5998;
   color: #fff;

}

Having an issue with the background color in a div.

The color shows up in I.E. but not in Firefox.

I have a div with a width of 100%. Inside the div is an unordered list with two list items.

Here is the css:

div#nav {
width: 100%;
margin: 0;
background-color: #EAE9E4;
}

#nav ul {margin: 0; padding: 0; }

#nav li {
list-style: none;
float: left;
margin: 0;
padding: 0;
width: 15%;
font-size: 11px;
line-height: 20px;
white-space: nowrap;
}

Essentially this will be a navigation aid below the banner of the webpage. The list items will contain anchors which will appear as "buttons". The containing div extends to the end and I want it to have a background color.

Any help appreciated.

Hi,

I have made a page using <div> tags.

<div id="page">
<div id="leftmenu">
</div>
<div id="mainarea">
</div>
</div>

My problem is that sometimes, the leftmenu is longer than the main area(1) and sometimes its the opposite- the main area is longer than the leftmenu(2). I want them both to be of the same height. (3)

How can I do this? Plz Help!

I have pasted the style codes for the 3 tags below.


(1)


(2)



(3)

#mainarea {
background-color:#FFFFFF;
float:left;
position:relative;
right:0pt;
width:630px;
}

#leftmenu {
background-color:#EEEEEE;
float:left;
left:0pt;
position:relative;
width:140px;
}

#page {
background-color:#FFFFFF;
position:relative;
width:770px;
}

Hello all,

When viewing in IE my background is dark red like it's suppose to be. When viewing the same site in Firefox the background is white. Firefox is not seeing that portion of code within my CSS file. Can someone shine some light for me?

Thanks in advance!! Please help I need

Please send me a message for URL. For some odd reason Dev won't allow me to post a link to my site for you.

What is wrong with this? I can't seem to see any of the background colors in Firefox or Camino? I have tried setting the background color in the body, and by enlosing the rest of the elements within a containing "main" div... but neither seem to work. Any ideas?
What is wrong with this? I can't seem to see any of the background colors in Firefox or Camino? I have tried setting the background color in the body, and by enlosing the rest of the elements within a containing "main" div... but neither seem to work. Any ideas?

http://buffalonationsmuseum.ca

Right now the property is just "background" but I have tried...

background-color:

Hi,

I am trying to set background color on hover for a single table of links, rather than the entire document like the below example shows.

http://www.projectseven.com/tutorials/css/pseudoclasses/

I have tried various ways, I do not want to use javascript for this and I am aware of the way to apply background color to the .td field but this also applys to the normal text not just links.

So my question is how do I apply the background hover color to one table of links instead of the body. Thanks!

I want to display text when I hover over certain areas of an image, so I am using an image map, no href, and assigning the text using ALT=. As a result, the text shows up as a tooltip. It works great except that the background color in the tooltip box is a very dated yellow color that looks inconsistent with the rest of my page. Is there any way to change the background color?

(I am trying to avoid scripts because I've never used them and don't really have time to learn how, at this point)

Thanks, Beth

Hello,

I have been trying to figure this out, but have been unsuccessful. I am using a modalPopupExtender, but when the popup comes up, my background is still active. I suspect it has to be something in my css file, but would appreciate some help on this. I suspect it is the css that is causing this, but cannot figure out what. TIA!

Here is the code for the MPE:

<cc1:ModalPopupExtender ID="MPE1" runat="server"
TargetControlID="btnShowModalPop"
PopupControlID="divPop"
BackgroundCssClass="modalBackground"
PopupDragHandleControlID="panelDragHandle"
DropShadow="true"/>


Here is the code in my css file:

.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}

.modalPop {
background-color:Gray;
border-width:3px;
border-style:solid;
border-color:Black;
padding:0;
width:250px;
color:White;



}

.drag
{
background-color:#ff0000;
cursor: move;
border: solid 2px white;



}










I found the issue by referencing a blank css file and slowly adding statements in. It was a combination of the following which prevented the backgroundcssclass to not be shown propertly:

#body div div { background: url(images/body_tr.gif) top right no-repeat; }

#body div div div { background: url(images/body_bl.gif) bottom left no-repeat; }
#body div div div div{ background: url(images/body_br.gif) bottom right no-repeat; }


#body div div div { background: url(images/body_bg.gif) bottom left no-repeat; }
#body div div div div { background: url(images/body_bg.gif) bottom right no-repeat; }


#body .inner div { background: none; }

I ended up add these bg imgs in my master page div tags directly and is working fine.....for now :P
Edit/Delete Message

i have a problem dynamically setting the html background color when i initially set it with css.

if i have a javascript function:

function changeColor()
{
document.bgColor = '#FFFF00';
}

and call it when i click a button the background color changes like you'd expect.

but if i initialize the background color like this:

body{background-color: #FF0000;}

and then later call my javascript function to change the background color like before, it doesn't do anything.

what's going on here? and how can i initialize the background color and still be able to dynamically change it?

thanks

My page works great in firefox, but in IE the top navigation div (top_navigation) SHOULD have a background color of red for testing perposes, but the color doesn't change! It looks like its inheriting the background color #e4dfd7 from the css body tag.

I've tried using an inline style, or using !important, nothing works, and I have to make this available in at least IE6 and up.

Thanks in advance for any help!

html code -> cosmosristorante dot com / ox / index.asp

On the main page of my site, I have a "slogan box" with a width set to 40%. This is outlined and has a background color. In IE, it outlines and colors in the blank space up to 40%, the desired effect. But in Firefox and Mozilla, it outlines only up to where the text stops.

Here's the main css behind it:
#slogan
{
border-bottom:2px solid black;
border-right:2px solid black;
border-left:2px solid black;
background-color:#ABAABB;
font-family:comic sans ms;
width:40%;
}

Attactched is the screenshot from IE and firefox.

How can I make it look like it does in IE for all browsers (i.e., what is the correct code?)

The full code can be seen here.