Jump to content

CSS help needed

JackPike

By JackPike
in Technical Help Forum

 Share

Recommended Posts

Si... Member

Si...

Posted
Posted

I've had nothing but problems with IE`s lack of support with CSS so what I usually do now is, I create 2 CSS files. One for 99% of browsers and one specifically for IE. I know its a lazy way out, but it seems to work no problems.

 

For your problem, I personally would do this:

 

Main HTML:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sniper Baits Home Page</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<meta name="Robots" content="NOINDEX" />

<link rel="stylesheet" type="text/css" href="main.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IE.css" />
<![endif]-->

</head>
<body>
<div id="outer">
 <div id="bar"> <span style="padding:5px;font-size:11px;"> <img src="banner2.png" alt="" /> </span></div>
 <div id="bodyblock" align="center">
   <div id="l-col" align="center">
     <div class="rollover"> <a href="index.html">About Us</a><br />
       <a href="baits.html">Boilies</a><br />
       <a href="#">Link</a><br />
       <a href="#">Link</a><br />
     </div>
     <br />
   </div>
   <div id="cont">
     <h3 align="center">SNIPER BAIT TECHNOLOGY</h3>
     <p>Specially for discerning carp anglers who wants that special custom bait, but they do not have the time or facilities to make their own.
       Sniper Baits offer a unique bespoke service which means that each individual angler can take advantage of our vast experience to tailor made bait program.
       Your individual boilie specifications are held on our confidential database and you simply order what you need when you need it.</p>
     <p>Sniper bait technology was formed in January 2005. It started out as a hobby. As things progressed one or two people were asking what was the personal bait i used and how they could get hold of the bait. One thing led to another and then sniper baits was formed.</p>
     <p>Sniper baits will continue to develop products throughout the year and help to provide a top quality service for a top quality product.</p>
     <div style="text-align: center;"><img src="snipelogo.jpg" alt="image" /></div>
     <br />
   </div>
 </div>
 <div id="ftr" align="center">Copyright (c) Jackpike 2007</div>
</div>
</body>
</html>

 

Main.css

body {background-color: #E2EBD1;margin: 20px;text-align: center;padding: 0;}#outer {text-align:center;background-image: url(pagebg1.gif);border:1px solid #000000;width:700px;margin:auto;}#hdr {height: 60px;background: #eeeeee;color: #ECECDF;
text-align: center;
}

#bar {
height: 85px;
background-image: url(pagebg1.gif);
background-color: #DEB887;
text-align: center;
border-width: 1px 0 1px 0;
}

#bodyblock {
position: relative;
background-image: url(pagebg1.gif);
color: #333333;
width: 700px;
padding: 0;
}

#l-col {
float: left;
background-color: transparent;
width: auto;
}

#cont {
width:495px;
background-color: #FFF8DC;
border-width:0 0 0 1px;
text-align: center;
font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
line-height: 1.6em;
color: #000;
margin: auto;
}

#ftr {
height: 25px;
background-image: url(pagebg1.gif);
color: Yellow;
border: none ;
margin: 0;
}

h3, p {
margin:0;
padding:15px;
}

h4 {
margin:0; 
padding: 5px 0;
}

.rollover a {
display: block;
width: 70px;
height: 72px;
padding: 10px 10px 10px 7px;
font: bold 20px sans-serif;
color: White;
background: url(home.png) no-repeat 0 0;
text-decoration: none;
}

.rollover a:hover {
background-position: 0 2px;
color: Yellow;
}

.rollover a:active {
background-position: 0 2px;
color:#fff;
}

 

IE.css

body {
background-color: #E2EBD1;
margin: 20px;
text-align: center;
padding: 0;
}

#outer {
text-align:center;
background-image: url(pagebg1.gif);
border:1px solid #000000;
width:700px;
margin:auto;
}

#hdr {
height: 60px;
background: #eeeeee;
color: #ECECDF;
text-align: center;
}

#bar {
height: 85px;
background-image: url(pagebg1.gif);
background-color: #DEB887;
text-align: center;
border-width: 1px 0 1px 0;
}

#bodyblock {
position: relative;
background-image: url(pagebg1.gif);
color: #333333;
width: 700px;
padding: 0;
}

#l-col {
float: left;
background-color: transparent;
width: auto;
}

#cont {
width:495px;
background-color: #FFF8DC;
border-width:0 0 0 1px;
text-align: center;
font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
line-height: 1.6em;
color: #000;
margin-right: 85px;
}

#ftr {
height: 25px;
background-image: url(pagebg1.gif);
color: Yellow;
border: none ;
margin: 0;
}

h3, p {
margin:0;
padding:15px;
}

h4 {
margin:0; 
padding: 5px 0;
}

.rollover a {
display: block;
width: 70px;
height: 72px;
padding: 10px 10px 10px 7px;
font: bold 20px sans-serif;
color: White;
background: url(home.png) no-repeat 0 0;
text-decoration: none;
}

.rollover a:hover {
background-position: 0 2px;
color: Yellow;
}

.rollover a:active {
background-position: 0 2px;
color:#fff;
}

Link to comment
Share on other sites
Si... Member

Si...

Posted
Posted

I prefer the firefox one as its cleaner and looks more professional.

 

Only one issue though

 

The right hand column is one px higher than the rest, thus the background looks out of place along the vertical line.

 

post-903-1193792480_thumb.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We and our partners use cookies on our website to give you the most relevant experience by remembering your preferences, repeat visits and to show you personalised advertisements. By clicking “I Agree”, you consent to the use of ALL the cookies. However, you may visit Cookie Settings to provide a controlled consent.

  I accept