I have made a website. One part was made, then I decided to add something. This something was first tested on its own and works perfectly. So I added them together.
In internet explorer it works perfect.
However FireFox doesnt like it.
Is there a way to allow a section of my site to totally ignore a style sheet and take instructions from another one?
Or ignore the style sheet and take instructions from one part of it??
Regards,
Grant
The part of the site that doesnt work is this bit of code:
<div id="banner">
<img class="logo" src="http://i293.photobucket.com/albums/mm43/MintBlast/sorbitan2.png" alt="Sorbitan" title="Sorbitan" align="left" width="486" height="87">
</a>
<div class="banner-ad">
<IFRAME FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=NO WIDTH=468 HEIGHT=60 SRC="http://www.google.co.uk"></IFRAME>
</div>Css code for it is this:
.banner-ad {
float: right;
margin: 12px 10px 10px 0;
!important
}
#banner {
width: expression(document.body.clientWidth>970?"100%":"970px"); /* IE fix for min-width */
margin: 0 0 10px 0;
padding: 0;
background-color: rgb(150,151,137);
height: 87px;
width: 100%;
!important
}
img {
border:0;
}The above code was for the banner I added.
The code below is for the site:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>webpage title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="all" />
<meta name="author" content="" />
<link rel="stylesheet" href="css/mainStyle.css" type="text/css" media="screen" />
</head>
<body>
<div id="header" style="height: 5px">
</div>
<div id="header" style="width: 996px; height: 60px">
<h1 id="logo">
<img border="0" src="templa1.gif" width="523" height="135"></h1>
</div>
<div id="bgContainer">
<div id="wrapper" style="width: 982px; height: 178px">
<ul id="mainNav">
<li><a href="#" class="about" title="">about us</a></li>
<li><a href="#" class="security" title="">security</a></li>
<li><a href="#" class="services" title="">services</a></li>
<li><a href="#" class="contact" title="">contact</a></li>
</ul>
<br><br><br><br>
<div id="content">hhjhjhjhjhjhjjhjhjhhj ggfhgfhgfhgfhgf hgfh gfh fh gfh gf hfgh f ht ht ht
fht fh fth gh fthtfh ftht fht fht fh fth fth fh tf ht fht fh tfh fth ft
htf ht fh fth tf hf th fth fh ft hf h fth ft hf h fth f hf h fth ft ht
fht fht fh tfh ft hf hf hf h ftht fht fh fth tfh fth f h fh fh tfh fth
ft hft ht fh tfh tfh fth ft htf hf th ft hft h fth tfh ft ht fht fh tfh
fth tf htf hft hft h fh fth f h fth fth tfhf ht fh fth f
tfhfthtfhfthtfhtfhfthfthfthfthfthfhthfhfthfhfhtfh ft tfhtfhtfh fh tf
fhft htfhtfhfhffhfhhfthfh fhfthfthfth fh fthtfhtfhfh fthtfhtfhhfthfhfh
fthf hjhjhjhjhjhjhjhjhjh hj hj hjhjhjhjhjhjhjhjhjh
hjhjhjhjhjhjhjhjhjh hjhjhjhjhjhjhjhjhjh hjhjhjhjhjhjhjhjhjh
hjhjhjhjhjhjhjhjhjh hjhjhjhjhjhjhjhjhjh gh
hjhjhjhjhjhjhjhjhjh hjhjhjhjhjhjhjhjhjh hjhjhjhjhjhjhjhjhjh
hjhjhjhjhjhjhjhjhjh hjhjhjhjhjhjhjhjhjh hjhjhjhjhjhjhjhjhjh
hjhjhjhjhjhjhjhjhjh hjhjhjhjhjhjhjhjhjh hjhjhjhjhjhjhjhjhjh
hjhjhjhjhjhjhjhjhjh hjhjhjhjhjhjhjhjhjh hjhjhjhjhjhjhjhjhjh
hjhjhjhjhjhjhjhjhjh hjhjhjhjhjhjhjhjhjh hjhjhjhjhjhjhjhjhjh
hjhjhjhjhjhjhjhjhjh hjhjhjhjhjhjhjhjhjh hjhjhjhjhjhjhjhjhjh
hjhjhjhjhjhjhjhjhjh hjhjhjhjhjhjhjhjhjh </div>
</div>
</body>
</html>Here is the code for the site css:
/*----------------------------------------------------------------------------------------------------------------------------------*/
During testing I added code but have removed parts from the actual page. So there are some useless codes hanging around in this CSS
file that will be removed at a later date
/*----------------------------------------------------------------------------------------------------------------------------------*/
*{
margin: 0;
padding: 0;
}
body{
background: #ccc url(../images/background.jpg);
font: normal 11px Trebuchet MS, Trebuchet, Arial, sans-serif;
color: #ccc;
text-align: center;
}
#bgContainer{
padding-bottom: 40px;
}
#wrapper{
margin: 0 auto;
margin-top: 65px;
width: 690px;
text-align: left;
}
h2, h3{
color: #fff;
font-weight: normal;
}
a{
text-decoration: none;
}
/*----------------------------------------------------------------------------------------------------------------------------------*/
#header{
margin: 0 auto;
width: 690px;
text-align: left;
}
h1#logo{
margin-top: 30px;
font-size: 0;
}
h1#logo a{
display: block;
width: 225px;
height: 30px;
background: transparent url(templa1.gif) no-repeat;
}
ul#mainNav{
float: right;
position: relative;
margin-top: -110px;
list-style: none;
}
ul#mainNav li{
float: left;
font-size: 18px;
}
ul#mainNav a{
display: block;
padding: 125px 0 0 20px;
width: 90px;
height: 40px;
color: #666;
}
a.about{
background: transparent url(../images/a_about.png) no-repeat;
}
a.security{
background: transparent url(../images/a_security.png) no-repeat;
}
a.services{
background: transparent url(../images/a_services.png) no-repeat;
}
a.contact{
background: transparent url(../images/a_contact.png) no-repeat;
}
a.about:hover, a.security:hover, a.services:hover, a.contact:hover{
background-position: right top;
}
ul#mainNav h2 a{
}If anyone can make it work in Firefox and Internet Explorer I would be most grateful.
First, you are using size styles (width, height) and nonzero surrounding styles (margin, border, padding) in the same style or tag. This is guaranteed to cause a FF/IE incompatibility.
Second, you need to understand the hierarchy of styles.
Highest
- specific class or id styles from a stylesheet
- specific tag styles from a stylesheet
- specific styles in html
- document-wide formatting from a stylesheet
- document-wide formatting from html
lowest
Within the same level of hierarchy, styles placed at the bottom of the stylesheet have precedence over styles placed at the top.
I suggest you use a class to assign specific styles that over ride the styles otherwise in use. Place the specific styles last in the stylesheet.
lol thanks for the help but I completely forgot to mark this as solved.
I put a div around the banner and advertisement and it worked perfectly :p
Also the thing having the problem, did have its style at the bottom. The banner was placed at the bottom of the style sheet.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.