designed a website in CSS but displays differently in other browsers

skyfire400 · #1 (**permalink**) Jan 23rd, 2006, 15:43

hey there, was wondering if anyone can help with my little problem,
ive designed a website in CSS, all os working except in different browsers it is different, if it open it in Firefox or safari it is the way i want it, but the lilkes of IE the background is dark gray not white, and some image transparency dont work,

if anyone can help it would be much appericated!

Corey Bryant · #2 (**permalink**) Jan 23rd, 2006, 18:23

Please provide the source code / URL. It is difficult to say without seeing that.

It could be that you might be using a PNG which IE does not fully support. It could be that you are not using a DOCTYPE.

skyfire400 · #3 (**permalink**) Jan 23rd, 2006, 18:53

hye there, thanks for the post, i havent put it on the web yet, so ive pasted the code of it here,

Code: Select all

<html>
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Welcome to Can you Remember?...</title>
<link rel="stylesheet" href="layout.css" type="text/css">
</head>
<!-- The structure of this file is exactly the same as home.html;
the only difference between the two is the stylesheet they use -->
<body BACKGROUND="http://www.webforumz.com/images/clubbing-2.png"
STYLE="background-repeat: no-repeat; background-attachment: scroll">
<div id="masthead"> 
<h1 id="siteName">Can you remember?... </h1> 
<div id="globalNav"> 
<a href="#">Espionage</a> | <a href="#">Tiger Tiger</a> | <a href="#">Soul </a> |
<a href="#">Priory</a> | <a href="#">Ministry</a> | <a href="#">Jam</a> | <a href="#">Blue bar</a> |
<a href="#">Opium</a> |
</div> 
</div> 
<!-- end masthead --> 
<div id="content"> 
<div id="breadCrumb"> 
</div> 
<h2 id="pageName">Can you remember? </h2> 
<div class="feature"> 
<img src="http://www.webforumz.com/images/nightlife.jpg" alt="" width="280" height="200"> 
<h3> Welcome.. </h3> 
<p> 
<center>
<B>
<BR>
..Hey there, welcome to canyouremember.co.uk where you can find absolutely anything you need for a goos night
(well we hope you will anyway..), on the site you can find any information on any club, music played, dress wear, events, 
deals, promotions and the gallery that will answer the always after morning question of.."what did i do last night!?", 
which ever club you were in we were most likley there and got you on camera!. the site also includes the best places to 
shop in town for clothes of all kind to wear on your nights out and also peoples opinions of all the clubs..
</B>
</center>
</p> 
</div> 
<div class="story"> 
<h3></h3> 
<p> 
<center>
<B>
..Check out the Food & Drink section if you fancy going for a meal or quick food before heading out on the town, or even
just a few quiet drinks with friends before partyin away into the early hours..other extras to the site are the top places 
to buy music, and more shopping for any extras your not sure where to get them. All of the sites we mention on canyouremember.co.uk
you can also link directly to there official web sites from here..
</B>
</center>
<BR><BR>
<center>
<B>
..Hope you all enjoy the stie and find what your looking for, if not there is also a page to <a href="contact.htm">contact us</a>
at for anything at
all, and we'll get back to ASAP (no more than afew days), thanks again..,
canyouremember.co.uk
</B>
</center>   
</p> 
<p> 
</p> 
</div> 
<div class="story"> 
<h3></h3> 
</div> 
</div> 
<!--end content --> 
<div id="navBar"> 
<div id="search"> 
<form action="#"> 
<label>search</label> 
<input name="searchFor" type="text" size="10"> 
<input name="goButton" type="submit" value="go"> 
</form> 
</div> 
<div id="sectionLinks"> 
<ul> 
<li><a href="home.htm">Home</a></li>
<li><a href="gallery.htm">Gallery</a></li> 
<li><a href="#">Pubs n Clubs</a></li> 
<li><a href="contact.htm">Contact Us</a></li> 
<li><a href="#">About Us</a></li> 
<li><a href="#">Need an outift?</a></li> 
</ul> 
</div> 
<div class="relatedLinks"> 
<h3>Extras</h3> 
<ul> 
<li><a href="#">Music</a></li> 
<li><a href="#">Shopping</a></li> 
<li><a href="#">Food & Drink</a></li> 
</ul> 
</div> 
<div id="advert"> 
<img src="logo1.jpg" alt="" width="120" height="80">
</div> 
<div id="headlines"> 
<h3>On this week... </h3> 
<p> 
Event <a href="#"> full news...</a> 
</p> 
<p> 
Event <a href="#"> full news...</a></p> 
<p> 
Event <a href="#"> full news...</a></p> 
<p> 
Event <a href="#"> full news...</a></p> 
</div> 
</div> 
<!--end navbar --> 
<div id="siteInfo"> 
<img src="logo1.jpg" width="44" height="22"> <a href="about.htm">About Us</a> |<a href="contact.htm">Contact Us</a> | &copy;2005
Phusion Designs
</div> 
<br> 
</body>
</html>

Corey Bryant · #4 (**permalink**) Jan 23rd, 2006, 19:09

You will still need to provide the CSS source code since that is where your problem more than likely is.

Right now I see that you are not using a DOCTYPE

skyfire400 · #5 (**permalink**) Jan 24th, 2006, 04:38

i think i fixed it, i changed the png to a jpg, i didnt notice it was a png, it has in the likes opera where it didnt work before but here the external stylehseet:

Code: Select all

/***********************************************/
/* 2col_leftNav.css                            */
/* Use with template 2col_leftNav.html          */
/***********************************************/

/***********************************************/
/* HTML tag styles                             */
/***********************************************/ 

body{
    font-family: Arial,sans-serif;
    color: #333333;
    line-height: 1.166;    
    margin: 0px;
    padding: 0px;
}

a:link, a:visited, a:hover {
    color: #006699;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}
/* overrides decoration from previous rule for hovered links */

h1, h2, h3, h4, h5, h6 {
    font-family: Arial,sans-serif;
    margin: 0px;
    padding: 0px;
}

h1{
 font-family: Verdana,Arial,sans-serif;
 font-size: 120%;
 color: #334d55;
}

h2{
 font-size: 114%;
 color: #006699;
}

h3{
 font-size: 100%;
 color: #334d55;
}

h4{
 font-size: 100%;
 font-weight: normal;
 color: #333333;
}

h5{
 font-size: 100%;
 color: #334d55;
}

ul{
 list-style-type: square;
}

ul ul{
 list-style-type: disc;
}

ul ul ul{
 list-style-type: none;
}

label{
 font: bold 100% Arial,sans-serif;
 color: #334d55;
}
                

/***********************************************/
/* Layout Divs                                 */
/***********************************************/

#masthead{
    margin: ;
    padding: 10px 0px;
    border-bottom: 1px solid #cccccc;
    width: 100%;
}

#navBar{
    margin: 0 79% 0 0;
    padding: 0px;
    background-color: #FFFFFF ;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

#content{
  float:right;
    width: 75%;
    margin: 0;
    padding: 0 3% 0 0;
}


/***********************************************/
/*Component Divs                               */
/***********************************************/

#siteName{
    margin: 0px;
    padding: 0px 0px 10px 10px;
}


/*************** #pageName styles **************/

#pageName{
    padding: 0px 0px 10px 10px;
}


/************* #globalNav styles **************/

#globalNav{
color: #cccccc;
padding: 0px 0px 0px 10px;
white-space: nowrap;
}
/* 'nowrap' prevents links from line-wrapping if there are too many to fit in one line
   this will force a horizontal scrollbar if there isn't enough room for all links
   remove rule or change value to 'normal' if you want the links to line-wrap */

#globalNav img{
 display: block;
}

#globalNav a {
    font-size: 90%;
    padding: 0px 4px 0px 0px; 
}


/************* #breadCrumb styles *************/

#breadCrumb{
    font-size: 80%;
    padding: 5px 0px 5px 10px;
}


/************** .feature styles ***************/

.feature{
    padding: 0px 0px 10px 10px;
    font-size: 80%;
}

.feature h3{
    padding: 30px 0px 5px 0px;
    text-align: center;
}

.feature img{
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0 5px 5px 0;
}
/* adjust margins to change separation between the feature image and text flowing around it */


/************** .story styles *****************/

.story{
    clear: both;
    padding: 10px 0px 0px 10px;
    font-size: 80%;
}

.story p{
    padding: 0px 0px 10px 0px;
}


/************* #siteInfo styles ***************/

#siteInfo{
    clear: both;
    border: 1px solid #cccccc;
    font-size: 75%;
    color: #cccccc;
    padding: 10px 10px 10px 10px;
    margin-top: 0px;
}
/* negative top margin pulls siteinfo up so its top border overlaps (and thus lines up with)
    the bottom border of the navBar in cases where they "touch" */

#siteInfo img{
    padding: 4px 4px 4px 0px;
    vertical-align: middle;
}


/************* #search styles ***************/

#search{
    padding: 5px 0px 5px 10px;
    border-bottom: 1px solid #cccccc;
    font-size: 90%;
}

#search form{
 margin: 0px;
 padding: 0px;
}

#search label{
    display: block;
    margin: 0px;
    padding: 0px;
}


/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}


/*********** #sectionLinks styles ***********/

#sectionLinks{
    position: relative;
    margin: 0px;
    padding: 0px;
    border-bottom: 1px solid #cccccc;
    font-size: 90%;
}

#sectionLinks h3{
    padding: 10px 0px 2px 10px;
}

#sectionLinks a:link{
    padding: 2px 0px 2px 10px;
    border-top: 1px solid #cccccc;
    width: 100%;
  voice-family: "\"}\""; 
  voice-family:inherit;
    width: auto;
}

#sectionLinks a:visited{
    border-top: 1px solid #cccccc;
    padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
    border-top: 1px solid #cccccc;
    background-color: #dddddd;
    padding: 2px 0px 2px 10px;
}


/*********** .relatedLinks styles ***********/

.relatedLinks{
    margin: 0px;
    padding: 0px 0px 10px 10px;
    font-size: 90%;
}

.relatedLinks h3{
    padding: 10px 0px 2px 0px;
}


/************** #advert styles **************/

#advert{
    padding: 10px 0px 0px 10px;
    font-size: 80%;
    border-top: 1px solid #cccccc;
}

#advert img{
    display: block;
}


/************** #headlines styles **************/

#headlines{
    margin: 0px;
    padding: 10px 0px 20px 10px;
    font-size: 80%;
}

#headlines p{
    padding: 5px 0px 5px 0px;
}

Corey Bryant · #6 (**permalink**) Jan 24th, 2006, 11:29

And did you add the DOCTYPE? That will probably fix the other issues.

skyfire400 · #7 (**permalink**) Jan 24th, 2006, 18:07

what do write for the doc type?

herkalees · #8 (**permalink**) Jan 24th, 2006, 20:24

Posts edited. Please use the code tags when posting such long amounts of code.

Corey Bryant · #9 (**permalink**) Jan 25th, 2006, 11:53

Check out DOCTYPE I would either use something like

HTML: Select all

<?xml version="1.0" encoding="utf-8"?>
<!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">

or

HTML: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] How do the symbols * . and # apply to IDs differently?	Inkers	Web Page Design	8	Nov 14th, 2007 03:58
Problem with IE , Firefox displays website fine (blank space issue)	eksquall	Web Page Design	6	Jul 29th, 2006 17:52
Fonts display differently in FF and IE	Chico	Web Page Design	4	Jan 2nd, 2006 12:52
Simple HTML displayed differently between browsers	RichRadio2005	Web Page Design	0	Nov 29th, 2005 14:04
My own new designed logo , website	smiversonline	Entry, Nominations and Voting	2	Jul 24th, 2005 11:50

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
designed a website in CSS but displays differently in other browsers