Conflicting styles

Question

Grantmitch1 0 Junior Poster in Training

15 Years Ago

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

web-design

2 Contributors
5 Replies
272 Views
6 Days Discussion Span
Latest Post 15 Years Ago Latest Post by Grantmitch1

All 5 Replies

MidiMagic 579 Nearly a Senior Poster

15 Years Ago

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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Grantmitch1 0 Junior Poster in Training · Answer 1 · 2008-08-30T04:16:50+00:00

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;
}

Grantmitch1 0 Junior Poster in Training · Answer 2 · 2008-08-30T20:18:17+00:00

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&nbsp; 
		hjhjhjhjhjhjhjhjhjh&nbsp; hjhjhjhjhjhjhjhjhjh&nbsp; hjhjhjhjhjhjhjhjhjh&nbsp; 
		hjhjhjhjhjhjhjhjhjh&nbsp; hjhjhjhjhjhjhjhjhjh&nbsp; gh 
		hjhjhjhjhjhjhjhjhjh&nbsp; hjhjhjhjhjhjhjhjhjh&nbsp; hjhjhjhjhjhjhjhjhjh&nbsp; 
		hjhjhjhjhjhjhjhjhjh&nbsp; 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{

  }

Grantmitch1 0 Junior Poster in Training · Answer 3 · 2008-08-30T20:19:33+00:00

If anyone can make it work in Firefox and Internet Explorer I would be most grateful.

Grantmitch1 0 Junior Poster in Training · Answer 4 · 2008-09-05T11:54:07+00:00

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.

Conflicting styles

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers