473,327 Members | 1,952 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

CSS Problems - Browser Compatibility

i'm having strange problems with browser compatibility between firefox and internet explorer,

----------------------------------------
The following is the CSS:
----------------------------------------

body {
font-family: Verdana, Arial, Helvetica, Sans-serif;
font-size: 80%;
background-color: #FFFFFF;
color: #111111;
font-weight: normal;
text-align: center;
margin: 0px;
}

#logo {
text-align: left;
width: 750px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
height: 100px;
background-color: #D25400;
background-image:url("../images/image1.jpg");
background-repeat: none;
border-bottom: 1px solid #EEB211;
}

#main_content {
position: absolute;
width: 750px;
margin: 100px;
margin-left: auto;
margin-right: auto;
background-image:url("../images/image2.jpg");
background-repeat: no-repeat;
border-bottom: 1px solid #EEB211;
height: 450px;
}

#main_content .enter {
width: 150px;
font-size: 125%;
font-weight: bold;
margin: 315px 0px 0px 250px;
height: 18px;
padding: 1px;
text-align: center;
color: #FFFFFF;
}

#main_content .enter a {
color: #FFFFFF;
display: block;
}

#main_content .enter a:hover {
color: #EEB211;
}

---------------------------------
The HTML is:
---------------------------------

<html>
<head>
<title>Web Page Title :: Introduction</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles/index.css" />
<script type="text/javascript" src="javascript/functions.js"></script>
</head>
<body>
<div id="main_content">
<div class="enter"><a href="introduction.php">Click Here to Enter Site</a></div>
</div>
<div id="logo"></div>
</body>
</html>

-------------------------------------------------------------------------------
In Internet Explorer the display is fine, however in Firefox the background image isn't appearing at all
and the layout looks completely wrong.

Any Ideas?

Cheers

Kev
Jul 21 '05 #1
3 2477
Kevin Matthews wrote:
i'm having strange problems with browser compatibility between firefox and internet explorer,

----------------------------------------
The following is the CSS:
----------------------------------------
Please place your example somewhere and post a link to it. Far better
than asking everyone to create a local page, and rearrange your code.
Besides, we don't have a copy of image1.jpg and image2.jpg so any
efforts will likely be fruitless.
body {
font-family: Verdana, Arial, Helvetica, Sans-serif;
font-size: 80%;
80% of my desired viewing size? I don't have Verdana (a very large
font) so I get 80% of Arial, nearly impossible to read. Drop Verdana
and use font-size: 100%.
background-color: #FFFFFF;
color: #111111;
font-weight: normal; <-- default
text-align: center;
margin: 0px;
}

#logo {
text-align: left;
width: 750px; <-- is fixed size necessary?
margin-top: 0px;
margin-left: auto;
margin-right: auto;
height: 100px;
Consider setting sizes for everything but borders in em units so that
when we increase your small fonts, the containers will stretch to
accommodate your text.
background-color: #D25400;
background-image:url("../images/image1.jpg");
background-repeat: none;
border-bottom: 1px solid #EEB211;
}

#main_content {
position: absolute;
width: 750px;
margin: 100px;
margin-left: auto;
margin-right: auto;
background-image:url("../images/image2.jpg");
background-repeat: no-repeat;
border-bottom: 1px solid #EEB211;
height: 450px;
}

#main_content .enter {
width: 150px;
font-size: 125%;
font-weight: bold;
margin: 315px 0px 0px 250px;
height: 18px;
padding: 1px;
text-align: center;
color: #FFFFFF;
}

#main_content .enter a {
color: #FFFFFF;
display: block;
}

#main_content .enter a:hover {
color: #EEB211;
}

---------------------------------
The HTML is:
---------------------------------
No DOCTYPE. For new pages I suggest HTML 4.01 Strict.
See: http://www.w3.org/QA/2002/04/valid-dtd-list.html
<html>
<head>
<title>Web Page Title :: Introduction</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles/index.css" />
<script type="text/javascript" src="javascript/functions.js"></script>
Although the JavaScript may not be relevant to your problem (I don't
see any calls to it) we don't have it.
</head>
<body>
<div id="main_content">
<div class="enter"><a href="introduction.php">Click Here to Enter Site</a></div>
</div>
<div id="logo"></div>
</body>
</html>

-------------------------------------------------------------------------------
In Internet Explorer the display is fine, however in Firefox the background image isn't appearing at all
and the layout looks completely wrong.


Again, without your images, we cannot tell. Put up a test case and
come back, please.

I know your code is a test, but "Click Here" is poor choice of link
text. Google for that. <g>

--
-bts
-This space intentionally left blank.
Jul 21 '05 #2
I actually fixed the problem, What I didn't put in the prevoius post was that I was using comments in my CSS. For some reason i was using <!-- --> for comments in CSS instead of /* */. That was the problem!

Thanks anyway
"Kevin Matthews" <no**@blueyonder.co.uk> wrote in message news:mL******************@fe1.news.blueyonder.co.u k...
i'm having strange problems with browser compatibility between firefox and internet explorer,

----------------------------------------
The following is the CSS:
----------------------------------------

body {
font-family: Verdana, Arial, Helvetica, Sans-serif;
font-size: 80%;
background-color: #FFFFFF;
color: #111111;
font-weight: normal;
text-align: center;
margin: 0px;
}

#logo {
text-align: left;
width: 750px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
height: 100px;
background-color: #D25400;
background-image:url("../images/image1.jpg");
background-repeat: none;
border-bottom: 1px solid #EEB211;
}

#main_content {
position: absolute;
width: 750px;
margin: 100px;
margin-left: auto;
margin-right: auto;
background-image:url("../images/image2.jpg");
background-repeat: no-repeat;
border-bottom: 1px solid #EEB211;
height: 450px;
}

#main_content .enter {
width: 150px;
font-size: 125%;
font-weight: bold;
margin: 315px 0px 0px 250px;
height: 18px;
padding: 1px;
text-align: center;
color: #FFFFFF;
}

#main_content .enter a {
color: #FFFFFF;
display: block;
}

#main_content .enter a:hover {
color: #EEB211;
}

---------------------------------
The HTML is:
---------------------------------

<html>
<head>
<title>Web Page Title :: Introduction</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles/index.css" />
<script type="text/javascript" src="javascript/functions.js"></script>
</head>
<body>
<div id="main_content">
<div class="enter"><a href="introduction.php">Click Here to Enter Site</a></div>
</div>
<div id="logo"></div>
</body>
</html>

-------------------------------------------------------------------------------
In Internet Explorer the display is fine, however in Firefox the background image isn't appearing at all
and the layout looks completely wrong.

Any Ideas?

Cheers

Kev
Jul 21 '05 #3
Kevin Matthews wrote:
I actually fixed the problem, What I didn't put in the prevoius
post was that I was using comments in my CSS. For some reason i was
using <!-- --> for comments in CSS instead of /* */. That was the
problem!
...which we would have seen immediately, had the page been online.
Thanks anyway


No comments about the rest of my comments? :-)

--
-bts
-This space intentionally left blank.
Jul 21 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Jez Naisbitt | last post by:
Hi Guys, After a break of 2 years I'm now re-visiting the world of java. I recall on my last foray that I had to stick to java 1.1 so I could deploy applets from a server and obtain maximum...
3
by: Rob Oldfield | last post by:
Just a quick and hopefully straightforward question.... are there any issues with web sites based on .Net not working correctly (or at all) for clients using non IE browsers (Mozilla and Firefox...
4
by: George Hester | last post by:
http://pages.ebay.com/help/new/browser-recommendations.html The reason being that other browsers are just plain buggy. Netscape 6+ surely is. Opera I do not know much about but I hear it can...
5
by: Trenqo 0 | last post by:
Instead of doing repetitive checks throughout my code, or defining new methods that won't work unless they are included, I have taken the approach of redefining existing methods in order to make...
32
by: jp29 | last post by:
My take on problems composing, serving and rendering XHTML documents/web pages: 1. Typical conscientious web authors are producing XHTML documents (Web pages) that feature valid Markup and with...
18
by: gabriel | last post by:
greetings, I am currently working on a website where I need to print the Euro symbol and some "oe" like in "oeuvre". If I choose this : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...
2
by: G2 | last post by:
Hi We are dealing with significant browser compatibility issues with Netscape 5.x+ browsers and Mac IE. I am sure most web developers have faced similar issues in the past. Can anyone give me their...
4
by: Maxwell2006 | last post by:
Hi, I am struggling with making my website compatible with multiple browsers and versions. Is there any tool that shows me how my pages look like in different browsers
27
by: David Golightly | last post by:
This is just a quick poll for all you web devs out there: What browsers do you test on/are concerned about compatibility with? Obviously, you're going to test on current-generation browsers such...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.