images and text surrounded by wrong colour!

onemansjunk

07-14-2011, 12:01 PM

I have created a css file with the following info:

[CODE]* { padding: 0; margin: 0; background:#2ECCFA; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

a {
text-decoration:none;
}

p
{
font-family:"Times New Roman",Georgia,Serif;
font-size: 15px;
background:#FFFFFF;
}

#wrapper {
margin: 0 auto;
width: 922px;
background:#2ECCFA;

}
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 125px;
margin: 10px 0px 0px 0px;
background:#FFFFFF;
}
#navigation {
float: left;
width: 900px;
height: 10px;
padding: 10px;
color: #333;
border: 1px solid #ccc;
margin: 0px 0px 0px 0px;
background:#FFFFFF;
}
#banner {
float: left;
width: 800px;
height: 230px;
color: #333;
padding: 10px;
border: 1px solid #ccc;
margin: 0px 0px 0px 0px;
background-color:#FFFFFF;
}
#rightadvert {
float: right;
width: 78px;
height: 230px;
color: #333;
padding: 10px;
border: 1px solid #ccc;
margin: 0px 0px 0px 0px;
background-color:#FFFFFF;[CODE]

The problem I am having is when i want to add an image or a link or change any font or font size in the index file it brings the background colour through to the layout.
i.e If I want certain words in the #rightadvert section in Bold, as soon as i put in the B tag then the writing is surrounded by the blue background colour and not the white which I have stated in the css.

I am new so it's probably simple but it's very annoying!!

Hope someone can help!

bullant

07-14-2011, 12:06 PM

It would be easier to see what is going on if you post your html as well.

abduraooft

07-14-2011, 12:10 PM

I am new so it's probably simple but it's very annoying!! Can we have a link to your page?

onemansjunk

07-14-2011, 12:19 PM

I haven't posted it online yet I am just opening my code from my desktop with a browser!

The code for the html is basically this:

[CODE]<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>General Communications</title>
<link rel="stylesheet" type="text/css" href="main.css" />

</head>

<body>

<div id="rightadvert">

<a href="http://www.facebook.com"><img src="facebooklogo.jpg"></a>

</div>


<div id="leftcolumn" >
<p><font size="7">G</font>eneral Communications is an independent telecommunications company established in 1990..</p>
</div>
[CODE]

The facebook logo is underlined with the background colour and the big G in the text leftcolumn area is surrounded by the background colour.

vikram1vicky

07-14-2011, 01:00 PM

Remove background-color from *{}

* { padding: 0; margin: 0; background:#2ECCFA; }Because above code sets background-color default for all elements.

Also you img tag is invalid.

Use following:

<img src="facebook.gif" alt="facebook" />

Cheers :)

abduraooft

07-14-2011, 01:05 PM

From the description, you may perhaps need the following in your CSS
a img{
border:none;
}