Firefox and IE

hunna03 · March 30th, 2008, 9:45 PM

http://www.clintonandersen.name/NASG/

If I look at the above site in Firefox it looks great. If I look at it in IE it looks horrible. Besides IE being a POS browser how do I get it to look the same (because lord knows that companys still pretty much deal in IE)?

Thanks

**Twist3d** · March 31st, 2008, 8:15 AM

Wow your right it does look like crap in IE unfortunally I'm not good at figuring out other people's issues. I'm only good at figuring out my own site issues.

Perhaps Ask Twirp. He's the script king

hunna03 · April 2nd, 2008, 8:52 PM

:-) Well I wish I was good at fixing my own problems. Hopefully someone else will be able to help me and I might have to seek out this Twerp you speak of.

**cowboy** · April 2nd, 2008, 9:22 PM

You do not have valid HTML markup for #1. Missing DOCTYPE declaration, ie:

Code:

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

and no html beginning and ending tags, ie:

Code:

 
<html lang="en">
</html>

#2 Your css file does not tell the page where to begin.

Suggest something like:

Code:

 
body {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding: 0;
    background: url(background.jpg);
    }

*** margin: 0 and padding: 0 at least tell the browser where to begin.

#3 drop the tables and use only css .

An easy way to center your page in any browser:
...
<body>
<div id="Content">
...
...
<div>
</body>
...

#Content {
position: absolute;
left: 50%;
width: amount in px;
margin-top: 0;
margin-left: 1/2 the width amount in px;
}

dubLeE · April 2nd, 2008, 11:35 PM

Since many browsers render websites differently, you have to tell the browsers what to do separately. The easiest solution for this would be to have a separate stylesheet for IE.

wgm · April 2nd, 2008, 11:46 PM

Part of my CSS file, my site looks the same in FF and IE, site has no tables.

Code:

* {
  margin: 0;
  padding: 0;
}
body {
  font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif;
  background-color: #999999;
  color: #000000;
  font-size: small;
  margin: 0;
  padding: 10px 0 10px 0;
  border: 0;
}
#container {
  background-color: #d4d4d4;
  color: #000000;
  font-size: small;
  text-align: left;
  width: 80%;
  margin: 0 auto 0 auto;
  padding: 0;
  border: 1px solid #000000;
}

hunna03 · April 12th, 2008, 11:16 AM

Well the primary reason I am using tables is because I wanted the separate background color surrounding the rest of the information. I have the bulk of the information surrounded by a thin box of yellow just for style. I'm not sure how to do that without tables.

**cowboy** · April 12th, 2008, 8:49 PM

.
Here is a link using the code below for basic table simulation using CSS.

Has some extra hover commands on the grid that can not be done with tables.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>CSS Boxes</title>
<style type="text/css">
body {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding: 0;
    background: url(background.jpg);
    }
#Content {
 position:absolute;
 left:50%;
 width:666px;
 margin-top:10px;
 margin-left:-332px;
    text-align: center;
 }
#Box1 {
    width: 600px;
    height: 400px;
    padding: 50px;
    background-color: white;
    }
#Box2 {
    width: 500px;
    height: 300px;
    padding: 50px;
    background-color: blue;
    }
.cell {
    width: 120px;
    height: 96px;
    float: left;
    margin: 3px 0 0 4px;
    background-color: yellow;
    }
.cell:hover {
    background-color: #f66;
    color: #fff;
    }
.bottom {
    line-height: 170px;
    }
.top {
    line-height: 1.0em;
    }
.middle {
    line-height: 96px;
    }
.left {
    text-align: left;
    }
.hbottom:hover {
    line-height: 170px;
    }
.htop:hover {
    line-height: 1.0em;
    }
.hmiddle:hover {
    line-height: 96px;
    }
.hitalic:hover {
    font-style: italic;
    }
.hright:hover {
    text-align: right;
    }
.hleft:hover {
    text-align: left;
    }
</style>
</head>
<body>
<div id="Content">
<div id="Box1">
<div id="Box2">
<div class="cell bottom htop">Bottom -> Top
</div><!-- cell-->
<div class="cell middle hbottom">Middle->Bottom
</div><!-- cell-->
<div class="cell top hbottom">Top -> Bottom
</div><!-- cell-->
<div class="cell middle htop">Middle -> Top
</div><!-- cell-->
<div class="cell top hmiddle">Top -> Middle
</div><!-- cell-->
<div class="cell bottom hmiddle">Bottom->Middle
</div><!-- cell-->
<div class="cell bottom">Bottom
</div><!-- cell-->
<div class="cell middle">Middle
</div><!-- cell-->
<div class="cell top left hright">Top< -> Top>
</div><!-- cell-->
<div class="cell hitalic">Bold -> Italic
</div><!-- cell-->
<div class="cell hright">Center->Right
</div><!-- cell-->
<div class="cell hleft">Center->Left
</div><!-- cell-->
</div><!-- Box2-->
</div><!-- Box1-->
</div><!-- Content-->
</body>
</html>

March 30th, 2008, 9:45 PM	#1 (permalink)
hunna03 Registered User Comfy Contributor Joined in Mar 2006 Lives in UT Hosted on SH92 140 posts Gave thanks: 24 Thanked 0 times	Firefox and IE http://www.clintonandersen.name/NASG/ If I look at the above site in Firefox it looks great. If I look at it in IE it looks horrible. Besides IE being a POS browser how do I get it to look the same (because lord knows that companys still pretty much deal in IE)? Thanks __________________ ~CJA~ 72.29.87.117 "Constantly lost in the world of PHP" is my personal understatement.

March 31st, 2008, 8:15 AM	#2 (permalink)
Twist3d Twist3d One Excelling Contributor Joined in Dec 2007 Lives in IA Hosted on sh132 & pass81 761 posts Gave thanks: 7 Thanked 12 times	Wow your right it does look like crap in IE unfortunally I'm not good at figuring out other people's issues. I'm only good at figuring out my own site issues. Perhaps Ask Twirp. He's the script king __________________ [ Twist3d.net ] SH132 [ Twist3dhost.com ] [Kustom Choice Computers] Pass81

April 2nd, 2008, 8:52 PM	#3 (permalink)
hunna03 Registered User Comfy Contributor Joined in Mar 2006 Lives in UT Hosted on SH92 140 posts Gave thanks: 24 Thanked 0 times	:-) Well I wish I was good at fixing my own problems. Hopefully someone else will be able to help me and I might have to seek out this Twerp you speak of. __________________ ~CJA~ 72.29.87.117 "Constantly lost in the world of PHP" is my personal understatement.

April 2nd, 2008, 9:22 PM	#4 (permalink)
cowboy Surpass Fan Excelling Contributor Joined in Nov 2005 Lives in Colorado Hosted on DEDI 921 posts Gave thanks: 2 Thanked 91 times	You do not have valid HTML markup for #1. Missing DOCTYPE declaration, ie: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> and no html beginning and ending tags, ie: Code: <html lang="en"> </html> #2 Your css file does not tell the page where to begin. Suggest something like: Code: body { font-family: Verdana, Geneva, sans-serif; font-size: 0.8em; font-weight: bold; text-align: center; margin: 0; padding: 0; background: url(background.jpg); } *** margin: 0 and padding: 0 at least tell the browser where to begin. #3 drop the tables and use only css . An easy way to center your page in any browser: ... <body> <div id="Content"> ... ... <div> </body> ... #Content { position: absolute; left: 50%; width: amount in px; margin-top: 0; margin-left: 1/2 the width amount in px; } __________________ Where would you be if you were at the highest court in the land (US)?

April 2nd, 2008, 11:35 PM	#5 (permalink)
dubLeE Registered User Excelling Contributor Joined in Oct 2004 Hosted on pass61/63 618 posts Gave thanks: 8 Thanked 2 times	Since many browsers render websites differently, you have to tell the browsers what to do separately. The easiest solution for this would be to have a separate stylesheet for IE. __________________ Bronze Reseller : - Pass 61 - Pass 63 dubLeE.com

April 12th, 2008, 11:16 AM	#7 (permalink)
hunna03 Registered User Comfy Contributor Joined in Mar 2006 Lives in UT Hosted on SH92 140 posts Gave thanks: 24 Thanked 0 times	Well the primary reason I am using tables is because I wanted the separate background color surrounding the rest of the information. I have the bulk of the information surrounded by a thin box of yellow just for style. I'm not sure how to do that without tables. __________________ ~CJA~ 72.29.87.117 "Constantly lost in the world of PHP" is my personal understatement.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread: