Learn VBA & Macros in 1 Week!

CSS - Site Displays Right On Ie, Wrong On Firefox/safari

Full Excel VBA Course - Beginner to Expert

Site Displays Right On Ie, Wrong On Firefox/safari	View Content

Hi-

I am finishing up design of a site, and validated it with the W3c validator (everything is valid). When I go to it on IE, everything shows up the way that it should. However, when I go to it on Firefox or Safari, on three pages there seems to be a 'chunk' taken out of the left side. If you compare the three pages in IE and Firefox you should see what I mean (devshed won't let me post links so sorry for the formatting):

01f086d.netsolhost dot com/yk/services dot html
01f086d.netsolhost dot com/yk/experience dot html
01f086d.netsolhost dot com/yk/principals dot html

It seems to be the page length that is causing this, because on shorter length pages, there is no chunk.

I am using DIV tags to lay the site out, which should be pretty easy to follow if you view source. My CSS file is at: 01f086d.netsolhost dot com/yk/assets/css/defaultPage dot css (also validated with W3C).

Any help would be GREATLY appreciated as I have spent hours on this last problem and can't figure out what is causing it!

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Site Displays Wrong In Firefox/mozilla

Site Displays Fine In Firefox But Not In Ie

Problems On Site With Firefox 3, Internet Explorer 6 And 7, Chrome And Safari Okay

Css Site Shows Correct In Firefox But Wrong In Ie

Ie Displays Fine, Ff And Safari Display Incorrectly

Ie7 Displays Images Wrong

Page Displays Erratically In Firefox

Displays Great In Firefox But Not In Ie! Grrr! Help Please

The Website Displays Randomly Incorrectly With Firefox

Why I Cant See My Site In Chrome&safari???

Site With Huge Gaps Under Safari

Site Not Displaying Properly In Safari Or Google Chrome

Either Safari Or Firefox? I Want Both!

Few Things Wrong With My Site:

Safari, Firefox And Background_color?

Div Shifting Right In Firefox And Safari

Css Positioning In Safari, Ie And Firefox

Problems Rendering In Ie...but Not Firefox Or Safari

Css Works In Ie7, Firefox, Safari, Konqueror, Not In Ie6

Css Overflow:auto Safari/old Firefox

Learn VBA & Macros for Excel in 1 Week!

Site Displays Wrong In Firefox/mozilla

Similar Tutorials

Greetings... I've looked all around for a solution, and can't find one. Any help that anyone could provide would so greatly appreciated.

My site http://www.baltimoregamers.com displays the div boxes incorectly in Firefox. I am using quite an unusual layout with one big picture as a plate for the entire site...

I then lay div boxes/layers ontop of the plate to position text exactly where I want it to go. It works flawlessly in IE, but displays a too far down and to the right in FF/Mozilla.

I am new to using CSS and I'm sure that something is off somewhere in the code.

Thank in advance for any help.

Feel free to e-mail me he dekay@baltimoregamers.com

Site Displays Fine In Firefox But Not In Ie

Similar Tutorials

I apologize if this is supposed to be in the HTML forum. Since html code can be viewed from the source I thought I will post the css code to cross check since I couldn't figure out what is causing the problem. So thought I would post it in CSS forum.

I have the following site that displays fine in Firefox but is all a mess in IE.

http://www.geocities.com/dhaagey08/DhaageyTab2.html

Following is the CSS code I am using.

======================================

* {
margin: 0;
padding: 0;
}
html {
background: #fff url("images/html1.png") repeat-x left top;
}
body {
font-family: arial, sans-serif;
font-size: 12px;
color: #888888;
background: url("images/body.png") repeat-y left top;
width: 1000px;
margin: 0 auto 30px auto;
position: relative;
}
a img {
border: 1px solid #ccc;
}

a {
color: #f48a88;
text-decoration: none;
}
a:hover {
visibility: visible;
/* IE bug fix */
}
a:hover img {
border: 1px solid #729AD7;
}
h1 {
font-size: 14px;
}
h2 {
font-size: 12px;
}
.page {
background: url("images/page3.jpg") no-repeat left top;
padding: 15px 125px 0px 115px;
width: 760px;
}

.header{
position: relative;
width: 760px;
height: 170px;
left: 5px;
top: 0;
background: url("images/header1a.jpg") no-repeat left top;
}

/************* menu1 ******************/

.bar4285801 {

width: 345px;
height: 35px;
position: relative;
}

.bar4285801 table.tabbar {
position: absolute;
width: auto;
height: auto;
top: 0px;
left: 45px;
}

.bar4285801 div {
height: 35px;
width: 115px;
}

.bar4285801 div.button {
background: url(menu47831178.jpg);
}

/****************** menu2 ***********************/
.bar4285846 {

width: 345px;
height: 35px;
position: relative;
}

.bar4285846 table.tabbar {
position: relative;
width: auto;
height: auto;
top: -35px;
left: 390px;
}

.bar4285846 div {
height: 35px;
width: 115px;
}

.bar4285846 div.button {
background: url(menu30455262.jpg);
}
.main {
width: 706px;
margin: 0 auto;
}
.box1 {
border: 1px solid #ccc;
clear: both;
padding: 0 5px 25px 2px;
width: 690px;
height:350px;
position: relative;

}
.lady {
float: left;
width:220px;
height:350px;
background: url("images/lady2s.jpg");

}

#right {
width: 457px;
float: right;
padding-bottom: 130px;
}

.dhaagey {
font-family: monotype corsiva;
font-size: 30px;
color: #89201d;
}
.contact{
font-family: monotype corsiva;
font-size: 18px;
color: #89201d;
float: right;
margin-top: 55px;
}

.photos {

margin-top: 5px;
padding-bottom: 8px;
}
.photos a {
width: 106px;
height: 140px;
float: left;
background: #C2D3EE;
text-align: center;
color: #A2A3A6;
text-decoration: none;
font-size: 11px;
font-weight: bold;
margin-right: 14px;
}
.photos>a {
min-height: 148px;
height: auto;
}
.photos a.last, .greybox-background .right a.last {
margin-right: 0;
}
.photos a:hover {
color: #f48a88;
}
.photos a span {
display: block;
padding-top: 2px;
}
.photos a>span {
padding-top: 5px;
}
.greybox {
border: 1px solid #ccc;
margin-bottom: 39px;
padding: 5px 0;
}
.greybox-background {
background: url("images/gbback.jpg") repeat-y left top;
width: 100%;
line-height: 170%;
}
.greybox-background .left, .greybox-background .right {
width: 321px;
float: left;
padding: 0 10px;
}
.greybox-background .right {
float: left;
padding: 0 19px 0 20px;
}

.greybox-background .right a {
display: block;
float: left;
margin-right: 11px;
margin-top: 8px;
}
.greybox2 {
border: 1px solid #ccc;
margin-bottom: 15px;
padding: 9px 7px;
width: 688px;
}
.greybox2 .preview {
float: left;
margin-right: 40px;
margin-right: 44px;
}
.greybox2 .preview img {
padding: 5px;
}
.greybox2 .right {
float: left;
width: 350px;
}
.greybox2 .right a {
float: left;
margin: 0 14px 7px 0;
}
.footer1 {
text-align: center;
padding: 0 27px 3px 27px;
}
.footer1 a {
color: #872323;
text-decoration: none;
}
.footer1 a:hover {
color: #d87126;
text-decoration: none;
}
.footer2 {
font-size: 0px;
line-height: 0px;
height: 15px;
background: url("images/footer.png") no-repeat left top;
margin-left: 110px;

}
.cleaner {
font-size: 0px;
line-height: 0px;
height: 0px;
clear: both;
}
============================================

Any help is greatly appareciated.

Problems On Site With Firefox 3, Internet Explorer 6 And 7, Chrome And Safari Okay

Similar Tutorials

Hey guys, I'm in need of some help here.

Okay, so. My site looks the way I want so far on google chrome and safari (mac). And right now I'm at the stage of getting it to display like the two.

If anyone who decides to help doesn't have access to certain browsers, I'll further explain, but I think it's easiest said to see for yourself.

Right now I'm focusing on ie6, ie7, ff3. The markup in some areas is whacky, I know, but I decided to pick up where I left off on this project (which I first began building awhile ago) instead of starting completely over with a good template.

http://thecheckoutplace.com/compute...eOneNetbook.php

If anyone can offer a hand, it means a lot. Cheers guys.

Css Site Shows Correct In Firefox But Wrong In Ie

Similar Tutorials

The website
Quote:
downloadwarez.org

CSS
Quote:
/* default styles */
body { padding: 5px 0 0 0; margin: 0; font: .7em Tahoma, Arial, sans-serif; line-height: 1.7em; background: #fff url(images/bg.gif) repeat-x; color: #454545; }
a { color: #2F637A; background: inherit; }
a:hover { color: #808080; background: inherit; }
p { margin: 0 0 5px 0; }
h1 { font: bold 2.2em Arial, Sans-Serif; padding: 8px 0 0 0; margin: 0; letter-spacing: -1px; }
h2 { margin: 0; padding: 0; font: bold 1.8em Arial, Sans-Serif; letter-spacing: -1px; }
h1 a, h2 a { color: #000; background: inherit; text-decoration: none; }
ul { margin: 0; padding : 0; list-style : none; }
img { border: 0; }

/* layout */
#content { margin: 10px auto; width: 960px; }
#logo { margin: 0 0 10px 0; }
#slogan { font-size: 0.9em; margin: 0 0 10px 2px; padding: 0; color: #808080; background: #fff; }
#top_info { line-height: 27px; float: right; color: #808080; background: #fff; margin: 12px 5px 7px 0; text-align: right; height: 74px; }

/* round blue login button */
#loginbutton a { text-decoration: none; width: 24px; padding: 7px 12px; margin: 0 0 0 8px; height: 28px; background: #fff url(images/lb.gif) no-repeat; color: #000; }
#loginbutton a:hover{ background: #fff url(images/lbhover.gif) no-repeat; color: #000;}

/* main horizontal menu */
#tablist{ padding: 3px 0; margin: 0; float: left; }
#tablist li{ list-style: none; display: inline; margin: 0; }
#tablist li a{
text-decoration: none;
padding: 4px 22px;
margin-right: 2px;
background: #808080 url(images/corner.gif) no-repeat top right;
font-weight: bold;
color: #fff;
}
#tablist li a:hover{
background: #6495AB url(images/corner.gif) no-repeat top right;
color: #fff;
}
#tablist li a.current{
background: #9FC7D8 url(images/corner.gif) no-repeat top right;
color: #2F637A;
padding: 6px 22px;
}
#tablist .key { text-decoration: none; }

/* main menu topics */
#topics {
clear: left;
float: left;
width: 640px;
background: #B0D0DC url(images/topicsbg.gif) repeat-x left bottom;
padding: 8px 5px;
margin: 0 0 5px 0;
color: #fff;
height: 59px;
}
#topics li a { background-image: url(images/bullet.gif); background-repeat: no-repeat; background-position: center left; padding: 0 0 0 12px; }

/* main menu search */
#search {
float: right;
text-align: right;
background: #fff url(images/searchbg.gif) no-repeat;
color: #000;
padding: 32px 20px 12px 20px;
min-height: 32px; /* FF height */
height: 25px; /* IE height */
width: 270px;
}
/* search form styling */
form, form p { margin: 0; padding: 0; line-height: 25px; }

.search { width: 170px; border: 1px solid #357994; background: #fff; color: #478F36; padding: 4px; margin: 0; font-weight: bold; font-size: 1.3em; }
.button { padding: 4px; font: bold 1em Arial, Sans-Serif; }

/* left side */
#left {
float: left;
width: 635px;
margin: 0 0 10px 0;
}
.subheader {
margin: 0 0 10px 0;
padding: 8px;
background: #f4f4f4 url(images/bgshade.gif) repeat-x;
color: #808080;
border-bottom: 1px solid #ccc;
}
.left_articles {
margin: 0px 0 10px 0;
background: #fff url(images/bgshade.gif) repeat-x;
color: #454545;
padding: 15px 15px 5px 10px;
}
.date { font-size: .9em; padding: 0 0 0 12px; background: #fff url(images/news.gif) no-repeat center left; color: #808080; }
.bigimage {
float: left;
clear: left;
border: 1px solid #ccc;
background: #eee;
color: #000;
width: 200px;
height: 150px;
margin: 0 15px 10px 0;
}
.left_box {
background: #f4f4f4;
color: #808080;
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
padding: 15px;
margin: 0 0 15px 0;
}
.thirds {
float: left;
width: 186px;
padding: 0 10px 0 15px;
}

/* right side */
#right {
float: right;
width: 310px;
margin: 0 0 10px 0;
}
.right_articles {
border: 1px solid #ccc;
padding: 8px;
margin: 0 0 10px 0;
background: #eee;
color: #454545;
}
.image { float: left; margin: 0 9px 3px 0; }
.notes {
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
padding: 17px 10px 17px 80px;
margin: 0 0 10px 0;
background: #fff url(images/notes.gif) no-repeat center left;
color: #454545;
}
/* footer */
#footer {
clear: both;
color: #808080;
background: #FFF;
padding: 10px 15px;
border-top: 1px solid #ccc;
}
#footer .right { float: right; }

The page bar should be below the software table, like it is displayed in FireFox. But it shows wrong in Internet Explorer and Opera.

The code looks ok, so i think it must be CSS. Can anyone help

Ie Displays Fine, Ff And Safari Display Incorrectly

Similar Tutorials

My page is displaying correctly in IE 6,7,8(CV), but when I view it in Firefox or Safari, it does not display correctly.

The problem I'm having is the div #main is not stretching to allow room for the content in it.

In IE it stretches fine, but in FF and Safari it doesn't stretch at all.

I've been all over the internet searching but I can't find any similar problems/solutions. I've tried whatever I can think of or find.

Can somebody please help me or point me in the right direction?

Page:
<div id="main"> //problem div
<div id="sideBar">
<div id="header">
 
</div>
</div>
<div id="mainContent"> //contains content that I need to be stretched to the height
</div>
</div>

CSS Code:
html { margin: 0; padding: 0; border: 0; }

body { background-image: url(img/bg.png); background-repeat: repeat-x; background-color: #008A32; margin: 0; padding: 10px; border: 0; height: 100%; min-height: 100%; }

#main { font-family: Arial, Helvetica, sans-serif; padding: 20px; position: relative; border: solid 1px #0C0; width: 760px; margin: 1px auto; background-color: #FFF; }

#sideBar { width: 194px; float: left; clear: left; height: auto; min-height: 100%; }

#header { width: 194px; height: 344px; clear: both; float: none; background-image: url(img/Logo01.png); }

#mainContent { width: 546px; float: right; clear: right; height: auto; min-height: 100%; }

Thanks in advance
-Mike

Ie7 Displays Images Wrong

Similar Tutorials

I designed a site,caringfriendsinc.com . Everything displays fine in Firefox, but in IE7 the images in the center of the services page are spaced apart just a little bit. It is noticeable around the edges. I can't seem to figure out how to fix it.

Thanks in advance.

Page Displays Erratically In Firefox

Similar Tutorials

I've spent hours trying to figure out what is wrong with my page. It loads fine in IE. When I load it in Firefox, the nav menu on the left displays at the bottom of the page (as if my content section were too wide). If I hit refresh enough times, it will appear properly... hit refresh some more and it goes back to the incorrect layout. Additionally, if try to Edit CSS (Ctrl+Shift+E) the page snaps into the correct format.

http://snipurl.com/19l6w

I've tried everything I can think of to solve this. Any input here would be appreciated.

Displays Great In Firefox But Not In Ie! Grrr! Help Please

Similar Tutorials

I'm beating my head against the wall on this one and could use some expert help. In full disclosure, I am using a css template site I found on a open source template site. The site renders fine in Firefox and Opera, but is problematic with some pages.

Here is one of the pages I am having trouble with in IE:

http://worldwidemediaproject.com/tvrating.php

You'll notice that in IE it appears like there are a bunch of <br>'s after the TV Stations header. This does not appear in either Firefox or Opera.

The strange thing is this one appears fine in IE:

http://worldwidemediaproject.com/tvrating.php?id=71&language=all&genre=all

but this one doesn't:

http://worldwidemediaproject.com/tvrating.php?id=216&language=all&genre=all

The only real difference is that the table size is larger in the pages that have display problems.

Is there some kind of IE hack that I need to apply?

Many thanks....

The Website Displays Randomly Incorrectly With Firefox

Similar Tutorials

I did a site recently and Im having trouble finding what is causing this weird error.

If you go to this gallery using firefox:

http://www.mmimageart.com/fineart4.html

you will notice that the thumbnails under "saguaro" will display wrongly. IF you dont see the problem just keep refreshing the browser until you get the problem. you will get it.

there are problems also in:
http://www.mmimageart.com/fineart3.html (everglades)
http://www.mmimageart.com/fineart.html (Atlantic Coast)

What coding error in css can cause firefox to display the website wrong randomly ?

Is this a well known error ? if not, then Ill post the code. Thanks in advanced!!!

Why I Cant See My Site In Chrome&safari???

Similar Tutorials

heres my currently working on site it look great on IE, Firefox and opera but i just see a blank page in Chrome and Safari!!

web site:
macmillanpc.host56.com/Dreamy_Elegance_template/

please help me! :/
check source, the css is in there (not linked)
these is really f... me off.

Sorry if its too vague, let me know if you need more details.

Site With Huge Gaps Under Safari

Similar Tutorials

hello all,
i'am at complete loss for now. my site promodivin uses mootools to enrich it by adding slides and accordeon effects.
Works great with IE and FF but using Safari it displays huge blank sections. My text's gone. It's even clearer on the 'Services' tab where I can see some narrow sections. To make the effects work, you may click on the headers and it should collapse the appropriate section.
I believe the issue stems from the ids used only for the purpose of mootools.
Here's an html exerpt from the frontpage:
Code:

<div id="h_toggle1"><a href="#">
<h1>Communication</h1>
</a></div>
<div id="horizontal_slide1">
<ul class="bullet_point">

...

and the titre_toggle.css describing the elements used.
Code:

h3.section {
margin-top: 1em;
}

#vertical_slide1, #horizontal_slide1,
#vertical_slide2, #horizontal_slide2,
#vertical_slide3, #horizontal_slide3 {
background: #E6EAEF;
margin-top: 0;
padding: 10px 10px 0 10px;
border: 1px solid #D5D8DD;
}

#h_toggle1, #h_toggle3, #h_toggle2 {
}

div.marginbottom {
/* Since the Fx.Slide element resets margins, we set a margin on the above element */
margin-bottom: 10px;
}

I'll appreciate any insight.

safari 4.0.3 --> KO
IE 6+ --> OK
FF 3.5 --> OK
mootools 1.2.4
joomla 1.5.15

Site Not Displaying Properly In Safari Or Google Chrome

Similar Tutorials

I have a website (www.fullforcecreative.com) that displays properly on I.E. and Firefox. I just recently pulled it up in Google Chrome, and it appears no style sheets are being imported. I then thought "that is strange, but Safari is based on the same thing (kinda), so I'll load it in Safari." Same issue. No style sheets.

Has anyone seen anything like this before?

I link to one style sheet in the header.

Code:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css; charset=utf-8" media="screen" />

This style sheet linked to from that line:

Code:

@charset "UTF-8";
@import url(yaml/core/base.css);
@import url(css/navigation/nav_shinybuttons.css);
@import url(css/screen/basemod.css);
@import url(css/screen/content.css); 
@import url(yaml/print/print_003.css);

All the other stylesheets open with the
Code:

@charset "UTF-8"; 
@media all {
insert css here
}

The site is using YAML (http://www.yaml.de/en/) as a framework for the CSS. The only issue I could find relativly close to it was this: http://www.davidroessli.com/logs/2007/03/safari_utf8_rendering_glitch_f/

I made the change listed there (because the CSS stylesheets are in UTF-8), but it made no difference.

Does anyone have any ideas? This is driving me up the wall. It does display properly in I.E. and firefox.

Thanks,
seth

Either Safari Or Firefox? I Want Both!

Similar Tutorials

I am making a Mac help site for a friend, and want the site to be compatible with as many browsers as possible. I am aware that IE doesn't follow the rules with css, which is why I have made a plain version of the site as well. Basically, the site is composed of two tables, the top one is the banner with buttons, and the bottom one has text. The background is fixed, as is the top table (so the only thing that moves when you scroll is the table with the text). My problem is that the top table can be centered either for Safari, or Firefox, but I have not found a way to center both of them.

EDIT: The site is at www.ihelpnyc.com/dave/index1.html . It will probably change, but it's a good reference to see what I'm doing

When I do this, it is centered on Firefox:
Code:

<style type="text/css">
<!--
body {
	background-image: url(background.gif);
	background-repeat: repeat-x;
	background-attachment:fixed;
	background-color: #000000;
}
#toptable {
	position: fixed;
	top: 0;
	height: 140px;
	bottom: auto;
	z-index: 2;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

#encapsule {
	margin-left: auto;
	margin-right: auto;
	}

#centered
{
text-align: center;
}

#centered table
{
margin: 0 auto;
text-align: auto;
}


#bottable {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	top: 140px;
	z-index:1;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="centered" id="encapsule">
<table width="720" border="0" cellpadding="0" cellspacing="0" id="encase">
  <tr>
    <td><table width="200" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#2C2C2C" id="toptable">
      <tr>
        <td><table width="720" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
            <tr>
              <td colspan="5"><img src="images/index_01.gif" width="360" height="109" alt=""></td>
              <td colspan="2"><img src="images/index_02.gif" width="360" height="109" alt=""></td>
            </tr>
            <tr>
              <td><img src="images/index_03.gif" width="47" height="31" alt=""></td>
              <td><a href="index1.html"><img src="images/index_04.gif" alt="" width="102" height="31" border="0"></a></td>
              <td><a href="about.html"><img src="images/index_05.gif" alt="" width="92" height="31" border="0"></a></td>
              <td><a href="contact.html"><img src="images/index_06.gif" alt="" width="104" height="31" border="0"></a></td>
              <td colspan="2"><a href="help.html"><img src="images/index_07.gif" alt="" width="145" height="31" border="0"></a></td>
              <td><img src="images/index_08.gif" width="230" height="31" alt=""></td>
            </tr>
            <tr>
              <td><img src="images/spacer.gif" width="47" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="102" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="92" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="104" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="15" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="130" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="230" height="1" alt=""></td>
            </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
</table> </div>

When I do the following, it centers it on Safari:
Code:

<style type="text/css">
<!--
body {
	background-image: url(background.gif);
	background-repeat: repeat-x;
	background-attachment:fixed;
	background-color: #000000;
}
#toptable {
	position: fixed;
	top: 0;
	height: 140px;
	bottom: auto;
	z-index: 2;
}
#encase {
	position: relative;
	margin-left: auto;
	margin-right: auto;
}
#bottable {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	top: 140px;
	z-index:1;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="720" border="0" cellpadding="0" cellspacing="0" id="encase">
  <tr>
    <td><table width="200" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#2C2C2C" id="toptable">
      <tr>
        <td><table width="720" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
            <tr>
              <td colspan="5"><img src="images/index_01.gif" width="360" height="109" alt=""></td>
              <td colspan="2"><img src="images/index_02.gif" width="360" height="109" alt=""></td>
            </tr>
            <tr>
              <td><img src="images/index_03.gif" width="47" height="31" alt=""></td>
              <td><a href="index1.html"><img src="images/index_04.gif" alt="" width="102" height="31" border="0"></a></td>
              <td><a href="about.html"><img src="images/index_05.gif" alt="" width="92" height="31" border="0"></a></td>
              <td><a href="contact.html"><img src="images/index_06.gif" alt="" width="104" height="31" border="0"></a></td>
              <td colspan="2"><a href="help.html"><img src="images/index_07.gif" alt="" width="145" height="31" border="0"></a></td>
              <td><img src="images/index_08.gif" width="230" height="31" alt=""></td>
            </tr>
            <tr>
              <td><img src="images/spacer.gif" width="47" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="102" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="92" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="104" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="15" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="130" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="230" height="1" alt=""></td>
            </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
</table>

Any help is appreciated, as I am totally stuck. I have been using http://theodorakis.net/tablecentertest.html to see which works on both Firefox and Safari, but none of them work for both. Thanks!

EDIT: The site is at www.ihelpnyc.com/dave/index1.html . It will probably change, but it's a good reference to see what I'm doing

Few Things Wrong With My Site:

Similar Tutorials

i wanted to create a new thread because the new problems are not same as the one in my other thread so i thought best to create a new post.

Site url: www.plumstead-mosque.co.uk

Problem1: if you have the developer's extension for Firefox turn on the display>information>block size (useful for reference) and you will see that form starts right near where the UL/lists/menu starts and not after the menu which is strange

Problem2: when i try adding border to the whole form element the border only appears on the label and not the input & submit button
similarly that donate button is also a form but border isnt going around it...

problem3: submenu font appears a bit smaller (in IE)

problem4: when you hover over a menu link, the link turns a diff color and in FF you can go past the text and the cursor will remain in the "link" mode ie a hand but in IE if you hover past the text although the background color will remain the cursor will revert back to normal non-link mode

problem5: if you do the css developer thing again, you will see that for some reason firefox makes items on left side appear to go out of screen ie making it seem as if the width of items is larger then what it seems

Safari, Firefox And Background_color?

Similar Tutorials

Greetings

Well, what can I say. I'm a PC. I've been building these websites and have been validating them and all, and look great in IE 6 & 7. But when I finally get around to downloading the latest version (3.2) of Safari and Firefox, for some reason my background-color doesn't work right.

Here's the site:
http://www.freshrod.com/maryville/maryvillemo.html

Have tried googling it, but no real answers yet. Anyone experience this before?

Div Shifting Right In Firefox And Safari

Similar Tutorials

Hi all, I was wondering if someone could help me out. I have two divs on top of each other: 1 is a menu, 1 is a grid. In IE, the grid is displayed directly below the menu. However, when I view the page in Safari or Firefox, the grid is displayed below and to the right of the menu. See screenshots

I have also included my HTML and CSS below. Thanks for your help!

Code:

/* Submenu */
.submenu{height:32px;background:url(../images/submenu_bg.jpg);border-top:1px solid #ccc; width:105%; }

.submenu a:active,.submenu a:focus{text-decoration:underline;}

.submenu ul{float:left;z-index:19; }

.submenu ul li ul{position:absolute;margin-top:29px;z-index:98;left:-999em;background-color:#f5f5f5;display:block;width:150px;}

.submenu li{float:left;list-style:none;background:url(../images/submenu_divider.gif) no-repeat right top;z-index:20;}

.submenu li a{color:#000000;text-decoration:none;font-size:10px;padding:7px 15px 7px 15px;display:block;font-weight:bold;font-family:Geneva, Arial, Helvetica, sans-serif;}

.submenu li a:hover{background:#f8f8f8 url(../images/submenu_divider.gif) no-repeat right top;}

.submenu li li a{color:#000000;text-decoration:underline;background:#F8F8F8;border-bottom:1px solid #CCC;border-right:0;display:block;width:120px;text-decoration:none;font-weight:normal;background-image:none;}

.submenu li li a:hover{color:#333;background-color:#f3f3f3;display:block;width:120px;border-bottom:1px solid #CCC;border-right:0;background-image:none;}

.submenu .active-menu ul{border-left:1px solid #CCC;border-right:1px solid #CCC;}

.submenu .active-menu{color:#FFF;text-decoration:none;background:#f5f5f5 url(../images/submenu_divider.gif) no-repeat top right;}

.submenu .active-menu ul li a:hover{text-decoration:underline;border-right:0;background:#fff url(../images/submenu-li-li-hover.gif) repeat-x top;color:#535353;}

.grid_maindiv
{
	position: relative; 
	border: 1px solid #cbc7b8; 
	overflow: hidden; 
	width: 105%; 
	font-family: verdana,arial;	
}

.grid_table
{
	background-color: white;
	width: 100%; 
	font-size: 10pt;
}

.grid_table_header
{
	background-image: url('../media/header.png'); 
	height: 27px; 
	color: white; 
	font-weight: bold; 
	font-size: 14pt;	
}

.grid_table_resize_row
{
	background-image: url('../media/resize.gif'); 
	width: 2px; 
	margin: 0px;	
}

.grid_table_header_row
{

	background-color: #EBEADB; 
	font-weight: bold;
	cursor:pointer;
	padding-left: 5px;
	padding-bottom: 0px;
	position: relative; 
	height: 18px; 
	overflow: hidden; 
	font-size: 10px;	
	cursor:pointer;
	border-bottom:2px solid #cbc7b8;
	border-top: 1px solid white;
	border-left: 1px solid white;
	border-right: 1px solid white;
	margin-bottom: 0px;
	background-image: url('../media/column.png'); 

}

.grid_table_header_row_hover
{
	font-weight: bold;
	cursor:pointer;
	padding-left: 5px;
	padding-bottom: 0px;
	position: relative; 
	height: 18px; 
	overflow: hidden; 
	font-size: 10px;	
	cursor:pointer;
	border-top: 1px solid white;
	border-left: 1px solid white;
	border-right: 1px solid white;
	margin-bottom: 0px;
	
	border-bottom:2px solid #f9b119;
	background-color: #FAF9F4;
	background-image:  url('../media/column_on.png'); 

}

.grid_column_resize
{
	cursor: e-resize; 
	width: 2px; 
	background-color: #cbc7b8;
	border-bottom:2px solid #cbc7b8;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

.grid_table_row_uneven
{
	background-color: #EBEADB; 
}

.grid_footer
{
	background-color: #f9f9f9; 
	height: 20px; 
	color: #616161;
}

.grid_table_cell
{
	padding-left: 2px; 
	position: relative; 
	border-bottom: 1px solid lightgray;
	height: 28px;
	overflow: hidden; 
	margin: 0px; 
	font-size: 10px;
}

Code:

        <body onmouseup="SetMouseDown(false);" topmargin="2">

<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0"
CELLPADDING="0">
  <TR>
    <TD WIDTH="50%">
    <FONT SIZE="-1" FACE="Arial"><A HREF="http://www.itsect.com/" CLASS="topnav">Home</A>&nbsp;&nbsp;&nbsp;<B>
<A CLASS="topnav">text</A></B>&nbsp;&nbsp;&nbsp;<A HREF="https://secure.itsect.com/members/?_page=account:account" CLASS="topnav">Account</A>&nbsp;&nbsp;&nbsp;<A
    HREF="http://www.itsect.com/support/" CLASS="topnav">Help</A></FONT></TD> 
    <TD WIDTH="50%">

    <P ALIGN=RIGHT><B><FONT SIZE="-1" FACE="Arial"><a CLASS="topnav">john</a></FONT></B><FONT
     SIZE="-1" FACE="Arial"> | <A HREF="https://secure.itsect.com/members/?_page=account:account" CLASS="topnav">My Account</A> |
    <A HREF="http://www.itsect.com/members/?_page=account:account&_logout=Y" CLASS="topnav">Logout</A></FONT></TD> 
  </TR>
</TABLE>
<HR SIZE=1 COLOR="#000000" WIDTH="100%">
<a href="view.php"><img src="images/ss_logo.gif" border="0" height="39" width="243"></a>
<br>

<div class="submenu">
	<ul>

			<li><a href="view.php">Show All</a>
</li>
			<li><a href="view.php?trash=1">View Trash</a>
</li>
			<li><a href="http://www.itsect.com/engine/filterpop.php" title="SiteSnipe - Create and View Filters" onclick="return GB_show('SiteSnipe - Create and View Filters', this.href,500,600)">Create/View Filters</a>
</li>
			<li><a href="http://www.itsect.com/engine/reportspop.php" title="SiteSnipe - Schedule Reports" onclick="return GB_show('SiteSnipe - Schedule Reports', this.href,500,600)">Schedule Reports</a>
</li>	
			<li><a style="color: #000080; text-decoration: none;">Viewing: All Listings</a></li>	<form action="view.php" method="post">

			<li><a>Quick Search: <input type="text" name="srch" value="" CLASS="frm2"> <input type="image" src="images/go.gif" name="go" border="0" ALIGN="MIDDLE"></a>
</li>	</form>

	</ul>
</div>

                <div class='grid_maindiv' id="grid" width=100%>

GRID

</div>

Css Positioning In Safari, Ie And Firefox

Similar Tutorials

Still learning CSS and trying to position simple text inside a layer on my clients site:

The CSS positioning and font size are all appearing different in Safari (MAC), IE and Firefox.

What am I doing wrong here?

Go to : http://www.fractiousmusic.com

At the bottom left corner I am trying to position the Steady Systems text.

IE - looks fine
Firefox - slightly positioned to the right
Safari - completely out of wack. Covering one of the band member silohouettes and the font size is all wrong.

Please view source and let me know if its a code error.

Thanks!

Daniel

Problems Rendering In Ie...but Not Firefox Or Safari

Similar Tutorials

hello. i'm using a CSS tutorial and DREAMWEAVER to build a website. i find that the site is interpreted the way i would like it in either Firefox or Safari...but not in IE. When links are hovered over while using IE, the page distorts. has anyone experienced this type of problem before? thank you in advance for your time and assistance!

i did post several explanatory screenshots to illustrate the problem.

replace each "@" with a period. mea culpa.

www@wwpea@net/screenshots@htm

Css Works In Ie7, Firefox, Safari, Konqueror, Not In Ie6

Similar Tutorials

I cannot seem to get the CSS drop down menu system to work in IE6 but it works in IE7. I tell the Css to use globalIE.css
Code:

<!--[if IE]>QU
            <link rel="stylesheet" href="<?=$base_url;?>/_src/globalIE.css"      
            type="text/css">       
 <![endif]-->

Here is the menu system:

Code:

menu5platinum[4]='<div id="menu"><ul><li><ul><li>'+
         '<a href="./ChargeOffs.php" title="Creditor Actions">Creditor Actions</a>'+
         '<ul><li><a href="./charge_offs.php" title="Charge Offs">Charge Offs</a></li>'+
         '<li><a href="./collection_accts.php" title="Collections">Collections</a></li>'+
         '<li><a href="./late_payments.php" title="Late Payments">Late Payments</a></li>'+
         '<li><a href="./repossessions.php" title="Repossessions">Repossessions</a></li>'+
         '<li><a href="./Foreclosure.php" title="Foreclosure">Foreclosure</a></li></ul>'+
         '</li></ul></li></ul></div>';

(It rests inside of a javascript function)

and here is the CSS:
Code:

/**************** menu coding *****************/
#menu { width: 100%; background: #555555; border-style: none; font: normal 12px Verdana;}
#menu ul { list-style: none; margin-top: -7px; margin-bottom: 0; margin-left: 0; margin-right: 0; padding: 0; line-height: 18px; }
#menu a, #menu h2 { border-bottom: 1px solid #c0c0c0;   font-family: helvetica, arial, verdana, sans-serif; display: block; }
/*#menu h2 { color: #fff; background: #000; }*/
#menu a { color: #f2f2f2; background: #555555; text-decoration: none;}
#menu a:hover { color: #f2f2f2; background: #8b8b8b; }
#menu li {position: relative;} 
#menu ul ul ul { position: absolute; top: 0; left: 108.5%; width: 100%; border-left: 1px solid #c0c0c0; margin-top: 0; margin-bottom: 0; margin-left: 1px; margin-right: 0;}
div#menu ul ul ul, 
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

Any help with this is greatly appreciated. Thanks.

Css Overflow:auto Safari/old Firefox

Similar Tutorials

I have a div that I have set the overflow property to auto - enabling scroll bars when the content is longer then the fixed size of the div. This doesn't seem to work in Safari, or and older version of Firefox.

I could use overflow: scroll, but then there is a scroll bar when the content doesn't overflow.

Is there any clever fix for this?

Cheers,

whiteatom