PDA

View Full Version : IE / Firefox problems

kappel
14th August 06, 10:29 AM
Hi I just learned to build sites using only CSS/XHTML instad of tables.
Have som questions though.

Why is the so big diff in IE and Firefox, what can I do to change it?
Then I need help with the textad divs, I want them in two colums.

my dev site..
http://www.newmarket.se/sportnik/


body { background: #fff url(../images/bg_grey.gif); background-repeat: repeat-x; margin: 0px; font-family: 'Arial'; font-size : 11px; color : #3b3b3b;}

/* General Links */
a:link { text-decoration : none; color : #00508f; border: 0px;}
a:active { text-decoration : underline; color : #00508f; border: 0px;}
a:visited { text-decoration : none; color : #00508f; border: 0px;}
a:hover { text-decoration : underline; color : #00508f; border: 0px;}

input { background: #f3f3f3; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #4b4b4b; }
select { background: #f3f3f3; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #4b4b4b; }
textarea { background: #f3f3f3; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color:#4b4b4b; padding: 6px;}

/* General Class */
form { padding: 0px; margin: 0px; }
img { border: none;}

/* Main contain (FULL PAGE) */
#maincontain { width:990px; background: #ffffff; margin: 0px; text-align: left;}

/* Annons Topp */
#toppad { width:980px; margin: 5px 5px 25px 5px; height:120px; font-family: 'Arial'; font-size : 9px; color : #666666;}

/* Header */
#header { width:980px; height:35px;}

#header h1 { margin: 0; padding-left: 16px;}
#header h1 a {width: 154px; height: 40px; background: url(../images/logo_sportnik.gif) no-repeat; cursor: hand; float: left; }
#header h1 a:hover { float: left; color: #fff; background: url(../images/logo_sportnik.gif) no-repeat bottom; cursor: hand; text-decoration: none;}

#header #textad { margin-left: 222px; width: 290px;}
#header #textad h1 { font-family: 'Arial'; font-size : 9px; color : #666666; margin: 0; padding: 0;}
#header #textad a {font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color:#3b3b3b; text-decoration : none;}
#header #textad a:hover { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color:#6b6b6b; text-decoration : none;}


#block {
padding-left: 2px;
background: #f1f1f1;
width:180px;
}
lifeonmars
14th August 06, 02:24 PM
Personally, whenever I have problems getting IE and FF to work, I code seperately for them. It takes a little bit of PHP, but it's pretty easy to impliment.

(Put this first part at the VERY top of the page. Or you will get errors.)

<?php
if (!isset($_COOKIE['agent'])) {
setcookie ('agent', $_SERVER['HTTP_USER_AGENT']);
$agent = $_COOKIE['agent'];
if (!isset($agent)) { // They rejected cookies
$agent = $_SERVER['HTTP_USER_AGENT'];
}
}
else {
$agent = $_COOKIE['agent'];
}
?>

The code above sets a cookie on the users computer to remember, basically, what browser they're using. It puts less strain on the server to remember it instead of recalling it every page load. But, if they reject cookies, it'll still work.

Then, place this whereever that information above (that you posted) is supposed to go:
<?php
if (strpos(strtoupper($agent), 'MSIE')) { ?>

<!-- ALL CSS FOR INTERNET EXPLORER HERE -->

<?php
}
else { ?>

<!-- ALL CSS FOR OTHER BROWSERS HERE -->

<?php
}
?>

You can also add in functionality for other browsers by adding in a few elseif statements. But right now I'm thinking you're just looking for FF compatibility.

Thats really the only way I know how to do it. With the color differences in IE and FF, it's sooooo hard to get everything to look identicle between browsers.
dbldutch
15th August 06, 02:56 PM
You have two <html> tags in your page.

<html xmlns="http://www.w3.org/1999/xhtml">
<html>

That could initially start throwing things off.

You also embed the stylesheet twice.
dbldutch
15th August 06, 03:15 PM
I would also try remove those empty <li> tags at the bottom. I'm not sure what you're trying to do there but you could probably do it with one image.